@zmzai/theme 0.4.1 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zmzai/theme",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "private": false,
   "type": "module",
   "description": "zmzai 全品牌设计系统 — Radix UI + framer-motion + Tailwind v4 + MiSans",

package/src/components/index.ts

@@ -1,4 +1,4 @@
-// @zmzai/theme — Components barrel (53 components)
+// @zmzai/theme — Components barrel (54 components)
 
 // === Basic ===
 export * from "./button";
@@ -76,6 +76,7 @@ export * from "./card-3d";
 
 // === Utilities ===
 export * from "./terminal";
+export * from "./landing";
 export * from "./keyboard";
 export * from "./notch";
 export * from "./sticky-banner";

package/src/components/landing/Landing.tsx

@@ -0,0 +1,392 @@
+"use client";
+
+import {
+  useEffect,
+  useRef,
+  useState,
+  type AnchorHTMLAttributes,
+  type ButtonHTMLAttributes,
+  type ReactNode,
+} from "react";
+
+import { cn } from "../../utils/cn";
+import { Navbar, type NavbarProps } from "../navbar";
+import "./landing.css";
+
+/* ════════════════════════════════════════════════════════════
+   Landing kit — open-design.ai 风格落地页组件。
+   样式见 landing.css（token 由消费端 @theme 提供）。
+════════════════════════════════════════════════════════════ */
+
+/* ── LandingButton — 胶囊按钮（solid/outline），href 时渲染 a ── */
+type LandingButtonBase = {
+  variant?: "solid" | "outline";
+  /** 尾部滑入箭头 → */
+  arrow?: boolean;
+  href?: string;
+  className?: string;
+  children?: ReactNode;
+};
+
+export type LandingButtonProps = LandingButtonBase &
+  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof LandingButtonBase> &
+  Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof LandingButtonBase>;
+
+export function LandingButton({
+  variant = "solid",
+  arrow = false,
+  href,
+  className,
+  children,
+  ...rest
+}: LandingButtonProps) {
+  const cls = cn("landing-btn", variant === "solid" ? "btn-solid" : "btn-outline", className);
+  const inner = (
+    <>
+      {children}
+      {arrow && <span className="arrow-slide">→</span>}
+    </>
+  );
+  if (href) {
+    return (
+      <a href={href} className={cls} {...(rest as AnchorHTMLAttributes<HTMLAnchorElement>)}>
+        {inner}
+      </a>
+    );
+  }
+  return (
+    <button type="button" className={cls} {...(rest as ButtonHTMLAttributes<HTMLButtonElement>)}>
+      {inner}
+    </button>
+  );
+}
+
+/* ── PillTabs — 胶囊标签栏 ── */
+export interface PillTabItem {
+  value: string;
+  label: ReactNode;
+}
+
+export interface PillTabsProps {
+  items: PillTabItem[];
+  value: string;
+  onValueChange: (value: string) => void;
+  className?: string;
+}
+
+export function PillTabs({ items, value, onValueChange, className }: PillTabsProps) {
+  return (
+    <div className={cn("flex flex-wrap gap-2", className)} role="tablist">
+      {items.map((item) => (
+        <button
+          key={item.value}
+          type="button"
+          role="tab"
+          aria-selected={item.value === value}
+          className={cn("tab-pill", item.value === value && "active")}
+          onClick={() => onValueChange(item.value)}
+        >
+          {item.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+/* ── StepList — 工作流步骤条（点击切换） ── */
+export interface StepEntry {
+  num: string;
+  title: string;
+  desc?: string;
+}
+
+export interface StepListProps {
+  steps: StepEntry[];
+  active: number;
+  onSelect: (index: number) => void;
+  className?: string;
+}
+
+export function StepList({ steps, active, onSelect, className }: StepListProps) {
+  return (
+    <div className={cn("flex flex-col", className)}>
+      {steps.map((s, i) => (
+        <div
+          key={s.num}
+          className={cn("step-item", i === active && "active")}
+          onClick={() => onSelect(i)}
+        >
+          <span className="step-num">{s.num}</span>
+          <div>
+            <div className="font-semibold">{s.title}</div>
+            {s.desc && (
+              <div className={cn("text-xs mt-0.5", i === active ? "text-paper/70" : "text-muted")}>
+                {s.desc}
+              </div>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/* ── WorkflowFrame — 视觉卡框架 + 浮动 step badge ── */
+export interface WorkflowFrameProps {
+  /** 左上角浮动徽章文案（如 "step 1"） */
+  badge?: string;
+  className?: string;
+  children?: ReactNode;
+}
+
+export function WorkflowFrame({ badge, className, children }: WorkflowFrameProps) {
+  return (
+    <div className={cn("workflow-frame", className)}>
+      {badge && <span className="step-badge">{badge}</span>}
+      <div className="workflow-frame-inner">{children}</div>
+    </div>
+  );
+}
+
+/* ── Pipeline — 管线 breadcrumb（节点 + 箭头，current 高亮） ── */
+export interface PipelineProps {
+  items: string[];
+  /** 高亮节点下标 */
+  current?: number;
+  className?: string;
+}
+
+export function Pipeline({ items, current, className }: PipelineProps) {
+  return (
+    <div className={cn("pipeline", className)}>
+      {items.map((node, i) => (
+        <span key={node} className="contents">
+          <span className={cn("pipeline-node", i === current && "current")}>{node}</span>
+          {i < items.length - 1 && <span className="pipeline-arrow">→</span>}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+/* ── WhyCard — 特性卡（dark 变体：一暗多亮） ── */
+export interface WhyCardProps {
+  dark?: boolean;
+  icon?: ReactNode;
+  title: ReactNode;
+  className?: string;
+  children?: ReactNode;
+}
+
+export function WhyCard({ dark = false, icon, title, className, children }: WhyCardProps) {
+  return (
+    <div className={cn("why-card", dark && "dark", className)}>
+      {icon && <div className="why-card-icon">{icon}</div>}
+      <div className="text-lg font-bold">{title}</div>
+      {children}
+    </div>
+  );
+}
+
+/* ── Chip — 集成/标签胶囊 ── */
+export interface ChipProps {
+  /** 左侧 accent 圆点 */
+  dot?: boolean;
+  href?: string;
+  className?: string;
+  children?: ReactNode;
+}
+
+export function Chip({ dot = true, href, className, children }: ChipProps) {
+  const cls = cn("chip", className);
+  const inner = (
+    <>
+      {dot && <span className="chip-dot" />}
+      {children}
+    </>
+  );
+  if (href) {
+    return (
+      <a href={href} className={cls}>
+        {inner}
+      </a>
+    );
+  }
+  return <span className={cls}>{inner}</span>;
+}
+
+/* ── CheckList — 绿色勾选清单（boxed 带边框卡） ── */
+export interface CheckListProps {
+  items: ReactNode[];
+  boxed?: boolean;
+  className?: string;
+}
+
+export function CheckList({ items, boxed = true, className }: CheckListProps) {
+  return (
+    <div className={cn(boxed && "border border-line bg-paper p-8", className)}>
+      {items.map((item, i) => (
+        <div key={i} className="check-row">
+          <span className="check-mark">✓</span>
+          <span className="text-ink-2">{item}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/* ── FaqAccordion — FAQ 手风琴（各项独立开合） ── */
+export interface FaqEntry {
+  q: string;
+  a: ReactNode;
+}
+
+export interface FaqAccordionProps {
+  items: FaqEntry[];
+  className?: string;
+}
+
+function FaqItem({ q, a }: FaqEntry) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className={cn("faq-item", open && "open")}>
+      <button className="faq-question" onClick={() => setOpen(!open)}>
+        {q}
+        <span className="faq-icon">+</span>
+      </button>
+      <div className="faq-answer">
+        <p className="text-sm leading-relaxed text-ink-2">{a}</p>
+      </div>
+    </div>
+  );
+}
+
+export function FaqAccordion({ items, className }: FaqAccordionProps) {
+  return (
+    <div className={className}>
+      {items.map((item) => (
+        <FaqItem key={item.q} q={item.q} a={item.a} />
+      ))}
+    </div>
+  );
+}
+
+/* ── StatusBadge — live 脉冲 / building 流光 / planned 虚线 ── */
+export type LandingStatus = "live" | "building" | "planned";
+
+export interface StatusBadgeProps {
+  status: LandingStatus;
+  /** 状态文案（消费端决定措辞，如 已上线 / 建设中） */
+  label: string;
+  className?: string;
+}
+
+export function StatusBadge({ status, label, className }: StatusBadgeProps) {
+  if (status === "live") {
+    return (
+      <span
+        className={cn(
+          "inline-flex items-center gap-1.5 font-mono text-[10px] tracking-widest uppercase text-success",
+          className,
+        )}
+      >
+        <span className="relative flex size-1.5">
+          <span className="status-pulse absolute inset-0 rounded-full bg-success" />
+          <span className="relative size-1.5 rounded-full bg-success" />
+        </span>
+        {label}
+      </span>
+    );
+  }
+  if (status === "building") {
+    return (
+      <span
+        className={cn(
+          "inline-flex items-center gap-1.5 font-mono text-[10px] tracking-widest uppercase text-accent",
+          className,
+        )}
+      >
+        <span className="status-progress w-6 h-1 bg-accent/20 text-accent" />
+        {label}
+      </span>
+    );
+  }
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1.5 font-mono text-[10px] tracking-widest uppercase text-muted",
+        className,
+      )}
+    >
+      <span className="status-dashed size-2.5" />
+      {label}
+    </span>
+  );
+}
+
+/* ── CountUp — 进入视口后从 0 计数 ── */
+export interface CountUpProps {
+  value: number;
+  suffix?: string;
+  duration?: number;
+  className?: string;
+}
+
+export function CountUp({ value, suffix = "", duration = 1200, className }: CountUpProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const [display, setDisplay] = useState(0);
+  const started = useRef(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const obs = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && !started.current) {
+          started.current = true;
+          const start = performance.now();
+          const tick = (now: number) => {
+            const t = Math.min((now - start) / duration, 1);
+            const eased = 1 - Math.pow(1 - t, 3);
+            setDisplay(Math.round(eased * value));
+            if (t < 1) requestAnimationFrame(tick);
+          };
+          requestAnimationFrame(tick);
+        }
+      },
+      { threshold: 0.5 },
+    );
+    obs.observe(el);
+    return () => obs.disconnect();
+  }, [value, duration]);
+
+  return (
+    <span ref={ref} className={cn("count-num", className)}>
+      {display}
+      {suffix}
+    </span>
+  );
+}
+
+/* ── NavShell — 吸顶胶囊导航：顶部全宽，滚动后收缩为浮动胶囊 ── */
+export interface NavShellProps extends NavbarProps {
+  /** 触发浮动形态的滚动距离（px） */
+  floatingThreshold?: number;
+}
+
+export function NavShell({ floatingThreshold = 16, className, ...navbar }: NavShellProps) {
+  const [floating, setFloating] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => setFloating(window.scrollY > floatingThreshold);
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, [floatingThreshold]);
+
+  return (
+    <div className={cn("nav-shell", floating && "floating")}>
+      <Navbar className={cn("site-nav static! border-b-0!", className)} {...navbar} />
+    </div>
+  );
+}

package/src/components/landing/index.ts

@@ -0,0 +1,32 @@
+export {
+  LandingButton,
+  PillTabs,
+  StepList,
+  WorkflowFrame,
+  Pipeline,
+  WhyCard,
+  Chip,
+  CheckList,
+  FaqAccordion,
+  StatusBadge,
+  CountUp,
+  NavShell,
+} from "./Landing";
+export type {
+  LandingButtonProps,
+  PillTabItem,
+  PillTabsProps,
+  StepEntry,
+  StepListProps,
+  WorkflowFrameProps,
+  PipelineProps,
+  WhyCardProps,
+  ChipProps,
+  CheckListProps,
+  FaqEntry,
+  FaqAccordionProps,
+  LandingStatus,
+  StatusBadgeProps,
+  CountUpProps,
+  NavShellProps,
+} from "./Landing";

package/src/components/landing/landing.css

@@ -0,0 +1,432 @@
+/* @zmzai/theme — Landing kit
+   open-design.ai 风格落地页组件样式。
+   依赖消费端 @theme token：--color-paper/ink/ink-2/muted/line/accent/accent-ink/
+   surface/radius-*/ease-out/ease-out-expo/font-mono/font-serif。 */
+
+/* ── Capsule buttons（solid/outline 胶囊按钮） ── */
+.btn-outline {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  border: 1.5px solid var(--color-ink);
+  border-radius: var(--radius-pill);
+  font-size: 0.9375rem;
+  font-weight: 500;
+  color: var(--color-ink);
+  background: transparent;
+  cursor: pointer;
+  transition: all 200ms var(--ease-out);
+}
+
+.btn-outline:hover {
+  background: var(--color-ink);
+  color: var(--color-paper);
+}
+
+.btn-solid {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  border: 1.5px solid var(--color-ink);
+  border-radius: var(--radius-pill);
+  font-size: 0.9375rem;
+  font-weight: 500;
+  color: var(--color-paper);
+  background: var(--color-ink);
+  cursor: pointer;
+  transition: all 200ms var(--ease-out);
+}
+
+.btn-solid:hover {
+  background: oklch(0.30 0.010 30);
+  border-color: oklch(0.30 0.010 30);
+}
+
+/* Arrow slide on hover（按钮/链接内的 → 箭头位移） */
+.arrow-slide {
+  display: inline-block;
+  transition: transform var(--animate-dur-base, 250ms) var(--ease-out-expo);
+}
+
+.group:hover .arrow-slide,
+.landing-btn:hover .arrow-slide {
+  transform: translateX(4px);
+}
+
+/* ── Tab pills（胶囊标签栏） ── */
+.tab-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border-radius: var(--radius-pill);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  border: 1px solid var(--color-line);
+  background: var(--color-paper);
+  color: var(--color-muted);
+  cursor: pointer;
+  transition: all 200ms var(--ease-out);
+}
+
+.tab-pill:hover {
+  border-color: var(--color-muted);
+  color: var(--color-ink);
+}
+
+.tab-pill.active {
+  background: var(--color-ink);
+  color: var(--color-paper);
+  border-color: var(--color-ink);
+}
+
+/* ── Step sidebar（工作流步骤条） ── */
+.step-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius-pill);
+  font-size: 0.875rem;
+  color: var(--color-muted);
+  cursor: pointer;
+  transition: all 200ms var(--ease-out);
+  margin-bottom: 0.25rem;
+}
+
+.step-item:hover {
+  color: var(--color-ink);
+  background: var(--color-surface);
+}
+
+.step-item.active {
+  background: var(--color-ink);
+  color: var(--color-paper);
+}
+
+.step-num {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 600;
+  width: 1.5rem;
+  text-align: center;
+}
+
+/* ── Product card（产品卡片，hover 上浮） ── */
+.product-card {
+  border: 1px solid var(--color-line);
+  background: var(--color-paper);
+  transition: transform 300ms var(--ease-out-expo),
+              box-shadow 300ms var(--ease-out-expo),
+              border-color 300ms var(--ease-out);
+}
+
+.product-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 16px 48px -12px oklch(0.18 0.011 40 / 0.12);
+  border-color: var(--color-muted);
+}
+
+/* ── Stat value（大字统计数字） ── */
+.stat-value {
+  font-family: var(--font-serif);
+  font-size: 2.5rem;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -0.03em;
+}
+
+/* Count-up number */
+.count-num {
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── FAQ accordion ── */
+.faq-item {
+  border-bottom: 1px solid var(--color-line);
+}
+
+.faq-question {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 1.25rem 0;
+  font-size: 1rem;
+  font-weight: 600;
+  text-align: left;
+  cursor: pointer;
+  background: none;
+  border: none;
+  color: var(--color-ink);
+  transition: color 200ms var(--ease-out);
+}
+
+.faq-question:hover {
+  color: var(--color-accent);
+}
+
+.faq-icon {
+  font-size: 1.25rem;
+  transition: transform 300ms var(--ease-out);
+  color: var(--color-muted);
+}
+
+.faq-item.open .faq-icon {
+  transform: rotate(45deg);
+}
+
+.faq-answer {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 400ms var(--ease-out-expo),
+              padding 400ms var(--ease-out-expo);
+}
+
+.faq-item.open .faq-answer {
+  max-height: 200px;
+  padding-bottom: 1.25rem;
+}
+
+/* ── Workflow screenshot frame ── */
+.workflow-frame {
+  border: 1px solid var(--color-line);
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+  box-shadow: 0 24px 64px -16px oklch(0.15 0.010 30 / 0.12);
+  position: relative;
+}
+
+.workflow-frame-inner {
+  background: var(--color-surface);
+  padding: 1.5rem;
+}
+
+/* Step badge — floats over workflow frame */
+.step-badge {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  z-index: 2;
+  padding: 0.25rem 0.75rem;
+  border-radius: var(--radius-pill);
+  background: var(--color-accent);
+  color: var(--color-accent-ink);
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+/* ── Pipeline breadcrumb（想法 → relay → … → 交付） ── */
+.pipeline {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.pipeline-node {
+  padding: 0.375rem 0.875rem;
+  border-radius: var(--radius-pill);
+  border: 1px solid var(--color-line);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--color-muted);
+  background: var(--color-paper);
+  transition: all 200ms var(--ease-out);
+  white-space: nowrap;
+}
+
+.pipeline-node.current {
+  border-color: var(--color-accent);
+  background: var(--color-accent);
+  color: var(--color-accent-ink);
+  font-weight: 600;
+}
+
+.pipeline-arrow {
+  color: var(--color-line);
+  font-size: 0.75rem;
+  user-select: none;
+}
+
+/* ── Narrative paragraph（行高 2 的叙事段落，b 关键词加深） ── */
+.narrative {
+  font-size: 1.0625rem;
+  line-height: 2;
+  color: var(--color-ink-2);
+}
+
+.narrative b {
+  color: var(--color-ink);
+  font-weight: 600;
+}
+
+/* ── Why feature cards（dark 变体：一暗多亮） ── */
+.why-card {
+  border: 1px solid var(--color-line);
+  background: var(--color-surface);
+  padding: 1.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  transition: transform 300ms var(--ease-out-expo),
+              border-color 300ms var(--ease-out);
+}
+
+.why-card:hover {
+  transform: translateY(-3px);
+  border-color: var(--color-muted);
+}
+
+.why-card.dark {
+  background: var(--color-ink);
+  color: var(--color-paper);
+  border-color: var(--color-ink);
+}
+
+.why-card-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-line);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-accent);
+}
+
+.why-card.dark .why-card-icon {
+  border-color: oklch(1 0 0 / 0.2);
+}
+
+/* ── Integration chips ── */
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--color-line);
+  border-radius: var(--radius-pill);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  color: var(--color-ink-2);
+  background: var(--color-paper);
+  transition: all 200ms var(--ease-out);
+}
+
+.chip:hover {
+  border-color: var(--color-accent);
+  color: var(--color-ink);
+}
+
+.chip-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--color-accent);
+  flex-shrink: 0;
+}
+
+/* ── Checklist — 绿色勾选行 ── */
+.check-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.875rem 0;
+  border-bottom: 1px solid var(--color-line);
+  font-size: 0.9375rem;
+}
+
+.check-row:last-child {
+  border-bottom: none;
+}
+
+.check-mark {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--color-accent);
+  color: var(--color-accent-ink);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  margin-top: 1px;
+}
+
+/* ── Status badge（live 脉冲 / building 流光 / planned 虚线） ── */
+.status-pulse {
+  position: relative;
+}
+
+.status-pulse::after {
+  content: "";
+  position: absolute;
+  inset: -3px;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0;
+  animation: landingStatusPulse 2s ease-out infinite;
+}
+
+@keyframes landingStatusPulse {
+  0% { opacity: 0.5; transform: scale(0.8); }
+  100% { opacity: 0; transform: scale(2.2); }
+}
+
+.status-progress {
+  overflow: hidden;
+  border-radius: 9999px;
+}
+
+.status-progress::after {
+  content: "";
+  display: block;
+  height: 100%;
+  width: 40%;
+  background: currentColor;
+  opacity: 0.5;
+  animation: landingStatusProgress 1.8s ease-in-out infinite;
+}
+
+@keyframes landingStatusProgress {
+  0% { transform: translateX(-120%); }
+  100% { transform: translateX(380%); }
+}
+
+.status-dashed {
+  border: 1.5px dashed currentColor;
+  border-radius: 50%;
+}
+
+/* ── Floating pill nav — 顶部全宽吸顶，滚动后收缩为浮动胶囊 ── */
+.nav-shell {
+  position: sticky;
+  top: 0;
+  z-index: 40;
+  transition: padding 300ms var(--ease-out);
+}
+
+.nav-shell .site-nav {
+  transition: border-radius 300ms var(--ease-out),
+              box-shadow 300ms var(--ease-out),
+              border-color 300ms var(--ease-out);
+}
+
+.nav-shell.floating {
+  padding: 10px 12px;
+}
+
+.nav-shell.floating .site-nav {
+  border-radius: var(--radius-pill);
+  border-color: transparent;
+  box-shadow: 0 8px 32px -8px oklch(0.15 0.010 30 / 0.18),
+              0 1px 3px oklch(0.15 0.010 30 / 0.06);
+}