6c7eed7580
Fresh history cut from cynarAI/evoo antigravity-handoff/project-timeline (Voice First + project timeline). Brand docs/titles as evOo; keep @rakazo/* packages as tech debt. Excludes node_modules, caches, secrets, voice blobs.
571 lines
13 KiB
CSS
571 lines
13 KiB
CSS
@import "tw-animate-css";
|
|
@import "./shadcn.css";
|
|
@import "@rakazo/ui-tokens/css";
|
|
|
|
@source "./**/*.{ts,tsx}";
|
|
|
|
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-chat-user: var(--chat-user);
|
|
--color-chat-user-foreground: var(--chat-user-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-destructive: var(--destructive);
|
|
--color-destructive-foreground: var(--destructive-foreground);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-ring: var(--ring);
|
|
--color-sidebar: var(--sidebar);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-link: var(--link);
|
|
--color-success: var(--success);
|
|
--color-warning: var(--warning);
|
|
--color-overlay: var(--overlay);
|
|
--color-scrollbar: var(--scrollbar);
|
|
--color-scrollbar-hover: var(--scrollbar-hover);
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
--radius-2xl: calc(var(--radius) + 8px);
|
|
|
|
/* Typography scale */
|
|
--text-ui-caption: var(--font-size-caption);
|
|
--text-ui-caption--line-height: var(--line-height-tight);
|
|
--text-ui-label: var(--font-size-label);
|
|
--text-ui-label--line-height: var(--line-height-tight);
|
|
--text-ui-body-sm: var(--font-size-body-sm);
|
|
--text-ui-body-sm--line-height: var(--line-height-body);
|
|
--text-ui-body: var(--font-size-body);
|
|
--text-ui-body--line-height: var(--line-height-body);
|
|
--text-ui-reading: var(--font-size-reading);
|
|
--text-ui-reading--line-height: var(--line-height-reading);
|
|
--text-ui-title-sm: var(--font-size-title-sm);
|
|
--text-ui-title-sm--line-height: var(--line-height-tight);
|
|
--text-ui-title: var(--font-size-title);
|
|
--text-ui-title--line-height: var(--line-height-tight);
|
|
|
|
/* Control + icon sizes (also drive h-*, size-*, gap-*, p-* utilities) */
|
|
--spacing-control-xs: var(--control-height-xs);
|
|
--spacing-control-sm: var(--control-height-sm);
|
|
--spacing-control-md: var(--control-height-md);
|
|
--spacing-control-lg: var(--control-height-lg);
|
|
--spacing-icon-sm: var(--icon-sm);
|
|
--spacing-icon-md: var(--icon-md);
|
|
--spacing-icon-lg: var(--icon-lg);
|
|
--spacing-rk-shell: var(--spacing-shell);
|
|
--spacing-rk-sidebar-x: var(--spacing-sidebar-row-x);
|
|
--spacing-rk-sidebar-y: var(--spacing-sidebar-row-y);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
}
|
|
|
|
@keyframes rakazo-avatar-spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.rakazo-bot-avatar-ring {
|
|
animation: rakazo-avatar-spin 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
|
opacity: 0;
|
|
transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.rakazo-bot-avatar {
|
|
transition: box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.rakazo-bot-avatar[data-working="true"] .rakazo-bot-avatar-ring {
|
|
opacity: 1;
|
|
}
|
|
|
|
.rakazo-bot-avatar-eyes {
|
|
animation: var(--rakazo-eye-animation-name) var(--rakazo-eye-animation-duration)
|
|
var(--rakazo-eye-animation-easing) var(--rakazo-eye-animation-delay) infinite;
|
|
transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.rakazo-bot-avatar-eyes-working {
|
|
opacity: 0;
|
|
}
|
|
|
|
.rakazo-bot-avatar[data-working="true"] .rakazo-bot-avatar-eyes-idle {
|
|
opacity: 0;
|
|
}
|
|
|
|
.rakazo-bot-avatar[data-working="true"] .rakazo-bot-avatar-eyes-working {
|
|
opacity: 1;
|
|
}
|
|
|
|
.rakazo-organic-avatar-body {
|
|
transform-origin: center;
|
|
transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.rakazo-organic-avatar-body-idle {
|
|
animation: rakazo-organic-idle 5.6s ease-in-out infinite;
|
|
}
|
|
|
|
.rakazo-organic-avatar-body-working {
|
|
opacity: 0;
|
|
}
|
|
|
|
.rakazo-organic-avatar[data-working="true"] .rakazo-organic-avatar-body-idle {
|
|
opacity: 0;
|
|
}
|
|
|
|
.rakazo-organic-avatar[data-working="true"] .rakazo-organic-avatar-body-working {
|
|
opacity: 1;
|
|
}
|
|
|
|
.rakazo-organic-avatar-eyes {
|
|
transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.rakazo-organic-avatar-eyes-working {
|
|
opacity: 0;
|
|
}
|
|
|
|
.rakazo-organic-avatar[data-working="true"] .rakazo-organic-avatar-eyes-idle {
|
|
opacity: 0;
|
|
}
|
|
|
|
.rakazo-organic-avatar[data-working="true"] .rakazo-organic-avatar-eyes-working {
|
|
opacity: 1;
|
|
}
|
|
|
|
.rakazo-organic-avatar[data-eye-pattern="0"] .rakazo-organic-avatar-eyes-idle {
|
|
animation: rakazo-eyes-idle-0 5.8s ease-in-out infinite;
|
|
}
|
|
|
|
.rakazo-organic-avatar[data-eye-pattern="1"] .rakazo-organic-avatar-eyes-idle {
|
|
animation: rakazo-eyes-idle-1 6.4s ease-in-out -1.7s infinite;
|
|
}
|
|
|
|
.rakazo-organic-avatar[data-eye-pattern="2"] .rakazo-organic-avatar-eyes-idle {
|
|
animation: rakazo-eyes-idle-2 5.2s ease-in-out -3.1s infinite;
|
|
}
|
|
|
|
.rakazo-organic-avatar[data-eye-pattern="3"] .rakazo-organic-avatar-eyes-idle {
|
|
animation: rakazo-eyes-idle-3 6.8s ease-in-out -2.3s infinite;
|
|
}
|
|
|
|
.rakazo-organic-avatar[data-eye-pattern="0"] .rakazo-organic-avatar-eyes-working {
|
|
animation: rakazo-organic-eyes-loop-0 6.6s ease-in-out infinite;
|
|
}
|
|
|
|
.rakazo-organic-avatar[data-eye-pattern="1"] .rakazo-organic-avatar-eyes-working {
|
|
animation: rakazo-organic-eyes-loop-1 7.2s ease-in-out -1.4s infinite;
|
|
}
|
|
|
|
.rakazo-organic-avatar[data-eye-pattern="2"] .rakazo-organic-avatar-eyes-working {
|
|
animation: rakazo-organic-eyes-loop-2 6.1s ease-in-out -3.2s infinite;
|
|
}
|
|
|
|
.rakazo-organic-avatar[data-eye-pattern="3"] .rakazo-organic-avatar-eyes-working {
|
|
animation: rakazo-organic-eyes-loop-3 7.8s ease-in-out -2.1s infinite;
|
|
}
|
|
|
|
/* Durations mirror @rakazo/core WORKING_AVATAR_DURATIONS_MS (avatar-motion). */
|
|
.rakazo-organic-avatar[data-shape-family="0"] .rakazo-organic-avatar-body-working {
|
|
animation: rakazo-organic-float 1.8s ease-in-out infinite;
|
|
}
|
|
|
|
.rakazo-organic-avatar[data-shape-family="1"] .rakazo-organic-avatar-body-working {
|
|
animation: rakazo-organic-stretch 1.35s ease-in-out infinite;
|
|
}
|
|
|
|
.rakazo-organic-avatar[data-shape-family="2"] .rakazo-organic-avatar-body-working,
|
|
.rakazo-organic-avatar[data-shape-family="8"] .rakazo-organic-avatar-body-working {
|
|
animation: rakazo-organic-sway 1.6s ease-in-out infinite;
|
|
}
|
|
|
|
.rakazo-organic-avatar[data-shape-family="3"] .rakazo-organic-avatar-body-working,
|
|
.rakazo-organic-avatar[data-shape-family="4"] .rakazo-organic-avatar-body-working {
|
|
animation: rakazo-organic-turn 2.4s ease-in-out infinite;
|
|
}
|
|
|
|
.rakazo-organic-avatar[data-shape-family="5"] .rakazo-organic-avatar-body-working,
|
|
.rakazo-organic-avatar[data-shape-family="9"] .rakazo-organic-avatar-body-working {
|
|
animation: rakazo-organic-squash 1.35s ease-in-out infinite;
|
|
}
|
|
|
|
.rakazo-organic-avatar[data-shape-family="6"] .rakazo-organic-avatar-body-working {
|
|
animation: rakazo-organic-pulse 1.1s ease-in-out infinite;
|
|
}
|
|
|
|
.rakazo-organic-avatar[data-shape-family="7"] .rakazo-organic-avatar-body-working {
|
|
transform-origin: center 20%;
|
|
animation: rakazo-organic-ring 1.35s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes rakazo-organic-float {
|
|
0%,
|
|
100% {
|
|
transform: translateY(2px) scaleX(1.02);
|
|
}
|
|
50% {
|
|
transform: translateY(-3px) scaleX(0.98);
|
|
}
|
|
}
|
|
|
|
@keyframes rakazo-organic-idle {
|
|
0%,
|
|
100% {
|
|
transform: translateY(1.2px) scale(1.012, 0.988);
|
|
}
|
|
50% {
|
|
transform: translateY(-1.4px) scale(0.988, 1.012);
|
|
}
|
|
}
|
|
|
|
@keyframes rakazo-organic-stretch {
|
|
0%,
|
|
100% {
|
|
transform: translateY(2px) scale(1.04, 0.96);
|
|
}
|
|
50% {
|
|
transform: translateY(-3px) scale(0.96, 1.05);
|
|
}
|
|
}
|
|
|
|
@keyframes rakazo-organic-sway {
|
|
0%,
|
|
100% {
|
|
transform: rotate(-3deg) translateX(-1px);
|
|
}
|
|
50% {
|
|
transform: rotate(3deg) translateX(1px);
|
|
}
|
|
}
|
|
|
|
@keyframes rakazo-organic-turn {
|
|
0%,
|
|
100% {
|
|
transform: rotate(-4deg) scale(0.98);
|
|
}
|
|
50% {
|
|
transform: rotate(4deg) scale(1.04);
|
|
}
|
|
}
|
|
|
|
@keyframes rakazo-organic-squash {
|
|
0%,
|
|
100% {
|
|
transform: scale(1.04, 0.96);
|
|
}
|
|
50% {
|
|
transform: scale(0.96, 1.04);
|
|
}
|
|
}
|
|
|
|
@keyframes rakazo-organic-pulse {
|
|
0%,
|
|
100% {
|
|
transform: scale(0.96);
|
|
}
|
|
45% {
|
|
transform: scale(1.06);
|
|
}
|
|
}
|
|
|
|
@keyframes rakazo-organic-ring {
|
|
0%,
|
|
100% {
|
|
transform: rotate(-4deg);
|
|
}
|
|
35% {
|
|
transform: rotate(5deg);
|
|
}
|
|
65% {
|
|
transform: rotate(-3deg);
|
|
}
|
|
}
|
|
|
|
@keyframes rakazo-organic-eyes-loop-0 {
|
|
0%,
|
|
100% {
|
|
transform: translate(-9%, 1%) scaleY(0.94);
|
|
}
|
|
18% {
|
|
transform: translate(9%, -2%) scaleY(1.04);
|
|
}
|
|
34% {
|
|
transform: translate(0, -8%) scale(1.08);
|
|
}
|
|
48% {
|
|
transform: scale(1.12, 0.82);
|
|
}
|
|
51% {
|
|
transform: scale(1.05, 0.08);
|
|
}
|
|
54% {
|
|
transform: scale(1.12, 0.9);
|
|
}
|
|
72% {
|
|
transform: translate(-5%, 7%) scaleY(0.9);
|
|
}
|
|
86% {
|
|
transform: translate(7%, 3%);
|
|
}
|
|
}
|
|
|
|
@keyframes rakazo-organic-eyes-loop-1 {
|
|
0%,
|
|
100% {
|
|
transform: translate(0, -8%) scale(1.06);
|
|
}
|
|
16% {
|
|
transform: translate(8%, 2%);
|
|
}
|
|
31% {
|
|
transform: translate(0, 8%) scaleY(0.9);
|
|
}
|
|
46% {
|
|
transform: translate(-8%, 2%);
|
|
}
|
|
61% {
|
|
transform: scale(0.88, 1.1);
|
|
}
|
|
76% {
|
|
transform: translateY(-7%) scaleY(1.08);
|
|
}
|
|
88% {
|
|
transform: translateY(6%) scale(1.08, 0.86);
|
|
}
|
|
}
|
|
|
|
@keyframes rakazo-organic-eyes-loop-2 {
|
|
0%,
|
|
100% {
|
|
transform: scale(0.9, 1.08);
|
|
}
|
|
20% {
|
|
transform: scale(1.14, 0.84);
|
|
}
|
|
24% {
|
|
transform: scale(1.08, 0.08);
|
|
}
|
|
28% {
|
|
transform: scale(1.02);
|
|
}
|
|
45% {
|
|
transform: translate(-9%, -3%) scaleY(0.94);
|
|
}
|
|
62% {
|
|
transform: translate(9%, 2%) scaleY(1.05);
|
|
}
|
|
80% {
|
|
transform: translate(0, -8%) scale(1.06);
|
|
}
|
|
}
|
|
|
|
@keyframes rakazo-organic-eyes-loop-3 {
|
|
0%,
|
|
100% {
|
|
transform: translateY(7%) scaleY(0.9);
|
|
}
|
|
14% {
|
|
transform: translateY(-9%) scaleY(1.08);
|
|
}
|
|
30% {
|
|
transform: translate(8%, -2%);
|
|
}
|
|
47% {
|
|
transform: translate(-8%, 3%) scaleY(0.94);
|
|
}
|
|
63% {
|
|
transform: scale(1.12, 0.82);
|
|
}
|
|
78% {
|
|
transform: translate(0, -7%) scale(0.9, 1.08);
|
|
}
|
|
91% {
|
|
transform: translate(0, 5%) scale(1.06, 0.9);
|
|
}
|
|
}
|
|
|
|
@keyframes rakazo-eyes-idle-0 {
|
|
0%,
|
|
32%,
|
|
100% {
|
|
transform: translate(0, 0) scaleY(1);
|
|
}
|
|
35% {
|
|
transform: translate(0, 0) scaleY(0.08);
|
|
}
|
|
38% {
|
|
transform: translate(0, 0) scaleY(1);
|
|
}
|
|
48%,
|
|
62% {
|
|
transform: translate(3px, -0.5px) scaleY(1);
|
|
}
|
|
70%,
|
|
84% {
|
|
transform: translate(-2.5px, 0.5px) scaleY(1);
|
|
}
|
|
89% {
|
|
transform: translate(0, 0) scaleY(0.12);
|
|
}
|
|
91% {
|
|
transform: translate(0, 0) scaleY(1);
|
|
}
|
|
}
|
|
|
|
@keyframes rakazo-eyes-idle-1 {
|
|
0%,
|
|
25%,
|
|
100% {
|
|
transform: translate(0, 0) scaleY(1);
|
|
}
|
|
32%,
|
|
48% {
|
|
transform: translate(-3px, -1px) scaleY(1);
|
|
}
|
|
54% {
|
|
transform: translate(0, 0) scaleY(0.08);
|
|
}
|
|
56% {
|
|
transform: translate(0, 0) scaleY(1);
|
|
}
|
|
59% {
|
|
transform: translate(0, 0) scaleY(0.08);
|
|
}
|
|
61% {
|
|
transform: translate(0, 0) scaleY(1);
|
|
}
|
|
68%,
|
|
82% {
|
|
transform: translate(2.5px, 0.5px) scaleY(1);
|
|
}
|
|
}
|
|
|
|
@keyframes rakazo-eyes-idle-2 {
|
|
0%,
|
|
28%,
|
|
100% {
|
|
transform: translate(0, 0) scaleY(1);
|
|
}
|
|
36%,
|
|
52% {
|
|
transform: translate(0.5px, -1.8px) scaleY(1.05);
|
|
}
|
|
58% {
|
|
transform: translate(0, 0) scaleY(0.08);
|
|
}
|
|
60% {
|
|
transform: translate(0, 0) scaleY(1);
|
|
}
|
|
68%,
|
|
85% {
|
|
transform: translate(3px, 0) scaleY(1);
|
|
}
|
|
92% {
|
|
transform: translate(0, 0) scaleY(0.1);
|
|
}
|
|
94% {
|
|
transform: translate(0, 0) scaleY(1);
|
|
}
|
|
}
|
|
|
|
@keyframes rakazo-eyes-idle-3 {
|
|
0%,
|
|
24%,
|
|
100% {
|
|
transform: translate(0, 0) scaleY(1);
|
|
}
|
|
30%,
|
|
46% {
|
|
transform: translate(-2.5px, 1.2px) scaleY(0.95);
|
|
}
|
|
52% {
|
|
transform: translate(0, 0) scaleY(0.08);
|
|
}
|
|
54% {
|
|
transform: translate(0, 0) scaleY(1);
|
|
}
|
|
62%,
|
|
78% {
|
|
transform: translate(2.8px, -1px) scaleY(1);
|
|
}
|
|
86% {
|
|
transform: translate(0, 0) scaleY(0.08);
|
|
}
|
|
88% {
|
|
transform: translate(0, 0) scaleY(1);
|
|
}
|
|
}
|
|
|
|
@keyframes rakazo-eyes-working {
|
|
0% {
|
|
transform: translate(-4px, 0) scale(0.92, 0.95);
|
|
}
|
|
25% {
|
|
transform: translate(0, -2px) scale(1.08, 1.08);
|
|
}
|
|
50% {
|
|
transform: translate(4px, 0) scale(0.92, 0.95);
|
|
}
|
|
75% {
|
|
transform: translate(0, 2px) scale(1, 0.9);
|
|
}
|
|
100% {
|
|
transform: translate(-4px, 0) scale(0.92, 0.95);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.rakazo-bot-avatar-ring,
|
|
.rakazo-bot-avatar-eyes {
|
|
animation: none;
|
|
transition: none;
|
|
}
|
|
|
|
.rakazo-bot-avatar {
|
|
transition: none;
|
|
}
|
|
|
|
.rakazo-bot-avatar-visor {
|
|
transition: none;
|
|
}
|
|
|
|
.rakazo-organic-avatar[data-shape-family] .rakazo-organic-avatar-body {
|
|
animation: none;
|
|
d: var(--rakazo-organic-path);
|
|
transition: none;
|
|
}
|
|
|
|
.rakazo-organic-avatar[data-eye-pattern] .rakazo-organic-avatar-eyes {
|
|
animation: none;
|
|
transition: none;
|
|
}
|
|
}
|