@charset "utf-8";
/* ==========================================================================
   「关于我们」页（/guanyu/）正文内容区 排版优化          2026-09-28
   --------------------------------------------------------------------------
   · 作用范围：**只改正文内容区**（.about-infos 及其内部）。
     **首屏横幅（.term-bar）一律不动** —— 该区域全站内页统一，必须与主站
     保持一致（实测基准见 /city.html：padding 80px、banner 图不透明、
     标题 35.2px 黑字、无字距、无阴影），不做任何页面级独立设计。
   · 作用域：所有选择器均以 .about-page 打头；该类只加在
     template/dachao/about.html 的最外层 <div> 上。
     ⇒ 与其共用 .about-infos / .about-content / .posts-pushes 结构的
       message.html 不受影响。
   · 品牌隔离：本站（唯傲林）沿用站内蓝 —— 主色 #0060ed、深色 #4403ff；
     尚坤站（www.skviolin.com）为橙色系，两站视觉语言互不混用。
   · 引入方式：template/dachao/head.html 新增一行 <link>（带 ?v= 版本号）。
     之所以单独建文件、不追加进 style.css：nginx 对 .css 设了 expires 12h，
     追加进旧文件后老访客 12 小时内拿到的仍是旧样式，改动会「看不见」。
     （与 citytag-2026.css 采用同一处理方式）
   · 只作用于既有标签（h5 / p / strong / img），不新增任何 DOM 结构，
     后台富文本如何编排都自动继承。
   ========================================================================== */

.about-page {
	--ab-brand: #0060ed;
	--ab-deep: #4403ff;
	--ab-ink: #141727;
	--ab-body: #3e506f;
	--ab-line: #e8edf6;
}

/* ---------- 1. 内容区：浅灰蓝底 + 白色圆角卡片 ---------- */
.about-page .about-infos {
	background-color: #f4f7fc !important;
	padding: 3.5rem 0;
}
.about-page .posts-pushes {
	background: #fff;
	padding: 3rem 3.25rem !important;
	border-radius: 14px !important;
	box-shadow: 0 12px 40px rgba(20, 23, 39, .07), 0 2px 6px rgba(20, 23, 39, .04);
}
/* 卡片顶部品牌渐变条 */
.about-page .posts-pushes::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 4px;
	border-radius: 14px 14px 0 0;
	background: linear-gradient(90deg, var(--ab-deep), var(--ab-brand));
}

/* ---------- 2. 小节标题（h5）：左侧品牌色竖条 + 贯穿细分隔线 ---------- */
.about-page .posts-pushes h5 {
	position: relative;
	color: var(--ab-ink) !important;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.35;
	padding-left: 17px;
	margin-bottom: 34px !important;
}
.about-page .posts-pushes h5::before {
	content: '';
	position: absolute;
	left: 0;
	top: .16em;
	width: 5px;
	height: 1.06em;
	border-radius: 3px;
	background: linear-gradient(180deg, var(--ab-deep), var(--ab-brand));
}
/* 原样式是一条 116px 浅灰线、仅 hover 时才展开到全宽 —— 访客根本发现不了。
   改为常态即全宽的细分隔线，层次一眼可见。 */
.about-page .posts-pushes h5::after {
	width: 100%;
	bottom: -15px;
	border-top: 1px solid var(--ab-line);
}

/* ---------- 3. 段内小标题（strong）：品牌色 + 前置圆点 ---------- */
.about-page .posts-pushes p strong {
	position: relative;
	display: inline-block;
	padding-left: 15px;
	margin-top: 4px;
	color: var(--ab-brand);
	font-size: 1.06rem;
	font-weight: 700;
}
.about-page .posts-pushes p strong::before {
	content: '';
	position: absolute;
	left: 0;
	top: .48em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ab-brand);
}

/* ---------- 4. 正文段落 ---------- */
.about-page .posts-pushes p {
	font-size: 16px;
	line-height: 1.9;
	color: var(--ab-body);
	margin: 0 0 14px;
}

/* ---------- 5. 正文图片：圆角 + 投影 ---------- */
.about-page .posts-pushes img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(20, 23, 39, .13);
	margin: 6px 0;
}

/* ---------- 6. 小屏（m.css 的断点是 900px，此处对齐） ---------- */
@media only screen and (max-width: 900px) {
	.about-page .about-infos {
		padding: 2rem 0;
	}
	.about-page .posts-pushes {
		padding: 1.5rem 1.25rem !important;
		border-radius: 10px !important;
	}
	.about-page .posts-pushes h5 {
		font-size: 1.18rem;
		margin-bottom: 26px !important;
		padding-left: 14px;
	}
	.about-page .posts-pushes p {
		font-size: 15px;
		line-height: 1.85;
	}
	.about-page .posts-pushes img {
		border-radius: 8px;
	}
}