Template:WelcomeHeader/styles.css

/* ===== Banner 样式：学术与商业的融合 (智性风) ===== */
.main-banner {
  display: flex;
  align-items: center;
  gap: 32px; /* 增加间距，增加呼吸感 (学术排版特征) */
  padding: 32px 40px;
  
  /* --- 核心修改 --- */
  background: #fff; /* 回归纸张的本色（或极淡的米灰 var(--color-surface-1)） */
  
  /* 极小的圆角，保留一点点精致的润泽感，但看起来几乎是直的 */
  border-radius: 2px; 
  
  /* 关键设计：左侧品牌色实线。 */
  /* 这在学术海报和商业研报中非常常见，既标识身份又保持克制 */
  border-left: 5px solid #3e83ff; 
  
  /* 其余三边使用极细的灰线，模拟文档边界 */
  border-top: 1px solid rgba(0,0,0,0.08);
  border-right: 1px solid rgba(0,0,0,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  
  /* 极其克制的阴影，仅用于让它微微脱离背景，不做夸张的悬浮 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  
  overflow: hidden;
}

.banner-left img {
  max-width: 180px; /* 稍微缩小图片，让文字占比更重，更显“内容为王” */
  height: auto;
  /* 图片可以加个极细的边框让它像插图 */
  /* border: 1px solid rgba(0,0,0,0.1); */
  /* filter: grayscale(100%);  // 高阶玩法：图片去色，鼠标悬停变色，更显学术冷淡风 */
}

.banner-right {
  flex: 1;
  /* 建议：学术/商业文档通常左对齐，右对齐会显得随意。
     如果必须右对齐保持原样即可，但左对齐更严肃。 */
  text-align: left; 
}

.title {
  /* 使用深色，接近黑色但不是纯黑，减少视觉疲劳 */
  color: #0f172a; 
  
  /* 如果你的网站引入了衬线体 (Times New Roman, Georgia, Noto Serif)，这里是用它的最佳时机 */
  font-family: "Georgia", "Times New Roman", serif; 
  font-weight: 600;
  letter-spacing: 0.02em; /* 微加字间距，增加通透感 */
  line-height: 1.3;
}

.subtitle {
  font-size: 18px; /* 稍微调小字号，更显精致 */
  margin: 0.5em 0 1.5em;
  color: #475569; /* 中灰色，形成清晰的信息层级 */
  font-weight: 400;
  line-height: 1.6; /* 增加行高，提升可读性 */
}

.divider {
  height: 1px;
  /* 极细的灰线，像表格线一样精确 */
  background: rgba(0,0,0,0.1);
  margin-bottom: 1.2em;
  width: 100%; /* 配合 text-align: left */
}

.count {
  font-size: 14px;
  margin: 0;
  text-transform: uppercase; /* 把标签改为全大写，增加形式感 */
  letter-spacing: 0.1em;
  color: #64748b;
  font-weight: 600;
}

/* 其中的数字单独样式（如果有 span 包裹最好，没有的话针对整体） */
/* 这种风格常把数字放大并加粗 */
.count span {
    color: #3e83ff; /* 用品牌色强调数据 */
    font-family: sans-serif; /* 数据保持无衬线体的现代感 */
    font-weight: 700;
}

/* ≤600 px 时纵向布局 */
@media(max-width: 600px){
  .main-banner {
    flex-direction: column;
    text-align: left; /* 移动端也保持左对齐 */
    border-left: 1px solid rgba(0,0,0,0.08); /* 移动端可能去掉侧边条，或者变为顶部条 */
    border-top: 4px solid #3e83ff;
  }
  .banner-right {
    text-align: left;
  }
  .divider {
    width: 100%;
    margin: 16px 0;
  }
}