User:弃权者/首页/styles.css

/* ============================
   游戏切换器 — 首页专属样式
   所有颜色/圆角/间距走 Citizen CSS 变量
   ============================ */

/* --- 头图 --- */
.gs-hero {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: var(--border-radius-medium);
  margin-bottom: var(--space-md);
  transition: opacity 0.2s ease;
}

.gs-hero--fade {
  opacity: 0;
}

.skin-citizen-dark .gs-hero {
  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-visible {
  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;
  animation: gsFadeIn 0.25s ease;
}

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

@keyframes gsFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { 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;
}