/* ========================================================================== 静原教育（Jeongwon Language）· 全站共享样式 设计系统：品牌定制（Soft Warm 骨架 + Notion 信息层纪律 + 静原品牌资产） Token 来源：01-设计令牌.md（所有数值为最终值，禁止硬编码 HEX） 编制：原型构建师 筑原型（Zhu） ========================================================================== */ /* ========================================================================== 1. 设计令牌（Design Tokens） ========================================================================== */ :root { /* ===== 品牌主色 · 深蓝 Navy ===== */ --color-navy-900:#03233f; --color-navy-800:#053560; --color-navy-700:#0a4478; --color-navy-600:#12558f; --color-navy-500:#2c6ba3; --color-navy-400:#829ab0; --color-navy-300:#b7c6d4; --color-navy-200:#dde5ec; --color-navy-100:#eef3f7; --color-navy-50:#f6f9fc; /* ===== 品牌强调色 · 清新绿 Green（⚠️ green-500 仅装饰，禁止作文字色） ===== */ --color-green-900:#2f5a29; --color-green-800:#3f7068; --color-green-700:#4d7f45; --color-green-600:#5e9460; --color-green-500:#79ab6f; --color-green-400:#96bf8d; --color-green-300:#bcd5b7; --color-green-200:#dcebda; --color-green-100:#eef6ec; --color-teal-600:#3f7068; --color-teal-500:#528a7d; /* ===== 中性色阶 ===== */ --color-bg:#fbfaf7; --color-surface:#ffffff; --color-surface-alt:#f1f5f8; --color-border:#e2e8ee; --color-border-strong:#cdd6de; --color-text:#1b2733; --color-text-secondary:#4a5b68; --color-text-muted:#647585; --color-text-disabled:#829ab0; /* ===== 语义色（均已过 WCAG AA） ===== */ --color-success:#27694a; --color-success-bg:#e8f3ec; --color-warning:#8a5f0f; --color-warning-bg:#fdf3e0; --color-danger:#a83232; --color-danger-bg:#fbecec; --color-info:#12558f; --color-info-bg:#e8f0f8; /* ===== 深色区块反转色（底 = navy-800 #053560） ===== */ --color-text-inverse:#ffffff; /* 12.47:1 */ --color-text-inverse-secondary:#cdd6de; /* 8.47:1 */ --color-text-inverse-muted:#b7c6d4; /* 7.15:1 */ --color-accent-inverse:#bcd5b7; /* 7.92:1 */ --color-border-inverse:#12558f; --color-surface-inverse:#0a4478; /* ===== 字体栈（中/韩/日全覆盖，零网络依赖） ===== */ --font-sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC", "Noto Sans KR","Noto Sans JP","Source Han Sans SC","Source Han Sans KR", "Apple SD Gothic Neo","Malgun Gothic","Yu Gothic","Meiryo", system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --font-heading:var(--font-sans); --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; /* ===== 字号（移动优先；768 / 1200 断点覆盖） ===== */ --fs-display:30px; --fs-h1:26px; --fs-h2:22px; --fs-h3:19px; --fs-h4:17px; --fs-h5:16px; --fs-lead:17px; --fs-body-lg:18px; --fs-body:16px; --fs-sm:14px; --fs-xs:13px; --fs-eyebrow:13px; --fs-btn:16px; --lh-display:1.25; --lh-h1:1.32; --lh-h2:1.42; --lh-h3:1.50; --lh-body:1.85; --lh-sm:1.75; --lh-xs:1.60; --ls-body:0.01em; --ls-heading:-0.01em; --ls-eyebrow:0.12em; --fw-regular:400; --fw-semibold:600; --fw-bold:700; /* ===== 间距刻度（4/8 基准） ===== */ --space-0:0; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px; /* ===== 布局 ===== */ --container-max:1200px; --container-padding:20px; --gutter:16px; --section-padding:48px; --text-measure:68ch; --header-h:60px; /* ===== 圆角 ===== */ --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px; /* ===== 阴影（深蓝调，非纯黑） ===== */ --shadow-none:none; --shadow-xs:0 1px 2px rgba(5,53,96,.05); --shadow-sm:0 2px 8px rgba(5,53,96,.06); --shadow-md:0 6px 20px rgba(5,53,96,.08); --shadow-lg:0 12px 32px rgba(5,53,96,.10); --shadow-focus:0 0 0 3px rgba(18,85,143,.35); /* ===== 层级 ===== */ --z-base:0; --z-raised:10; --z-header:100; --z-dropdown:200; --z-overlay:300; /* ===== 动效 ===== */ --duration-fast:150ms; --duration-base:220ms; --duration-slow:320ms; --duration-reveal:480ms; --ease-standard:cubic-bezier(.2,.7,.3,1); --ease-emphasized:cubic-bezier(.2,.8,.2,1); --ease-out-soft:cubic-bezier(.16,.84,.44,1); } /* ===== 平板 768px ===== */ @media (min-width:768px){ :root{ --fs-display:36px; --fs-h1:32px; --fs-h2:26px; --fs-h3:21px; --fs-h4:18px; --fs-lead:17px; --container-padding:24px; --gutter:20px; --section-padding:64px; --header-h:72px; } } /* ===== 桌面 1200px ===== */ @media (min-width:1200px){ :root{ --fs-display:44px; --fs-h1:36px; --fs-h2:28px; --fs-h3:22px; --fs-h4:18px; --fs-lead:18px; --container-max:1200px; --container-padding:32px; --gutter:24px; --section-padding:80px; } } /* ========================================================================== 2. 基础重置与排版 ========================================================================== */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } @media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } } /* 质量审查修复：body 上的 overflow-x:hidden 会使 body 成为滚动容器， 导致 .site-header 的 position:sticky 退化；裁剪横向溢出只保留在 html（会传播到视口）。 */ html,body{ margin:0; } html{ overflow-x:hidden; } body{ font-family:var(--font-sans); font-size:var(--fs-body); line-height:var(--lh-body); letter-spacing:var(--ls-body); font-weight:var(--fw-regular); color:var(--color-text); background:var(--color-bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3,h4,h5,h6{ font-family:var(--font-heading); color:var(--color-navy-800); font-weight:var(--fw-bold); letter-spacing:var(--ls-heading); margin:0 0 var(--space-4); text-wrap:balance; } h1{ font-size:var(--fs-h1); line-height:var(--lh-h1); } h2{ font-size:var(--fs-h2); line-height:var(--lh-h2); font-weight:var(--fw-semibold); letter-spacing:0; } h3{ font-size:var(--fs-h3); line-height:var(--lh-h3); font-weight:var(--fw-semibold); letter-spacing:0; } h4{ font-size:var(--fs-h4); line-height:1.6; font-weight:var(--fw-semibold); } p{ margin:0 0 var(--space-4); max-width:var(--text-measure); } p:last-child{ margin-bottom:0; } a{ color:var(--color-navy-600); text-decoration:none; } a:hover{ color:var(--color-navy-700); text-decoration:underline; } ul,ol{ margin:0 0 var(--space-4); padding-left:1.5em; } li{ margin-bottom:var(--space-2); } li::marker{ color:var(--color-green-900); } /* 同 eyebrow：green-700 在 #f1f5f8 上仅 4.32:1，改 green-900 = 7.33:1 */ img,picture,svg{ max-width:100%; height:auto; display:block; } strong{ font-weight:var(--fw-semibold); color:var(--color-navy-800); } abbr{ text-decoration:none; } /* 焦点可见性 */ :where(a,button,summary,input,textarea,select,[tabindex]):focus-visible{ outline:2px solid var(--color-navy-600); outline-offset:2px; border-radius:var(--radius-xs); } .on-dark :where(a,button,summary):focus-visible{ outline-color:var(--color-green-300); } /* 跳转链接 */ .skip-link{ position:absolute; left:-9999px; top:0; z-index:var(--z-overlay); background:var(--color-navy-800); color:#fff; padding:12px 20px; border-radius:0 0 var(--radius-sm) 0; } .skip-link:focus{ left:0; } /* ========================================================================== 3. 布局工具类 ========================================================================== */ .container{ width:100%; max-width:var(--container-max); margin-inline:auto; padding-inline:var(--container-padding); } .section{ padding-block:var(--section-padding); } .section--first{ padding-block:calc(var(--section-padding) + 8px); } .section--alt{ background:var(--color-surface); } .section--soft{ background:var(--color-surface-alt); } .section--leaf{ background:var(--color-green-100); } .section--navy{ background:var(--color-navy-800); color:var(--color-text-inverse); } .section--navy h2,.section--navy h3,.section--navy h4{ color:var(--color-text-inverse); } .section--navy p{ color:var(--color-text-inverse-secondary); } /* 品牌纹理（bg-brand.jpg，opacity ≤ .08） */ .section--textured{ position:relative; isolation:isolate; } .section--textured::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:url("../bg-brand.jpg"); background-size:600px; background-repeat:repeat; opacity:.06; } .grid{ display:grid; gap:var(--gutter); } @media (min-width:768px){ .grid--2{ grid-template-columns:repeat(2,1fr); } } @media (min-width:1200px){ .grid--3{ grid-template-columns:repeat(3,1fr); } .grid--4{ grid-template-columns:repeat(4,1fr); } } .grid--top{ align-items:start; } .flow-6{ margin-top:var(--space-6); } .flow-8{ margin-top:var(--space-8); } .flow-10{ margin-top:var(--space-10); } .flow-12{ margin-top:var(--space-12); } /* ========================================================================== 4. 排版辅助 ========================================================================== */ /* 质量审查修复：原 green-700(#4d7f45) 在 section--soft(#f1f5f8) 上仅 4.32:1、在 CTA 深蓝带上仅 2.63:1，均不过 AA。 改用令牌文档指定为「深绿文字」的 green-900(#2f5a29)：白底 8.03:1 / #fbfaf7 7.69:1 / #f1f5f8 7.33:1。 */ .eyebrow{ display:inline-block; font-size:var(--fs-eyebrow); font-weight:var(--fw-semibold); letter-spacing:var(--ls-eyebrow); color:var(--color-green-900); text-transform:none; margin:0 0 var(--space-3); } /* 深色区块（CTA 带 / 深蓝区块）内反转为浅绿 #bcd5b7（7.92:1）。 原仅写了 .section--navy，而实际页面用的是 .contact-band.on-dark，导致反转规则从未命中。 */ .section--navy .eyebrow, .on-dark .eyebrow, .contact-band .eyebrow{ color:var(--color-accent-inverse); } .lead{ font-size:var(--fs-lead); line-height:var(--lh-body); color:var(--color-text-secondary); } .section--navy .lead{ color:var(--color-text-inverse-secondary); } .text-muted{ color:var(--color-text-muted); } .text-secondary{ color:var(--color-text-secondary); } .fs-sm{ font-size:var(--fs-sm); line-height:var(--lh-sm); } .fs-xs{ font-size:var(--fs-xs); line-height:var(--lh-xs); } .mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; } .nowrap{ white-space:nowrap; } /* 区块标题组 */ .section-head{ max-width:var(--text-measure); margin-bottom:var(--space-10); } .section-head h1{ margin-bottom:var(--space-4); letter-spacing:var(--ls-heading); } .section-head h2{ margin-bottom:var(--space-3); } .section-head::after{ content:""; display:block; width:48px; height:3px; margin-top:var(--space-4); border-radius:var(--radius-pill); background:var(--color-green-500); } .section-head--center{ margin-inline:auto; text-align:center; } .section-head--center::after{ margin-inline:auto; } .section-head--center p{ margin-inline:auto; } .section-head > *:last-child::after{ content:none; } /* 官方标识展示图（关于我们页；置于白底卡片上，保证 LOGO 呈现清晰） */ .brand-figure{ display:flex; align-items:center; gap:var(--space-6); flex-wrap:wrap; margin:0 0 var(--space-8); padding:var(--space-6); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); box-shadow:var(--shadow-xs); } .brand-figure img{ height:210px; width:auto; flex:none; } .brand-figure figcaption{ flex:1 1 260px; font-size:var(--fs-sm); line-height:var(--lh-sm); color:var(--color-text-secondary); max-width:44ch; } /* 品牌图形母题（气泡 × 叶片）：区块之间的居中分隔符号，纯装饰 */ .motif-divider{ display:flex; justify-content:center; padding-block:var(--space-1); } .motif-divider svg{ width:28px; height:24px; color:var(--color-green-300); } /* ========================================================================== 5. 页头 / 导航 / 移动端菜单 ========================================================================== */ .site-header{ position:sticky; top:0; z-index:var(--z-header); background:var(--color-surface); border-bottom:1px solid var(--color-border); transition:box-shadow var(--duration-base) var(--ease-standard); } .site-header.is-scrolled{ box-shadow:var(--shadow-md); } .header-inner{ /* 提升到移动端全屏菜单（--z-overlay）之上，保证 LOGO 与汉堡按钮始终可见可点 */ position:relative; z-index:calc(var(--z-overlay) + 1); display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); min-height:var(--header-h); } /* 品牌区：主 LOGO 图形标记（蓝绿原色，自官方 LOGO 裁切）+ 真实文本字标（GEO 可读取） */ .brand{ display:inline-flex; align-items:center; gap:var(--space-3); text-decoration:none; } .brand:hover{ text-decoration:none; } .brand-mark{ flex:none; width:42px; height:auto; display:block; } @media (max-width:767px){ .brand-mark{ width:34px; } } .brand-text{ display:flex; flex-direction:column; line-height:1.15; white-space:nowrap; } .brand{ flex:none; } .brand-name{ font-size:19px; font-weight:var(--fw-bold); color:var(--color-navy-800); letter-spacing:.04em; } .brand-sub{ font-size:11px; font-weight:var(--fw-semibold); color:var(--color-text-muted); letter-spacing:.06em; } /* 桌面主导航 */ .primary-nav{ display:none; } @media (min-width:1000px){ .primary-nav{ display:block; } .primary-nav ul{ display:flex; align-items:center; gap:var(--space-1); margin:0; padding:0; list-style:none; } .primary-nav li{ margin:0; } .primary-nav a{ position:relative; display:inline-flex; align-items:center; min-height:44px; padding:var(--space-2) var(--space-4); font-size:16px; font-weight:var(--fw-semibold); color:var(--color-text); border-radius:var(--radius-sm); text-decoration:none; white-space:nowrap; transition:color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); } .primary-nav a:hover{ color:var(--color-navy-700); background:var(--color-navy-50); text-decoration:none; } .primary-nav a[aria-current="page"]{ color:var(--color-navy-800); } .primary-nav a[aria-current="page"]::after{ content:""; position:absolute; left:var(--space-4); right:var(--space-4); bottom:2px; height:2px; border-radius:var(--radius-pill); background:var(--color-green-500); } } .header-actions{ display:flex; align-items:center; gap:var(--space-2); } /* 注意：需提高一级选择器优先级，否则会被后定义的 .btn{display:inline-flex} 覆盖 */ .header-actions .header-phone{ display:none; } @media (min-width:1000px){ .header-actions .header-phone{ display:inline-flex; white-space:nowrap; } } .header-phone-icon{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--radius-pill); background:var(--color-navy-800); color:#fff; flex:none; } .header-phone-icon:hover{ background:var(--color-navy-700); color:#fff; text-decoration:none; } .header-phone-icon svg{ width:20px; height:20px; } @media (min-width:1000px){ .header-phone-icon{ display:none; } } /* 汉堡按钮 */ .nav-toggle{ width:44px; height:44px; display:grid; place-items:center; background:transparent; border:1px solid var(--color-border); border-radius:var(--radius-md); cursor:pointer; padding:0; color:var(--color-navy-800); transition:background-color var(--duration-fast) var(--ease-standard); } .nav-toggle:hover{ background:var(--color-navy-50); } @media (min-width:1000px){ .nav-toggle{ display:none; } } .nav-toggle .bar{ display:block; width:20px; height:2px; border-radius:2px; background:currentColor; position:relative; } .nav-toggle .bar::before,.nav-toggle .bar::after{ content:""; position:absolute; left:0; width:20px; height:2px; border-radius:2px; background:currentColor; transition:transform var(--duration-base) var(--ease-standard); } .nav-toggle .bar::before{ top:-6px; } .nav-toggle .bar::after{ top:6px; } .nav-toggle[aria-expanded="true"] .bar{ background:transparent; } .nav-toggle[aria-expanded="true"] .bar::before{ transform:translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .bar::after{ transform:translateY(-6px) rotate(-45deg); } /* 移动端整屏菜单 */ .mobile-nav{ position:fixed; inset:0; z-index:var(--z-overlay); background:var(--color-surface); overflow-y:auto; overscroll-behavior:contain; padding:calc(var(--header-h) + var(--space-4)) var(--container-padding) var(--space-10); visibility:hidden; pointer-events:none; transform:translateY(-100%); transition:transform var(--duration-slow) var(--ease-emphasized), visibility 0s linear var(--duration-slow); box-shadow:var(--shadow-lg); } .mobile-nav.is-open{ visibility:visible; pointer-events:auto; transform:none; transition:transform var(--duration-slow) var(--ease-emphasized), visibility 0s; } /* 仅在导航列表内生效，避免影响面板底部的 CTA 按钮 */ .mobile-nav nav ul{ list-style:none; margin:0 0 var(--space-6); padding:0; } .mobile-nav nav li{ margin:0; border-bottom:1px solid var(--color-border); } .mobile-nav nav a{ display:flex; align-items:center; justify-content:space-between; min-height:56px; padding:var(--space-4) var(--space-1); font-size:18px; font-weight:var(--fw-semibold); color:var(--color-navy-800); text-decoration:none; } .mobile-nav nav a:hover{ text-decoration:none; color:var(--color-navy-700); } .mobile-nav nav a[aria-current="page"]{ color:var(--color-navy-600); } .mobile-nav nav a svg{ width:18px; height:18px; color:var(--color-text-muted); flex:none; } .mobile-nav-cta{ display:grid; gap:var(--space-4); } .mobile-nav-cta .btn{ width:100%; } /* ========================================================================== 6. 按钮 ========================================================================== */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); min-height:48px; padding:12px 24px; font-family:var(--font-sans); font-size:var(--fs-btn); font-weight:var(--fw-semibold); line-height:1.2; letter-spacing:.02em; border:1.5px solid transparent; border-radius:var(--radius-pill); cursor:pointer; text-decoration:none; text-align:center; transition:background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); } .btn:hover{ transform:translateY(-2px); text-decoration:none; } .btn svg{ width:18px; height:18px; flex:none; } /* 主按钮：白字 / 深蓝（12.47:1 AAA） */ .btn-primary{ background:var(--color-navy-800); color:#fff; } .btn-primary:hover{ background:var(--color-navy-700); color:#fff; } .btn-primary:active{ background:var(--color-navy-900); transform:translateY(0); } /* 强调按钮：深蓝字 / 品牌绿（5.98:1 AA）⚠️ 禁止白字铺绿 */ .btn-accent{ background:var(--color-green-500); color:var(--color-navy-900); } .btn-accent:hover{ background:var(--color-green-400); color:var(--color-navy-900); } .btn-accent:active{ background:var(--color-green-700); color:#fff; transform:translateY(0); } /* 次按钮 */ .btn-secondary{ background:#fff; color:var(--color-navy-800); border-color:var(--color-navy-800); } .btn-secondary:hover{ background:var(--color-navy-50); color:var(--color-navy-800); } .btn-secondary:active{ background:var(--color-navy-200); transform:translateY(0); } /* 幽灵按钮 */ .btn-ghost{ background:transparent; color:var(--color-navy-800); } .btn-ghost:hover{ background:var(--color-surface-alt); color:var(--color-navy-800); } /* 深色区块内的按钮变体 */ .on-dark .btn-secondary{ background:transparent; color:#fff; border-color:var(--color-navy-300); } .on-dark .btn-secondary:hover{ background:var(--color-surface-inverse); color:#fff; } .btn-sm{ min-height:44px; padding:10px 18px; font-size:15px; } .btn:disabled,.btn[aria-disabled="true"]{ background:var(--color-surface-alt); color:var(--color-text-disabled); border-color:var(--color-border); cursor:not-allowed; transform:none; } .btn-group{ display:flex; flex-wrap:wrap; gap:var(--space-4); } @media (max-width:767px){ .btn-group .btn{ width:100%; } .btn-group{ flex-direction:column; } } /* 行内文字链接（带箭头） */ .link-inline{ display:inline-flex; align-items:center; gap:var(--space-1); font-weight:var(--fw-semibold); color:var(--color-navy-600); } .link-inline svg{ width:16px; height:16px; transition:transform var(--duration-base) var(--ease-standard); } .link-inline:hover svg{ transform:translateX(3px); } .section--navy .link-inline{ color:var(--color-accent-inverse); } /* ========================================================================== 7. 标签 Chip ========================================================================== */ .chip{ display:inline-flex; align-items:center; gap:var(--space-1); padding:4px 12px; border-radius:var(--radius-pill); font-size:13px; font-weight:var(--fw-semibold); line-height:1.6; background:var(--color-green-100); color:var(--color-navy-800); } .chip--green{ background:var(--color-green-300); color:var(--color-navy-800); } .chip--blue{ background:var(--color-navy-100); color:var(--color-navy-800); } .chip--outline{ background:transparent; color:var(--color-text-secondary); border:1px solid var(--color-border-strong); } .chip-row{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin:0 0 var(--space-6); padding:0; list-style:none; } .chip-row li{ margin:0; } /* ========================================================================== 8. Hero 区 ========================================================================== */ .hero{ padding-block:var(--space-12); background:var(--color-bg); } .hero-grid{ display:grid; gap:var(--space-10); align-items:center; } .hero h1{ font-size:var(--fs-display); line-height:var(--lh-display); margin-bottom:var(--space-4); } /* 首页品牌字标（中 / 英 / 韩 三段式，逐段调校字距与字重，避免简单拼接的生硬感） */ /* 品牌字标比常规 H1 放大一档：文字变短后需要更强的视觉体量来压住首屏 */ .hero h1.hero-brand{ font-size:calc(var(--fs-display) * 1.1); line-height:1.1; text-wrap:balance; } .hero-brand{ display:flex; flex-wrap:wrap; align-items:baseline; font-weight:var(--fw-bold); color:var(--color-navy-800); letter-spacing:.02em; } .hero-brand .hb-latin{ font-weight:var(--fw-semibold); letter-spacing:-.022em; margin-left:.06em; font-size:.92em; } .hero-brand .hb-kr{ font-family:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic","Nanum Gothic",var(--font-sans); font-size:.46em; font-weight:var(--fw-semibold); letter-spacing:.1em; color:var(--color-green-700); margin-left:.6em; position:relative; top:-.12em; } @media (max-width:767px){ .hero h1.hero-brand{ font-size:calc(var(--fs-display) * 1.04); } .hero-brand .hb-kr{ margin-left:.45em; } } .hero-lead{ font-size:var(--fs-lead); line-height:var(--lh-body); color:var(--color-text-secondary); margin-bottom:var(--space-6); } .hero-facts{ margin:var(--space-6) 0 0; padding:0; list-style:none; display:grid; gap:var(--space-3); } .hero-facts li{ display:flex; gap:var(--space-2); margin:0; font-size:var(--fs-sm); color:var(--color-text-secondary); } .hero-facts svg{ width:18px; height:18px; flex:none; margin-top:5px; color:var(--color-green-700); } .hero-media{ margin:0 auto; max-width:340px; } .hero-media img{ border-radius:var(--radius-xl); border:1px solid var(--color-border); background:var(--color-surface); } @media (min-width:768px){ .hero{ padding-block:var(--space-16); } .hero-media{ max-width:420px; } } @media (min-width:1200px){ .hero{ padding-block:var(--space-24); } .hero-grid{ grid-template-columns:1.05fr .95fr; gap:var(--space-12); } .hero-media{ max-width:520px; } } /* ========================================================================== 9. 卡片体系 ========================================================================== */ .card{ position:relative; display:flex; flex-direction:column; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-6); box-shadow:var(--shadow-xs); transition:transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); } .card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--color-green-300); } @media (min-width:1200px){ .card{ padding:var(--space-8); } } .card > *:last-child{ margin-bottom:0; } /* 卡片为纵向 flex 容器：标签按内容宽度，文字链接吸底对齐 */ .card > .chip, .card > .chip{ align-self:flex-start; margin-bottom:var(--space-3); } .card > .icon-badge{ align-self:flex-start; } .card > .link-inline, .card > .entry-arrow{ margin-top:auto; padding-top:var(--space-2); } .card h3{ margin-bottom:var(--space-3); } .card p{ font-size:var(--fs-sm); line-height:var(--lh-sm); color:var(--color-text-secondary); } .card--flat{ background:var(--color-surface-alt); border-color:transparent; box-shadow:none; } .card--flat:hover{ border-color:var(--color-green-300); background:var(--color-surface); } .card--soft{ background:var(--color-green-100); border-color:transparent; box-shadow:none; } .card--soft:hover{ background:var(--color-green-200); border-color:var(--color-green-300); } /* 顶部色条（课程卡 / 入口卡） */ .card--topped{ border-top:4px solid var(--color-green-500); } /* 图标容器（优势卡 / 服务卡） */ .icon-badge{ width:56px; height:56px; border-radius:var(--radius-pill); background:var(--color-green-100); color:var(--color-green-700); display:grid; place-items:center; margin-bottom:var(--space-4); flex:none; } .icon-badge svg{ width:26px; height:26px; } .icon-badge--sm{ width:44px; height:44px; margin-bottom:var(--space-3); } .icon-badge--sm svg{ width:22px; height:22px; } .icon-badge--navy{ background:var(--color-navy-100); color:var(--color-navy-600); } /* 卡片内要点清单（✓ 图标） */ .check-list{ list-style:none; margin:0 0 var(--space-4); padding:0; } .check-list li{ display:flex; gap:var(--space-2); margin-bottom:var(--space-2); font-size:var(--fs-sm); line-height:var(--lh-sm); color:var(--color-text); } .check-list svg{ width:16px; height:16px; flex:none; margin-top:6px; color:var(--color-green-700); } .card .check-list + .link-inline{ margin-top:auto; padding-top:var(--space-2); } /* 入口卡（首页四大业务） */ .entry-card{ min-height:100%; } .entry-card .entry-arrow{ margin-top:auto; padding-top:var(--space-4); } /* ========================================================================== 10. 流程步骤条 ========================================================================== */ .steps{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-6); counter-reset:step; } .steps > li{ position:relative; margin:0; padding-left:var(--space-12); counter-increment:step; } .steps > li::before{ content:counter(step); position:absolute; left:0; top:0; width:40px; height:40px; border-radius:var(--radius-pill); background:var(--color-green-300); color:var(--color-navy-800); font-size:18px; font-weight:var(--fw-bold); display:grid; place-items:center; } .steps > li::after{ content:""; position:absolute; left:19px; top:44px; bottom:calc(-1 * var(--space-6) + 4px); width:2px; background:var(--color-green-200); } .steps > li:last-child::after{ content:none; } .steps h3{ font-size:var(--fs-h4); margin-bottom:var(--space-1); } .steps p{ font-size:var(--fs-sm); line-height:var(--lh-sm); color:var(--color-text-secondary); margin:0; } @media (min-width:1200px){ .steps{ grid-template-columns:repeat(4,1fr); gap:var(--space-6); } .steps--3{ grid-template-columns:repeat(3,1fr); } .steps--6{ grid-template-columns:repeat(3,1fr); gap:var(--space-8) var(--space-6); } .steps--6 > li:nth-child(3n)::after{ content:none; } .steps > li{ padding-left:0; padding-top:var(--space-16); } .steps > li::before{ top:0; } .steps > li::after{ left:52px; right:calc(-1 * var(--space-6)); top:19px; bottom:auto; width:auto; height:1px; background-image:linear-gradient(to right,var(--color-green-300) 50%,transparent 50%); background-size:10px 1px; background-repeat:repeat-x; } .steps > li:last-child::after{ content:none; } } /* ========================================================================== 11. 表格（课程分级 / 材料清单） ========================================================================== */ .table-wrap{ width:100%; overflow-x:auto; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); } /* 横向滚动容器可聚焦（tabindex="0" + role="region"）：键盘用户可左右滚动查看被裁切列（WCAG 2.1.1）。 焦点环 = 全站 focus ring 令牌（--shadow-focus）+ navy-600 描边，并显式保持大圆角不被全局焦点规则收窄。 */ .table-wrap:focus-visible{ outline:2px solid var(--color-navy-600); outline-offset:2px; border-radius:var(--radius-lg); box-shadow:var(--shadow-focus); } table.data{ width:100%; border-collapse:collapse; min-width:640px; } table.data caption{ caption-side:top; text-align:left; padding:var(--space-4) var(--space-5); font-size:var(--fs-xs); color:var(--color-text-muted); border-bottom:1px solid var(--color-border); } table.data th,table.data td{ padding:var(--space-4) var(--space-5); text-align:left; vertical-align:top; font-size:var(--fs-sm); line-height:var(--lh-sm); border-bottom:1px solid var(--color-border); } table.data thead th{ background:var(--color-navy-100); color:var(--color-navy-800); font-weight:var(--fw-semibold); font-size:var(--fs-sm); white-space:nowrap; } table.data tbody tr:last-child th,table.data tbody tr:last-child td{ border-bottom:0; } table.data tbody th{ color:var(--color-navy-800); font-weight:var(--fw-semibold); white-space:nowrap; } table.data tbody tr:nth-child(even){ background:var(--color-navy-50); } /* ========================================================================== 12. NAP 信息卡（
） ========================================================================== */ .nap-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-6); box-shadow:var(--shadow-sm); } @media (min-width:1200px){ .nap-card{ padding:var(--space-10); } } .nap-list{ margin:0; } .nap-list > div{ display:flex; gap:var(--space-4); align-items:flex-start; padding-block:var(--space-4); border-bottom:1px solid var(--color-border); } .nap-list > div:first-child{ padding-top:0; } .nap-list > div:last-child{ border-bottom:0; padding-bottom:0; } .nap-list svg{ width:24px; height:24px; flex:none; margin-top:2px; color:var(--color-green-700); } .nap-list dt{ font-size:var(--fs-xs); font-weight:var(--fw-semibold); color:var(--color-text-muted); letter-spacing:.02em; margin-bottom:2px; } .nap-list dd{ margin:0; font-size:var(--fs-body-lg); line-height:1.6; font-weight:var(--fw-semibold); color:var(--color-text); } .nap-list dd a{ color:var(--color-navy-600); font-variant-numeric:tabular-nums; } .nap-list dd .copy-note{ display:block; font-size:var(--fs-xs); font-weight:var(--fw-regular); color:var(--color-text-muted); } /* ========================================================================== 13. FAQ 手风琴（原生
） ========================================================================== */ .faq-list{ max-width:900px; } .faq-item{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); margin-bottom:var(--space-3); overflow:hidden; } .faq-item:last-child{ margin-bottom:0; } .faq-q{ padding:18px 24px; font-size:17px; line-height:1.6; font-weight:var(--fw-semibold); color:var(--color-navy-800); cursor:pointer; list-style:none; display:flex; align-items:flex-start; gap:var(--space-4); transition:background-color var(--duration-fast) var(--ease-standard); } .faq-q::-webkit-details-marker{ display:none; } .faq-q::after{ content:""; flex:none; width:18px; height:18px; margin-left:auto; margin-top:5px; background: linear-gradient(var(--color-green-700),var(--color-green-700)) center/18px 2px no-repeat, linear-gradient(var(--color-green-700),var(--color-green-700)) center/2px 18px no-repeat; transition:transform var(--duration-slow) var(--ease-standard); } .faq-item[open] .faq-q{ background:var(--color-green-100); } .faq-item[open] .faq-q::after{ transform:rotate(45deg); } .faq-a{ padding:var(--space-4) 24px var(--space-5); border-top:1px solid var(--color-border); } .faq-a p{ max-width:none; color:var(--color-text); } .faq-a ul{ margin-bottom:0; } /* ========================================================================== 14. 联系信息条 / 深色 CTA 区块 ========================================================================== */ .contact-band{ background:var(--color-navy-800); color:var(--color-text-inverse); position:relative; isolation:isolate; } .contact-band::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:url("../bg-brand.jpg"); background-size:600px; background-repeat:repeat; opacity:.05; } .contact-band-grid{ display:grid; gap:var(--space-6); max-width:760px; } .contact-band h2{ color:var(--color-text-inverse); } .contact-band p{ color:var(--color-text-inverse-secondary); } /* ========================================================================== 15. 面包屑 ========================================================================== */ .breadcrumb{ padding-block:var(--space-4) 0; background:var(--color-bg); } .breadcrumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); list-style:none; margin:0; padding:0; } .breadcrumb li{ margin:0; font-size:var(--fs-xs); color:var(--color-text-muted); } .breadcrumb a{ color:var(--color-text-muted); } .breadcrumb a:hover{ color:var(--color-navy-700); } .breadcrumb .sep{ color:var(--color-navy-300); } .breadcrumb [aria-current="page"]{ color:var(--color-text-secondary); font-weight:var(--fw-semibold); } /* ========================================================================== 16. 页脚 ========================================================================== */ .site-footer{ background:var(--color-navy-900); color:var(--color-text-inverse-secondary); padding-block:var(--space-12) var(--space-6); position:relative; isolation:isolate; } .site-footer::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:url("../bg-brand.jpg"); background-size:600px; background-repeat:repeat; opacity:.05; } .footer-grid{ display:grid; gap:var(--space-10); } @media (min-width:768px){ .footer-grid{ grid-template-columns:repeat(2,1fr); } } @media (min-width:1200px){ .footer-grid{ grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--space-8); } } .footer-brand img{ height:84px; width:auto; margin-bottom:var(--space-4); } .footer-brand p{ font-size:var(--fs-sm); line-height:var(--lh-sm); color:var(--color-text-inverse-secondary); max-width:36ch; } /* 页脚列标题统一用

：