查看“︁MediaWiki:Common.css”︁的源代码

/* =========================================================
   ✅ 全局字体设置（增强中日韩支持 + 系统一致性）
   ========================================================= */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
               "Noto Sans", "Noto Sans CJK SC", "Noto Sans CJK TC", "Noto Sans JP",
               "Noto Sans KR", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "WenQuanYi Micro Hei", "SimSun", "SimHei", "Songti SC", "KaiTi",
               "MingLiU", "PMingLiU", "Microsoft JhengHei", "Malgun Gothic", sans-serif;
  color: #222; /* 全站文字颜色微调 */
  line-height: 1.6;
}

/* =========================================================
   🟥 Banner 横幅区（首页头部标语）
   ========================================================= */
.hero-banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to right, #a50000, #e64545); /* ★ 柔和渐变色，替换原#b30000→#e64545 */
  color: white;
  font-weight: bold;
  border-radius: 12px;
  padding: 16px 28px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* ★ 阴影改淡，更符合 Citizen 扁平风格 */
  text-align: center;
}

.hero-banner .chinese-text {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 6px;
}

.hero-banner .english-text {
  font-size: 16px;
  font-weight: 500;
  opacity: 0.9;
  letter-spacing: 0.5px;
}

/* 副标题（可选项） */
.hero-banner .subtitle {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  margin-top: 4px;
  letter-spacing: 0.5px;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .hero-banner .chinese-text { font-size: 22px; }
  .hero-banner .english-text { font-size: 14px; }
}

/* =========================================================
   🧩 Section 模块容器（可重复使用）
   ========================================================= */
.homepage-section {
  margin: 30px 0;
}

/* =========================================================
   📦 内容块（卡片样式）
   ========================================================= */
.content-box {
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  padding: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.content-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* 标题样式 */
.content-box h2 {
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 2px solid #b30000; /* ★ 颜色与 banner 主色统一 */
  font-size: 1.25rem;
}

/* 段落样式 */
.content-box p {
  font-size: 0.95rem;
  color: #333;
  line-height: 1.7;
}

/* =========================================================
   🧱 Flex 布局容器（多列展示）
   ========================================================= */
.flex-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px; /* ★ 原 gap:20px → 改为 24px，空间更舒适 */
}

.flex-container .content-box {
  flex: 1 1 calc(33.33% - 24px);
  box-sizing: border-box;
  min-width: 250px; /* 避免在窄屏下压缩过头 */
}

/* 移动端改为单列 */
@media (max-width: 768px) {
  .flex-container {
    flex-direction: column;
  }
  .flex-container .content-box {
    max-width: 100%;
    margin-bottom: 20px;
  }
}

/* =========================================================
   🌿 细节增强：重定向、页脚说明等
   ========================================================= */
.mw-redirect {
  color: #009944; /* ★ 深绿色，较柔和 */
}

/* 页脚标注（可在首页底部添加） */
.footer-note {
  text-align: center;
  font-size: 13px;
  color: #777;
  margin-top: 40px;
  border-top: 1px solid #eee;
  padding-top: 12px;
  letter-spacing: 0.3px;
}