User:弃权者/首页/styles.css：修订间差异

/* --- 头图 --- */
.gs-hero-wrap {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 360px;
  width: 100%;
  border-radius: var(--border-radius-medium);
  margin-bottom: var(--space-md);
  overflow: hidden;
  background: var(--color-surface-2);
}

.gs-hero-layer {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  background-size: cover;
  background-position: center;
  transition: opacity 0.4s ease;
}

.skin-citizen-dark .gs-hero-wrap {
  filter: brightness(0.8);
}

/* --- 按钮条 --- */
.gs-tabs {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

.gs-tab-btn {
  display: inline-block;
  padding: 8px 20px;
  border-radius: var(--border-radius-medium);
  background: var(--color-surface-1);
  color: var(--color-base);
  border: 1px solid var(--border-color-base);
  cursor: pointer;
  font-size: 0.95rem;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  outline-offset: 2px;
}

.gs-tab-btn:hover {
  background: var(--color-surface-2);
  box-shadow: 0 2px 8px var(--box-shadow-color-base);
}

.gs-tab-btn:focus {
  outline: 2px solid var(--color-progressive);
}

.gs-tab-btn.gs-active {
  background: var(--color-progressive);
  color: #fff;
  border-color: var(--color-progressive);
  font-weight: 700;
  cursor: default;
}

/* --- 内容区 --- */
.gs-content {
  position: relative;
}

.gs-content-panel {
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.gs-content-panel.gs-active {
  display: block;
}

.gs-content-panel.gs-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- 加载中 --- */
.gs-loading {
  padding: var(--space-xl);
  text-align: center;
  color: var(--color-subtle);
}

/* --- 卡片网格（1-4 列自适应） --- */
.gs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-md);
}

.gs-card {
  background: var(--color-surface-1);
  border: 1px solid var(--border-color-base);
  border-radius: var(--border-radius-medium);
  padding: var(--space-md);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  color: var(--color-base);
  display: block;
}

.gs-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 8px var(--box-shadow-color-base);
}

.gs-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-emphasized);
  margin: 0 0 4px;
}

.gs-card__desc {
  font-size: 0.85rem;
  color: var(--color-subtle);
  margin: 0;
}