/* ==========================================================================
ASTRA — 主样式表
YOUTH GROWTH & FUTURE LEADERSHIP · 青少年全人发展与未来教育
--------------------------------------------------------------------------
设计定位：国际高端教育机构风格
色彩比例：深海蓝 ~55–65% / 暖白 ~20–30% / 晨曦蓝 少量 / 星辉金 ~5–10%
原则：克制、留白、层级清晰、无儿童化元素、无科技渐变、无发光效果
========================================================================== */
/* --------------------------------------------------------------------------
1. 设计令牌
-------------------------------------------------------------------------- */
:root {
/* ======================================================================
1.1 ASTRA 品牌色（唯一来源，2026-10-03）
----------------------------------------------------------------------
品牌手册给的是单值，界面需要层次，所以下面所有深浅变体都从这里派生。
改品牌色只改这四个，其余自动跟随。
====================================================================== */
--astra-navy: #0f2d4a; /* 深海蓝 Deep Navy —— 主色 */
--astra-gold: #d0a94a; /* 星辉金 Astra Gold —— 强调色，克制使用 */
--astra-dawn-blue: #8fa8c7; /* 晨曦蓝 Dawn Blue —— 辅助 */
--astra-ivory: #faf7f1; /* 暖白 Warm Ivory —— 背景 */
/* 深海蓝梯度（以 --astra-navy 为中心向两端派生） */
--navy-900: #071a2c;
--navy-850: #0a2338;
--navy-800: var(--astra-navy);
--navy-700: #163a5c;
--navy-600: #1d4a70;
--navy-500: #265a85;
/* 晨曦蓝（辅助）。
取代原来那组高饱和皇家蓝 —— 品牌简报明确不要廉价的高饱和蓝，
且那三个 token 在本表里从未被引用过。 */
--dawn: var(--astra-dawn-blue);
--dawn-soft: #a9bdd6;
--dawn-wash: #eef2f7;
/* 暖白 / 柔和白 */
--ivory: var(--astra-ivory);
--ivory-deep: #f4f0e8;
--paper: #ffffff;
--mist: #f6f5f2;
/* 星辉金（以 --astra-gold 为中心派生） */
--gold: var(--astra-gold);
--gold-soft: #ddbf74;
--gold-wash: #faf3e0;
--gold-line: rgba(208, 169, 74, 0.34);
/* 线条与墨色 */
--line: #e3ded4;
--line-strong: #d3ccbf;
--line-dark: rgba(255, 255, 255, 0.14);
--ink: #17212b;
--ink-soft: #46535f;
--ink-mute: #7b858f;
--ink-on-dark: #eef2f6;
--ink-on-dark-soft: rgba(238, 242, 246, 0.72);
--ink-on-dark-mute: rgba(238, 242, 246, 0.5);
/* 字体 */
--font-serif: "Songti SC", "Source Han Serif SC", "Noto Serif SC", "STSong",
"SimSun", "Georgia", "Times New Roman", serif;
--font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
"Source Han Sans SC", "Noto Sans SC", system-ui, -apple-system,
"Segoe UI", Roboto, "Helvetica Neue", sans-serif;
--font-num: "Georgia", "Times New Roman", "Songti SC", serif;
/* 版面 */
--wrap: 1180px;
--wrap-narrow: 820px;
--wrap-wide: 1320px;
--gutter: clamp(1.25rem, 5vw, 2.5rem);
--section-y: clamp(4rem, 9vw, 7.5rem);
--section-y-sm: clamp(3rem, 6vw, 5rem);
/* 圆角：克制，不用大圆角 */
--r-xs: 2px;
--r-sm: 3px;
--r-md: 4px;
/* 阴影：极轻 */
--sh-1: 0 1px 2px rgba(15, 45, 74, 0.04);
--sh-2: 0 6px 24px -12px rgba(15, 45, 74, 0.18);
--sh-3: 0 18px 50px -24px rgba(15, 45, 74, 0.28);
/* 动效 */
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--dur: 0.55s;
}
/* --------------------------------------------------------------------------
2. 重置与基础
-------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--ivory);
color: var(--ink);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.9;
letter-spacing: 0.015em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: transparent;
overflow-x: hidden;
}
@media (min-width: 900px) {
body {
font-size: 17px;
}
}
img,
svg,
video {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
color: inherit;
background: none;
border: 0;
cursor: pointer;
}
/* 焦点可见性 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
}
::selection {
background: var(--gold-wash);
color: var(--navy-800);
}
/* 跳过导航 */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 999;
background: var(--navy-800);
color: var(--ink-on-dark);
padding: 0.75rem 1.25rem;
font-size: 0.9rem;
}
.skip-link:focus {
left: 0;
}
/* --------------------------------------------------------------------------
3. 排版
-------------------------------------------------------------------------- */
/* text-wrap: balance 是拉丁文语境下的规则：它把标题平均分成等长的几行，
用来避免最后一行只剩一个孤零零的单词。对英文是对的。
但中文不是这样断行的。中文没有「词」的边界，balance 会机械地在正中间
切一刀，于是「学生」「长远」「服务于」这类双字词会被拆到两行：
我们期待了解您的学 / 生、学校和发展需求
整站都是中文，所以这条规则在展示级标题上会持续制造这种难看的断行。
保留它的理由：它确实能避免「孤字」（最后一行只剩一个字），
那比拆词更难看。代价是必须给展示级标题**手工控制断行** ——
大字号标题一律用
在语义边界处断开，每一行都不超过所在栏宽。
量出来的上限（1440px 视口，字体尺寸已到 clamp 上限）：
.page-hero__title clamp 到 3.1rem，1100px 版心 → 一行约 17 个汉字
.ed__rail 里的 --d-3 41.6px，栏宽 320px → 一行只能放 7 个汉字
.ed__rail 里的 --d-4 26.88px，栏宽 320px → 一行约 11 个汉字
所以侧栏标题必须写成三行短句，不能交给浏览器自己断。 */
h1,
h2,
h3,
h4,
h5 {
font-family: var(--font-serif);
font-weight: 600;
color: var(--navy-800);
line-height: 1.4;
letter-spacing: 0.01em;
margin: 0 0 0.7em;
text-wrap: balance;
}
h1 {
font-size: clamp(1.95rem, 4.6vw, 3.15rem);
line-height: 1.32;
letter-spacing: 0.015em;
}
h2 {
font-size: clamp(1.5rem, 3.1vw, 2.3rem);
line-height: 1.38;
}
h3 {
font-size: clamp(1.1rem, 1.75vw, 1.32rem);
line-height: 1.55;
}
h4 {
font-size: 1.02rem;
font-family: var(--font-sans);
font-weight: 600;
letter-spacing: 0.02em;
}
p {
margin: 0 0 1.15em;
color: var(--ink-soft);
}
p:last-child {
margin-bottom: 0;
}
strong {
font-weight: 600;
color: var(--navy-700);
}
em {
font-style: normal;
color: var(--navy-700);
}
/* 反白区域内的排版 */
.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4,
.on-dark strong,
.on-dark em {
color: var(--ink-on-dark);
}
.on-dark p {
color: var(--ink-on-dark-soft);
}
/* 导语 */
.lede {
font-size: clamp(1.02rem, 1.5vw, 1.18rem);
line-height: 1.95;
color: var(--ink-soft);
max-width: 62ch;
}
.on-dark .lede {
color: var(--ink-on-dark-soft);
}
/* 小标签 / 眉标 */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.7rem;
font-family: var(--font-sans);
font-size: 0.76rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin: 0 0 1.5rem;
}
.eyebrow::before {
content: "";
width: 26px;
height: 1px;
background: var(--gold);
flex: none;
}
.on-dark .eyebrow {
color: var(--gold-soft);
}
.on-dark .eyebrow::before {
background: var(--gold-soft);
}
/* 章节序号 */
.sec-num {
font-family: var(--font-num);
font-size: 0.82rem;
letter-spacing: 0.2em;
color: var(--gold);
display: block;
margin-bottom: 0.9rem;
}
/* --------------------------------------------------------------------------
4. 版面工具
-------------------------------------------------------------------------- */
.wrap {
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: var(--gutter);
}
.wrap--narrow {
max-width: var(--wrap-narrow);
}
.wrap--wide {
max-width: var(--wrap-wide);
}
.section {
padding-block: var(--section-y);
position: relative;
}
.section--sm {
padding-block: var(--section-y-sm);
}
.section--ivory {
background: var(--ivory);
}
.section--paper {
background: var(--paper);
}
.section--mist {
background: var(--mist);
}
.section--navy {
background: var(--navy-800);
color: var(--ink-on-dark);
}
.section--navy-deep {
background: var(--navy-900);
color: var(--ink-on-dark);
}
.section--hairline {
border-top: 1px solid var(--line);
}
.grid {
display: grid;
gap: clamp(1.5rem, 3.4vw, 2.75rem);
}
.grid--2 {
grid-template-columns: 1fr;
}
.grid--3 {
grid-template-columns: 1fr;
}
.grid--4 {
grid-template-columns: 1fr;
}
@media (min-width: 700px) {
.grid--2 {
grid-template-columns: repeat(2, 1fr);
}
.grid--4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 960px) {
.grid--3 {
grid-template-columns: repeat(3, 1fr);
}
.grid--4 {
grid-template-columns: repeat(4, 1fr);
}
}
/* 五阶段横排：窄屏单列，中屏两列，宽屏五列 */
.grid--5 {
grid-template-columns: 1fr;
gap: clamp(1.5rem, 2.6vw, 2rem);
}
@media (min-width: 620px) {
.grid--5 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1080px) {
.grid--5 {
grid-template-columns: repeat(5, 1fr);
}
}
/* 五阶段在宽屏下用竖向细线分隔，强化"路径"感 */
@media (min-width: 1080px) {
.stage-row .stage {
padding-right: clamp(0.75rem, 1.6vw, 1.4rem);
}
.stage-row .stage + .stage {
padding-left: clamp(0.75rem, 1.6vw, 1.4rem);
border-left: 1px solid var(--line);
}
.on-dark .stage-row .stage + .stage {
border-left-color: var(--line-dark);
}
}
/* 项目体系：中屏两列、宽屏三列 */
.grid--programs {
grid-template-columns: 1fr;
}
@media (min-width: 700px) {
.grid--programs {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1040px) {
.grid--programs {
grid-template-columns: repeat(3, 1fr);
}
}
/* 图文分栏：文字 + 视觉 */
.split {
display: grid;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: start;
grid-template-columns: 1fr;
}
@media (min-width: 960px) {
.split {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.split--text-heavy {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}
.split--visual-first {
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}
}
.section-head {
max-width: 62ch;
margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
}
.section-head--center {
margin-inline: auto;
text-align: center;
}
.section-head--center .eyebrow {
justify-content: center;
}
.divider {
height: 1px;
background: var(--line);
border: 0;
margin: 0;
}
.on-dark .divider {
background: var(--line-dark);
}
/* --------------------------------------------------------------------------
5. 按钮
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
min-height: 50px;
padding: 0.85rem 1.6rem;
font-family: var(--font-sans);
font-size: 0.94rem;
font-weight: 500;
letter-spacing: 0.06em;
line-height: 1.2;
border-radius: var(--r-sm);
border: 1px solid transparent;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
border-color var(--dur) var(--ease), transform 0.3s var(--ease);
cursor: pointer;
text-align: center;
/* 按钮标签永远不换行。
窄屏（360–390px）下 .hero__aside 里的两个按钮并排，
「了解成长项目」在 390px 会断成「了解成长项 / 目」——
中文没有词边界，一旦换行就会把词切开，看起来像排版事故。
容器是 flex-wrap: wrap，按钮放不下时整颗换到下一行，
所以这里禁用内部换行不会造成溢出。 */
white-space: nowrap;
}
.btn:active {
transform: translateY(1px);
}
/* 主 CTA：深海军蓝 + 暖金细线 */
.btn--primary {
background: var(--navy-800);
color: #fff;
border-color: var(--navy-800);
box-shadow: inset 0 0 0 1px rgba(221, 191, 116, 0);
}
.btn--primary:hover {
background: var(--navy-700);
border-color: var(--gold);
box-shadow: inset 0 0 0 1px var(--gold-line);
}
/* 反白区内的主 CTA */
.on-dark .btn--primary,
.btn--primary.on-dark {
background: var(--ivory);
color: var(--navy-800);
border-color: var(--ivory);
}
.on-dark .btn--primary:hover,
.btn--primary.on-dark:hover {
background: #fff;
border-color: var(--gold);
box-shadow: inset 0 0 0 1px var(--gold);
}
/* 次按钮：描边 */
.btn--ghost {
background: transparent;
color: var(--navy-700);
border-color: var(--line-strong);
}
.btn--ghost:hover {
border-color: var(--navy-700);
background: rgba(15, 45, 74, 0.03);
}
.on-dark .btn--ghost {
color: var(--ink-on-dark);
border-color: rgba(255, 255, 255, 0.3);
}
.on-dark .btn--ghost:hover {
border-color: var(--gold-soft);
background: rgba(255, 255, 255, 0.05);
}
/* 文字链接箭头 */
.btn--link {
padding: 0;
min-height: 0;
border: 0;
color: var(--navy-700);
border-bottom: 1px solid var(--gold-line);
border-radius: 0;
padding-bottom: 2px;
}
.btn--link:hover {
border-bottom-color: var(--gold);
}
.on-dark .btn--link {
color: var(--ink-on-dark);
}
.btn--link::after {
content: "→";
font-family: var(--font-sans);
transition: transform 0.35s var(--ease);
}
.btn--link:hover::after {
transform: translateX(4px);
}
.btn-row {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
align-items: center;
}
.btn-row--center {
justify-content: center;
}
/* --------------------------------------------------------------------------
6. 顶部导航
-------------------------------------------------------------------------- */
/* 头部高度只在这里定义一次。
抽屉（.nav-drawer）用同一个变量定位，否则改了标志高度、
抽屉就会和头部重叠或者露出一条缝。 */
:root {
--header-h: 108px;
}
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(250, 247, 241, 0.94);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--line);
transition: box-shadow 0.4s var(--ease);
}
.site-header.is-scrolled {
box-shadow: 0 1px 18px -8px rgba(15, 45, 74, 0.22);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
/* 锁合是上下结构（球 + 字标），比原来的方标高，
所以头部整体抬到 --header-h —— 标志需要留白，不能贴着导航。 */
min-height: var(--header-h);
}
/* 标志
--------------------------------------------------------------------------
弧线 + 五个球 + ASTRA 字标是一个不可拆分的整体锁合（lockup），
整份作为一张 SVG 使用。绝不能再退回到「图标 + 另一段 HTML 文字」的写法 ——
那样字标就不属于标志，品牌识别会散架。
中文定位句是「品牌描述」，不是标志的一部分，所以留在标志之外单独排版。 */
.brand {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.4rem;
flex: none;
padding-block: 0.55rem;
}
.brand__logo {
display: block;
width: 126px;
height: auto;
flex: none;
}
.brand__tagline {
font-size: 0.6rem;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.15em;
color: var(--ink-mute);
text-transform: uppercase;
}
.brand__sub {
font-size: 0.62rem;
letter-spacing: 0.16em;
color: var(--ink-mute);
text-transform: uppercase;
}
/* 主导航 */
.nav {
display: none;
}
@media (min-width: 1180px) {
.nav {
display: flex;
align-items: center;
gap: clamp(0.85rem, 1.5vw, 1.5rem);
flex: 1;
justify-content: center;
}
}
.nav__link {
position: relative;
font-size: 0.875rem;
letter-spacing: 0.05em;
color: var(--ink-soft);
padding: 0.4rem 0;
white-space: nowrap;
transition: color 0.3s var(--ease);
}
.nav__link::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: var(--gold);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s var(--ease);
}
.nav__link:hover {
color: var(--navy-800);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
transform: scaleX(1);
}
.nav__link[aria-current="page"] {
color: var(--navy-800);
font-weight: 600;
}
.header-cta {
display: none;
}
@media (min-width: 1180px) {
.header-cta {
display: inline-flex;
flex: none;
}
}
.header-cta .btn {
min-height: 42px;
padding: 0.6rem 1.15rem;
font-size: 0.86rem;
}
/* 汉堡按钮 */
.nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
flex: none;
margin-right: -10px;
border-radius: var(--r-sm);
}
@media (min-width: 1180px) {
.nav-toggle {
display: none;
}
}
.nav-toggle__bars {
position: relative;
width: 21px;
height: 13px;
}
.nav-toggle__bars span {
position: absolute;
left: 0;
width: 100%;
height: 1.5px;
background: var(--navy-800);
transition: transform 0.4s var(--ease), opacity 0.25s var(--ease);
}
.nav-toggle__bars span:nth-child(1) {
top: 0;
}
.nav-toggle__bars span:nth-child(2) {
top: 5.75px;
}
.nav-toggle__bars span:nth-child(3) {
top: 11.5px;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
transform: translateY(5.75px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
transform: translateY(-5.75px) rotate(-45deg);
}
/* 移动端抽屉 */
.nav-drawer {
position: fixed;
inset: var(--header-h) 0 0;
z-index: 99;
background: var(--ivory);
border-top: 1px solid var(--line);
padding: 1.5rem var(--gutter) 3rem;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transform: translateY(-8px);
opacity: 0;
visibility: hidden;
transition: opacity 0.32s var(--ease), transform 0.32s var(--ease),
visibility 0.32s;
}
.nav-drawer.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
@media (min-width: 1180px) {
.nav-drawer {
display: none;
}
}
.nav-drawer__list {
list-style: none;
margin: 0 0 2rem;
padding: 0;
}
.nav-drawer__list li {
border-bottom: 1px solid var(--line);
}
.nav-drawer__list a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.05rem 0.25rem;
font-size: 1.02rem;
color: var(--navy-800);
}
.nav-drawer__list a::after {
content: "→";
color: var(--gold);
font-size: 0.9rem;
}
.nav-drawer__list a[aria-current="page"] {
font-weight: 600;
color: var(--navy-800);
}
.nav-drawer__meta {
font-size: 0.86rem;
color: var(--ink-mute);
line-height: 1.9;
}
.nav-drawer .btn {
width: 100%;
margin-bottom: 1.5rem;
}
body.nav-open {
overflow: hidden;
}
/* --------------------------------------------------------------------------
7. 首页第一屏（Homepage Hero）
--------------------------------------------------------------------------
版式：一张完整的横向纪实摄影铺满整个首屏；深蓝从左缘自然「长」出来，
文字落在深蓝一侧。不是「左蓝 + 右照片」的拼接。
五条硬规则（改动时不要破坏）：
· 照片必须是**真实摄影**。页面不给它叠加任何人工星球、圆球、轨迹、
星空或粒子 —— ASTRA 的「星」由真实的人、真实的光与真实的互动表达。
· 照片**不做蓝金调色**。品牌统一交给版面（Navy / Ivory / Gold），
不靠给照片套滤镜 —— 照片首先要看起来像真实摄影。
· 深蓝渐变**不能是一个色块**。左缘近乎实心、中段连续衰减、
右缘完全透明，让人看不出这里存在一条设计分界线。
· 主体（人）落在画面右侧，左侧留给文字与负空间。
· 标志只在页头出现一次。首屏不再重复品牌名。
为什么这样做：第一屏要让人先觉得「这是一个成熟、国际化的教育品牌」，
再觉得「它懂年轻人」，最后觉得「这些年轻人正在经历真实的事」。
-------------------------------------------------------------------------- */
.hero {
position: relative;
display: flex;
flex-direction: column;
/* 不要太高：占满首屏主要视觉区域，但要让下面一节隐约露出来。
74vh + 108px 页头 ≈ 一屏，底部会自然露出下一节的起头。 */
min-height: clamp(520px, 74vh, 760px);
background: var(--navy-900);
color: var(--ink-on-dark);
overflow: hidden;
isolation: isolate;
}
/* 一张照片铺满整个首屏 —— 不再是「左蓝右照片」 */
.hero__media {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.hero__media picture {
display: block;
width: 100%;
height: 100%;
}
.hero__photo {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
/* 人集中在画面右侧 55%–85%，左侧留给文字。
纵向 40% 是为了把下缘那块空地面裁掉，让构图收紧。 */
object-position: 50% 40%;
}
/* 深蓝从照片里「长」出来 —— 不是一个色块。
12 个停靠点连成一条平滑曲线：左缘近乎实心（文字读得清），
中段连续衰减，右缘完全透明。肉眼看不到分界线。
另叠两条极淡的上下渐变，让信息带与页头附近的字有依托。 */
.hero__scrim {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(
90deg,
rgba(6, 19, 32, 0.985) 0%,
rgba(6, 19, 32, 0.981) 10%,
rgba(6, 19, 32, 0.966) 19%,
rgba(6, 19, 32, 0.930) 28%,
rgba(6, 19, 32, 0.860) 37%,
rgba(6, 19, 32, 0.752) 46%,
rgba(6, 19, 32, 0.606) 55%,
rgba(6, 19, 32, 0.436) 64%,
rgba(6, 19, 32, 0.268) 73%,
rgba(6, 19, 32, 0.134) 82%,
rgba(6, 19, 32, 0.042) 91%,
rgba(6, 19, 32, 0) 100%
),
linear-gradient(
to bottom,
rgba(6, 19, 32, 0.44) 0%,
rgba(6, 19, 32, 0.12) 16%,
rgba(6, 19, 32, 0) 36%
),
linear-gradient(
to top,
rgba(6, 19, 32, 0.68) 0%,
rgba(6, 19, 32, 0.30) 11%,
rgba(6, 19, 32, 0) 26%
);
}
.hero__inner {
position: relative;
z-index: 2;
flex: 1 1 auto;
width: 100%;
max-width: var(--wrap-ed);
margin-inline: auto;
padding: clamp(2.25rem, 5vw, 3.5rem) var(--gutter) clamp(1.5rem, 3vw, 2.25rem);
display: flex;
flex-direction: column;
justify-content: center;
}
/* 文字栏宽度跟着视口走：窄桌面时用 vw 收，宽屏时用 rem 封顶，
否则 1024px 上下文字会伸进照片里。
36rem 是为了容下最长的第二行「都有属于自己的星辰。」（10 个汉字）。 */
.hero__copy {
max-width: min(36rem, 46vw);
}
/* 眉标：品牌定位，不是促销语 */
.hero__kicker {
display: flex;
align-items: center;
gap: 0.9rem;
margin: 0 0 clamp(1.1rem, 2.4vw, 1.7rem);
font-size: clamp(0.66rem, 0.92vw, 0.76rem);
font-weight: 600;
letter-spacing: var(--tk-wider);
text-transform: uppercase;
color: var(--gold-soft);
}
.hero__kicker-line {
width: 46px;
height: 1px;
background: var(--gold-soft);
flex: none;
}
/* 主张。中文是首屏的主视觉，所以字号给得比一般 Hero 大一些。
上限压到 3.3rem，是为了让「都有属于自己的星辰。」这 10 个字
在任何桌面宽度下都排成一行 —— 断成两行会把「自己」切开。
max-width 用 em 而不是 ch：中文字宽约等于 1em。 */
.hero__title {
font-family: var(--font-serif);
font-weight: 600;
font-size: clamp(1.8rem, 3.8vw, 3.3rem);
line-height: 1.24;
letter-spacing: var(--tk-tight);
color: #fff;
margin: 0;
}
.hero__title span {
display: block;
}
/* 第二句是落点，用金色。面积很小，不构成「大面积金色」。 */
.hero__title em {
font-style: normal;
color: var(--gold-soft);
}
.hero__sub {
margin: clamp(1.1rem, 2.4vw, 1.6rem) 0 0;
font-size: clamp(0.96rem, 1.15vw, 1.06rem);
line-height: 1.9;
color: var(--ink-on-dark-soft);
max-width: 26em;
}
.hero__actions {
margin-top: clamp(1.5rem, 3vw, 2.1rem);
}
/* 首屏两个 CTA 带箭头。只作用于首屏，不影响别处的按钮。 */
.hero__actions .btn::after {
content: "→";
font-family: var(--font-sans);
font-size: 0.95em;
line-height: 1;
transition: transform 0.35s var(--ease);
}
.hero__actions .btn:hover::after {
transform: translateX(4px);
}
/* 次 CTA 在深蓝照片上：透明底 + 细金色描边 */
.hero .btn--ghost {
border-color: var(--gold-line);
}
.hero .btn--ghost:hover {
border-color: var(--gold);
background: rgba(208, 169, 74, 0.08);
}
/* 英文陈述：中文主张的另一种说法，只作品牌辅助文字，视觉重量压到最低。
上面一条极细的线把它与行动区分开。 */
.hero__statement {
margin: clamp(1.9rem, 3.6vw, 2.6rem) 0 0;
padding-top: clamp(1rem, 2vw, 1.35rem);
border-top: 1px solid var(--line-dark);
font-family: var(--font-serif);
font-size: clamp(0.72rem, 1vw, 0.86rem);
font-weight: 500;
letter-spacing: 0.16em;
line-height: 1.75;
text-transform: uppercase;
color: var(--ink-on-dark-mute);
max-width: 30em;
}
.hero__statement span {
display: block;
}
/* 底部信息带：一条精致的横向信息带，不是三张 SaaS 卡片。
只有很小的金色圆点与极细分割线，没有图标。 */
.hero__foot {
position: relative;
z-index: 2;
border-top: 1px solid var(--line-dark);
}
.hero__foot-inner {
width: 100%;
max-width: var(--wrap-ed);
margin-inline: auto;
padding: clamp(0.95rem, 2vw, 1.3rem) var(--gutter);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.7rem 2rem;
}
.hero__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
}
.hero__meta li {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.83rem;
letter-spacing: 0.04em;
color: var(--ink-on-dark-soft);
}
.hero__meta li::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--gold);
flex: none;
}
/* 极细分割线：只加在项目之间，两端不加 */
.hero__meta li + li {
margin-left: clamp(1.1rem, 2.6vw, 2.25rem);
padding-left: clamp(1.1rem, 2.6vw, 2.25rem);
border-left: 1px solid var(--line-dark);
}
.hero__scroll {
display: flex;
align-items: center;
gap: 0.6rem;
margin: 0;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: var(--tk-wider);
text-transform: uppercase;
/* 它现在压在照片上（不再是纯深蓝底），所以用 soft 而不是 mute，
否则对比度不够，几乎看不见。 */
color: var(--ink-on-dark-soft);
}
.hero__scroll::after {
content: "";
width: 34px;
height: 1px;
background: linear-gradient(to right, var(--gold), rgba(208, 169, 74, 0));
}
/* --------------------------------------------------------------------------
第一屏 · 窄屏与平板
--------------------------------------------------------------------------
窄屏不做「左蓝右照片」，也不把桌面版压扁：
照片仍然是**完整背景**，但深蓝改成从**下方**长出来 ——
上半屏是照片，下半屏是深蓝文字区，中间连续过渡。
移动端用的是单独裁过的竖构图（人物在画面上半部），
所以文字只会压到身体，不会压到脸。
-------------------------------------------------------------------------- */
@media (max-width: 999.98px) {
.hero {
/* 窄屏上文字块占的比例更大，所以整体再给高一点，
否则照片会被压成一条。92vh 在常见手机上约 700–780px。 */
min-height: clamp(580px, 92vh, 820px);
}
.hero__photo {
object-position: 50% 50%;
}
/* 窄屏的渐变要更「厚」一些：文字块从 70% 高度往下全是字，
所以 60%–80% 这一段必须比桌面版更实，眉标与副标题才读得清。 */
.hero__scrim {
background:
linear-gradient(
to top,
rgba(6, 19, 32, 0.975) 0%,
rgba(6, 19, 32, 0.968) 30%,
rgba(6, 19, 32, 0.945) 44%,
rgba(6, 19, 32, 0.895) 54%,
rgba(6, 19, 32, 0.815) 63%,
rgba(6, 19, 32, 0.700) 70%,
rgba(6, 19, 32, 0.545) 78%,
rgba(6, 19, 32, 0.375) 85%,
rgba(6, 19, 32, 0.210) 91%,
rgba(6, 19, 32, 0.070) 96%,
rgba(6, 19, 32, 0) 100%
),
linear-gradient(
to bottom,
rgba(6, 19, 32, 0.42) 0%,
rgba(6, 19, 32, 0.10) 13%,
rgba(6, 19, 32, 0) 28%
);
}
.hero__inner {
justify-content: flex-end;
padding-top: clamp(1.5rem, 6vw, 2.25rem);
}
.hero__copy {
max-width: none;
}
/* 窄屏纵向空间紧张，把段落间距收一点，让照片多留一些。 */
.hero__sub {
margin-top: clamp(0.9rem, 2vw, 1.3rem);
}
.hero__actions {
margin-top: clamp(1.25rem, 2.6vw, 1.8rem);
}
.hero__statement {
margin-top: clamp(1.4rem, 3vw, 2rem);
}
.hero__meta {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.hero__meta li + li {
margin-left: 0;
padding-left: 0;
border-left: 0;
}
}
/* --------------------------------------------------------------------------
深色区块里用 写的组件，颜色必须提高特异性
--------------------------------------------------------------------------
.on-dark p 的选择器特异性是 (0,1,1)，比单类选择器 (0,1,0) 更高。
所以下面这几个用
写的组件，颜色会被 .on-dark p 统一改成
rgba(238, 242, 246, 0.72)：
· 金色眉标 → 变成灰色
· 副标题、英文陈述、滚动提示 → 都变成同一个灰
这个坑很隐蔽：页面不报错，只是「颜色不太对」，而人往往会以为设计如此。
所以这里显式再写一遍，用 .on-dark 前缀把特异性提到 (0,2,0)。
新增深色区块里的
组件时，记得同样处理。
同理 .hero__title em 与 .on-dark em 特异性相同（都是 0,1,1），
靠源码顺序决定胜负 —— 太脆弱，所以也在这里写死。
-------------------------------------------------------------------------- */
.on-dark .hero__kicker {
color: var(--gold-soft);
}
.on-dark .hero__title {
color: #fff;
}
.on-dark .hero__title em {
color: var(--gold-soft);
}
.on-dark .hero__sub {
color: var(--ink-on-dark-soft);
}
.on-dark .hero__statement {
color: rgba(238, 242, 246, 0.5);
}
.on-dark .hero__scroll {
color: var(--ink-on-dark-soft);
}
.on-dark .future__cta-note {
color: var(--ink-on-dark-mute);
}
/* 页面头图（内页）
--------------------------------------------------------------------------
与首页首屏共用同一套语言：深海军蓝底 + 极淡网格 + 展示级标题。
但强度更低 —— 内页头图的职责是「确认你在哪一页」，不是抢注意力。
-------------------------------------------------------------------------- */
.page-hero {
position: relative;
background: var(--navy-900);
color: var(--ink-on-dark);
overflow: hidden;
isolation: isolate;
}
.page-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background: radial-gradient(
100% 78% at 86% 0%,
rgba(143, 168, 199, 0.15) 0%,
rgba(143, 168, 199, 0) 64%
),
linear-gradient(176deg, var(--navy-850) 0%, var(--navy-900) 68%, var(--navy-950) 100%);
}
.page-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
opacity: 0.32;
background-image: linear-gradient(
to right,
rgba(255, 255, 255, 0.035) 1px,
transparent 1px
),
linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
background-size: 108px 108px;
mask-image: radial-gradient(120% 100% at 36% 0%, #000 16%, transparent 74%);
-webkit-mask-image: radial-gradient(120% 100% at 36% 0%, #000 16%, transparent 74%);
}
.page-hero__inner {
position: relative;
z-index: 2;
padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.75rem, 6vw, 4.75rem);
}
/* 可选：标题上方一行定位小字 */
.page-hero__kicker {
display: block;
margin: 0 0 clamp(0.9rem, 2vw, 1.3rem);
font-size: clamp(0.66rem, 0.92vw, 0.76rem);
font-weight: 600;
letter-spacing: var(--tk-wider);
text-transform: uppercase;
color: var(--gold-soft);
}
/* 展示级标题。20em 是按全站最长的内页标题（schools.html 的 17 个汉字）
量出来的：3.1rem × 17 ≈ 843px，而正文版心有 1100px，所以不会折行。 */
.page-hero__title {
font-family: var(--font-serif);
font-weight: 600;
font-size: clamp(1.7rem, 4.4vw, 3.1rem);
line-height: 1.18;
letter-spacing: var(--tk-tighter);
color: #fff;
max-width: 20em;
margin: 0 0 clamp(1rem, 2.2vw, 1.5rem);
}
.page-hero__lede {
color: var(--ink-on-dark-soft);
max-width: 46em;
font-size: clamp(1rem, 1.35vw, 1.12rem);
line-height: 1.95;
margin: 0;
}
/* .on-dark h1 / .on-dark p / .on-dark em 的特异性都高于单类选择器，
深色区块里用
、
写的组件必须显式再声明一遍颜色。 */
.on-dark .page-hero__title {
color: #fff;
}
.on-dark .page-hero__lede {
color: var(--ink-on-dark-soft);
}
.on-dark .crumbs {
color: var(--ink-on-dark-mute);
}
/* 只在窄屏生效的换行。
---------------------------------------------------------------------
内页头图标题的栏宽随视口变化很大，同一句话在两个宽度下的「合适断点」
不一样，任何全局的换行策略都必然在其中一边出错：
桌面 .page-hero__title 49.6px / 栏宽 992px → 一行约 20 个汉字
手机 .page-hero__title 27.2px / 栏宽 335px → 一行约 12 个汉字
例：「与学校一起，为学生准备更长远的未来」（17 字）
桌面 —— 一行放得下，不该断。
手机 —— 放不下。交给 balance 会平均切成 8/9，把「学生」拆开；
交给贪心换行会切成 12/5，虽然保住了「学生」，
但换到「五个阶段，一段完整的成长旅程」上就会留下一个孤字「程」。
两边都不对。所以窄屏的断点必须写死在标记里：
桌面隐藏（标题自然是一行），手机显示（在语义边界处断开）。
注意：不能用
，因为 .br-m 的 display: none 必须作用在
包住
的元素上才会一并隐藏换行。 */
.br-m {
display: none;
}
@media (max-width: 720px) {
.br-m {
display: inline;
}
}
/* 面包屑 */
.crumbs {
font-size: 0.78rem;
letter-spacing: 0.08em;
color: var(--ink-on-dark-mute);
margin-bottom: 1.75rem;
}
.crumbs a:hover {
color: var(--gold-soft);
}
.crumbs span {
margin-inline: 0.5rem;
opacity: 0.5;
}
/* --------------------------------------------------------------------------
8. 卡片
-------------------------------------------------------------------------- */
.card {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: clamp(1.5rem, 2.6vw, 2rem);
transition: border-color 0.45s var(--ease), box-shadow 0.45s var(--ease),
transform 0.45s var(--ease);
position: relative;
}
.card:hover {
border-color: var(--line-strong);
box-shadow: var(--sh-2);
transform: translateY(-2px);
}
.card h3 {
margin-bottom: 0.6rem;
}
.card p {
font-size: 0.95rem;
line-height: 1.9;
}
.card--flat {
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
padding: 1.75rem 0 0;
}
.card--flat:hover {
transform: none;
box-shadow: none;
border-color: var(--gold);
}
.card--navy {
background: var(--navy-800);
border-color: transparent;
color: var(--ink-on-dark);
}
.card--navy h3,
.card--navy h4 {
color: #fff;
}
.card--navy p {
color: var(--ink-on-dark-soft);
}
.card--navy:hover {
border-color: var(--gold);
}
/* 卡片编号 */
.card__num {
font-family: var(--font-num);
font-size: 0.8rem;
letter-spacing: 0.18em;
color: var(--gold);
display: block;
margin-bottom: 1rem;
}
/* 图标（细线，克制） */
.icon-line {
width: 30px;
height: 30px;
margin-bottom: 1.25rem;
color: var(--gold);
}
.icon-line svg {
width: 100%;
height: 100%;
stroke: currentColor;
fill: none;
stroke-width: 1.1;
stroke-linecap: round;
stroke-linejoin: round;
}
/* 列表：细线分隔 */
.list-lined {
list-style: none;
margin: 0;
padding: 0;
}
.list-lined li {
padding: 1rem 0;
border-bottom: 1px solid var(--line);
font-size: 0.96rem;
color: var(--ink-soft);
display: flex;
gap: 1rem;
align-items: baseline;
}
.list-lined li:last-child {
border-bottom: 0;
}
.list-lined li::before {
content: "";
flex: none;
width: 5px;
height: 5px;
margin-top: 0.72em;
background: var(--gold);
transform: rotate(45deg);
}
.on-dark .list-lined li {
border-color: var(--line-dark);
color: var(--ink-on-dark-soft);
}
/* 能力清单：无项目符号的方格 */
.chip-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 0;
border-top: 1px solid var(--line);
}
.chip-list li {
padding: 0.9rem 1rem 0.9rem 0;
border-bottom: 1px solid var(--line);
font-size: 0.92rem;
color: var(--navy-700);
letter-spacing: 0.03em;
}
.on-dark .chip-list,
.on-dark .chip-list li {
border-color: var(--line-dark);
}
.on-dark .chip-list li {
color: var(--ink-on-dark-soft);
}
/* 引用块 */
.pullquote {
border-left: 2px solid var(--gold);
padding: 0.35rem 0 0.35rem 1.75rem;
margin: 0;
font-family: var(--font-serif);
font-size: clamp(1.1rem, 2vw, 1.45rem);
line-height: 1.75;
color: var(--navy-800);
max-width: 46ch;
}
.on-dark .pullquote {
color: #fff;
}
/* 关键结论块 */
.keynote {
background: var(--gold-wash);
border-left: 2px solid var(--gold);
padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.35rem, 2.8vw, 2rem);
border-radius: 0 var(--r-md) var(--r-md) 0;
font-size: clamp(1rem, 1.4vw, 1.1rem);
line-height: 1.9;
color: var(--navy-800);
font-weight: 500;
}
.keynote p {
color: var(--navy-800);
margin: 0;
}
.on-dark .keynote {
background: rgba(208, 169, 74, 0.12);
color: var(--ink-on-dark);
}
.on-dark .keynote p {
color: var(--ink-on-dark);
}
/* 数据/事实条 */
.factbar {
display: grid;
grid-template-columns: 1fr;
gap: 0;
border-top: 1px solid var(--line);
}
@media (min-width: 760px) {
.factbar {
grid-template-columns: repeat(3, 1fr);
}
}
.factbar__item {
padding: clamp(1.5rem, 2.6vw, 2rem) clamp(1rem, 2vw, 1.75rem) clamp(1.5rem, 2.6vw, 2rem) 0;
border-bottom: 1px solid var(--line);
}
@media (min-width: 760px) {
.factbar__item {
border-bottom: 0;
border-right: 1px solid var(--line);
}
.factbar__item:last-child {
border-right: 0;
}
}
.factbar__num {
font-family: var(--font-num);
font-size: clamp(1.9rem, 4vw, 2.7rem);
line-height: 1;
color: var(--gold);
display: block;
margin-bottom: 0.85rem;
letter-spacing: 0.01em;
}
.factbar__label {
font-size: 0.9rem;
color: var(--ink-soft);
line-height: 1.75;
display: block;
}
.on-dark .factbar,
.on-dark .factbar__item {
border-color: var(--line-dark);
}
.on-dark .factbar__label {
color: var(--ink-on-dark-soft);
}
/* --------------------------------------------------------------------------
9. 视觉面板（替代商业图库照片的抽象版式）
-------------------------------------------------------------------------- */
.visual {
position: relative;
border-radius: var(--r-md);
overflow: hidden;
background: var(--navy-800);
aspect-ratio: 4 / 3;
isolation: isolate;
}
.visual--tall {
aspect-ratio: 3 / 4;
}
.visual--wide {
aspect-ratio: 16 / 9;
}
.visual--square {
aspect-ratio: 1 / 1;
}
.visual::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
90% 70% at 25% 20%,
rgba(143, 168, 199, 0.225),
transparent 60%
),
linear-gradient(160deg, var(--navy-700), var(--navy-900));
}
/* 细线弧线母题 */
.visual::after {
content: "";
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
115deg,
rgba(255, 255, 255, 0.05) 0px,
rgba(255, 255, 255, 0.05) 1px,
transparent 1px,
transparent 26px
);
mask-image: radial-gradient(80% 80% at 70% 80%, #000, transparent 75%);
-webkit-mask-image: radial-gradient(80% 80% at 70% 80%, #000, transparent 75%);
}
.visual__content {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: clamp(1.35rem, 2.6vw, 2rem);
}
.visual__glyph {
position: absolute;
z-index: 1;
right: clamp(1rem, 3vw, 2rem);
top: clamp(0.5rem, 2vw, 1.25rem);
font-family: var(--font-serif);
font-size: clamp(5rem, 14vw, 10rem);
line-height: 1;
color: rgba(255, 255, 255, 0.07);
user-select: none;
pointer-events: none;
}
.visual__caption {
font-size: 0.82rem;
line-height: 1.8;
color: var(--ink-on-dark-soft);
border-top: 1px solid var(--line-dark);
padding-top: 0.9rem;
max-width: 34ch;
}
.visual__label {
font-size: 0.72rem;
letter-spacing: 0.2em;
color: var(--gold-soft);
text-transform: uppercase;
margin-bottom: 0.55rem;
display: block;
}
/* 图片位（未来替换真实摄影） */
.photo-slot {
position: relative;
border-radius: var(--r-md);
overflow: hidden;
background: var(--ivory-deep);
border: 1px solid var(--line);
aspect-ratio: 4 / 3;
}
.photo-slot img {
width: 100%;
height: 100%;
object-fit: cover;
}
.photo-slot__hint {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
text-align: center;
padding: 1.5rem;
font-size: 0.8rem;
color: var(--ink-mute);
line-height: 1.8;
}
.photo-slot__hint strong {
font-size: 0.72rem;
letter-spacing: 0.18em;
color: var(--gold);
font-weight: 600;
}
/* --------------------------------------------------------------------------
10. 图表 / 信息图
-------------------------------------------------------------------------- */
.diagram {
width: 100%;
height: auto;
}
.diagram text {
font-family: var(--font-sans);
}
.diagram .d-line {
fill: none;
stroke: var(--line-strong);
stroke-width: 1;
}
.diagram .d-line-gold {
fill: none;
stroke: var(--gold);
stroke-width: 1;
}
.diagram .d-label {
font-size: 13px;
fill: var(--navy-800);
font-weight: 600;
}
.diagram .d-sub {
font-size: 11.5px;
fill: var(--ink-mute);
}
.diagram .d-num {
font-family: var(--font-num);
font-size: 15px;
fill: var(--gold);
letter-spacing: 0.12em;
}
.diagram .d-band {
fill: var(--ivory-deep);
}
.diagram .d-band-navy {
fill: var(--navy-800);
}
.diagram .d-label-on-dark {
fill: #fff;
}
.diagram .d-sub-on-dark {
fill: rgba(238, 242, 246, 0.65);
}
.diagram-wrap {
border: 1px solid var(--line);
border-radius: var(--r-md);
background: var(--paper);
padding: clamp(1.25rem, 3vw, 2.5rem);
}
.diagram-caption {
font-size: 0.82rem;
color: var(--ink-mute);
margin-top: 1.25rem;
line-height: 1.85;
padding-top: 1rem;
border-top: 1px solid var(--line);
}
/* --------------------------------------------------------------------------
11. 五阶段
-------------------------------------------------------------------------- */
.stage {
position: relative;
padding-top: clamp(2rem, 3.5vw, 2.75rem);
border-top: 1px solid var(--line);
}
.stage__num {
font-family: var(--font-num);
font-size: clamp(1.6rem, 3vw, 2.1rem);
line-height: 1;
color: var(--gold);
display: block;
margin-bottom: 1.1rem;
letter-spacing: 0.04em;
}
.stage__title {
font-family: var(--font-serif);
font-size: clamp(1.12rem, 1.9vw, 1.35rem);
color: var(--navy-800);
margin: 0 0 0.7rem;
letter-spacing: 0.04em;
}
.stage__text {
font-size: 0.94rem;
line-height: 1.9;
color: var(--ink-soft);
margin: 0;
}
.on-dark .stage {
border-color: var(--line-dark);
}
.on-dark .stage__title {
color: #fff;
}
.on-dark .stage__text {
color: var(--ink-on-dark-soft);
}
/* 阶段细线连接 */
.stage-path {
position: relative;
}
.stage-path::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 1px;
height: 100%;
background: var(--line);
display: none;
}
/* --------------------------------------------------------------------------
12. 阶梯 / 路径（合作路径）
-------------------------------------------------------------------------- */
.ladder {
list-style: none;
margin: 0;
padding: 0;
counter-reset: ladder;
}
.ladder li {
position: relative;
padding: 1.15rem 0 1.15rem 3.25rem;
border-bottom: 1px solid var(--line);
font-size: 0.98rem;
color: var(--navy-700);
counter-increment: ladder;
}
.ladder li::before {
content: counter(ladder, decimal-leading-zero);
position: absolute;
left: 0;
top: 1.15rem;
font-family: var(--font-num);
font-size: 0.82rem;
color: var(--gold);
letter-spacing: 0.1em;
}
.ladder li::after {
content: "";
position: absolute;
left: 2.15rem;
top: 0;
bottom: 0;
width: 1px;
background: var(--line);
}
.ladder li:last-child {
border-bottom: 0;
}
.ladder__note {
display: block;
font-size: 0.85rem;
color: var(--ink-mute);
margin-top: 0.3rem;
line-height: 1.8;
}
.on-dark .ladder li {
border-color: var(--line-dark);
color: var(--ink-on-dark-soft);
}
.on-dark .ladder li::after {
background: var(--line-dark);
}
/* --------------------------------------------------------------------------
13. 手风琴（FAQ）
-------------------------------------------------------------------------- */
.accordion {
border-top: 1px solid var(--line);
}
.acc-item {
border-bottom: 1px solid var(--line);
}
.acc-trigger {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem;
padding: 1.35rem 0;
text-align: left;
font-size: 1rem;
font-weight: 500;
color: var(--navy-800);
line-height: 1.7;
transition: color 0.3s var(--ease);
}
.acc-trigger:hover {
color: var(--navy-600);
}
.acc-trigger__icon {
position: relative;
flex: none;
width: 14px;
height: 14px;
margin-top: 0.55em;
}
.acc-trigger__icon::before,
.acc-trigger__icon::after {
content: "";
position: absolute;
background: var(--gold);
transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.acc-trigger__icon::before {
left: 0;
top: 6.25px;
width: 14px;
height: 1.5px;
}
.acc-trigger__icon::after {
left: 6.25px;
top: 0;
width: 1.5px;
height: 14px;
}
.acc-trigger[aria-expanded="true"] .acc-trigger__icon::after {
transform: rotate(90deg);
opacity: 0;
}
.acc-panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.42s var(--ease);
}
.acc-panel.is-open {
grid-template-rows: 1fr;
}
.acc-panel__inner {
overflow: hidden;
}
.acc-panel__body {
padding: 0 0 1.6rem;
font-size: 0.95rem;
line-height: 1.95;
color: var(--ink-soft);
max-width: 68ch;
}
.acc-panel__body p:last-child {
margin-bottom: 0;
}
/* --------------------------------------------------------------------------
14. 表单
-------------------------------------------------------------------------- */
.form {
display: grid;
gap: 1.5rem;
}
@media (min-width: 700px) {
.form__row {
display: grid;
/* auto-fit + minmax：当某一行只剩一个可见字段时
（按身份隐藏了另一个），它会自动撑满整行，不会留下半格空白。 */
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
}
}
.field {
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.field--full {
grid-column: 1 / -1;
}
.field label {
font-size: 0.86rem;
font-weight: 500;
color: var(--navy-700);
letter-spacing: 0.04em;
}
.field label .req {
color: var(--gold);
margin-left: 0.25rem;
}
.req-mark {
color: var(--gold);
}
.field .hint {
font-size: 0.78rem;
color: var(--ink-mute);
line-height: 1.7;
}
.field input,
.field select,
.field textarea {
width: 100%;
font-family: var(--font-sans);
font-size: 0.98rem;
color: var(--ink);
background: transparent;
border: 0;
border-bottom: 1px solid var(--line-strong);
border-radius: 0;
padding: 0.7rem 0.15rem;
transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
-webkit-appearance: none;
appearance: none;
line-height: 1.6;
}
.field textarea {
min-height: 120px;
resize: vertical;
border: 1px solid var(--line-strong);
border-radius: var(--r-sm);
padding: 0.85rem 1rem;
background: var(--paper);
}
.field select {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23d0a94a' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.25rem center;
padding-right: 1.75rem;
}
.field input:hover,
.field select:hover {
border-bottom-color: var(--navy-600);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-bottom-color: var(--gold);
border-bottom-width: 1px;
box-shadow: 0 1px 0 0 var(--gold);
}
.field textarea:focus {
border-color: var(--gold);
box-shadow: 0 0 0 1px var(--gold-line);
}
.field input::placeholder,
.field textarea::placeholder {
color: #a9b1b9;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
border-color: #b4534a;
}
.field__error {
font-size: 0.78rem;
color: #b4534a;
min-height: 0;
display: none;
}
.field.has-error .field__error {
display: block;
}
/* 字数统计（导师申请表的长文本字段）。
右对齐放在字段下方，用等宽数字 —— 否则计数从 9 跳到 10 时整行会左右抖动。 */
.field__count {
display: block;
margin-top: 0.35rem;
font-size: 0.78rem;
line-height: 1.5;
color: var(--ink-mute);
text-align: right;
font-variant-numeric: tabular-nums;
}
.field__count.is-near-limit {
color: var(--gold);
}
.field__count.is-over {
color: #b4534a;
}
/* 说明文字与字数统计排在同一行：左边是提示，右边是计数。
否则计数会单独占一行，看起来像是提示的附属文字，而不是输入框的。 */
.field__foot {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.9rem;
}
.field__foot .hint {
flex: 1 1 auto;
min-width: 0;
}
.field__foot .field__count {
flex: 0 0 auto;
margin-top: 0;
}
.form__foot {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
align-items: center;
justify-content: space-between;
padding-top: 0.5rem;
border-top: 1px solid var(--line);
margin-top: 0.5rem;
}
/* 复选框组（多选项目意向） */
.check-group {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
gap: 0.15rem 1.25rem;
padding-top: 0.35rem;
}
.check-group label {
display: flex;
align-items: flex-start;
gap: 0.55rem;
font-size: 0.9rem;
font-weight: 400;
letter-spacing: 0.02em;
color: var(--ink-soft);
cursor: pointer;
padding: 0.4rem 0;
line-height: 1.6;
}
.check-group input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
flex: none;
margin: 0.3em 0 0;
border: 1px solid var(--line-strong);
border-radius: var(--r-xs);
background: var(--paper);
position: relative;
cursor: pointer;
transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.check-group input[type="checkbox"]:hover {
border-color: var(--navy-600);
}
.check-group input[type="checkbox"]:checked {
background: var(--navy-800);
border-color: var(--navy-800);
}
.check-group input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 5px;
top: 1px;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 1.5px 1.5px 0;
transform: rotate(45deg);
}
.form__note {
font-size: 0.8rem;
color: var(--ink-mute);
line-height: 1.75;
max-width: 46ch;
}
/* 蜜罐字段：给自动提交程序看的陷阱。
真人看不见，也不会被键盘 Tab 到（配合 tabindex="-1"）。
不要用 display:none —— 部分爬虫会跳过隐藏元素，反而失效。 */
.hp-field {
position: absolute !important;
left: -9999px !important;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
/* 以 fieldset 承载的单选 / 多选组 */
.field--choice {
border: 0;
padding: 0;
margin: 0;
min-width: 0;
}
.field--choice legend {
font-size: 0.86rem;
font-weight: 500;
color: var(--navy-700);
letter-spacing: 0.04em;
padding: 0;
margin-bottom: 0.75rem;
}
.field--choice legend .req {
color: var(--gold);
margin-left: 0.25rem;
}
.field--choice .hint {
font-size: 0.78rem;
color: var(--ink-mute);
line-height: 1.7;
margin-top: 0.6rem;
}
.field--choice.has-error .choice-group label,
.field--choice.has-error .check-group label {
border-color: var(--danger, #b4453a);
}
/* 单选组：横向可换行的胶囊按钮 */
.choice-group {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.choice-group label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 0.9rem;
border: 1px solid var(--line-strong);
border-radius: var(--r-sm);
font-size: 0.88rem;
color: var(--ink-soft);
cursor: pointer;
transition: border-color var(--dur) var(--ease),
background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.choice-group label:hover {
border-color: var(--navy-500);
}
.choice-group input[type="radio"] {
appearance: none;
-webkit-appearance: none;
width: 14px;
height: 14px;
flex: none;
border: 1px solid var(--line-strong);
border-radius: 50%;
position: relative;
margin: 0;
background: transparent;
cursor: pointer;
}
.choice-group input[type="radio"]:checked {
border-color: var(--navy-800);
background: var(--navy-800);
box-shadow: inset 0 0 0 2.5px var(--ivory);
}
/* 选中态的胶囊整体高亮，让「我选了哪个」一眼可见 */
.choice-group label:has(input[type="radio"]:checked) {
border-color: var(--navy-800);
background: rgba(15, 45, 74, 0.04);
color: var(--navy-800);
}
/* 同意勾选：整行可点击 */
.check-inline {
display: flex;
align-items: flex-start;
gap: 0.6rem;
font-size: 0.84rem;
line-height: 1.7;
color: var(--ink-soft);
font-weight: 400 !important;
letter-spacing: 0 !important;
cursor: pointer;
}
.check-inline input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 16px;
height: 16px;
flex: none;
margin-top: 0.18rem;
border: 1px solid var(--line-strong);
border-radius: var(--r-xs, 2px);
position: relative;
background: transparent;
cursor: pointer;
}
.check-inline input[type="checkbox"]:checked {
background: var(--navy-800);
border-color: var(--navy-800);
}
.check-inline input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 5px;
top: 1px;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 1.5px 1.5px 0;
transform: rotate(45deg);
}
.check-inline a {
color: var(--navy-700);
text-decoration: underline;
text-underline-offset: 2px;
}
.check-inline a:hover {
color: var(--gold-deep, var(--gold));
}
/* 提交结果 */
.form-status {
border: 1px solid var(--gold-line);
background: var(--gold-wash);
border-radius: var(--r-md);
padding: clamp(1.25rem, 2.5vw, 1.75rem);
display: none;
}
.form-status.is-visible {
display: block;
}
.form-status h3 {
font-size: 1.05rem;
margin-bottom: 0.5rem;
}
.form-status p {
font-size: 0.92rem;
color: var(--ink-soft);
}
.form-status pre {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-sm);
padding: 1rem;
font-size: 0.8rem;
line-height: 1.7;
white-space: pre-wrap;
word-break: break-word;
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
color: var(--ink-soft);
max-height: 240px;
overflow: auto;
margin: 1rem 0;
}
.copy-feedback {
font-size: 0.8rem;
color: var(--navy-600);
margin-left: 0.75rem;
}
/* 联系信息块 */
.contact-list {
list-style: none;
margin: 0;
padding: 0;
}
.contact-list li {
padding: 1.1rem 0;
border-bottom: 1px solid var(--line);
}
.on-dark .contact-list li {
border-color: var(--line-dark);
}
.contact-list dt,
.contact-list__label {
font-size: 0.76rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold);
display: block;
margin-bottom: 0.4rem;
}
.contact-list__value {
font-size: 1rem;
color: var(--navy-800);
}
.on-dark .contact-list__value {
color: var(--ink-on-dark);
}
/* --------------------------------------------------------------------------
15. 引用文献
-------------------------------------------------------------------------- */
.refs {
list-style: none;
margin: 0;
padding: 0;
counter-reset: ref;
}
.refs li {
position: relative;
padding: 1.15rem 0 1.15rem 2.6rem;
border-bottom: 1px solid var(--line);
font-size: 0.88rem;
line-height: 1.85;
color: var(--ink-soft);
counter-increment: ref;
}
.refs li::before {
content: "[" counter(ref) "]";
position: absolute;
left: 0;
top: 1.15rem;
font-family: var(--font-num);
font-size: 0.82rem;
color: var(--gold);
}
.refs li:last-child {
border-bottom: 0;
}
.refs cite {
font-style: italic;
color: var(--navy-700);
}
.on-dark .refs li {
border-color: var(--line-dark);
color: var(--ink-on-dark-soft);
}
.on-dark .refs cite {
color: var(--ink-on-dark);
}
.refs-disclaimer {
font-size: 0.82rem;
color: var(--ink-mute);
line-height: 1.85;
border-top: 1px solid var(--line);
padding-top: 1.25rem;
margin-top: 0.5rem;
}
.on-dark .refs-disclaimer {
border-color: var(--line-dark);
color: var(--ink-on-dark-mute);
}
/* --------------------------------------------------------------------------
16. CTA 区
-------------------------------------------------------------------------- */
.cta-band {
background: var(--navy-800);
color: var(--ink-on-dark);
position: relative;
overflow: hidden;
}
.cta-band::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
80% 120% at 90% 100%,
rgba(143, 168, 199, 0.18),
transparent 62%
);
}
.cta-band__inner {
position: relative;
padding-block: clamp(3.25rem, 7vw, 5.5rem);
display: grid;
gap: clamp(1.75rem, 3.5vw, 3rem);
align-items: center;
}
@media (min-width: 900px) {
.cta-band__inner {
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}
}
.cta-band h2 {
color: #fff;
margin-bottom: 0.75rem;
max-width: 24ch;
}
.cta-band p {
color: var(--ink-on-dark-soft);
max-width: 48ch;
margin: 0;
}
.cta-band .btn-row {
justify-content: flex-start;
}
@media (min-width: 900px) {
.cta-band .btn-row {
justify-content: flex-end;
}
}
/* --------------------------------------------------------------------------
17. 页脚
-------------------------------------------------------------------------- */
.site-footer {
background: var(--navy-900);
color: var(--ink-on-dark-soft);
font-size: 0.88rem;
}
.site-footer__main {
padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
display: grid;
gap: clamp(2rem, 4vw, 3.5rem);
grid-template-columns: 1fr;
}
@media (min-width: 760px) {
.site-footer__main {
grid-template-columns: 1.4fr 1fr 1fr;
}
}
@media (min-width: 1080px) {
.site-footer__main {
grid-template-columns: 1.6fr 1fr 1fr 1fr;
}
}
.site-footer__brand .brand__logo {
width: 156px;
}
.site-footer__brand .brand__sub {
color: var(--ink-on-dark-mute);
}
.site-footer__brand .brand__tagline {
color: var(--gold-soft);
}
.site-footer__desc {
margin-top: 1.25rem;
max-width: 34ch;
line-height: 1.9;
color: var(--ink-on-dark-mute);
font-size: 0.86rem;
}
.footer-col__title {
font-size: 0.76rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-soft);
margin: 0 0 1.1rem;
font-family: var(--font-sans);
font-weight: 600;
}
.footer-col ul {
list-style: none;
margin: 0;
padding: 0;
}
.footer-col li {
margin-bottom: 0.7rem;
}
.footer-col a {
color: var(--ink-on-dark-soft);
font-size: 0.86rem;
transition: color 0.3s var(--ease);
}
.footer-col a:hover {
color: #fff;
}
.site-footer__bottom {
border-top: 1px solid var(--line-dark);
padding-block: 1.5rem 2rem;
display: flex;
flex-wrap: wrap;
gap: 0.75rem 2rem;
justify-content: space-between;
align-items: center;
font-size: 0.78rem;
color: var(--ink-on-dark-mute);
}
.site-footer__bottom p {
margin: 0;
color: inherit;
font-size: inherit;
}
/* --------------------------------------------------------------------------
18. 滚动揭示
--------------------------------------------------------------------------
重要：初始隐藏状态只在 存在时生效。
该类由
中的内联脚本添加。这样即使 JavaScript 被禁用或加载失败，
页面内容也始终可见（对 SEO、无障碍与老旧浏览器都更安全）。
-------------------------------------------------------------------------- */
.js .reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
will-change: opacity, transform;
}
.js .reveal.is-in {
opacity: 1;
transform: none;
}
.reveal--d1 {
transition-delay: 0.09s;
}
.reveal--d2 {
transition-delay: 0.18s;
}
.reveal--d3 {
transition-delay: 0.27s;
}
.reveal--d4 {
transition-delay: 0.36s;
}
.reveal--d5 {
transition-delay: 0.45s;
}
.reveal--d6 {
transition-delay: 0.54s;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
/* 与 .js .reveal 同特异性但位置更靠后，因此可覆盖 */
.js .reveal {
opacity: 1;
transform: none;
transition: none;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* --------------------------------------------------------------------------
19. 工具类
-------------------------------------------------------------------------- */
.text-center {
text-align: center;
}
.mt-0 {
margin-top: 0;
}
.mt-1 {
margin-top: 1rem;
}
.mt-2 {
margin-top: 2rem;
}
.mt-3 {
margin-top: 3rem;
}
.mb-0 {
margin-bottom: 0;
}
.mb-2 {
margin-bottom: 2rem;
}
.max-narrow {
max-width: 68ch;
}
.nowrap {
white-space: nowrap;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* 锚点偏移（避免被吸顶导航遮挡） */
[id] {
scroll-margin-top: 92px;
}
/* --------------------------------------------------------------------------
19b. 版面修饰类（避免使用行内样式）
-------------------------------------------------------------------------- */
.max-46ch {
max-width: 46ch;
}
.max-54ch {
max-width: 54ch;
}
.max-62ch {
max-width: 62ch;
}
.max-70ch {
max-width: 70ch;
}
/* 深色底上的图表容器 */
.diagram-wrap--dark {
background: transparent;
border-color: var(--line-dark);
}
.diagram-caption--dark {
border-color: var(--line-dark);
color: var(--ink-on-dark-mute);
}
/* 强调分隔线 */
.chip-list--strong {
border-top-color: var(--line-strong);
}
.on-dark .chip-list--strong {
border-top-color: var(--line-dark);
}
/* 卡片：内容垂直居中（用于 CTA 型卡片） */
.card--center {
display: flex;
flex-direction: column;
justify-content: center;
}
.card--center h3 {
margin-bottom: 0.9rem;
}
.card--center p {
margin-bottom: 1.4rem;
}
/* 卡片内的角色/标签行 */
.card__role {
font-size: 0.85rem;
letter-spacing: 0.06em;
color: var(--gold);
margin-bottom: 1rem;
display: block;
}
/* 小型说明文字 */
.note-xs {
font-size: 0.82rem;
color: var(--ink-mute);
line-height: 1.8;
}
.on-dark .note-xs {
color: var(--ink-on-dark-mute);
}
.note-sm {
font-size: 0.9rem;
color: var(--ink-mute);
line-height: 1.85;
}
.on-dark .note-sm {
color: var(--ink-on-dark-mute);
}
/* 事实条中的来源署名 */
.factbar__source {
display: block;
margin-top: 0.5rem;
font-size: 0.8rem;
color: var(--ink-mute);
letter-spacing: 0.03em;
}
/* 事实条中的单位后缀 */
.factbar__unit {
font-size: 0.45em;
letter-spacing: 0.04em;
}
/* 顶部细金线（用于重点区块的起始） */
.gold-rule-top {
border-top: 1px solid var(--gold-line);
}
/* 空状态 / 待发布 */
.placeholder {
border: 1px dashed var(--line-strong);
border-radius: var(--r-md);
padding: clamp(1.5rem, 3vw, 2.25rem);
background: rgba(255, 255, 255, 0.55);
}
.placeholder h3 {
font-size: 1.05rem;
margin-bottom: 0.5rem;
}
.placeholder p {
font-size: 0.92rem;
margin-bottom: 0;
}
.placeholder__label {
display: inline-block;
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 0.85rem;
}
/* --------------------------------------------------------------------------
19c. 响应式可见性
用于：复杂图表在窄屏上隐藏（信息由同页的列表/卡片承载，不丢失内容）
-------------------------------------------------------------------------- */
.hide-below-760 {
display: none;
}
@media (min-width: 760px) {
.hide-below-760 {
display: block;
}
}
.hide-above-760 {
display: block;
}
@media (min-width: 760px) {
.hide-above-760 {
display: none;
}
}
/* --------------------------------------------------------------------------
20. 打印
-------------------------------------------------------------------------- */
@media print {
.site-header,
.nav-drawer,
.cta-band,
.site-footer {
display: none;
}
body {
background: #fff;
font-size: 11pt;
}
.section,
.page-hero__inner {
padding-block: 1.5rem;
}
.js .reveal,
.reveal {
opacity: 1;
transform: none;
}
}
/* =====================================================================
关于我们 · 团队
---------------------------------------------------------------------
两位联合发起人是这一页的视觉主体，所以：
· 每人独占一段，左右分栏 —— 肖像位在侧，文字是主体
· 层级靠字号与留白建立，不靠色块和边框堆叠
· 金色只用于编号、细分隔线、关键词，不做大色块
· 移动端一律单栏，肖像位在文字之前
===================================================================== */
.mt-4 { margin-top: 4rem; }
.mt-5 { margin-top: 5rem; }
/* 开场：不加边框，靠字号与留白 */
.team-intro { max-width: 46rem; }
.team-intro p { color: var(--ink-soft); }
.team-intro .lede { color: var(--ink); }
.team-domains { margin-top: clamp(2rem, 5vw, 3.25rem); }
/* 专业基础：四条，用顶部细线分组，不用卡片 */
.basis {
border-top: 1px solid var(--line);
padding-top: 1.5rem;
}
.basis__num {
display: block;
font-family: var(--font-num);
font-size: 0.82rem;
letter-spacing: 0.16em;
color: var(--gold);
margin-bottom: 0.6rem;
}
.basis h3 { font-size: 1.02rem; margin-bottom: 0.6rem; }
.basis p { font-size: 0.95rem; color: var(--ink-soft); }
.basis p + p { margin-top: 0.7rem; }
/* 人物：肖像位在侧，文字为主体 */
.person {
display: grid;
gap: clamp(2rem, 5vw, 4rem);
grid-template-columns: 1fr;
align-items: start;
}
@media (min-width: 960px) {
.person { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
.person--flip .person__aside { order: 2; }
.person--flip .person__body { order: 1; }
}
/* 肖像位。
放入真实照片时，把 ![]()
放进 .portrait 内部即可，样式会自动适配。
现在是一块有设计的底色板 —— 刻意不做成「图片加载失败」的样子。 */
.portrait {
position: relative;
aspect-ratio: 3 / 4;
display: grid;
place-items: center;
overflow: hidden;
border-radius: var(--r-sm);
background:
radial-gradient(120% 80% at 30% 0%, rgba(208, 169, 74, 0.16), transparent 62%),
linear-gradient(160deg, var(--navy-700), var(--navy-900));
}
.portrait::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: var(--gold);
opacity: 0.85;
}
.portrait__mark {
font-family: var(--font-serif);
font-size: clamp(2.4rem, 6vw, 3.4rem);
letter-spacing: 0.08em;
color: rgba(238, 242, 246, 0.9);
}
.portrait img {
width: 100%;
height: 100%;
object-fit: cover;
}
.person__domains { margin-top: 1rem; }
.person__domains li { font-size: 0.8rem; padding: 0.5rem 0; }
.person__body { max-width: 46rem; }
.person__name { font-size: clamp(1.4rem, 3vw, 1.85rem); }
.person__role {
display: block;
margin-top: 0.35rem;
font-size: 0.88rem;
letter-spacing: 0.04em;
color: var(--ink-mute);
}
.person__lead {
margin-top: 1.1rem;
padding-top: 1.1rem;
border-top: 1px solid var(--line);
font-family: var(--font-serif);
font-size: 1.06rem;
line-height: 1.7;
color: var(--navy-700);
}
.person__body p { color: var(--ink-soft); }
.person__body p + p { margin-top: 0.9rem; }
.person__point {
border-left: 2px solid var(--gold);
padding-left: 1rem;
color: var(--navy-700);
font-size: 1rem;
}
.person__closing {
margin-top: 1.4rem;
padding-top: 1.2rem;
border-top: 1px solid var(--line);
font-family: var(--font-serif);
font-size: 1.02rem;
color: var(--navy-700);
}
/* 问句列表：短横线引导，不用项目符号（更像编辑排版，不像清单） */
.list-qs,
.list-becoming {
list-style: none;
margin: 1rem 0 0;
padding: 0;
}
.list-qs li {
position: relative;
padding: 0.45rem 0 0.45rem 1.1rem;
font-size: 0.95rem;
color: var(--ink-soft);
}
.list-qs li::before {
content: "";
position: absolute;
left: 0;
top: 1.05em;
width: 6px;
height: 1px;
background: var(--gold);
}
.list-becoming li {
padding: 0.3rem 0;
font-family: var(--font-serif);
font-size: 1.02rem;
color: var(--navy-700);
}
.list-becoming--lg li { font-size: 1.1rem; padding: 0.42rem 0; }
/* 互补：深色带 */
.pair { border-top: 1px solid var(--line-dark); padding-top: 1.4rem; }
.pair h3 { font-size: 1.02rem; }
.pair p { font-size: 0.95rem; color: var(--ink-on-dark-soft); }
.pair__path {
margin-top: clamp(2rem, 5vw, 3rem);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.75rem;
font-family: var(--font-serif);
font-size: clamp(0.95rem, 2.2vw, 1.15rem);
color: var(--ink-on-dark);
}
.pair__path i { font-style: normal; color: var(--gold-soft); }
/* =====================================================================
21. 品牌版式层 · Editorial Layer
---------------------------------------------------------------------
这一层要解决的问题：原先把所有内容都装进「卡片」里，于是整站看起来
像一套模板 —— 卡片 + 卡片 + 卡片。
编辑式版式的做法正好相反：
· 层级靠字号、字距、留白和细线建立，不靠色块与边框
· 大标题是版面主体，不放进任何容器里
· 通栏与不对称分栏交替出现，制造阅读节奏
· 只有在「确实需要一块可被指认的边界」时才用卡片
所以这一层提供的是「排版与版面原语」，不是新的卡片皮肤。
它同时被首页、内页、以及未来的物料共用。
===================================================================== */
:root {
/* 展示级字号。--d-1 用于首页主张，--d-2/--d-3 用于章节主张。
大字号必须收紧字距，否则中文会显得松散、英文会显得业余。 */
/* 下限 1.72rem 是量出来的，不是拍的：
「未来，不只是考得更好。」共 11 个汉字，字宽约 1em。
390px 视口减去左右各 20px 的留白后可用 350px，
11 × 27.5px = 303px，能整句放在一行。
下限再大一点，就会在「不只 / 是」中间断开 —— 中文读到一半断词很别扭。 */
--d-1: clamp(1.72rem, 7.2vw, 6rem);
--d-2: clamp(1.75rem, 5.2vw, 3.9rem);
--d-3: clamp(1.5rem, 3.7vw, 2.6rem);
--d-4: clamp(1.24rem, 2.3vw, 1.68rem);
--tk-tight: -0.01em;
--tk-tighter: -0.028em;
--tk-wide: 0.2em;
--tk-wider: 0.32em;
/* 编辑式版心比正文版心更宽 —— 大标题需要横向空间 */
--wrap-ed: 1400px;
/* 更深的一层海军蓝，用于通栏与页脚收口 */
--navy-950: #061320;
/* 电光蓝：只在极小面积上使用（进度、焦点、一个词） */
--electric: #2f7fd4;
}
.wrap--ed {
max-width: var(--wrap-ed);
}
/* --------------------------------------------------------------------------
21.1 展示级排版
-------------------------------------------------------------------------- */
/* 中文展示标题：衬线、紧字距、不设容器 */
.display {
font-family: var(--font-serif);
font-weight: 600;
color: var(--navy-800);
line-height: 1.14;
letter-spacing: var(--tk-tighter);
margin: 0;
text-wrap: balance;
}
.display--1 { font-size: var(--d-1); }
.display--2 { font-size: var(--d-2); }
.display--3 { font-size: var(--d-3); line-height: 1.22; letter-spacing: var(--tk-tight); }
.display--4 { font-size: var(--d-4); line-height: 1.42; letter-spacing: var(--tk-tight); }
.on-dark .display { color: #fff; }
.display em {
font-style: normal;
color: var(--gold);
}
.on-dark .display em {
color: var(--gold-soft);
}
/* 拉丁小型大写行：用来做「铭文式」的定位陈述，不做装饰性英文 */
.display-en {
display: block;
font-family: var(--font-sans);
font-size: clamp(0.68rem, 0.95vw, 0.78rem);
font-weight: 600;
letter-spacing: var(--tk-wider);
text-transform: uppercase;
line-height: 1.7;
color: var(--gold);
margin: 0;
}
.on-dark .display-en {
color: var(--gold-soft);
}
.display-en--mute {
letter-spacing: var(--tk-wide);
color: var(--ink-mute);
}
.on-dark .display-en--mute {
color: var(--ink-on-dark-mute);
}
/* 巨型拉丁展示标题：就是「BECOME / WHO YOU / CAN BE.」那一类。
它本身就是版面的主体，因此不允许放进卡片。 */
.display-xl {
font-family: var(--font-serif);
font-weight: 600;
font-size: var(--d-3);
line-height: 1.04;
letter-spacing: var(--tk-tighter);
text-transform: uppercase;
color: var(--navy-800);
margin: 0;
}
.display-xl--lg { font-size: var(--d-2); }
.display-xl span { display: block; }
.on-dark .display-xl { color: #fff; }
.display-xl em {
font-style: normal;
color: var(--gold);
}
.on-dark .display-xl em {
color: var(--gold-soft);
}
/* --------------------------------------------------------------------------
21.2 章节标尺
--------------------------------------------------------------------------
一条细线 + 一个编号 + 一个标签。替代「居中眉标 + 居中标题」那种
一眼就能看出是模板的章节头。
-------------------------------------------------------------------------- */
.rule {
display: flex;
align-items: center;
gap: clamp(0.75rem, 1.6vw, 1.25rem);
margin-bottom: clamp(1.75rem, 4vw, 3rem);
}
.rule__num {
font-family: var(--font-num);
font-size: 0.76rem;
letter-spacing: 0.16em;
color: var(--gold);
flex: none;
}
.rule__label {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: var(--tk-wider);
text-transform: uppercase;
color: var(--ink-mute);
/* flex: none 时，长英文标签（如 "Why whole-person development"）
在大写 + 0.32em 字距下约 326px 宽，会在窄屏把整页撑出横向滚动条。
允许收缩到 min-content 后按词换行即可消除，宽屏下不收缩、渲染完全不变。 */
flex: 0 1 auto;
min-width: 0;
}
.rule__line {
flex: 1 1 auto;
height: 1px;
min-width: 1.5rem;
background: var(--line);
}
.on-dark .rule__label {
color: var(--ink-on-dark-mute);
}
.on-dark .rule__line {
background: var(--line-dark);
}
/* --------------------------------------------------------------------------
21.3 通栏
--------------------------------------------------------------------------
从 .wrap 里「破框」到视口两侧。
算法：父容器内容宽 W、视口宽 V 时，左右各外扩 (V-W)/2，
因此元素正好从 x=0 铺到 x=V。body 上已有 overflow-x: hidden 兜底。
-------------------------------------------------------------------------- */
.bleed {
width: 100vw;
max-width: 100vw;
margin-inline: calc(50% - 50vw);
}
.bleed__inner {
width: 100%;
max-width: var(--wrap-ed);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* --------------------------------------------------------------------------
21.4 编辑式分栏：侧栏 + 主体
--------------------------------------------------------------------------
不对称分栏是「编辑感」最主要的来源。正文永远不是居中的一列，
而是「一条标注栏 + 一列正文」。
-------------------------------------------------------------------------- */
.ed {
display: grid;
grid-template-columns: 1fr;
gap: clamp(1.5rem, 3vw, 2.25rem);
}
.ed__main {
min-width: 0;
}
@media (min-width: 1000px) {
.ed {
grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
column-gap: clamp(2rem, 5vw, 5rem);
}
.ed--rail-lg {
grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
}
.ed--flip {
grid-template-columns: minmax(0, 1fr) minmax(0, 12rem);
}
.ed--flip > .ed__rail {
order: 2;
}
.ed--flip > .ed__main {
order: 1;
}
.ed__rail-sticky {
position: sticky;
top: 108px;
}
}
/* --------------------------------------------------------------------------
21.5 编辑式列表：替代卡片网格
--------------------------------------------------------------------------
一行一条，细线分隔。这是整站「去卡片化」的主力元件：
七项项目体系、五项学校合作模式，都由它承载。
-------------------------------------------------------------------------- */
/* 侧栏里的 .chip-list 必须退成单栏。
.chip-list 本身是 repeat(auto-fill, minmax(150px, 1fr))，
在 320px 的侧栏里会静默变成两列 160px 的格子 ——
「学期内 · 班会课与德育课时段」这种 15 字条目被压成 3 行，
看起来像排版事故。单栏之后每条占满 320px，正好一行。
注意：这是 CSS 兜底，不是可选优化，不要删。 */
.ed__rail .chip-list {
grid-template-columns: 1fr;
}
.ed-list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--line);
}
.ed-list__item {
display: grid;
grid-template-columns: 1fr;
gap: 0.4rem 1.5rem;
padding: clamp(1.3rem, 2.6vw, 1.85rem) 0;
border-bottom: 1px solid var(--line);
transition: border-color 0.45s var(--ease);
}
@media (min-width: 820px) {
.ed-list__item {
grid-template-columns: 3.25rem minmax(0, 1fr) minmax(0, 1.3fr);
align-items: baseline;
}
}
.ed-list__item:hover {
border-bottom-color: var(--gold);
}
.ed-list__num {
font-family: var(--font-num);
font-size: 0.8rem;
letter-spacing: 0.16em;
color: var(--gold);
}
.ed-list__title {
font-family: var(--font-serif);
font-size: clamp(1.06rem, 1.85vw, 1.28rem);
font-weight: 600;
line-height: 1.45;
letter-spacing: 0.03em;
color: var(--navy-800);
margin: 0 0 0.35rem;
}
.ed-list__en {
display: block;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: var(--tk-wide);
text-transform: uppercase;
color: var(--ink-mute);
}
.ed-list__text {
font-size: 0.95rem;
line-height: 1.9;
color: var(--ink-soft);
margin: 0;
}
.on-dark .ed-list,
.on-dark .ed-list__item {
border-color: var(--line-dark);
}
.on-dark .ed-list__title {
color: #fff;
}
.on-dark .ed-list__text {
color: var(--ink-on-dark-soft);
}
.on-dark .ed-list__en {
color: var(--ink-on-dark-mute);
}
/* --------------------------------------------------------------------------
21.6 通栏引语
-------------------------------------------------------------------------- */
.quote-xl {
position: relative;
margin: 0;
padding-left: clamp(1.1rem, 2.6vw, 2rem);
border-left: 2px solid var(--gold);
font-family: var(--font-serif);
font-size: clamp(1.3rem, 3.2vw, 2.35rem);
line-height: 1.55;
letter-spacing: var(--tk-tight);
color: var(--navy-800);
max-width: 26em;
}
.on-dark .quote-xl {
color: #fff;
}
.quote-xl cite {
display: block;
margin-top: clamp(1rem, 2vw, 1.5rem);
font-family: var(--font-sans);
font-size: 0.72rem;
font-style: normal;
font-weight: 600;
letter-spacing: var(--tk-wide);
text-transform: uppercase;
color: var(--ink-mute);
}
.on-dark .quote-xl cite {
color: var(--ink-on-dark-mute);
}
/* --------------------------------------------------------------------------
21.7 滚动叙事：细线生长
--------------------------------------------------------------------------
与 .reveal 同时使用（.reveal 负责被 IntersectionObserver 观察到），
但只横向生长，不下落。特异性高于 .js .reveal，因此不会被它覆盖。
-------------------------------------------------------------------------- */
.js .reveal.reveal-line {
opacity: 1;
transform: scaleX(0);
transform-origin: left center;
transition: transform 1.15s var(--ease);
will-change: transform;
}
.js .reveal.reveal-line.is-in {
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.js .reveal.reveal-line {
transform: none;
transition: none;
}
}
/* --------------------------------------------------------------------------
21.8 数据点
--------------------------------------------------------------------------
结构就绪，但默认不启用 —— 数字必须真实。
用法见 index.html 里注释掉的 .metrics 区块，以及 README。
-------------------------------------------------------------------------- */
.metrics {
display: grid;
grid-template-columns: 1fr;
border-top: 1px solid var(--line-dark);
}
@media (min-width: 700px) {
.metrics {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.metrics__item {
padding: clamp(1.35rem, 2.6vw, 1.9rem) clamp(1rem, 2vw, 1.6rem) clamp(1.35rem, 2.6vw, 1.9rem) 0;
border-bottom: 1px solid var(--line-dark);
}
@media (min-width: 700px) {
.metrics__item {
border-bottom: 0;
border-right: 1px solid var(--line-dark);
}
.metrics__item:last-child {
border-right: 0;
}
}
.metrics__num {
display: block;
font-family: var(--font-num);
font-size: clamp(1.8rem, 3.6vw, 2.5rem);
line-height: 1;
letter-spacing: 0.01em;
color: var(--gold-soft);
margin-bottom: 0.7rem;
}
.metrics__label {
font-size: 0.86rem;
line-height: 1.75;
color: var(--ink-on-dark-soft);
}
/* --------------------------------------------------------------------------
21.9 索引式清单
--------------------------------------------------------------------------
把「卡片网格」降级为「印刷索引」。
.ed-list 承载的是「有先后顺序」的条目（合作路径、项目体系），一条一行；
这个元件承载的是「彼此并列」的短条目（合作领域、我们不做什么），
两栏或三栏并排。两者合起来，就是整站替代卡片网格的全部手段。
分隔靠细线，不靠底色 / 圆角 / 阴影 —— 一旦给 .idx__item 加上
background 或 border-radius，它立刻变回卡片，这个元件就失去意义了。
-------------------------------------------------------------------------- */
.idx {
display: grid;
grid-template-columns: 1fr;
border-top: 1px solid var(--line);
}
@media (min-width: 720px) {
.idx {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: clamp(2rem, 4vw, 3.5rem);
}
}
@media (min-width: 1200px) {
.idx--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.idx__item {
padding: clamp(1.15rem, 2.2vw, 1.6rem) 0;
border-bottom: 1px solid var(--line);
transition: border-color 0.45s var(--ease);
}
.idx__item:hover {
border-bottom-color: var(--gold);
}
.idx__head {
display: flex;
align-items: baseline;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.idx__num {
flex: none;
font-family: var(--font-num);
font-size: 0.74rem;
letter-spacing: 0.16em;
color: var(--gold);
}
.idx__title {
font-family: var(--font-serif);
font-size: clamp(1rem, 1.6vw, 1.14rem);
font-weight: 600;
line-height: 1.45;
letter-spacing: 0.03em;
color: var(--navy-800);
margin: 0;
}
.idx__en {
display: block;
margin-bottom: 0.45rem;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: var(--tk-wide);
text-transform: uppercase;
color: var(--ink-mute);
}
.idx__text {
font-size: 0.92rem;
line-height: 1.88;
color: var(--ink-soft);
margin: 0;
}
/* 深色区块：.on-dark h3 / .on-dark p 的特异性是 (0,1,1)，
高于单类选择器 (0,1,0)，所以这里必须写成 (0,2,0) 才生效。 */
.on-dark .idx,
.on-dark .idx__item {
border-color: var(--line-dark);
}
.on-dark .idx__title {
color: #fff;
}
.on-dark .idx__en {
color: var(--ink-on-dark-mute);
}
.on-dark .idx__text {
color: var(--ink-on-dark-soft);
}
/* --------------------------------------------------------------------------
21.10 阶段详解
--------------------------------------------------------------------------
五阶段体系页里，每个阶段是一段独立的「条目」，不是一张卡片。
分隔靠 border-top 细线，不靠
元素 —— 因为
会带上浏览器默认
外边距，而 border 不会，也就不需要再靠工具类去纠偏。
-------------------------------------------------------------------------- */
.stage-detail {
padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
border-top: 1px solid var(--line);
}
.stage-detail + .stage-detail {
margin-top: clamp(2rem, 4vw, 3.25rem);
}
/* 阶段名在侧栏里，四个汉字，41.6px 时约 166px，放得下。
不要在这里再放大字号 —— 侧栏只有 320px。 */
.stage-detail .ed__rail .display--3 {
letter-spacing: 0.06em;
}
/* =====================================================================
22. 成长路径 · GROWTH PATH
---------------------------------------------------------------------
这是品牌最重要的一个视觉资产，所以它必须是一条「轨迹」——
不是五个方块，不是五个圆形图标，不是五张一模一样的卡片。
构成：
宽屏 —— 一条自左下向右上抬升的连续轨迹（SVG），轨迹上有五个
站点；每个站点垂一条虚线落到下方文字栏。文字栏由细线
分隔，不用卡片。
窄屏 —— 轨迹换成「阶梯式左缩进」：每一段比上一段再向右一步，
金色竖线由浅到深。用纯 CSS 表达上升，不需要 SVG。
为什么这样设计：五个阶段之间是「递进」关系，不是「并列」关系。
并列关系用卡片，递进关系必须用轨迹 —— 这是内容和形式的一致。
复用：同一套编号与中英对照命名，可直接用于工作手册、结业证书、
营地物料、学校宣讲与后续国际项目。独立矢量文件见
assets/img/growth-path-light.svg 与 growth-path-dark.svg。
===================================================================== */
.gpath {
position: relative;
}
/* 轨迹画布。高度只影响曲线陡峭程度，不影响下方文字栏。
调高度是安全的：曲线和站点都用百分比定位，会一起缩放。 */
.gpath__track {
position: relative;
display: none;
height: clamp(132px, 17vw, 236px);
margin-bottom: clamp(0.9rem, 2vw, 1.6rem);
}
@media (min-width: 900px) {
.gpath__track {
display: block;
}
}
.gpath__curve {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* preserveAspectRatio="none" 会把图形横向拉伸，所以描边必须
声明为非缩放，否则线宽会随容器宽度变化，细线会变成粗线。 */
.gpath__curve .gp-area {
stroke: none;
}
.gpath__curve .gp-line {
fill: none;
stroke-width: 2.5;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
.gpath__curve .gp-riser {
fill: none;
stroke-width: 1;
stroke-dasharray: 2 5;
stroke: rgba(208, 169, 74, 0.42);
vector-effect: non-scaling-stroke;
}
.on-dark .gpath__curve .gp-riser {
stroke: rgba(221, 191, 116, 0.32);
}
/* 站点：轨迹上的一个点。
用 HTML 元素而不是 SVG 圆，这样它可以单独做出现动画、单独调色。
坐标与曲线控制点一一对应（10/30/50/70/90% 的横坐标，
170/138/106/74/42 的纵坐标 ÷ 画布高 220）。 */
.gpath__node {
position: absolute;
left: var(--x);
top: var(--y);
width: 13px;
height: 13px;
margin: -6.5px 0 0 -6.5px;
border-radius: 50%;
background: var(--paper);
border: 2px solid var(--gold);
box-shadow: 0 0 0 4px rgba(208, 169, 74, 0.13);
z-index: 2;
}
.gpath__node:nth-child(2) { --x: 10%; --y: 77.27%; }
.gpath__node:nth-child(3) { --x: 30%; --y: 62.73%; }
.gpath__node:nth-child(4) { --x: 50%; --y: 48.18%; }
.gpath__node:nth-child(5) { --x: 70%; --y: 33.64%; }
.gpath__node:nth-child(6) { --x: 90%; --y: 19.09%; }
.on-dark .gpath__node {
background: var(--navy-950);
}
/* 两端标注：这条路径从哪里出发，到哪里结束 */
.gpath__axis {
display: none;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: var(--tk-wider);
text-transform: uppercase;
color: var(--gold);
}
@media (min-width: 900px) {
.gpath__axis {
display: flex;
}
}
.on-dark .gpath__axis {
color: var(--gold-soft);
}
.gpath__axis-from::before,
.gpath__axis-to::after {
content: "";
display: inline-block;
vertical-align: middle;
width: 22px;
height: 1px;
background: currentColor;
opacity: 0.55;
}
.gpath__axis-from::before {
margin-right: 0.6rem;
}
.gpath__axis-to::after {
margin-left: 0.6rem;
}
/* 文字栏 */
.gpath__stages {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
}
.gpath__stage {
position: relative;
padding: 1.1rem 0 1.1rem 1.05rem;
margin-left: 0;
border-left: 2px solid rgba(208, 169, 74, 0.22);
border-bottom: 1px solid var(--line);
}
/* 窄屏的「上升」：逐段右移 + 金色由浅到深 */
.gpath__stage:nth-child(2) {
margin-left: 0.5rem;
border-left-color: rgba(208, 169, 74, 0.38);
}
.gpath__stage:nth-child(3) {
margin-left: 1rem;
border-left-color: rgba(208, 169, 74, 0.55);
}
.gpath__stage:nth-child(4) {
margin-left: 1.5rem;
border-left-color: rgba(208, 169, 74, 0.76);
}
.gpath__stage:nth-child(5) {
margin-left: 2rem;
border-left-color: var(--gold);
border-bottom: 0;
}
@media (min-width: 900px) {
.gpath__stages {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.gpath__stage {
margin-left: 0;
border-left: 0;
border-bottom: 0;
border-top: 1px solid var(--line);
padding: clamp(1.05rem, 2vw, 1.6rem) clamp(0.9rem, 1.8vw, 1.5rem) 0 0;
}
.gpath__stage + .gpath__stage {
padding-left: clamp(0.9rem, 1.8vw, 1.5rem);
border-left: 1px solid var(--line);
}
}
.on-dark .gpath__stage {
border-color: var(--line-dark);
}
.gpath__num {
display: block;
font-family: var(--font-num);
font-size: clamp(1.35rem, 2.4vw, 1.75rem);
line-height: 1;
letter-spacing: 0.04em;
color: var(--gold);
margin-bottom: 0.85rem;
}
.gpath__cn {
font-family: var(--font-serif);
font-size: clamp(1.08rem, 1.8vw, 1.3rem);
font-weight: 600;
letter-spacing: 0.05em;
color: var(--navy-800);
margin: 0 0 0.4rem;
}
.gpath__en {
display: block;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: var(--tk-wide);
text-transform: uppercase;
color: var(--ink-mute);
margin-bottom: 0.85rem;
}
.gpath__text {
font-size: 0.92rem;
line-height: 1.85;
color: var(--ink-soft);
margin: 0;
}
.on-dark .gpath__num {
color: var(--gold-soft);
}
.on-dark .gpath__cn {
color: #fff;
}
.on-dark .gpath__en {
color: var(--ink-on-dark-mute);
}
.on-dark .gpath__text {
color: var(--ink-on-dark-soft);
}
/* =====================================================================
23. 首页区块
===================================================================== */
/* 21.9 引语带：整段陈述，居中留白，用来在长页面中间「换气」 */
.statement-band {
padding-block: clamp(3rem, 8vw, 6rem);
}
.statement-band__text {
max-width: 30em;
margin: 0;
font-family: var(--font-serif);
font-size: clamp(1.35rem, 3.6vw, 2.7rem);
font-weight: 600;
line-height: 1.42;
letter-spacing: var(--tk-tight);
color: var(--navy-800);
}
.on-dark .statement-band__text {
color: #fff;
}
.statement-band__text em {
font-style: normal;
color: var(--gold);
}
.on-dark .statement-band__text em {
color: var(--gold-soft);
}
/* 四根支柱：可信度区块。
细线封顶的等宽栏 —— 不是四张卡片。 */
.pillars {
display: grid;
grid-template-columns: 1fr;
gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 760px) {
.pillars {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1080px) {
.pillars {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.pillar {
border-top: 1px solid var(--line-dark);
padding-top: clamp(1.1rem, 2vw, 1.5rem);
}
.pillar__en {
display: block;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: var(--tk-wide);
text-transform: uppercase;
color: var(--gold-soft);
margin-bottom: 0.75rem;
}
.pillar h3 {
font-family: var(--font-serif);
font-size: clamp(1.02rem, 1.7vw, 1.18rem);
color: #fff;
margin: 0 0 0.7rem;
letter-spacing: 0.04em;
}
.pillar p {
font-size: 0.92rem;
line-height: 1.88;
color: var(--ink-on-dark-soft);
margin: 0;
}
/* --------------------------------------------------------------------------
首页 07 · 团队（OUR TEAM）· 前缀 roster
--------------------------------------------------------------------------
这一段要说明的不是「两位创始人」，而是「一套团队系统」——
首页不该把 ASTRA 讲成两个创始人的个人品牌。
所以版面必须读起来像国际教育机构的团队结构，而不是三张产品卡：
没有卡片、没有阴影、没有大圆角、没有图标、没有渐变，
只有留白、极细的线，和标志里那套「轨迹 + 节点」的视觉语言。
前缀用 roster 而不是 team：.team-intro / .team-domains 已被
「导师团队」页的样式区占用（现为无用规则），复用会撞名。
-------------------------------------------------------------------------- */
/* 主张在左、说明在右：沿用全站的 Editorial 不对称版式 */
.roster-intro {
display: grid;
grid-template-columns: 1fr;
gap: clamp(1.5rem, 3.5vw, 2.25rem);
}
@media (min-width: 1000px) {
.roster-intro {
grid-template-columns: minmax(0, 1fr) minmax(0, 23rem);
column-gap: clamp(3rem, 7vw, 7rem);
align-items: start;
}
}
.roster-intro__body {
max-width: 34em;
font-size: 1rem;
line-height: 1.95;
color: var(--ink-soft);
}
@media (min-width: 1000px) {
/* 右栏与标题基线错开一点，避免两栏顶部齐平显得像表格 */
.roster-intro__body {
padding-top: 0.45rem;
}
}
.roster-intro__body p + p {
margin-top: 0.9rem;
}
/* 三个层次：横向排列，但由一条极细的横线串起 ——
每个栏目的上边框首尾相接，连成一条贯穿整行的细线，
线上的三个节点呼应标志的轨迹语言。
这样三段读起来是「一个团队系统」，而不是三件可购买的商品。 */
.roster-layers {
display: grid;
grid-template-columns: 1fr;
margin-top: clamp(2.75rem, 6vw, 4.5rem);
}
@media (min-width: 860px) {
.roster-layers {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.roster-layer {
position: relative;
padding: clamp(1.6rem, 3vw, 2.15rem) clamp(1.25rem, 3vw, 2.75rem) 0 0;
border-top: 1px solid var(--line-strong);
}
/* 窄屏堆叠时，三段之间留出呼吸，细线正好成为段落分隔 */
@media (max-width: 859.98px) {
.roster-layer + .roster-layer {
margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
.roster-layer {
padding-right: 0;
}
}
/* 节点：三个层次的连接点。由晨曦蓝走向金色，呼应品牌轨迹，
但只做到「节点」为止 —— 不做成第二个标志。 */
.roster-layer::before {
content: "";
position: absolute;
top: -3.5px;
left: 0;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--dawn);
}
.roster-layer:nth-child(2)::before {
top: -4.5px;
width: 8px;
height: 8px;
background: var(--navy-600);
}
.roster-layer:nth-child(3)::before {
top: -5.5px;
width: 10px;
height: 10px;
background: var(--gold);
}
.roster-layer__name {
font-family: var(--font-serif);
font-size: clamp(1.2rem, 2.1vw, 1.48rem);
line-height: 1.5;
letter-spacing: var(--tk-tight);
color: var(--navy-800);
margin: 0 0 0.45rem;
}
.roster-layer__motto {
margin: 0 0 1.05rem;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: var(--tk-wider);
line-height: 1.7;
color: var(--gold);
}
.roster-layer__desc {
margin: 0;
max-width: 30em;
font-size: 0.95rem;
line-height: 1.95;
color: var(--ink-soft);
}
/* 收束：品牌理念句是这一模块的结论，用衬线放大压住整段 */
.roster-close {
margin-top: clamp(3rem, 6vw, 4.5rem);
padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
border-top: 1px solid var(--line);
}
.roster-close__statement {
margin: 0;
max-width: 42em;
font-family: var(--font-serif);
font-size: clamp(1.08rem, 2.2vw, 1.42rem);
line-height: 1.8;
letter-spacing: var(--tk-tight);
color: var(--navy-700);
}
/* 创始人卡片（.founder）现在只服务「导师团队」页（about.html）。
首页不再突出 Andrea 与 Adam，故此处不再有首页专用规则。 */
.founder {
border-top: 1px solid var(--line);
padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
}
.founder__head {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.1rem;
}
/* 肖像位：不放图库照片，也不生成人像。
真人的照片到位后，把 ![]()
放进 .founder__mark 里替换字母即可。 */
.founder__mark {
flex: none;
width: 54px;
height: 54px;
display: grid;
place-items: center;
border-radius: 50%;
overflow: hidden;
background: linear-gradient(150deg, var(--navy-700), var(--navy-900));
color: rgba(238, 242, 246, 0.92);
font-family: var(--font-serif);
font-size: 1.02rem;
letter-spacing: 0.06em;
}
.founder__mark img {
width: 100%;
height: 100%;
object-fit: cover;
}
.founder__name {
font-family: var(--font-serif);
font-size: clamp(1.14rem, 2vw, 1.34rem);
color: var(--navy-800);
margin: 0 0 0.35rem;
letter-spacing: 0.03em;
}
.founder__role {
margin: 0;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: var(--tk-wide);
text-transform: uppercase;
line-height: 1.75;
color: var(--gold);
}
.founder p {
font-size: 0.95rem;
line-height: 1.9;
color: var(--ink-soft);
}
.founder__domains {
margin-top: 1.1rem;
}
.founder__domains li {
font-size: 0.8rem;
padding: 0.5rem 0;
}
/* 收束：Future 通栏 */
.future {
position: relative;
overflow: hidden;
background: var(--navy-950);
color: var(--ink-on-dark);
}
.future::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
96% 76% at 50% 108%,
rgba(208, 169, 74, 0.17) 0%,
rgba(208, 169, 74, 0) 62%
);
}
.future__inner {
position: relative;
z-index: 2;
padding-block: clamp(4rem, 10vw, 8rem);
}
/* 收束屏的大标题用
断行（和站内其他展示级标题一致），
不再需要 .future__line 这个 block 包裹层。
注意：.display em 在文件更靠前处声明，两条选择器权重相同（0,1,1），
所以这里靠源码顺序把 --gold-soft 的色值保留下来。 */
.future em {
font-style: normal;
color: var(--gold-soft);
}
.future__cta {
margin-top: clamp(2rem, 4vw, 3rem);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem 1.5rem;
}
.future__cta-note {
font-size: 0.86rem;
color: var(--ink-on-dark-mute);
margin: 0;
max-width: 26em;
}
/* =====================================================================
24. 品牌更新（ASTRA）新增元件
---------------------------------------------------------------------
这一节里的元件都服务于同一件事：把「顺序」和「待补素材」这两种
原先没有表达方式的东西，做成有分寸的版面，而不是退回卡片。
===================================================================== */
/* --------------------------------------------------------------------------
24.1 首屏拉丁底纹 · 已移除（2026-10-04）
--------------------------------------------------------------------------
原来首屏背后压着一层 4% 不透明度的巨型「ASTRA」。已删除：
页头已经有完整的 ASTRA 标志，首屏再重复一次品牌名等于浪费第一眼的
注意力 —— 第一屏要留给年轻人与核心理念。
全站仍然不使用星星 / 银河 / 宇宙图形。
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
24.2 品牌故事里的三个问题
--------------------------------------------------------------------------
复用 .idx 的分隔逻辑（细线，不是卡片），但把字号提到「这一段的主角」。
为什么强制单栏：横排三栏时，最长的「我能够创造什么？」（8 个汉字）在
1200px 视口下每栏只有约 209px，而 2rem 的字号要占 256px —— 必然折成
「我能够创造 / 什么？」，读起来像排版事故。三个问题是**递进的追问**，
不是并列的三项，竖排本来也更准确。
-------------------------------------------------------------------------- */
.idx--ask {
grid-template-columns: 1fr;
}
.idx--ask .idx__item {
padding-block: clamp(1.4rem, 2.8vw, 2rem);
}
.idx--ask .idx__title {
font-size: clamp(1.28rem, 2.9vw, 2rem);
line-height: 1.35;
letter-spacing: var(--tk-tight);
}
/* --------------------------------------------------------------------------
24.3 成长方法：六步
--------------------------------------------------------------------------
Challenge → Experience → Reflection → Insight → Choice → Action
这六步是「顺序」关系，不是「并列」关系 —— 和五阶段用一条上升轨迹、
而不是五个方块，是同一个判断。所以这里用编号 + 一条连续的线串起来，
每栏右上角一个金色小箭头。
宽屏六栏横排；窄屏竖排，编号回到左侧，箭头转向下方。
-------------------------------------------------------------------------- */
.method {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
}
.method__step {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 0.9rem;
align-items: baseline;
padding: clamp(0.95rem, 1.9vw, 1.25rem) 1.6rem clamp(0.95rem, 1.9vw, 1.25rem) 0;
border-bottom: 1px solid var(--line);
}
.method__num {
font-family: var(--font-num);
font-size: 0.72rem;
letter-spacing: 0.16em;
color: var(--gold);
}
.method__cn {
font-family: var(--font-serif);
font-size: clamp(1.04rem, 1.7vw, 1.2rem);
font-weight: 600;
letter-spacing: 0.04em;
color: var(--navy-800);
margin: 0;
}
.method__en {
display: block;
/* 必须显式放到第 2 列。否则网格自动排布会把英文放到第 1 列，
而 auto 宽度的第 1 列会被 "CHALLENGE" 撑到 76px 宽 ——
结果编号和中文之间空出一大段，看起来像没对齐。 */
grid-column: 2;
margin-top: 0.4rem;
font-size: 0.66rem;
font-weight: 600;
letter-spacing: var(--tk-wide);
text-transform: uppercase;
color: var(--ink-mute);
}
/* 窄屏：箭头朝下，贴在每一段的下边线右侧 */
.method__step:not(:last-child)::after {
content: "";
position: absolute;
right: 0.5rem;
bottom: -3.5px;
width: 6px;
height: 6px;
border-right: 1px solid var(--gold);
border-bottom: 1px solid var(--gold);
transform: rotate(45deg);
}
@media (min-width: 880px) {
.method {
grid-template-columns: repeat(6, minmax(0, 1fr));
border-top: 1px solid var(--line);
}
.method__step {
grid-template-columns: minmax(0, 1fr);
padding: clamp(1.1rem, 2vw, 1.5rem) clamp(0.9rem, 1.7vw, 1.35rem) 0;
border-bottom: 0;
border-left: 1px solid var(--line);
}
.method__step:first-child {
border-left: 0;
padding-left: 0;
}
/* 宽屏是单栏，取消窄屏那条 grid-column: 2（否则会多出一个隐式列） */
.method__en {
grid-column: auto;
}
/* 宽屏：箭头朝右，与第一排编号对齐 */
.method__step:not(:last-child)::after {
right: 0;
bottom: auto;
top: clamp(1.4rem, 2.4vw, 1.85rem);
border: 0;
border-top: 1px solid var(--gold);
border-right: 1px solid var(--gold);
}
}
.method__line {
font-family: var(--font-serif);
font-size: clamp(1.08rem, 2.3vw, 1.55rem);
line-height: 1.68;
letter-spacing: var(--tk-tight);
color: var(--navy-700);
margin: 0;
max-width: 28em;
}
/* --------------------------------------------------------------------------
24.4 创造价值的四条交叉轴
--------------------------------------------------------------------------
AI × 创造力 × 商业 × 社会价值
用「×」做分隔符，是因为它们不是四个并列的能力，而是四个相乘的维度。
-------------------------------------------------------------------------- */
.axes {
display: flex;
flex-wrap: wrap;
align-items: center;
/* 行内与行间都是 0.95rem：× 是 li 的 ::after，
所以「前一项到 ×」由 li 内部的 gap 决定，「× 到后一项」由这里的
column-gap 决定。两边不一致就会出现「AI ×创造力」这种半边贴字。 */
gap: 0.5rem 0.95rem;
list-style: none;
margin: 0;
padding: 0;
font-family: var(--font-serif);
font-size: clamp(1rem, 1.9vw, 1.3rem);
letter-spacing: 0.05em;
color: var(--navy-800);
}
.axes li {
display: flex;
align-items: center;
gap: 0.95rem;
}
.axes li:not(:last-child)::after {
content: "×";
font-size: 0.78em;
color: var(--gold);
}
.on-dark .axes {
color: #fff;
}
.on-dark .axes li:not(:last-child)::after {
color: var(--gold-soft);
}
/* --------------------------------------------------------------------------
24.5 照片位
--------------------------------------------------------------------------
站点规则：不放图库照片，也不生成学生人像 —— 必须是真实照片。
真实照片到位之前，这里放一个标注了尺寸与拍摄内容的占位框，
而不是拿一张「看起来还行」的替代图把位置糊过去。
占位框是虚线 + 极淡金底，在浅色和深色区块里都成立。
照片到位后：把 ![]()
放进 .photo-slot 并给 .photo-slot 加上 is-filled。
-------------------------------------------------------------------------- */
.photo-slot {
position: relative;
display: grid;
place-content: center;
gap: 0.55rem;
aspect-ratio: var(--slot, 16 / 9);
padding: clamp(1.1rem, 2.4vw, 1.9rem);
text-align: center;
border: 1px dashed rgba(208, 169, 74, 0.42);
background: rgba(208, 169, 74, 0.03);
}
.photo-slot--16x9 { --slot: 16 / 9; }
.photo-slot--4x3 { --slot: 4 / 3; }
.photo-slot--3x2 { --slot: 3 / 2; }
.photo-slot__ratio {
font-family: var(--font-num);
font-size: 0.7rem;
letter-spacing: 0.16em;
color: var(--gold);
}
.photo-slot__what {
font-size: 0.86rem;
line-height: 1.75;
color: var(--ink-mute);
margin: 0 auto;
max-width: 30em;
}
.on-dark .photo-slot {
border-color: rgba(221, 191, 116, 0.4);
background: rgba(221, 191, 116, 0.055);
}
.on-dark .photo-slot__ratio {
color: var(--gold-soft);
}
/* .on-dark p 的特异性是 (0,1,1)，高于单类选择器 (0,1,0)，
所以这里必须写成 (0,2,0)，否则占位说明会被改成默认正文色。 */
.on-dark .photo-slot__what {
color: var(--ink-on-dark-mute);
}
/* 照片到位后的状态：占位提示全部隐去 */
.photo-slot.is-filled {
display: block;
padding: 0;
border: 0;
background: none;
}
.photo-slot.is-filled .photo-slot__ratio,
.photo-slot.is-filled .photo-slot__what {
display: none;
}
.photo-slot img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* =====================================================================
25. 导师团队页重构（about.html）新增元件
---------------------------------------------------------------------
这一页的核心不是「罗列导师」，而是讲清一个体系：
三层导师（全球 / 青年 / 同龄）如何围绕一个年轻人形成连接，
以及这个团队为何按项目动态组建，而不是复制一套固定阵容。
因此刻意避开三种常见做法：
- 不做头像矩阵（那会读成「名师墙」）
- 不做三张并列卡片（三层之间是包含关系，不是并列关系）
- 不把 Harvard / Cambridge 做成视觉上的最大卖点
三层关系用同心环表达，按项目组建用已有的 .method 流程表达。
===================================================================== */
/* --------------------------------------------------------------------------
25.1 三层同心环
--------------------------------------------------------------------------
三层导师不是并列的三类人，而是围绕同一个年轻人、由近及远的三层连接，
所以用同心环而不是三张卡片。文字放进 SVG 是为了让标签跟着环走，
环的半径一变，标签位置不会错位。
-------------------------------------------------------------------------- */
.tiers {
display: block;
}
.tiers__svg {
display: block;
width: 100%;
height: auto;
max-width: 30rem;
margin-inline: auto;
}
.tiers__svg .t-en {
font-family: var(--font-sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
fill: var(--gold-soft);
}
.tiers__svg .t-cn {
font-family: var(--font-serif);
font-size: 15px;
font-weight: 600;
letter-spacing: 0.04em;
fill: var(--ink-on-dark);
}
.tiers__svg .t-core {
font-family: var(--font-serif);
font-size: 13px;
letter-spacing: 0.06em;
fill: var(--ink-on-dark-soft);
}
/* --------------------------------------------------------------------------
25.2 三层的文字说明
--------------------------------------------------------------------------
环里只放名字，不放句子 —— SVG 里的长句既排不好也没法响应式。
每层最关键的那句话放到环下方的三栏里，用金色作为「这一层的结论」。
-------------------------------------------------------------------------- */
.tier-grid {
display: grid;
grid-template-columns: 1fr;
border-top: 1px solid var(--line-dark);
}
@media (min-width: 860px) {
.tier-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: clamp(1.5rem, 3vw, 2.75rem);
}
}
.tier-cell {
padding: clamp(1.2rem, 2.4vw, 1.8rem) 0;
border-bottom: 1px solid var(--line-dark);
}
.tier-cell__cn {
font-family: var(--font-serif);
font-size: clamp(1rem, 1.7vw, 1.16rem);
font-weight: 600;
letter-spacing: 0.03em;
color: var(--ink-on-dark);
margin: 0 0 0.55rem;
}
.tier-cell__text {
font-size: 0.9rem;
line-height: 1.85;
color: var(--ink-on-dark-mute);
margin: 0 0 0.9rem;
}
.tier-cell__core {
margin: 0;
padding-top: 0.75rem;
border-top: 1px solid var(--line-dark);
font-family: var(--font-serif);
font-size: 0.98rem;
line-height: 1.62;
letter-spacing: 0.02em;
color: var(--gold-soft);
}
/* --------------------------------------------------------------------------
25.3 「为什么三种人要在一起」
--------------------------------------------------------------------------
每一层的关键词（打开视野 / 展示可能 / 一起经历）是这一页最需要被
记住的东西，所以给它比正文更大的字号和金色，但不放进 .display 系列 ——
它不需要 text-wrap: balance，也就绕开了 balance 切断汉字的问题。
-------------------------------------------------------------------------- */
.why-three {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
border-top: 1px solid var(--line);
}
@media (min-width: 760px) {
.why-three {
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: clamp(1.5rem, 3vw, 2.5rem);
}
}
.why-three__item {
padding: clamp(1.3rem, 2.6vw, 1.9rem) 0;
border-bottom: 1px solid var(--line);
}
.why-three__cn {
margin: 0 0 0.6rem;
font-family: var(--font-serif);
font-size: 1.02rem;
font-weight: 600;
letter-spacing: 0.03em;
color: var(--navy-700);
}
.why-three__line {
margin: 0 0 0.7rem;
font-family: var(--font-serif);
font-size: clamp(1.22rem, 2.4vw, 1.58rem);
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.07em;
color: var(--gold);
}
.why-three__note {
margin: 0;
font-size: 0.9rem;
line-height: 1.85;
color: var(--ink-soft);
}
/* --------------------------------------------------------------------------
25.4 联合创始人：照片 + 长文
--------------------------------------------------------------------------
这一页的视觉核心是两位创始人的真实照片，所以侧栏给到 21rem
（原来的 .person 只有 15rem，照片会小到不像「核心」）。
照片用 4:5，介于两张原图的 0.78 与 0.87 之间，裁切量最小。
注意 .founder__bio p 是 (0,1,1)，高于 .founder__point 的 (0,1,0)，
所以下面那两条必须写成 .founder__bio .founder__point 才能生效 ——
这是本站反复踩到的特异性陷阱（.on-dark p 同理）。
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
25.4 创始人档案卡（about.html 专用）
注意类名冲突：首页 §07 用的是「旧版紧凑卡」，也挂在 .founder 上。
旧规则（本文件 36xx 行）只给 .founder 加了 border-top / padding，
没有 grid；而这里是 grid。两者叠加后首页卡片会被切成
minmax(0,21rem) + minmax(0,1fr) 两列 —— 在 425px 宽的卡片里
实测列宽 336px + 31px，「教育 × 幸福研究 × 心理学 × 商业」
被挤成每行一个字。
所以这里所有会与旧组件重叠的属性一律挂 .founder--profile，
只作用于 about.html 的两张档案卡。
-------------------------------------------------------------------------- */
.founder--profile {
display: grid;
gap: clamp(2rem, 4vw, 3.75rem);
grid-template-columns: 1fr;
align-items: start;
}
@media (min-width: 960px) {
.founder--profile {
grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
}
/* 反向布局：既要「照片在右」，也要「照片仍然窄」。
两个条件缺一不可 ——
只写 order 或只写 grid-column，列宽定义 minmax(0,21rem) minmax(0,1fr)
不变，窄列始终在左，照片就会被放进 1fr 宽列（实测 926×1158，
而 Andrea 是 336×420，差 2.76 倍）。
所以这里必须把列宽也一起镜像过来。 */
.founder--profile.founder--reverse {
grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
}
.founder--reverse .founder__aside { grid-column: 2; grid-row: 1; }
.founder--reverse .founder__body { grid-column: 1; grid-row: 1; }
}
.founder__photo {
position: relative;
overflow: hidden;
border-radius: var(--r-sm);
/* 比例由容器决定，不由图片自身尺寸决定 ——
两张原图比例不同（Andrea 792×1011 = 0.78，Adam 657×758 = 0.87），
若让 ![]()
自己撑高，两个容器就会不一样高。 */
aspect-ratio: 4 / 5;
/* 图片未加载时的兜底底色，与原来的 .portrait 一致 */
background: linear-gradient(160deg, var(--navy-700), var(--navy-900));
}
.founder__photo::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: var(--gold);
opacity: 0.85;
}
.founder__photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
/* 两张都是半身人像，人脸在画面上部。
cover 后 Andrea 裁上下、Adam 裁左右，统一向上偏一点避免切到头顶。 */
object-position: 50% 30%;
}
.founder__domains { margin-top: 1rem; }
.founder__body { max-width: 46rem; }
/* 创始人姓名不使用 .display-en 的大写转换。
.display-en 是给英文栏目标签用的（uppercase + 宽字距），
用在人名上会把 "Andrea 晓熙" 渲染成 "ANDREA 晓熙"，
与 index.html 的 .founder__name（无大写）不一致 ——
同一个人的名字在两页长得不一样。姓名按原样显示。 */
.founder__body .display-en {
text-transform: none;
letter-spacing: 0.02em;
}
/* 同样要挂 .founder--profile：首页的旧卡也用 .founder__role，
但那里是 0.68rem / uppercase / 金色的小标签，与这里的 0.9rem 正文级
样式不同。不限定范围的话，本页的规则会盖掉首页的。 */
.founder--profile .founder__role {
margin: 0;
font-size: 0.9rem;
letter-spacing: 0.04em;
color: var(--ink-mute);
}
.founder__focus {
margin-top: 1.1rem;
padding-top: 1.1rem;
border-top: 1px solid var(--line);
font-family: var(--font-serif);
font-size: 1.04rem;
line-height: 1.7;
color: var(--navy-700);
}
.founder__bio p { color: var(--ink-soft); }
.founder__bio p + p { margin-top: 0.9rem; }
.founder__bio .founder__point {
border-left: 2px solid var(--gold);
padding-left: 0.9rem;
font-family: var(--font-serif);
font-size: 1.04rem;
line-height: 1.7;
color: var(--navy-800);
}
.founder__bio .founder__closing {
font-family: var(--font-serif);
font-size: 1.04rem;
line-height: 1.7;
color: var(--navy-800);
}
/* --------------------------------------------------------------------------
25.5 「看见自己 × 走进行动」
--------------------------------------------------------------------------
两人的互补关系原本是一整段深色带 + 两个卡片。这一页已经有足够多的
分栏内容，所以压成一条横向的收束带，放在 Adam 那一段之后。
-------------------------------------------------------------------------- */
.pair-band {
padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.25rem);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
text-align: center;
}
.pair-band__label {
margin: 0 0 0.7rem;
font-family: var(--font-serif);
font-size: clamp(1.15rem, 2.4vw, 1.5rem);
font-weight: 600;
letter-spacing: 0.08em;
color: var(--gold);
}
.pair-band__text {
margin: 0 auto;
max-width: 40rem;
font-size: 0.92rem;
line-height: 1.85;
color: var(--ink-soft);
}
/* --------------------------------------------------------------------------
25.6 按项目组建的流程：7 步
--------------------------------------------------------------------------
直接复用首屏那套 .method（编号 + 中文 + 箭头），只是它的宽屏栅格
硬编码为 6 列，而这里是 7 步 —— 多出来的一步会掉到第二行，
所以补一个 .method--7 只覆盖列数，其余全部沿用。
-------------------------------------------------------------------------- */
@media (min-width: 880px) {
.method--7 {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
}
/* --------------------------------------------------------------------------
21.10 间距工具的覆盖层
--------------------------------------------------------------------------
为什么这个区块必须放在文件最末尾：
.display / .display-en / .quote-xl 都带 margin: 0（它们要清掉 h2、p、
blockquote 的默认外边距，尤其是 blockquote 浏览器默认的 40px 左右边距）。
而 .mt-1 ~ .mt-5 定义在第 19 节，位置更靠前。同为单类选择器时**后者胜**，
所以 的 margin-top 会被 .display 的 margin: 0 吃掉。
这些工具类原先只和 .mt-1/.mt-2/.mt-3 自身的值一起用在普通段落上，
所以一直没暴露出来。新增展示级排版之后就必须在这里补一层。
不要为了「去重」把这一块删掉 —— 删掉之后，所有带 display/quote-xl 的
间距会静默失效（页面上表现为标题贴住上一个区块，很难联想到原因）。
-------------------------------------------------------------------------- */
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mt-4 { margin-top: 4rem; }
.mt-5 { margin-top: 5rem; }
/* 同一类陷阱的另一半：.mb-3 在页面里用了 11 次
（
，见 framework / programs / insights），
但 .mb-3 从来就没有定义过 —— 而 .divider 自己是 margin: 0，
所以这些分隔线一直是「上 3rem、下 0」，上下不对称。
补全整套 mb-1 ~ mb-5，和上面的 mt-* 一样放在文件最末。 */
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }
.mb-4 { margin-bottom: 4rem; }
.mb-5 { margin-bottom: 5rem; }