feat: bottom-left help guide widget

packages/shared/src/components/help/HelpWidget.module.css

@@ -0,0 +1,186 @@
+/* ── Card enter / exit ───────────────────────── */
+@keyframes helpCardSlideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-8px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+}
+
+@keyframes helpCardSlideOut {
+  from {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-6px) scale(0.97);
+  }
+}
+
+.cardEnter {
+  animation: helpCardSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.cardExit {
+  animation: helpCardSlideOut 0.2s ease-in both;
+  pointer-events: none;
+}
+
+/* ── Popover enter ──────────────────────────── */
+@keyframes helpPopoverSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.popoverEnter {
+  animation: helpPopoverSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+/* ── Accent gradient bar ────────────────────── */
+.accentBar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(
+    90deg,
+    var(--theme-accent-cabbage-default),
+    var(--theme-accent-blueCheese-default),
+    var(--theme-accent-onion-default)
+  );
+  background-size: 200% 100%;
+  animation: helpGradientShift 4s ease-in-out infinite;
+}
+
+@keyframes helpGradientShift {
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+/* ── Card hover ─────────────────────────────── */
+.card {
+  transition: box-shadow 0.3s ease, border-color 0.3s ease;
+}
+
+.card:hover {
+  box-shadow:
+    0 8px 30px rgba(0, 0, 0, 0.12),
+    0 2px 8px rgba(0, 0, 0, 0.08);
+  border-color: var(--theme-border-subtlest-secondary);
+}
+
+/* ── Icon soft glow ─────────────────────────── */
+.iconGlow {
+  position: absolute;
+  inset: -4px;
+  border-radius: 14px;
+  background: var(--theme-accent-cabbage-default);
+  opacity: 0.08;
+  filter: blur(8px);
+}
+
+/* ── Inline sidebar card ────────────────────── */
+.inlineCard {
+  transition:
+    border-color 0.2s ease,
+    background-color 0.2s ease;
+}
+
+.inlineAccent {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(
+    90deg,
+    var(--theme-accent-cabbage-default),
+    var(--theme-accent-blueCheese-default)
+  );
+  background-size: 200% 100%;
+  animation: helpGradientShift 4s ease-in-out infinite;
+  border-radius: 12px 12px 0 0;
+}
+
+/* ── Notification dot pulse ─────────────────── */
+@keyframes helpDotPulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 var(--theme-accent-bacon-default);
+  }
+  50% {
+    box-shadow: 0 0 0 4px transparent;
+  }
+}
+
+.notificationDot {
+  animation: helpDotPulse 2s ease-in-out infinite;
+}
+
+/* ── Popover highlight gradient (subtle) ────── */
+.popoverHighlight {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--theme-accent-cabbage-default) 4%, transparent),
+    transparent
+  );
+  pointer-events: none;
+}
+
+/* ── CTA button shimmer ─────────────────────── */
+@keyframes helpCtaShimmer {
+  0% {
+    background-position: -200% center;
+  }
+  100% {
+    background-position: 200% center;
+  }
+}
+
+.ctaButton {
+  position: relative;
+  overflow: hidden;
+}
+
+.ctaButton::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 30%,
+    rgba(255, 255, 255, 0.12) 50%,
+    transparent 70%
+  );
+  background-size: 200% 100%;
+  animation: helpCtaShimmer 3s ease-in-out infinite;
+  pointer-events: none;
+}
+
+/* ── Tag subtle animation ───────────────────── */
+.tag {
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
+}