wordpress-theme-aksrt/assets/css/routes/user-center/level.css

/* User level panel — zibll-aligned single-path layout. */
.aksrt-user-level-icon--admin { height: 22px; }

/* The level page owns its cards; do not wrap it in the generic dashboard card. */
.uc-content #panel-level.dashboard-panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.aksrt-level-page {
  color: var(--color-ink, #4e5358);
}

.aksrt-level-page .row {
  margin-right: -10px;
  margin-left: -10px;
}

.aksrt-level-page .row > [class*="col-"] {
  padding-right: 10px;
  padding-left: 10px;
}

.aksrt-level-page__summary {
  margin-bottom: 20px;
}

.aksrt-level-page__summary > [class*="col-"] {
  display: flex;
}

.aksrt-level-card {
  position: relative;
  width: 100%;
  height: 176px;
  min-height: 176px;
  margin-bottom: 0;
  padding: 15px;
  box-sizing: border-box;
  overflow: hidden;
  border: 0;
  border-radius: var(--main-radius, 8px);
  box-shadow: 0 0 10px var(--main-shadow, rgba(116, 116, 116, .08));
}

.aksrt-level-card .colorful-make {
  pointer-events: none;
}

.aksrt-level-card__summary-inner,
.aksrt-level-card__growth-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 146px;
}

.aksrt-level-card--summary {
  --this-color: #866127;
  --this-bg: linear-gradient(25deg, #eabe7b 10%, #f5e3c7 70%, #edc788 100%);
  color: var(--this-color);
}

.aksrt-level-card--growth {
  --this-color: #888;
  --this-bg: rgba(136, 136, 136, .1);
  color: var(--this-color);
}

.aksrt-level-card__identity,
.aksrt-level-card__current,
.aksrt-level-card__growth-head {
  display: flex;
  align-items: center;
}

.aksrt-level-card__identity {
  gap: 6px;
  font-weight: 700;
}

.aksrt-level-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-top: -4px;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
}

.aksrt-level-card__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aksrt-level-card__current {
  justify-content: flex-end;
  gap: 8px;
  margin-top: -27px;
  font-size: 14px;
  font-weight: 700;
}

.aksrt-level-card__badge {
  display: inline-block;
  width: auto;
  max-width: 72px;
  height: 26px;
  object-fit: contain;
}

.aksrt-level-card__badge-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 26px;
  padding: 0 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .38);
  font-size: 12px;
  font-weight: 700;
}

.aksrt-level-card__progress-copy {
  margin-top: auto;
}

.aksrt-level-card__progress-copy .flex {
  gap: 10px;
}

.aksrt-level-card__progress-copy strong {
  font-size: 12px;
}

.aksrt-level-card__progress-copy span {
  font-size: 11px;
  opacity: .8;
  text-align: right;
}

.aksrt-level-progress {
  height: 3px;
  overflow: hidden;
  margin: 0;
  border-radius: 4px;
  background: rgba(155, 107, 78, .28);
}

.aksrt-level-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #9b6b4e;
}

.aksrt-level-card__growth-head {
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
  line-height: 1.35;
}

.aksrt-level-card__growth-head > div {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

.aksrt-level-card__growth-head strong,
.aksrt-level-card__growth-head a {
  display: inline-flex;
  align-items: center;
}

.aksrt-level-card__growth-head strong {
  color: inherit;
  font-weight: 700;
}

.aksrt-level-card__growth-head strong i {
  margin-right: 6px;
  font-size: 12px;
}

.aksrt-level-card__growth-head a {
  font-size: 11px;
  text-decoration: none;
  opacity: .8;
}

.aksrt-level-card__growth-head > a {
  flex: 0 0 auto;
  white-space: nowrap;
}

.aksrt-level-growth {
  width: 100%;
  min-height: 96px;
  margin-top: 4px;
  overflow: hidden;
}

.aksrt-level-growth .swiper-wrapper {
  align-items: flex-end;
  min-height: 96px;
}

.aksrt-level-growth .pillar-item {
  display: flex;
  flex: 0 0 34px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 96px;
  color: inherit;
  opacity: .9;
  text-align: center;
  transition: opacity .2s ease;
}

.aksrt-level-growth .pillar-item.is-future {
  opacity: .5;
}

.aksrt-level-growth .pillar-item .value {
  min-height: 15px;
  font-size: 9px;
  line-height: 15px;
  white-space: nowrap;
}

.aksrt-level-growth .pillar-item .pillar {
  width: 6px;
  min-height: 2px;
  margin: 0 auto 3px;
  border-radius: 6px;
  background: linear-gradient(#707479, #bfc5cc);
}

.aksrt-level-growth .pillar-item.active {
  color: #b97030;
  font-weight: 700;
}

.aksrt-level-growth .pillar-item.active .pillar {
  background: linear-gradient(#c1764a, #e8c48e);
}

.aksrt-level-growth .level-name {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
}

.aksrt-level-growth .level-name img {
  display: block;
  width: auto;
  max-width: 32px;
  height: 18px;
  object-fit: contain;
}

.aksrt-level-growth .level-name span {
  font-size: 9px;
  font-weight: 700;
}

.aksrt-level-experience {
  clear: both;
  margin-bottom: 20px;
  padding: 15px;
  border: 0;
  border-radius: var(--main-radius, 8px);
  background: var(--main-bg-color, var(--surface-1, #fff));
  box-shadow: 0 0 10px var(--main-shadow, rgba(116, 116, 116, .08));
}

.aksrt-level-experience .box-body {
  padding: 15px;
}

.aksrt-level-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.aksrt-level-tabs .but {
  text-decoration: none;
}

.aksrt-level-tabs .but.is-active {
  color: var(--focus-color, #f04494);
}

.aksrt-level-experience .tab-content {
  min-height: 80px;
}

.aksrt-level-experience .tab-pane[hidden] {
  display: none !important;
}

.aksrt-level-list-row,
.aksrt-level-date-row {
  border-color: var(--main-border-color, rgba(0, 0, 0, .06));
}

.aksrt-level-list-row .focus-color,
.aksrt-level-date-row .focus-color {
  white-space: nowrap;
}

.aksrt-level-empty {
  margin: 0;
  padding: 24px 0;
  color: var(--muted-2-color, #999);
  text-align: center;
}

@media (max-width: 991px) {
  .aksrt-level-card--summary,
  .aksrt-level-card--growth {
    margin-bottom: 20px;
  }

  .aksrt-level-page__summary {
    margin-bottom: 0;
  }
}

@media (max-width: 767px) {
  .aksrt-level-page .row {
    margin-right: 0;
    margin-left: 0;
  }

  .aksrt-level-page .row > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }

  .aksrt-level-card {
    min-height: 176px;
  }

  .aksrt-level-card__growth-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .aksrt-level-card__growth-head > a {
    align-self: flex-end;
  }

  .aksrt-level-growth {
    min-height: 92px;
  }

  .aksrt-level-growth .swiper-wrapper,
  .aksrt-level-growth .pillar-item {
    min-height: 92px;
  }

  .aksrt-level-experience {
    padding: 10px;
  }

  .aksrt-level-experience .box-body {
    padding: 10px 5px;
  }

  .aksrt-level-list-row .flex {
    align-items: flex-start;
  }
}