@akropolys/kiku 1.7.4 → 1.7.5

package/dist/styles.css

@@ -603,61 +603,40 @@
     flex: 1;
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: flex-start;
     justify-content: center;
-    gap: 20px;
-    padding: 60px 32px;
-    text-align: center;
-    background:
-      radial-gradient(
-        circle at center,
-        rgba(var(--hsk-primary-rgb, 255, 106, 51), 0.08) 0%,
-        transparent 60%);
+    gap: 14px;
+    padding: 40px clamp(24px, 6%, 56px) 48px;
+    text-align: left;
   }
-  .hsk-cb-empty-icon {
-    font-size: 48px;
-    color: var(--hsk-primary);
-    display: flex;
-    align-items: center;
-    animation: hsk-sparkle-spin 4s linear infinite;
+  .hsk-cb-hello {
+    margin: 0;
+    font-size: clamp(30px, 6.5vw, 48px);
+    font-weight: 400;
+    line-height: 1.04;
+    letter-spacing: -0.025em;
+    color: var(--hsk-chat-text, #111);
   }
-  .hsk-cb-empty-logo {
-    width: 52px;
-    height: 52px;
+  .hsk-cb-hello b {
+    font-weight: 600;
     color: var(--hsk-primary, #ff6a33);
   }
-  .hsk-cb-empty-logo .hsk-brand-mark {
-    width: 100%;
-    height: 100%;
-    fill: currentColor;
-  }
-  .hsk-cb-empty-title {
-    font-size: 26px;
-    font-weight: 500;
-    color: var(--hsk-chat-text, #111);
-    letter-spacing: -.02em;
-  }
-  .hsk-cb-empty-sub {
-    font-size: 14px;
+  .hsk-cb-hello-lead {
+    margin: 0;
+    font-size: 16px;
+    line-height: 1.6;
     color: var(--hsk-chat-muted, #5f6368);
-    line-height: 1.7;
-    max-width: 380px;
+    max-width: 34ch;
   }
-  .hsk-cb-onboard-title {
-    font-size: 34px;
-    font-weight: 600;
-    letter-spacing: -.03em;
-  }
-  .hsk-cb-onboard-ask {
+  .hsk-cb-hello-ask {
+    margin: 6px 0 0;
     font-size: 17px;
     font-weight: 500;
     color: var(--hsk-chat-text, #111);
-    margin-top: 4px;
   }
-  .hsk-cb-onboard-skip {
-    margin-top: 2px;
-    padding: 4px 10px;
-    font-size: 12.5px;
+  .hsk-cb-hello-skip {
+    padding: 0;
+    font-size: 13px;
     color: var(--hsk-chat-muted, #888);
     background: transparent;
     border: none;
@@ -665,14 +644,87 @@
     text-decoration: underline;
     text-underline-offset: 3px;
   }
-  .hsk-cb-onboard-skip:hover {
+  .hsk-cb-hello-skip:hover {
     color: var(--hsk-chat-text, #111);
   }
+  @keyframes hsk-hello-rise {
+    from {
+      opacity: 0;
+      transform: translateY(16px);
+      filter: blur(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+      filter: blur(0);
+    }
+  }
+  .hsk-cb-hello,
+  .hsk-cb-hello-lead,
+  .hsk-cb-hello-ask,
+  .hsk-cb-hello-skip {
+    opacity: 0;
+    animation: hsk-hello-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
+  }
+  .hsk-cb-hello {
+    animation-delay: 0.06s;
+  }
+  .hsk-cb-hello-lead {
+    animation-delay: 0.26s;
+  }
+  .hsk-cb-hello-ask {
+    animation-delay: 0.44s;
+  }
+  .hsk-cb-hello-skip {
+    animation-delay: 0.60s;
+  }
+  .hsk-cb-hello b {
+    background-image:
+      linear-gradient(
+        100deg,
+        currentColor 0%,
+        currentColor 42%,
+        rgba(255, 255, 255, 0.92) 50%,
+        currentColor 58%,
+        currentColor 100%);
+    background-size: 250% 100%;
+    background-repeat: no-repeat;
+    background-position: 130% 0;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: hsk-hello-sheen 4.5s ease-in-out 1s infinite;
+  }
+  @keyframes hsk-hello-sheen {
+    0% {
+      background-position: 130% 0;
+    }
+    55% {
+      background-position: -30% 0;
+    }
+    100% {
+      background-position: -30% 0;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .hsk-cb-hello,
+    .hsk-cb-hello-lead,
+    .hsk-cb-hello-ask,
+    .hsk-cb-hello-skip {
+      animation: none;
+      opacity: 1;
+      transform: none;
+      filter: none;
+    }
+    .hsk-cb-hello b {
+      animation: none;
+    }
+  }
   .hsk-cb-chips {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
-    justify-content: center;
+    justify-content: flex-start;
     margin-top: 4px;
   }
   .hsk-cb-chip {
@@ -1435,10 +1487,13 @@
       border-color: rgba(255, 255, 255, .07);
       color: #888;
     }
-    .hsk-cb-empty-title {
+    .hsk-cb-hello {
+      color: #f0efed;
+    }
+    .hsk-cb-hello-ask {
       color: #f0efed;
     }
-    .hsk-cb-empty-sub {
+    .hsk-cb-hello-lead {
       color: #888;
     }
     .hsk-cb-chip {