Template:WelcomeHeader/styles.css

/* ===== Banner 样式 (去伪存真版) ===== */
.main-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 32px;
  
  /* --- 修改核心：去除圆角和渐变，改为边框风格 --- */
  border-radius: 0; /* 移除圆角，回归直角 */
  background: var(--color-surface-2); /* 改为纯色背景，不要渐变 */
  border: 2px solid var(--color-base); /* 增加黑色(或主色)描边，强调结构 */
  box-shadow: none; /* 移除模糊的阴影，更加干练 */
  
  /* 如果想要一点立体感但不油腻，可以使用这种硬阴影（可选）： */
  /* box-shadow: 4px 4px 0px rgba(0,0,0, 1); */
  
  overflow: hidden;
  position: relative; /* 为可能的装饰元素留位 */
}

.banner-left img {
  max-width: 200px;
  height: auto;
  /* 图片也可以加个边框呼应整体风格（可选） */
  /* border: 2px solid var(--color-base); */
}

.banner-right {
  flex: 1;
  text-align: right;
}

.title {
  color: var(--color-base);
  font-weight: 700; /* 加粗标题，增加力量感 */
  letter-spacing: -0.02em; /* 稍微收紧字间距，更现代 */
}

.subtitle {
  font-size: 20px;
  margin: .3em 0 1.5em;
  color: var(--color-base);
  opacity: 0.8; /* 用透明度区分层级，而不是颜色 */
}

.divider {
  height: 1px;
  /* 修改：去除半透明白色，改为实色，以匹配纯色背景 */
  background: var(--color-base); 
  opacity: 0.2; /*以此控制线条轻重*/
  margin-bottom: 1.2em;
}

.count {
  font-size: 16px;
  margin: 0;
  font-family: monospace; /* 数字使用等宽字体，增加一种“数据感/机械感” */
}

/* ≤600 px 时纵向布局 */
@media(max-width: 600px) {
  .main-banner {
    flex-direction: column;
    text-align: center;
    /* 移动端可以取消硬阴影，防止占地太大 */
    box-shadow: none; 
  }
  .banner-right {
    text-align: center;
  }
  .divider {
    width: 80%;
    margin: 12px auto;
  }
}