wordpress-theme-aksrt/assets/css/frontend/card-primitives.css

/**
 * AKSRT Card Primitives — 1:1 Zibll Alignment
 *
 * 对齐 zibll 的 .theme-box / .box-bg / .box-body / .box-header：
 * 阴影优先，无边框，8px 圆角，15px 内边距。
 *
 * @package AKSRT
 */

/* ============================================================
 * .aksrt-theme-box — 完整卡片原语（阴影 + 圆角 + 表面）
 * 对齐 zibll .theme-box + .box-bg
 * ============================================================ */
.aksrt-theme-box {
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.aksrt-theme-box:hover {
  box-shadow: var(--shadow);
  border-color: rgba(240, 68, 148, 0.10);
}

/* ============================================================
 * .aksrt-box-bg — 表面原语（仅背景 + 阴影）
 * ============================================================ */
.aksrt-box-bg {
  background-color: var(--surface-1);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
 * .aksrt-box-body / .aksrt-box-header — 内边距区段
 * 对齐 zibll .box-body / .box-header { padding: 15px }
 * ============================================================ */
.aksrt-box-body,
.aksrt-box-header {
  padding: var(--card-padding);
}

.aksrt-box-header {
  border-bottom: 1px solid var(--color-line-soft);
}

.aksrt-box-header + .aksrt-box-body {
  padding-top: 0;
}

.aksrt-box-body.notop,
.aksrt-box-header.notop    { padding-top: 0; }
.aksrt-box-body.nobottom,
.aksrt-box-header.nobottom { padding-bottom: 0; }

/* ============================================================
 * .aksrt-muted-box — 柔和背景嵌套
 * 对齐 zibll .muted-box
 * ============================================================ */
.aksrt-muted-box {
  background-color: var(--surface-2);
  border-radius: var(--radius);
  padding: var(--card-padding);
}

/* ============================================================
 * .aksrt-noshadow — 去除阴影
 * ============================================================ */
.aksrt-noshadow {
  box-shadow: none !important;
}

/* ============================================================
 * Zibll 兼容别名
 * ============================================================ */
.theme-box {
  background: var(--surface-1);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.theme-box:hover {
  box-shadow: var(--shadow);
  border-color: rgba(240, 68, 148, 0.10);
}

.box-bg {
  background-color: var(--surface-1);
  box-shadow: var(--shadow-sm);
}

.box-body {
  padding: var(--card-padding);
}

.box-header {
  padding: var(--card-padding);
  border-bottom: 1px solid var(--color-line-soft);
}

.box-header + .box-body {
  padding-top: 0;
}

.radius8 {
  border-radius: var(--radius);
}

.main-shadow {
  box-shadow: var(--shadow);
}

.muted-box {
  background-color: var(--surface-2);
  border-radius: var(--radius);
  padding: var(--card-padding);
}

/* ============================================================
 * 暗色模式
 * ============================================================ */
html.dark .aksrt-theme-box,
body.dark-theme .aksrt-theme-box,
html.dark .theme-box,
body.dark-theme .theme-box,
html.dark .box-bg,
body.dark-theme .box-bg {
  border-color: var(--color-line);
  box-shadow: var(--shadow-sm);
}

html.dark .aksrt-theme-box:hover,
body.dark-theme .aksrt-theme-box:hover,
html.dark .theme-box:hover,
body.dark-theme .theme-box:hover {
  box-shadow: var(--shadow);
}

/* ============================================================
 * 卡片 hover 动效
 * ============================================================ */
.aksrt-theme-box,
.theme-box {
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.aksrt-card-hover:hover,
.aksrt-card-hover:focus-within {
  box-shadow: none;
  transform: none;
}

.aksrt-card-hover-lg:hover,
.aksrt-card-hover-lg:focus-within {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.aksrt-noshadow:hover {
  box-shadow: none !important;
  transform: none !important;
}