wordpress-theme-aksrt/assets/css/frontend/base.css

/**
 * Jio Main v5 — 博客/个人站完整前端
 */

/* 防止 hero 等使用 100vw / full-bleed 时产生横向滚动条。
 *
 * 只在 body 上裁剪：html 一旦建立裁剪上下文，position: fixed 的
 * 导航 mega menu（.sub-menu.senior-submenu）和下拉面板会被一并裁掉。 */
body {
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  body {
    overflow-x: hidden;
  }
}

/* ========== 阅读进度条（单篇文章顶 fixed）========== */
.reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  z-index: 9999;
  pointer-events: none;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
  transition: width 0.1s ease-out;
}

/* 折叠 body 内注入的 BOM / 空白文本节点，防止产生多余行高间距 */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-ink-2);
  background-color: var(--surface-page);
}

/* legacy compat: global link composite transition */
a[href] {
  transition: color 0.2s, background 0.3s, opacity 0.3s, box-shadow 0.3s, transform 0.3s;
}

/* Font Awesome 5: when legacy markup includes both `fa` and `fab`, the
 * generic Solid rule must not override the Brands font face. */
.fa.fab {
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
}

/* FA5's later .fa rule sets 900; keep outline glyphs at their regular weight. */
.fa.far {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: 12px;
  z-index: 1100;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  transform: translateY(-140%);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* ========== 站点外壳 ========== */
.site-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.site-main {
  flex: 1;
}

/* legacy dual-column float math expects a padding-free main.container.
 * Bootstrap 5 also defines .container (max-width ladder + padding-x).
 * Force legacy geometry after Bootstrap so negative-margin sidebars land correctly. */
.container,
main.container,
.site-main.container {
  width: 100%;
  max-width: var(--container, var(--mian-max-width, 1200px));
  margin-right: auto;
  margin-left: auto;
  padding-right: 0;
  padding-left: 0;
  /* Kill Bootstrap 5 --bs-gutter-x padding model on site shells */
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}

/* The senior mega menu renders its own .container inside the dropdown, where
 * the reference keeps Bootstrap's 15px gutter and the plain content max-width.
 * The padding-free site-shell rule above would otherwise strip it and let the
 * card/link grid run flush to the panel edges. */
.navbar-top .sub-menu.senior-submenu > .container,
.mobile-navbar .sub-menu.senior-submenu > .container {
  max-width: var(--mian-max-width);
  padding-right: 15px;
  padding-left: 15px;
}

/* Header multifunc icon cards must align with the main content edges:
 * the global .container is padding-free at >=992px (dual-column float
 * math), so the card container gets no extra gutter either. The
 * <=991.98px media rule below restores 15px for every .container. */

/* Let the reference .px12-sm utility apply at its mobile breakpoint only. */

/* Keep the header multifunction search stable across route-specific CSS.
 * Some routes load a later .abs-right utility, while the global input focus
 * ring looks like an extra border against this transparent pill field. */
.header-slider-search .line-form-input:focus,
.header-slider-search .line-form-input:focus-visible {
  border: 0;
  outline: 0;
  box-shadow: none;
}

.header-slider-search .line-form .abs-right {
  position: absolute;
  right: 0.7em;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;
}

@media (min-width: 576px) {
  .container,
  main.container {
    max-width: var(--container, var(--mian-max-width, 1200px));
  }
}

@media (min-width: 768px) {
  .container,
  main.container {
    max-width: var(--container, var(--mian-max-width, 1200px));
  }
}

@media (min-width: 992px) {
  .container,
  main.container {
    max-width: var(--container, var(--mian-max-width, 1200px));
  }
}

@media (min-width: 1200px) {
  .container,
  main.container {
    max-width: var(--container, var(--mian-max-width, 1200px));
  }
}

@media (min-width: 1240px) {
  .container,
  main.container,
  .fluid-widget-wrap .widget-container {
    width: auto;
    max-width: var(--container, var(--mian-max-width, 1200px));
  }
}

@media (min-width: 1400px) {
  .container,
  main.container {
    max-width: var(--container, var(--mian-max-width, 1200px));
  }
}

/* Soft pad only when the float dual-column is collapsed.
 * Match legacy bootstrap container pad (15px) rather than 10px. */
@media (max-width: 991.98px) {
  .container,
  main.container {
    padding-right: 15px;
    padding-left: 15px;
  }
}

@media (max-width: 767px) {
  .container,
  main.container {
    width: 100%;
    max-width: 100%;
    padding-right: 15px;
    padding-left: 15px;
  }
}

/* ========== User identity inline icons ==========
 * All compact identity marks share one line-height baseline: VIP, level,
 * certification, and worn medals remain visually aligned in every surface.
 */
.jio-user-level-badge,
.jio-user-level-icon,
.jio-identity-medal,
.jio-identity-certification-icon,
.jio-header-user-medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 1.1em;
  max-width: 6em;
  object-fit: contain;
  vertical-align: -.15em;
  flex: 0 0 auto;
  box-sizing: border-box;
}
.jio-user-level-badge {
  padding: 0 .35em;
  font-size: .78em;
  line-height: 1.1;
  white-space: nowrap;
}
/* Comment context: keep all identity marks inside the compact author line. */
.jio-identity-medal--comment,
.jio-user-level-icon--comment,
.jio-header-user-medal--comment {
  height: 1em;
  vertical-align: -.12em;
}

/* No-wrap inline name rows — keep the level icon on the same line as the name.
 * The non-standard <name> element (legacy compat) plus .user-name / author-hero /
 * uc-header name rows must not flex-wrap, or the badge drops to a new line.
 * The comment header may still wrap (avatar + name + like can overflow on
 * narrow viewports), so it keeps flex-wrap but the inner <name> never does. */
.article-avatar name,
.article-avatar .name,
.user-name,
.jio-author-hero__name,
.uc-header__name,
.jio-header-badges {
  flex-wrap: nowrap;
  white-space: nowrap;
}
.user-card.author .user-name > name {
  overflow: visible;
}
.user-card.author .user-name > name > .display-name,
.user-card.widget .user-name > name > .display-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-card.author .user-name > name > .follow {
  flex-shrink: 0;
}

/* Follow control: the pending request swaps the label for an inline loader
 * and blocks a second submit. The followed state is carried by .actived. */
[data-jio-follow][aria-disabled="true"] {
  cursor: no-drop;
  opacity: 0.6;
}

[data-jio-follow][aria-disabled="true"]:hover {
  opacity: 0.6;
}

[data-jio-follow] .loading {
  vertical-align: -0.1em;
}

.jio-author-hero__name,
.uc-header__name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.jio-author-hero__name-inner {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.jio-ip-geo-badge {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  margin: 2px 0;
  padding: .3em .6em;
  border: 1px solid var(--color-line-soft, var(--main-border-color, rgba(136, 136, 136, .18)));
  border-radius: var(--mini-radius, 4px);
  background: var(--surface-2, rgba(136, 136, 136, .1));
  box-shadow: var(--shadow-xs, 0 1px 3px rgba(0, 0, 0, .08));
  color: var(--color-ink-3, #666);
  font-size: .92em;
  line-height: 1.44;
  vertical-align: middle;
  box-sizing: border-box;
}


.no-results {
  padding: 48px 20px;
  text-align: center;
  color: var(--color-ink-3);
}