/* ==========================================================================
WorkBuddy 学习社区 — 全站样式
设计规范见 DESIGN.md：主色 #5B5BD6 / 深色 #0B0B12 / 强调 #F26B3A
========================================================================== */
/* ---------- 1. Design Tokens ---------- */
:root {
--color-primary: #5B5BD6;
--color-primary-hover: #4A4AC4;
--color-primary-dark: #3A3AA0;
--color-primary-50: #EEEEFB;
--color-ink: #0B0B12;
--color-ink-soft: #171733;
--color-ink-line: rgba(255, 255, 255, .12);
--color-ink-text-2: rgba(255, 255, 255, .72);
--color-ink-text-3: rgba(255, 255, 255, .52);
--color-accent: #F26B3A;
--color-accent-hover: #E25A2A;
--color-text: #16161D;
--color-text-2: #5C5C6B;
--color-text-3: #8A8A99;
--color-bg: #FFFFFF;
--color-surface: #FAFAFB;
--color-surface-2: #F1F1F4;
--color-border: #E4E4EA;
--color-border-strong: #D2D2DB;
--color-success: #0F7B4F;
--color-success-bg: #E6F5EE;
--color-warning: #9A5B00;
--color-warning-bg: #FFF3E0;
--color-danger: #C2352B;
--color-danger-bg: #FDECEA;
--color-info: #12508F;
--color-info-bg: #E8F1FB;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--shadow-xs: 0 1px 2px rgba(16, 16, 32, .05);
--shadow-sm: 0 2px 6px rgba(16, 16, 32, .06);
--shadow-md: 0 4px 16px rgba(16, 16, 32, .06), 0 1px 3px rgba(16, 16, 32, .04);
--shadow-lg: 0 16px 40px rgba(16, 16, 32, .10), 0 2px 8px rgba(16, 16, 32, .04);
--container: 1160px;
--header-h: 68px;
--ease: .18s ease;
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei", Inter, sans-serif;
--font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
/* ---------- 2. Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); scrollbar-gutter: stable; }
body {
margin: 0;
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.75;
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
border-radius: 4px;
}
/* ---------- 3. Layout ---------- */
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 24px;
}
.section { padding: 96px 0; }
.section--tight { padding: 64px 0; }
.section--surface { background: var(--color-surface); border-block: 1px solid var(--color-border); }
.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head--center { margin-inline: auto; text-align: center; }
.eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 600;
letter-spacing: .08em;
color: var(--color-primary);
text-transform: uppercase;
margin-bottom: 12px;
}
.section-title { font-size: 28px; margin-bottom: 12px; }
.section-desc { font-size: 17px; color: var(--color-text-2); }
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.flex-between {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
/* ---------- 4. Header & Navigation ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
height: var(--header-h);
background: rgba(255, 255, 255, .9);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--color-border);
transition: box-shadow var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.header-inner {
height: var(--header-h);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.logo {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 16px;
font-weight: 600;
color: var(--color-text);
flex-shrink: 0;
}
.logo:hover { color: var(--color-text); }
.logo-mark {
width: 40px;
height: 40px;
display: block;
object-fit: contain;
flex-shrink: 0;
/* 微立体阴影：让小图标在白底 header 上更醒目 */
filter: drop-shadow(0 1px 2px rgba(11, 11, 18, .08));
}
/* ---------- 品牌 logo 亮暗双图（2026-10-20 更换妙思品牌） ----------
亮色模式显示真彩版 muse-logo-color，暗色模式显示白色版 muse-logo-light；
两张 ![]()
并排写在 HTML 中，由下面三条规则按主题二选一显示 */
.logo-mark--light { display: none; }
html[data-theme="dark"] .logo-mark--light { display: block; }
html[data-theme="dark"] .logo-mark--color { display: none; }
/* 品牌字标图片（替换原「WorkBuddy共创交流社区」文字，高度对齐原文字行高 28px） */
.logo-word {
height: 40px;
width: auto;
display: block;
flex-shrink: 0;
}
/* 暗色主题下把黑色字标反相为白色，避免在深色 header 上不可见 */
html[data-theme="dark"] .logo-word { filter: brightness(0) invert(1); }
.nav { display: flex; align-items: center; gap: 6px; }
.nav-link {
position: relative;
padding: 9px 14px;
border-radius: var(--radius-sm);
font-size: 15px;
font-weight: 500;
color: var(--color-text-2);
white-space: nowrap;
transition: color var(--ease), background var(--ease);
}
/* CodeBuddy 风格：鼠标悬停滑动下划线动画 */
.nav-link::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: 5px;
height: 2px;
border-radius: 2px;
background: var(--color-primary);
transform: scaleX(0);
transform-origin: center;
transition: transform .26s cubic-bezier(.4, 0, .2, 1);
}
.nav-link:hover { color: var(--color-primary); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.is-active,
.nav-link[aria-current="page"] {
color: var(--color-primary);
}
.nav-link.is-active::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); }
/* 文字上翻特效：鼠标悬停时文字整体上翻，露出下方复制层 */
.nav-link__roll {
position: relative;
display: inline-block;
overflow: hidden;
line-height: inherit;
vertical-align: top;
}
.nav-link__roll > span {
display: block;
transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.nav-link__roll__dup {
position: absolute;
top: 100%;
left: 0;
width: 100%;
}
.nav-link:hover .nav-link__roll > span {
transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
.nav-link__roll > span { transition: none; }
.nav-link:hover .nav-link__roll > span { transform: none; }
}
.header-actions { display: flex; align-items: center; gap: 12px; }
.nav-toggle {
display: none;
width: 44px;
height: 44px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
background: #fff;
padding: 0;
place-items: center;
}
.nav-toggle span {
display: block;
width: 18px;
height: 1.5px;
background: var(--color-text);
margin: 3px auto;
transition: transform var(--ease), opacity var(--ease);
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }
.mobile-menu {
display: none;
background: #fff;
border-bottom: 1px solid var(--color-border);
padding: 12px 0 20px;
}
.mobile-menu.is-open { display: block; }
.mobile-menu a {
display: block;
padding: 12px 0;
font-size: 16px;
color: var(--color-text);
border-bottom: 1px solid var(--color-border);
}
.mobile-menu .btn { margin-top: 16px; width: 100%; justify-content: center; }
/* ---------- 导航下拉（课程学习 一级目录 → 二级目录） ---------- */
.nav-dropdown { position: relative; }
.nav-dropdown__toggle {
display: inline-flex; align-items: center; gap: 5px;
background: none; border: 0; font: inherit; cursor: pointer;
}
.nav-dropdown__toggle .nav-caret { transition: transform var(--ease); flex-shrink: 0; }
.nav-dropdown.is-open .nav-dropdown__toggle .nav-caret { transform: rotate(180deg); }
.nav-dropdown__menu {
position: absolute; top: calc(100% + 8px); left: 50%;
transform: translateX(-50%) translateY(8px);
min-width: 288px; padding: 8px;
background: #fff; border: 1px solid var(--color-border);
border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
z-index: 200; text-align: left;
}
/* 在 toggle 和 menu 之间补一个透明的 hover 安全区，防止鼠标穿过 8px 间隙时菜单关闭 */
.nav-dropdown__menu::before {
content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
background: transparent; pointer-events: auto;
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu,
.nav-dropdown.is-open .nav-dropdown__menu {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.nav-dropdown__item {
display: block; padding: 11px 14px; border-radius: var(--radius-sm);
color: var(--color-text); font-size: 14px; font-weight: 500; line-height: 1.5;
white-space: normal; transition: background var(--ease), color var(--ease);
}
.nav-dropdown__item small {
display: block; font-weight: 400; font-size: 12px;
color: var(--color-text-3); margin-top: 3px; line-height: 1.5;
}
.nav-dropdown__item:hover { background: var(--color-surface); color: var(--color-primary); }
.nav-dropdown__item:hover small { color: var(--color-primary); }
/* 移动端：课程学习 折叠分组 */
.mobile-dropdown { padding: 0; }
.mobile-dropdown__parent {
padding: 12px 0; font-size: 16px; font-weight: 600; color: var(--color-text);
border-bottom: 1px solid var(--color-border);
}
.mobile-dropdown a {
padding-left: 16px; font-size: 15px; color: var(--color-text-2);
}
/* 暗色主题 */
html[data-theme="dark"] .nav-dropdown__menu {
background: var(--color-ink-soft); border-color: var(--color-ink-line);
}
html[data-theme="dark"] .nav-dropdown__item { color: var(--color-ink-text-2); }
html[data-theme="dark"] .nav-dropdown__item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
html[data-theme="dark"] .mobile-dropdown__parent { color: #fff; border-color: var(--color-ink-line); }
html[data-theme="dark"] .mobile-dropdown a { color: var(--color-ink-text-3); }
/* ---------- 5. Buttons ---------- */
.btn {
height: 44px;
padding: 0 20px;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid transparent;
background: transparent;
transition: background var(--ease), color var(--ease), transform var(--ease),
border-color var(--ease), box-shadow var(--ease);
white-space: nowrap;
}
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-hover); color: #fff; transform: translateY(-1px); }
.btn--accent { background: var(--color-accent); color: #fff; }
.btn--accent:hover { background: var(--color-accent-hover); color: #fff; transform: translateY(-1px); }
.btn--secondary { background: #fff; color: var(--color-text); border-color: var(--color-border-strong); }
.btn--secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn--danger { background: #e5484d; color: #fff; border-color: transparent; }
.btn--danger:hover { background: #d23b40; color: #fff; transform: translateY(-1px); }
.btn--ghost { color: var(--color-text-2); }
.btn--ghost:hover { background: var(--color-surface-2); color: var(--color-text); }
.btn--light { background: #fff; color: var(--color-ink); }
.btn--light:hover { color: var(--color-ink); transform: translateY(-1px); }
.btn--sm { height: 36px; padding: 0 14px; font-size: 14px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .6; pointer-events: none; }
.link-arrow { font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.link-arrow::after { content: "→"; transition: transform var(--ease); }
.link-arrow:hover::after { transform: translateX(3px); }
/* ---------- 6. Badges & Tags ---------- */
.badge {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
.badge--easy { background: var(--color-success-bg); color: var(--color-success); }
.badge--mid { background: var(--color-warning-bg); color: var(--color-warning); }
.badge--hard { background: var(--color-primary-50); color: var(--color-primary-dark); }
.tag {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 10px;
border-radius: var(--radius-sm);
background: var(--color-surface-2);
color: var(--color-text-2);
font-size: 12px;
white-space: nowrap;
}
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
/* ---------- 7. Cards ---------- */
.card {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 24px;
transition: border-color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.card--hover:hover {
border-color: var(--color-primary);
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
/* 6 步路径卡片：左侧渐变条 + 步骤号缩放 */
.card--step{
position: relative;
overflow: hidden;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 24px 24px 24px 28px;
transition: all .25s cubic-bezier(.2, .9, .3, 1.1);
}
.card--step::before{
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: linear-gradient(180deg, var(--color-primary), var(--color-accent));
opacity: .4;
transition: opacity .25s ease, width .25s ease;
}
.card--step:hover{
border-color: rgba(91,91,214,.35);
transform: translateY(-4px);
box-shadow:
0 18px 40px -16px rgba(11,11,18,.18),
0 4px 12px rgba(91,91,214,.12);
}
.card--step:hover::before{ width: 6px; opacity: 1; }
.card--step .feature-num{
transition: color .25s ease, transform .25s ease;
display: inline-block;
transform-origin: left center;
}
.card--step:hover .feature-num{
color: var(--color-accent);
transform: scale(1.08) translateX(2px);
}
.card--step::after{
content: "→";
position: absolute;
right: 22px; top: 22px;
width: 22px; height: 22px;
display: grid; place-items: center;
border-radius: 50%;
background: var(--color-primary-50);
color: var(--color-primary);
font-size: 13px; font-weight: 700;
opacity: 0;
transform: translate(-6px, 0) scale(.8);
transition: all .25s cubic-bezier(.2, .9, .3, 1.1);
}
.card--step:hover::after{
opacity: 1;
transform: translate(0, 0) scale(1);
}
.card-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--color-primary-50);
color: var(--color-primary);
display: grid;
place-items: center;
font-size: 18px;
font-weight: 600;
margin-bottom: 16px;
}
.card h3 { font-size: 17px; margin-bottom: 8px; }
.card p { font-size: 14px; color: var(--color-text-2); }
/* ---------- 8. Dark Hero ---------- */
.hero {
position: relative;
background: var(--color-ink);
color: #fff;
overflow: hidden;
padding: 96px 0 0;
}
.hero::before {
content: "";
position: absolute;
top: -220px;
right: -160px;
width: 620px;
height: 620px;
border-radius: 50%;
background: radial-gradient(circle, rgba(91, 91, 214, .45) 0%, rgba(91, 91, 214, 0) 62%);
pointer-events: none;
}
.hero::after {
content: "";
position: absolute;
bottom: -260px;
left: -180px;
width: 520px;
height: 520px;
border-radius: 50%;
background: radial-gradient(circle, rgba(242, 107, 58, .22) 0%, rgba(242, 107, 58, 0) 65%);
pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
@keyframes buddyBobbing {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* 全站右侧悬浮机器人 */
.floating-buddy {
position: fixed;
right: 24px;
top: 50%;
transform: translateY(-50%);
width: 168px;
height: 168px;
z-index: 92;
cursor: pointer;
pointer-events: auto;
filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .28));
animation: buddyBobbing 3.2s ease-in-out infinite;
will-change: transform;
}
.floating-buddy__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
transition: opacity .25s ease, transform .25s ease;
}
.floating-buddy__img--hover { opacity: 0; }
.floating-buddy:hover { transform: translateY(-50%) scale(1.08); }
.floating-buddy:hover .floating-buddy__img--default { opacity: 0; }
.floating-buddy:hover .floating-buddy__img--hover { opacity: 1; }
/* 课程学习接入后主导航共 9 项：中屏收缩避免溢出，平板切换为汉堡菜单 */
@media (max-width: 1200px) {
.nav { gap: 2px; }
.nav-link { padding: 8px 7px; font-size: 13px; }
}
@media (max-width: 1024px) {
.nav { display: none; }
.nav-toggle { display: grid; }
.theme-toggle { right: 29px; top: calc(50% - 94px); left: auto; bottom: auto; }
}
@media (max-width: 1024px) {
.floating-buddy { width: 72px; height: 72px; right: 16px; }
}
@media (max-width: 768px) {
.floating-buddy { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.floating-buddy { animation: none !important; }
}
/* 大屏下缩小悬浮机器人，减少对视频/统计的遮挡 */
@media (min-width: 1280px) {
.floating-buddy { width: 116px; height: 116px; right: 20px; }
.theme-toggle { right: 55px; top: calc(50% - 116px); left: auto; bottom: auto; }
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
padding-bottom: 80px;
}
/* 保持左右栏平衡居中，机器人图与文案视觉对等 */
@media (min-width: 1280px) {
.hero-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
}
.hero h1 {
font-size: 48px;
line-height: 1.18;
letter-spacing: -.02em;
margin-bottom: 20px;
}
.hero h1 em { font-style: normal; color: #A9A6FF; }
.hero-sub {
font-size: 17px;
line-height: 1.8;
color: var(--color-ink-text-2);
max-width: 520px;
margin-bottom: 32px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.hero-note { font-size: 13px; color: var(--color-ink-text-3); }
/* Hero 平台支持行（提升信息密度） */
.hero-platforms {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 22px;
flex-wrap: wrap;
}
.hero-platforms__label {
font-size: 12px;
color: var(--color-ink-text-3);
letter-spacing: .04em;
}
.hero-platforms__list {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 10px;
list-style: none;
margin: 0;
padding: 0;
}
.hero-platforms__list li {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--color-ink-text-2);
padding: 5px 12px;
border: 1px solid var(--color-ink-line);
border-radius: 999px;
background: rgba(255, 255, 255, .03);
transition: border-color .2s ease, background .2s ease;
}
.hero-platforms__list li:hover {
border-color: rgba(255, 255, 255, .22);
background: rgba(255, 255, 255, .06);
}
.hp-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--c, #fff);
flex-shrink: 0;
}
/* Hero 右侧视频演示卡 */
.hero-video {
position: relative;
background: rgba(255, 255, 255, .04);
border: 1px solid var(--color-ink-line);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
backdrop-filter: blur(6px);
}
.hero-video__bar {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
border-bottom: 1px solid var(--color-ink-line);
background: rgba(255, 255, 255, .04);
}
.hero-video__dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, .22);
}
.hero-video__title {
font-size: 12px;
color: var(--color-ink-text-3);
margin-left: 6px;
letter-spacing: .02em;
}
.hero-video__badge {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
color: #fff;
padding: 3px 10px 3px 8px;
border-radius: 999px;
background: linear-gradient(135deg, rgba(242, 107, 58, .92), rgba(217, 70, 50, .92));
box-shadow: 0 4px 12px rgba(242, 107, 58, .35);
letter-spacing: .06em;
text-transform: uppercase;
}
.hero-video__live {
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 0 rgba(255, 255, 255, .7);
animation: ctaPulse 1.6s ease-out infinite;
}
.hero-video__frame {
position: relative;
aspect-ratio: 16 / 10;
background: linear-gradient(135deg, #0a0a14 0%, #15151e 100%);
overflow: hidden;
width: 100%;
border: none;
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
display: block;
padding: 0;
cursor: zoom-in;
font: inherit;
color: inherit;
text-align: left;
}
/* ===== 视频灯箱 ===== */
.video-modal{
position: fixed; inset: 0; z-index: 1000;
display: none; align-items: center; justify-content: center;
background: rgba(11,11,18,.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: 32px;
animation: videoModalFade .25s ease;
}
.video-modal.show{ display: flex; }
@keyframes videoModalFade { from { opacity: 0; } to { opacity: 1; } }
.video-modal__box{
position: relative;
width: 100%;
max-width: 1080px;
aspect-ratio: 16 / 9;
background: #000;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 40px 100px -20px rgba(0,0,0,.7);
animation: videoModalPop .35s cubic-bezier(.2,.9, .3, 1.15);
}
@keyframes videoModalPop { from { transform: scale(.92); } to { transform: scale(1); } }
.video-modal__el{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: contain;
background: #000;
}
.video-modal__close{
position: absolute; top: -44px; right: 0;
width: 36px; height: 36px; border-radius: 50%;
background: rgba(255,255,255,.1); color: #fff;
border: 1px solid rgba(255,255,255,.2);
display: grid; place-items: center; cursor: pointer;
font-size: 18px; line-height: 1; transition: all .18s ease;
}
.video-modal__close:hover{ background: rgba(255,255,255,.2); }
.video-modal__tip{
position: absolute; bottom: -36px; left: 0;
font-size: 13px; color: rgba(255,255,255,.65);
}
@media (max-width: 640px){
.video-modal{ padding: 16px; }
.video-modal__close{ top: -40px; right: -4px; }
.video-modal__tip{ display: none; }
}
.hero-video__el {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
.hero-video__glow {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(120% 80% at 50% 100%, rgba(91, 91, 214, .18) 0%, transparent 60%),
radial-gradient(80% 60% at 0% 0%, rgba(242, 107, 58, .08) 0%, transparent 60%);
mix-blend-mode: screen;
}
.mock-msg {
border: 1px solid var(--color-ink-line);
border-radius: var(--radius-sm);
padding: 12px 14px;
font-size: 13px;
color: var(--color-ink-text-2);
background: rgba(255, 255, 255, .03);
}
.mock-msg--ai {
background: rgba(91, 91, 214, .16);
border-color: rgba(139, 123, 240, .38);
color: #E7E6FF;
}
.mock-msg strong { display: block; font-size: 12px; margin-bottom: 4px; color: #A9A6FF; font-weight: 600; }
/* 数据条 */
.stats {
border-top: 1px solid var(--color-ink-line);
padding: 28px 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
position: relative;
z-index: 1;
justify-items: center;
text-align: center;
}
.stat-num { font-size: 36px; font-weight: 600; letter-spacing: -.01em; }
.stat-num span { font-size: 18px; font-weight: 400; color: var(--color-ink-text-3); margin-left: 2px; }
.stat-label { font-size: 15px; color: var(--color-ink-text-3); }
/* ---------- 9. Feature / 认知卡 ---------- */
.feature-num {
font-size: 13px;
font-weight: 600;
color: var(--color-primary);
letter-spacing: .06em;
margin-bottom: 10px;
}
/* ---------- 10. Steps 时间轴 ---------- */
.steps { position: relative; padding-left: 0; }
.step {
position: relative;
display: grid;
grid-template-columns: 56px 1fr;
gap: 20px;
padding-bottom: 32px;
}
.step:last-child { padding-bottom: 0; }
.step:not(:last-child)::before {
content: "";
position: absolute;
left: 27px;
top: 48px;
bottom: 0;
width: 1px;
background: var(--color-border);
}
.step-index {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--color-primary-50);
color: var(--color-primary-dark);
display: grid;
place-items: center;
font-size: 17px;
font-weight: 600;
z-index: 1;
}
.step-body { padding-top: 6px; }
.step-body h3 { font-size: 18px; margin-bottom: 8px; }
.step-body p { color: var(--color-text-2); font-size: 15px; margin-bottom: 12px; }
.step-tip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: var(--radius-sm);
background: var(--color-surface);
border: 1px solid var(--color-border);
font-size: 13px;
color: var(--color-text-2);
}
.step-tip strong { color: var(--color-text); font-weight: 600; }
/* ---------- 11. Prompt 模板框 ---------- */
.prompt-box {
background: var(--color-ink);
border-radius: var(--radius-md);
padding: 24px;
color: #fff;
}
/* ---------- 11.1 投稿区右侧栏（提纲 + 3 信息卡） ---------- */
.submit-side-wrap{
display: flex;
flex-direction: column;
gap: 18px;
position: sticky;
top: calc(var(--header-h) + 24px);
}
.aside-card{
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 22px 22px 18px;
transition: border-color .18s ease, box-shadow .18s ease;
}
.aside-card:hover{
border-color: rgba(91,91,214,.35);
box-shadow: 0 8px 22px -14px rgba(11,11,18,.18);
}
.aside-card__head{
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.aside-card__head h3{
font-size: 15px;
font-weight: 600;
color: var(--color-ink);
margin: 0;
}
.aside-card__icon{
width: 28px; height: 28px;
display: grid; place-items: center;
border-radius: 8px;
background: var(--color-primary-50);
color: var(--color-primary);
font-size: 14px;
font-weight: 700;
flex: 0 0 auto;
}
.aside-card__icon--ok{
background: var(--color-success-bg);
color: var(--color-success);
}
.aside-card__icon--score{
background: #FFF1EA;
color: var(--color-accent);
}
.aside-card__more,
.aside-card__tip{
display: block;
margin-top: 12px;
font-size: 12px;
color: var(--color-text-3);
}
.aside-card__more{
color: var(--color-primary);
font-weight: 500;
text-decoration: none;
}
.aside-card__more:hover{ color: var(--color-primary-dark); text-decoration: underline; }
/* 评分维度 */
.aside-score{
list-style: none;
margin: 0; padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.aside-score__row{
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 4px;
}
.aside-score__row strong{
font-size: 13px;
font-weight: 500;
color: var(--color-ink);
}
.aside-score__row span{
font-size: 12px;
font-weight: 600;
color: var(--color-primary);
}
.aside-score__bar{
height: 5px;
border-radius: 999px;
background: var(--color-surface-2);
overflow: hidden;
}
.aside-score__bar i{
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
transition: width .35s ease;
}
.aside-card:hover .aside-score__bar i{ filter: brightness(1.08); }
@media (max-width: 1024px){
.submit-side-wrap{ position: static; }
.prompt-box{ padding: 20px; }
.aside-card{ padding: 18px; }
}
.prompt-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}
.prompt-head h3 { font-size: 15px; color: #fff; }
.prompt-head span { font-size: 13px; color: var(--color-ink-text-3); }
.prompt-formula {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.prompt-formula span {
padding: 6px 12px;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, .08);
border: 1px solid var(--color-ink-line);
font-size: 13px;
color: #E7E6FF;
}
.prompt-box pre {
margin: 0 0 16px;
padding: 16px;
background: rgba(255, 255, 255, .04);
border: 1px solid var(--color-ink-line);
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.8;
color: #DCDCEA;
white-space: pre-wrap;
word-break: break-word;
}
/* ---------- 12. Accordion ---------- */
.accordion { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.accordion-item + .accordion-item { border-top: 1px solid var(--color-border); }
.accordion-trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 20px;
background: #fff;
border: 0;
text-align: left;
font-size: 15px;
font-weight: 600;
color: var(--color-text);
}
.accordion-trigger:hover { background: var(--color-surface); }
.accordion-trigger::after { content: "+"; font-size: 18px; color: var(--color-text-3); font-weight: 400; }
.accordion-trigger.is-open::after { content: "−"; }
.accordion-panel { display: none; padding: 0 20px 20px; font-size: 15px; color: var(--color-text-2); }
.accordion-panel.is-open { display: block; }
/* ---------- 13. Filter bar & Case grid ---------- */
.filter-bar {
position: sticky;
top: var(--header-h);
z-index: 90;
background: rgba(255, 255, 255, .9);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--color-border);
padding: 16px 0;
margin-bottom: 32px;
}
.filter-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.filter-row + .filter-row { margin-top: 10px; }
.filter-label { font-size: 13px; color: var(--color-text-3); width: 40px; flex-shrink: 0; }
.chip {
height: 34px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid var(--color-border-strong);
background: #fff;
font-size: 14px;
color: var(--color-text-2);
transition: all var(--ease);
}
.chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.filter-count { font-size: 13px; color: var(--color-text-3); margin-left: auto; }
.case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.case-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
transition: border-color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.case-card:hover {
border-color: var(--color-primary);
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.case-cover {
aspect-ratio: 16 / 9;
display: grid;
place-items: center;
color: #fff;
font-size: 30px;
font-weight: 600;
letter-spacing: -.02em;
position: relative;
overflow: hidden;
}
/* 后台配置的封面缩略图（URL），铺满整个头图区域 */
.case-cover__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.case-cover--1 { background: linear-gradient(135deg, #5B5BD6, #8B7BF0); }
.case-cover--2 { background: linear-gradient(135deg, #0F7B4F, #4BBF8A); }
.case-cover--3 { background: linear-gradient(135deg, #F26B3A, #F5A05A); }
.case-cover--4 { background: linear-gradient(135deg, #12508F, #4A90D9); }
.case-cover--5 { background: linear-gradient(135deg, #7A3FA0, #B57BD6); }
.case-cover--6 { background: linear-gradient(135deg, #0B0B12, #43436B); }
.case-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.case-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.case-scene { font-size: 12px; color: var(--color-text-3); }
.case-title { font-size: 17px; font-weight: 600; line-height: 1.45; }
.case-summary {
font-size: 14px;
color: var(--color-text-2);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.case-flow {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--color-text-3);
}
.case-flow i { font-style: normal; color: var(--color-border-strong); }
.case-foot {
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
color: var(--color-text-3);
}
.empty-state {
text-align: center;
padding: 64px 24px;
border: 1px dashed var(--color-border-strong);
border-radius: var(--radius-md);
color: var(--color-text-3);
}
.empty-state h3 { font-size: 17px; color: var(--color-text); margin-bottom: 8px; }
/* ---------- 14. 内页页头 ---------- */
.page-head {
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
padding: 56px 0 48px;
}
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--color-text-3);
margin-bottom: 16px;
}
.breadcrumb a { color: var(--color-text-3); }
.breadcrumb a:hover { color: var(--color-primary); }
/* 移动端：面包屑链接加高到 24px，满足 WCAG 2.5.8 最小目标尺寸 */
@media (max-width: 768px){
.breadcrumb a{ display:inline-flex; align-items:center; min-height:24px; }
}
.page-head h1 { font-size: 36px; margin-bottom: 12px; }
/* 一页只保留一个 h1（SEO）："关于社区"段原为 h1，降级 h2 后保持同样视觉 */
.page-head h2.page-head__h1-as-h2 { font-size: 36px; margin: 0 0 12px; font-weight: inherit; line-height: inherit; }
.page-head p { font-size: 17px; color: var(--color-text-2); max-width: 640px; }
/* ---------- 15. 案例详情 ---------- */
.article { max-width: 760px; margin: 0 auto; }
.article-meta {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.article-cover {
aspect-ratio: 16 / 9;
border-radius: var(--radius-lg);
display: grid;
place-items: center;
color: #fff;
font-size: 40px;
font-weight: 600;
margin-bottom: 40px;
position: relative;
overflow: hidden;
}
.article h2 {
font-size: 22px;
margin: 40px 0 16px;
padding-left: 14px;
border-left: 3px solid var(--color-primary);
line-height: 1.5;
}
.article h3 { font-size: 17px; margin: 28px 0 10px; }
.article p { font-size: 16px; color: #2E2E3A; margin-bottom: 16px; }
.article ul { margin-bottom: 16px; }
.article ul li {
position: relative;
padding-left: 20px;
margin-bottom: 10px;
font-size: 16px;
color: #2E2E3A;
}
.article ul li::before {
content: "";
position: absolute;
left: 4px;
top: 12px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--color-primary);
}
.flow-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 24px 0 32px; }
.flow-step {
padding: 8px 16px;
border-radius: 999px;
background: var(--color-primary-50);
color: var(--color-primary-dark);
font-size: 14px;
font-weight: 600;
}
.flow-arrow { color: var(--color-text-3); }
.callout {
display: flex;
gap: 12px;
padding: 16px 18px;
border-radius: var(--radius-md);
background: var(--color-warning-bg);
border: 1px solid #F5D9A8;
font-size: 15px;
color: #6B4200;
margin-bottom: 24px;
}
.callout--info { background: var(--color-info-bg); border-color: #BBD7F5; color: #0E3F70; }
.callout strong { font-weight: 600; }
.article-foot {
margin-top: 48px;
padding-top: 24px;
border-top: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.author-chip { display: flex; align-items: center; gap: 12px; }
.author-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--color-primary-50);
color: var(--color-primary-dark);
display: grid;
place-items: center;
font-weight: 600;
font-size: 15px;
}
/* ---------- 16. 实战营 ---------- */
.day-card {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
}
.day-head {
padding: 20px 24px;
background: var(--color-ink);
color: #fff;
display: flex;
align-items: baseline;
gap: 10px;
}
.day-head strong { font-size: 18px; font-weight: 600; }
.day-head span { font-size: 13px; color: var(--color-ink-text-3); }
.day-body { padding: 8px 24px 24px; }
.module-item { padding: 20px 0; border-bottom: 1px dashed var(--color-border); }
.module-item:last-child { border-bottom: 0; padding-bottom: 0; }
.module-no { font-size: 13px; font-weight: 600; color: var(--color-primary); letter-spacing: .06em; }
.module-item h4 { font-size: 16px; margin: 6px 0 8px; }
.module-item p { font-size: 14px; color: var(--color-text-2); }
.day-result {
margin-top: 16px;
padding: 12px 16px;
border-radius: var(--radius-sm);
background: var(--color-success-bg);
color: var(--color-success);
font-size: 13px;
font-weight: 600;
}
.price-card {
background: #fff;
border: 2px solid var(--color-primary);
border-radius: var(--radius-lg);
padding: 32px;
box-shadow: var(--shadow-md);
}
.price-main { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 4px; }
.price-main strong { font-size: 40px; font-weight: 600; letter-spacing: -.02em; }
.price-main span { font-size: 15px; color: var(--color-text-3); }
.price-old { font-size: 14px; color: var(--color-text-3); text-decoration: line-through; }
.benefit-list { margin: 24px 0; display: grid; gap: 12px; }
.benefit-list li { display: flex; gap: 10px; font-size: 15px; color: var(--color-text-2); }
.benefit-list li::before {
content: "✓";
color: var(--color-success);
font-weight: 600;
flex-shrink: 0;
}
/* 权益列表：重点条目高亮（如 30 天 1 对 1 陪跑） */
.benefit-list li.is-highlight{
align-items: flex-start;
margin: 4px 0;
padding: 14px 16px;
background: linear-gradient(135deg, rgba(91,91,214,.06), rgba(242,107,58,.05));
border: 1px solid rgba(91,91,214,.18);
border-radius: var(--radius-md);
}
.benefit-list li.is-highlight::before{ margin-top: 2px; }
.benefit-badge{
display: inline-block;
margin-left: 6px;
padding: 2px 8px;
border-radius: 999px;
background: linear-gradient(135deg, var(--color-accent), #FF9239);
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: .02em;
white-space: nowrap;
vertical-align: middle;
}
/* ---------- 17. 表单 ---------- */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 14px; font-weight: 600; }
.form-hint{
font-weight: 400;
font-size: 12.5px;
color: var(--color-text-3);
margin-left: 4px;
}
.input {
height: 44px;
padding: 0 14px;
border: 1px solid var(--color-border-strong);
border-radius: 10px;
background: #fff;
font-size: 15px;
font-family: inherit;
color: var(--color-text);
width: 100%;
transition: border-color var(--ease), box-shadow var(--ease);
}
textarea.input { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.7; resize: vertical; }
.input::placeholder { color: var(--color-text-3); }
.input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-50);
}
.field-error { font-size: 13px; color: var(--color-danger); display: none; }
.field.is-invalid .input { border-color: var(--color-danger); }
.field.is-invalid .field-error { display: block; }
.form-note { font-size: 13px; color: var(--color-text-3); }
.form-success {
display: none;
padding: 16px;
border-radius: var(--radius-md);
background: var(--color-success-bg);
color: var(--color-success);
font-size: 15px;
font-weight: 600;
}
.form-success.is-visible { display: block; }
/* 投稿表单的横向字段排版 */
.form-grid {
display: grid;
grid-template-columns: 1.2fr 1fr 0.8fr;
gap: 12px;
}
/* 投稿横屏表单：上半 3 列 meta + 下半 2×2 正文 + 一行 button */
.form--landscape{
gap: 14px;
background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFB 100%);
border: 1px solid var(--color-border);
border-radius: 18px;
padding: 22px 24px 20px;
box-shadow: 0 16px 40px -28px rgba(11,11,18,.18);
}
.form--landscape .form-grid--meta{
grid-template-columns: 1.4fr 1fr 0.9fr;
}
.form--landscape .form-grid--body{
grid-template-columns: 1fr 1fr;
gap: 12px 16px;
}
.form--landscape .form-grid--body .field{
margin: 0;
}
.form--landscape .form-grid--body textarea.input{
min-height: 76px;
height: 76px;
resize: vertical;
line-height: 1.55;
}
.form--landscape .form-grid--foot{
grid-template-columns: auto 1fr;
gap: 12px 16px;
align-items: center;
margin-top: 4px;
}
/* 上半输入框拉满高度一致 */
.form--landscape .input{ height: 42px; }
.form--landscape select.input{ padding-right: 36px; }
@media (max-width: 768px) {
.form-grid { grid-template-columns: 1fr; }
.form--landscape{ padding: 18px; }
.form--landscape .form-grid--body{ grid-template-columns: 1fr; }
.form--landscape .form-grid--body textarea.input{ min-height: 96px; height: auto; }
.form--landscape .form-grid--foot{ grid-template-columns: 1fr; }
}
select.input {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}
.submit-output {
margin-top: 20px;
padding: 20px;
border-radius: var(--radius-md);
background: var(--color-surface);
border: 1px solid var(--color-border);
}
.submit-output[hidden] { display: none; }
.submit-output h4 { font-size: 15px; margin-bottom: 12px; }
.submit-output pre {
margin: 0 0 16px;
padding: 16px;
background: var(--color-ink);
color: #DCDCEA;
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.8;
white-space: pre-wrap;
word-break: break-word;
max-height: 360px;
overflow: auto;
}
/* ---------- 18. 共建者 & 投稿 ---------- */
.contributor {
display: flex;
align-items: center;
gap: 14px;
padding: 16px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: #fff;
}
.contributor-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
display: grid;
place-items: center;
font-weight: 600;
color: #fff;
flex-shrink: 0;
font-size: 16px;
}
.contributor strong { display: block; font-size: 15px; }
.contributor span { font-size: 13px; color: var(--color-text-3); }
/* ---------- 19. CTA 条 ---------- */
.cta-band {
background: var(--color-ink);
color: #fff;
border-radius: var(--radius-xl);
padding: 56px 48px;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-band::before {
content: "";
position: absolute;
top: -180px;
left: 50%;
transform: translateX(-50%);
width: 560px;
height: 360px;
background: radial-gradient(circle, rgba(91, 91, 214, .38) 0%, rgba(91, 91, 214, 0) 65%);
pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { font-size: 28px; margin-bottom: 12px; }
.cta-band p { color: var(--color-ink-text-2); margin-bottom: 28px; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* ---------- 20. Footer ---------- */
.site-footer {
background: var(--color-ink);
color: #fff;
padding: 64px 0 32px;
margin-top: 0;
}
/* ---------- CTA Banner（footer 上方引导 + 三码） ---------- */
/* ---------- CTA Banner（末尾引导 + 三码） ---------- */
.cta-banner{
position: relative;
overflow: hidden;
background:
linear-gradient(180deg, #F4F3FF 0%, #FFFFFF 60%);
padding: 80px 0 64px;
color: var(--color-text);
isolation: isolate;
}
/* 背景装饰：3 个柔和模糊光斑 */
.cta-banner__bg{
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: .55;
pointer-events: none;
z-index: -1;
}
.cta-banner__bg--a{
width: 480px; height: 480px;
top: -120px; left: -120px;
background: radial-gradient(circle, rgba(91,91,214,.28) 0%, transparent 70%);
}
.cta-banner__bg--b{
width: 420px; height: 420px;
top: 40%; right: -80px;
background: radial-gradient(circle, rgba(47,191,113,.22) 0%, transparent 70%);
}
.cta-banner__bg--c{
width: 360px; height: 360px;
bottom: -100px; left: 30%;
background: radial-gradient(circle, rgba(242,107,58,.16) 0%, transparent 70%);
}
/* 顶部 head：居中大字标题 */
.cta-banner__head{
text-align: center;
max-width: 720px;
margin: 0 auto 48px;
}
.cta-banner__head .eyebrow{
display: inline-block;
margin-bottom: 16px;
}
.cta-banner h2{
font-size: 40px;
line-height: 1.15;
letter-spacing: -.02em;
margin-bottom: 14px;
font-weight: 700;
color: var(--color-ink);
}
.cta-banner p.cta-banner__sub{
font-size: 17px;
line-height: 1.6;
color: var(--color-text-2);
margin: 0 auto;
max-width: 580px;
}
/* 舞台：左文案 + 右视频 */
.cta-banner__stage{
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: 56px;
align-items: center;
margin-bottom: 56px;
}
.cta-banner__copy{
display: flex;
flex-direction: column;
gap: 28px;
}
.cta-banner__steps{
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.cta-banner__steps li{
display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px 20px;
background: rgba(255,255,255,.7);
border: 1px solid var(--color-border);
border-radius: 14px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.cta-banner__steps li:hover{
transform: translateY(-2px);
border-color: var(--color-primary);
box-shadow: 0 12px 24px -14px rgba(91,91,214,.35);
}
.cta-banner__step-num{
flex: 0 0 32px;
width: 32px; height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-primary), #7F77DD);
color: #fff;
font-family: var(--font-mono);
font-size: 14px;
font-weight: 700;
display: grid;
place-items: center;
box-shadow: 0 4px 10px -2px rgba(91,91,214,.35);
}
.cta-banner__steps li > div{
display: flex;
flex-direction: column;
gap: 2px;
}
.cta-banner__steps strong{
font-size: 15px;
font-weight: 600;
color: var(--color-ink);
line-height: 1.4;
}
.cta-banner__steps span:not(.cta-banner__step-num){
font-size: 13px;
color: var(--color-text-2);
line-height: 1.5;
}
.cta-banner__cta-row{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
padding-top: 4px;
}
.cta-banner__cta{
padding: 14px 26px;
font-size: 15px;
font-weight: 600;
letter-spacing: .01em;
border-radius: 12px;
background: linear-gradient(135deg, #2FBF71 0%, #26A65F 100%);
color: #fff;
border: none;
box-shadow: 0 10px 24px -8px rgba(47,191,113,.45);
transition: transform .18s ease, box-shadow .18s ease;
}
.cta-banner__cta:hover{
transform: translateY(-1px);
box-shadow: 0 14px 28px -8px rgba(47,191,113,.55);
background: linear-gradient(135deg, #34D17A 0%, #2FBF71 100%);
}
.cta-banner__cta-link{
font-size: 14px;
font-weight: 500;
color: var(--color-text-2);
text-decoration: none;
transition: color .18s ease;
}
.cta-banner__cta-link:hover{
color: var(--color-primary);
}
/* 视频区 */
.cta-banner__media{
position: relative;
}
.cta-banner__video-frame{
position: relative;
border-radius: 24px;
overflow: hidden;
background: linear-gradient(135deg, #0B0B12, #1c1c2e);
box-shadow:
0 30px 60px -20px rgba(11,11,18,.35),
0 8px 20px -6px rgba(91,91,214,.25);
isolation: isolate;
}
.cta-banner__video-frame::before{
/* 顶部高光线 */
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
z-index: 2;
pointer-events: none;
}
.cta-banner__video{
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
object-fit: cover;
background: #0B0B12;
}
.cta-banner__video-badge{
position: absolute;
left: 16px;
bottom: 16px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
background: rgba(11,11,18,.65);
color: #fff;
border-radius: 999px;
font-size: 12px;
font-weight: 500;
letter-spacing: .02em;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
z-index: 3;
}
.cta-banner__video-badge i{
width: 7px; height: 7px; border-radius: 50%;
background: #2FBF71;
box-shadow: 0 0 0 0 rgba(47,191,113,.6);
animation: ctaPulse 1.6s infinite;
}
@keyframes ctaPulse{
0% { box-shadow: 0 0 0 0 rgba(47,191,113,.6); }
70% { box-shadow: 0 0 0 10px rgba(47,191,113,0); }
100% { box-shadow: 0 0 0 0 rgba(47,191,113,0); }
}
/* 三码区：白底浮层，与上方 banner 用分割线分隔 */
.cta-banner__qr{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
padding: 32px 24px;
background: #FFFFFF;
border: 1px solid var(--color-border);
border-radius: 20px;
box-shadow: 0 12px 40px -20px rgba(11,11,18,.15);
}
.cta-banner__qr-item{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
text-decoration: none;
color: var(--color-text);
padding: 8px 4px;
border-radius: 14px;
transition: transform .18s ease, background .18s ease;
}
.cta-banner__qr-item:hover{
background: var(--color-surface);
transform: translateY(-2px);
}
.cta-banner__qr-item:hover .cta-banner__qr-img{
border-color: var(--color-border-strong);
box-shadow: 0 8px 20px -10px rgba(11,11,18,.22);
}
/* 新入口角标（微信小程序） */
.cta-banner__qr-badge{
position: absolute;
top: 2px;
right: 50%;
transform: translateX(74px);
padding: 2px 7px;
border-radius: 999px;
background: linear-gradient(135deg, var(--color-accent), #FF9239);
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: .04em;
line-height: 1.5;
box-shadow: 0 4px 10px -4px rgba(242,107,58,.7);
}
.cta-banner__qr-img,
.cta-banner__qr-fake{
width: 132px;
height: 132px;
border-radius: 14px;
background: #fff;
display: grid;
place-items: center;
margin-bottom: 12px;
padding: 8px;
box-sizing: border-box;
border: 1px solid var(--color-border);
flex: 0 0 auto;
transition: border-color .18s ease, box-shadow .18s ease;
}
.cta-banner__qr-img img{
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
.cta-banner__qr-fake{
background: var(--color-surface);
color: var(--color-text-3);
font-size: 12px;
line-height: 1.4;
border: 1px dashed var(--color-border-strong);
}
.cta-banner__qr-label{
font-size: 14px;
font-weight: 600;
color: var(--color-ink);
letter-spacing: .01em;
}
.cta-banner__qr-sub{
font-size: 12px;
color: var(--color-text-3);
margin-top: 2px;
}
@media (max-width: 1024px){
.cta-banner__stage{ grid-template-columns: 1fr; gap: 32px; }
.cta-banner h2{ font-size: 34px; }
}
@media (max-width: 768px){
.cta-banner{ padding: 56px 0 48px; }
.cta-banner h2{ font-size: 26px; }
.cta-banner p.cta-banner__sub{ font-size: 15px; }
.cta-banner__head{ margin-bottom: 32px; }
.cta-banner__qr{ grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 20px; }
.cta-banner__qr-img,
.cta-banner__qr-fake{ width: 116px; height: 116px; }
.cta-banner__qr-badge{ transform: translateX(64px); }
.cta-banner__video{ aspect-ratio: 16 / 11; }
.cta-banner__video-frame{ border-radius: 18px; }
}
@media (max-width: 480px){
.cta-banner__cta-row{ flex-direction: column; align-items: stretch; }
.cta-banner__cta{ text-align: center; }
.cta-banner__cta-link{ text-align: center; }
}
/* ---------- 专家团展示 section（深色 hero，参考 codebuddy.cn/work） ---------- */
.buddy-team{
position: relative;
padding: 80px 0 88px;
background:
radial-gradient(80% 100% at 0% 0%, rgba(91,91,214,.16) 0%, transparent 60%),
radial-gradient(60% 80% at 100% 100%, rgba(47,191,113,.12) 0%, transparent 60%),
linear-gradient(180deg, #0B0B12 0%, #15151E 100%);
color: #fff;
overflow: hidden;
isolation: isolate;
}
.buddy-team__halo{
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
z-index: 0;
opacity: .55;
}
.buddy-team__halo--a{
width: 460px; height: 460px;
top: -120px; left: -120px;
background: radial-gradient(circle, rgba(91,91,214,.32) 0%, transparent 70%);
}
.buddy-team__halo--b{
width: 360px; height: 360px;
bottom: -100px; right: 10%;
background: radial-gradient(circle, rgba(242,107,58,.22) 0%, transparent 70%);
}
.buddy-team .container{ position: relative; z-index: 1; }
.buddy-team__grid{
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 56px;
align-items: center;
}
.buddy-team__copy{ text-align: left; }
.buddy-team__eyebrow{
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,.55);
margin-bottom: 18px;
padding: 6px 12px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 999px;
}
.buddy-team__eyebrow b{
color: #2FBF71;
font-weight: 700;
}
.buddy-team__title{
font-size: 42px;
line-height: 1.15;
letter-spacing: -.02em;
margin: 0 0 18px;
font-weight: 700;
color: #fff;
}
.buddy-team__lead{
font-size: 16px;
line-height: 1.7;
color: rgba(255,255,255,.78);
max-width: 540px;
margin: 0 0 16px;
}
.buddy-team__lead .hi-green,
.buddy-team__kws .hi-green{
color: #2FBF71;
font-weight: 600;
}
.buddy-team__kws{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 10px;
font-size: 14px;
color: rgba(255,255,255,.62);
margin: 0 0 28px;
max-width: 540px;
}
.buddy-team__kws .dot{
color: rgba(255,255,255,.3);
margin: 0 2px;
}
.buddy-team__kws-sub{
color: rgba(255,255,255,.42);
font-size: 13px;
}
.buddy-team__cta-row{
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 32px;
}
.buddy-team__cta-row .btn{
padding: 13px 22px;
font-size: 14.5px;
font-weight: 600;
border-radius: 10px;
letter-spacing: .01em;
}
.btn--green{
background: linear-gradient(135deg, #2FBF71 0%, #26A65F 100%);
color: #fff;
border: none;
box-shadow: 0 10px 24px -8px rgba(47,191,113,.5);
transition: transform .18s ease, box-shadow .18s ease;
}
.btn--green:hover{
transform: translateY(-1px);
box-shadow: 0 14px 28px -8px rgba(47,191,113,.6);
background: linear-gradient(135deg, #34D17A 0%, #2FBF71 100%);
color: #fff;
}
.btn--ghost-light{
background: transparent;
color: #fff;
border: 1.5px solid rgba(255,255,255,.3);
}
.btn--ghost-light:hover{
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.55);
color: #fff;
}
/* ---------- 浅色版「5 位专属智能体」板块（合并首页 Home 用；暗色自动回落深色） ---------- */
.buddy-team--light{
background: #fff;
color: var(--color-text);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
html[data-theme="dark"] .buddy-team--light{
background: var(--color-surface);
}
.buddy-team--light .buddy-team__halo{ opacity: .3; }
.buddy-team--light .buddy-team__eyebrow{
color: var(--color-text-2);
background: var(--color-surface-2);
border-color: var(--color-border);
}
.buddy-team--light .buddy-team__title{ color: var(--color-text); }
.buddy-team--light .buddy-team__lead{ color: var(--color-text-2); }
.buddy-team--light .buddy-team__kws{ color: var(--color-text-2); }
.buddy-team--light .buddy-team__kws .dot{ color: var(--color-text-3); }
.buddy-team--light .buddy-team__kws-sub{ color: var(--color-text-3); }
.buddy-team--light .buddy-team__integrations{ border-top-color: var(--color-border); }
.buddy-team--light .buddy-team__integ-label{ color: var(--color-text-3); }
.buddy-team--light .buddy-team__integ-list li{ color: var(--color-text-2); }
.buddy-team--light .buddy-team__halo-card{
background:
radial-gradient(60% 60% at 50% 50%, rgba(91,91,214,.14) 0%, transparent 70%),
radial-gradient(40% 40% at 30% 70%, rgba(47,191,113,.10) 0%, transparent 70%);
}
.buddy-team--light .buddy-team__img{
box-shadow: 0 30px 68px -26px rgba(11,11,18,.42), 0 8px 22px rgba(91,91,214,.14);
}
.buddy-team--light .btn--ghost-light{
color: var(--color-primary);
border-color: var(--color-primary);
}
.buddy-team--light .btn--ghost-light:hover{
background: var(--color-primary-50);
border-color: var(--color-primary);
color: var(--color-primary);
}
.buddy-team__integrations{
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
padding-top: 22px;
border-top: 1px solid rgba(255,255,255,.08);
}
.buddy-team__integ-label{
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255,255,255,.45);
font-weight: 600;
}
.buddy-team__integ-list{
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
}
.buddy-team__integ-list li{
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: rgba(255,255,255,.78);
}
.integ-dot{
width: 7px; height: 7px; border-radius: 50%;
background: var(--c, #fff);
box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--c, #fff) 20%, transparent);
}
/* 右侧图像 + 角色标签 */
.buddy-team__art{
position: relative;
isolation: isolate;
}
.buddy-team__halo-card{
position: absolute;
inset: -10% -8% -10% -8%;
background:
radial-gradient(60% 60% at 50% 50%, rgba(91,91,214,.32) 0%, transparent 70%),
radial-gradient(40% 40% at 30% 70%, rgba(47,191,113,.18) 0%, transparent 70%);
filter: blur(40px);
z-index: -1;
}
.buddy-team__img{
width: 100%;
max-width: 520px;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
margin: 0 auto;
border-radius: 24px;
background: #0B0B12;
box-shadow:
0 30px 70px -20px rgba(0,0,0,.6),
0 8px 24px rgba(91,91,214,.18);
}
/* 连接线动画：中央 → 周边 4 个机器人 */
.buddy-team__wires{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 3;
pointer-events: none;
}
.buddy-team__wire{
stroke-dasharray: 3 4;
stroke-dashoffset: 0;
opacity: .9;
stroke-width: 1.5;
animation: wireFlow 2.6s linear infinite;
filter: drop-shadow(0 0 6px currentColor);
}
.buddy-team__wire--data{ animation-duration: 3.2s; animation-delay: .2s; }
.buddy-team__wire--strategy{ animation-duration: 2.8s; animation-delay: .5s; }
.buddy-team__wire--pm{ animation-duration: 2.4s; animation-delay: .8s; }
.buddy-team__wire--dev{ animation-duration: 3s; animation-delay: 1.1s; }
@keyframes wireFlow {
to { stroke-dashoffset: -42; }
}
/* 周边机器人头顶的小光点：脉冲 */
.buddy-team__dot{
filter: drop-shadow(0 0 6px currentColor);
transform-origin: center;
animation: dotPulse 2.4s ease-in-out infinite;
}
.buddy-team__dot--data{ animation-delay: .4s; }
.buddy-team__dot--strategy{ animation-delay: .8s; }
.buddy-team__dot--pm{ animation-delay: 1.2s; }
.buddy-team__dot--dev{ animation-delay: 1.6s; }
@keyframes dotPulse {
0%, 100% { transform: scale(1); opacity: .85; }
50% { transform: scale(1.7); opacity: 1; }
}
/* 沿连接线流动的能量粒子 */
.buddy-team__pulse{
fill: #fff;
opacity: 0;
animation: pulseGlow 2.6s ease-in-out infinite;
}
.buddy-team__pulse--op{ filter: drop-shadow(0 0 4px #FF6B3A) drop-shadow(0 0 8px #FF6B3A); animation-duration: 2.6s; animation-delay: 0s; }
.buddy-team__pulse--data{ filter: drop-shadow(0 0 4px #4DA3FF) drop-shadow(0 0 8px #4DA3FF); animation-duration: 3.2s; animation-delay: .4s; }
.buddy-team__pulse--strategy{ filter: drop-shadow(0 0 4px #F26B3A) drop-shadow(0 0 8px #F26B3A); animation-duration: 2.8s; animation-delay: .8s; }
.buddy-team__pulse--pm{ filter: drop-shadow(0 0 4px #2FBF71) drop-shadow(0 0 8px #2FBF71); animation-duration: 2.4s; animation-delay: 1.2s; }
.buddy-team__pulse--dev{ filter: drop-shadow(0 0 4px #A374F4) drop-shadow(0 0 8px #A374F4); animation-duration: 3.0s; animation-delay: 1.6s; }
@keyframes pulseGlow {
0%, 100% { opacity: 0; }
15%, 85% { opacity: 1; }
50% { opacity: .85; }
}
@media (prefers-reduced-motion: reduce){
.buddy-team__wire,
.buddy-team__dot,
.buddy-team__pulse { animation: none !important; }
.buddy-team__pulse { opacity: 0; }
}
/* 机器人活体动画层：在底图上的 5 个机器人位置叠加眨眼眼睛 + 敲击的手 */
.buddy-team__bots{
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
}
.bt-bot{
position: absolute;
width: var(--bw, 13%);
height: var(--bh, 16%);
transform: translate(-50%, -50%);
will-change: transform;
}
/* 眼睛：白色巩膜 + 深色瞳孔，瞳孔会眨眼与左右看 */
.bt-eye{
position: absolute;
top: 12%;
width: 19%;
height: 24%;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 0 1.5px rgba(10,14,28,.85), 0 1px 2px rgba(0,0,0,.3);
overflow: hidden;
}
.bt-eye--l{ left: 25%; }
.bt-eye--r{ left: 56%; }
.bt-eye__pupil{
position: absolute;
left: 50%;
top: 50%;
width: 48%;
height: 48%;
background: #10131c;
border-radius: 50%;
transform: translate(-50%, -50%);
animation: btBlink 4.2s ease-in-out infinite;
will-change: transform;
}
/* 手：带机器人主题色的小爪，会上下敲击并泛起涟漪 */
.bt-hand{
position: absolute;
bottom: 8%;
width: 17%;
height: 14%;
background: var(--c, #FF6B3A);
border-radius: 42% 42% 52% 52%;
box-shadow: 0 0 7px var(--c, #FF6B3A);
animation: btTap .6s ease-in-out infinite;
will-change: transform;
}
.bt-hand::after{
content: "";
position: absolute;
inset: -35%;
border-radius: 50%;
border: 1.5px solid var(--c, #FF6B3A);
opacity: 0;
animation: btRipple .6s ease-out infinite;
}
.bt-hand--l{ left: 23%; }
.bt-hand--r{ left: 58%; animation-delay: .3s; }
.bt-hand--r::after{ animation-delay: .3s; }
@keyframes btBlink {
0%, 42% { transform: translate(-50%, -50%) scaleY(1) translateX(0); }
48% { transform: translate(-50%, -50%) scaleY(1) translateX(22%); }
54% { transform: translate(-50%, -50%) scaleY(1) translateX(-22%); }
88%, 93% { transform: translate(-50%, -50%) scaleY(1); }
96% { transform: translate(-50%, -50%) scaleY(.12); }
100% { transform: translate(-50%, -50%) scaleY(1); }
}
@keyframes btTap {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-24%); }
}
@keyframes btRipple {
0% { opacity: .55; transform: scale(.6); }
100% { opacity: 0; transform: scale(1.7); }
}
@media (prefers-reduced-motion: reduce){
.bt-eye__pupil,
.bt-hand,
.bt-hand::after { animation: none !important; }
}
@media (max-width: 1024px){
.buddy-team__grid{ grid-template-columns: 1fr; gap: 40px; }
.buddy-team__title{ font-size: 34px; }
}
@media (max-width: 768px){
.buddy-team{ padding: 56px 0 64px; }
.buddy-team__title{ font-size: 26px; }
.buddy-team__lead{ font-size: 14.5px; }
.buddy-team__cta-row{ flex-direction: column; align-items: stretch; }
.buddy-team__cta-row .btn{ text-align: center; }
.buddy-team__img{ max-width: 360px; }
.buddy-team__role-tag{ font-size: 10px; padding: 3px 8px; }
}
@media (max-width: 480px){
.buddy-team__title{ font-size: 22px; }
.buddy-team__integ-list{ gap: 4px 10px; }
}
/* ---------- 内页 page-head 装饰：每个内页右下角放一个机器人 ---------- */
.page-head{ position: relative; overflow: hidden; }
.page-head__mascot{
position: absolute;
right: -16px;
bottom: -24px;
width: 260px;
height: auto;
pointer-events: none;
z-index: 0;
filter: drop-shadow(0 8px 20px rgba(11, 11, 18, .08));
}
.page-head .container{ position: relative; z-index: 1; }
@media (max-width: 1024px) { .page-head__mascot{ width: 200px; right: -20px; } }
@media (max-width: 768px) { .page-head__mascot{ display: none; } }
/* ============ 内页页头 · 新手入门专用重设计 ============ */
.page-head--guide{
background:
linear-gradient(180deg, #F4F3FF 0%, #FFFFFF 70%);
padding: 56px 0 64px;
position: relative;
isolation: isolate;
}
.page-head__deco{
position: absolute;
border-radius: 50%;
filter: blur(60px);
pointer-events: none;
z-index: 0;
opacity: .55;
}
.page-head__deco--a{
width: 360px; height: 360px;
top: -100px; right: 10%;
background: radial-gradient(circle, rgba(91,91,214,.28) 0%, transparent 70%);
}
.page-head__deco--b{
width: 280px; height: 280px;
bottom: -80px; left: 5%;
background: radial-gradient(circle, rgba(47,191,113,.22) 0%, transparent 70%);
}
.page-head__deco--c{
width: 240px; height: 240px;
top: 30%; right: -60px;
background: radial-gradient(circle, rgba(242,107,58,.16) 0%, transparent 70%);
}
.page-head__layout{
display: grid;
grid-template-columns: 1.45fr 1fr;
gap: 48px;
align-items: center;
margin-top: 4px;
position: relative;
z-index: 1;
}
.page-head__copy{
min-width: 0;
}
.page-head__copy .eyebrow{
display: inline-block;
margin-bottom: 14px;
}
.page-head__layout h1{
font-size: 38px;
line-height: 1.18;
letter-spacing: -.02em;
margin-bottom: 14px;
color: var(--color-ink);
}
.page-head__lead{
font-size: 16px;
line-height: 1.65;
color: var(--color-text-2);
max-width: 560px;
margin: 0;
}
.page-head__meta{
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
align-items: center;
margin-top: 22px;
font-size: 13px;
color: var(--color-text-3);
}
.page-head__meta a{
color: var(--color-primary);
text-decoration: none;
}
.page-head__meta a:hover{
text-decoration: underline;
}
/* 课程亮点卡 */
.page-head__card{
position: relative;
background: #FFFFFF;
border: 1px solid var(--color-border);
border-radius: 20px;
padding: 24px 24px 20px;
box-shadow:
0 20px 50px -28px rgba(11,11,18,.25),
0 4px 12px rgba(91,91,214,.08);
isolation: isolate;
}
.page-head__card-head{
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 600;
color: var(--color-primary);
letter-spacing: .04em;
text-transform: uppercase;
margin-bottom: 16px;
}
.page-head__card-dot{
width: 7px; height: 7px;
border-radius: 50%;
background: var(--color-primary);
box-shadow: 0 0 0 3px rgba(91,91,214,.18);
}
.page-head__stats{
list-style: none;
margin: 0 0 18px;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
border-radius: 14px;
background: linear-gradient(180deg, #FAFAFB, #F4F3FF);
border: 1px solid var(--color-border);
}
.page-head__stats li{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 14px 6px;
border-right: 1px solid var(--color-border);
}
.page-head__stats li:last-child{
border-right: none;
}
.page-head__stat-num{
font-family: var(--font-mono);
font-size: 22px;
font-weight: 700;
color: var(--color-ink);
letter-spacing: -.02em;
line-height: 1.1;
}
.page-head__stat-label{
font-size: 11.5px;
color: var(--color-text-2);
margin-top: 2px;
}
.page-head__outcome{
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px;
background: rgba(47,191,113,.06);
border: 1px solid rgba(47,191,113,.2);
border-radius: 12px;
}
.page-head__outcome-dot{
flex: 0 0 28px;
width: 28px; height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, #2FBF71, #26A65F);
display: grid;
place-items: center;
color: #fff;
font-weight: 700;
font-size: 14px;
line-height: 1;
position: relative;
margin-top: 1px;
}
.page-head__outcome-dot::before{
content: "✓";
font-size: 14px;
color: #fff;
}
.page-head__outcome > div{
display: flex;
flex-direction: column;
gap: 2px;
}
.page-head__outcome strong{
font-size: 13.5px;
color: var(--color-ink);
font-weight: 600;
}
.page-head__outcome span:not(.page-head__outcome-dot){
font-size: 12.5px;
color: var(--color-text-2);
line-height: 1.5;
}
.page-head__mascot-link{
display: none; /* 默认隐藏，腾出空间 */
}
/* 学长微信答疑卡（新手入门页头）：二维码左 · 机器人右 · 一行提示 */
.page-head__wx{
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 14px;
}
.page-head__wx-qrbox{
flex: 0 0 auto;
display: block;
padding: 8px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: 16px;
transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.page-head__wx-qr-img{
display: block;
width: 112px;
height: 112px;
object-fit: contain;
}
/* 机器人 → 二维码 的流动虚线（互动感） */
.page-head__wx-link{
flex: 1 1 auto;
height: 2px;
border-radius: 2px;
background-image: linear-gradient(90deg, var(--color-primary) 0 8px, transparent 8px 16px);
background-size: 16px 2px;
background-repeat: repeat-x;
opacity: .5;
animation: wxDash 1.1s linear infinite;
}
@keyframes wxDash{ to{ background-position-x: -16px; } }
.page-head__wx-robot{
flex: 0 0 auto;
width: 108px;
height: auto;
object-fit: contain;
transform-origin: bottom center;
animation: wxRobotBob 3.2s ease-in-out infinite;
filter: drop-shadow(0 8px 16px rgba(11,11,18,.16));
}
@keyframes wxRobotBob{
0%, 100%{ transform: translateY(0); }
50%{ transform: translateY(-6px); }
}
/* 悬停互动：机器人凑向二维码，二维码亮起放大 */
.page-head__wx:hover .page-head__wx-qrbox{
border-color: var(--color-primary);
box-shadow: 0 0 0 4px rgba(91,91,214,.10), 0 12px 26px -14px rgba(91,91,214,.4);
transform: scale(1.04);
}
.page-head__wx:hover .page-head__wx-robot{
animation-play-state: paused;
transform: translateX(-6px) rotate(-5deg);
}
.page-head__wx-tip{
margin: 0;
font-size: 13px;
color: var(--color-text-2);
text-align: center;
line-height: 1.5;
}
@media (prefers-reduced-motion: reduce){
.page-head__wx-link{ animation: none; }
.page-head__wx-robot{ animation: none; }
}
@media (max-width: 1024px){
.page-head__layout{ grid-template-columns: 1fr; gap: 32px; }
.page-head__layout h1{ font-size: 32px; }
.page-head__card{ max-width: 480px; }
}
@media (max-width: 768px){
.page-head--guide{ padding: 40px 0 48px; }
.page-head__layout h1{ font-size: 26px; }
.page-head__lead{ font-size: 14.5px; }
.page-head__meta{ font-size: 12px; gap: 6px 12px; }
.page-head__card{ padding: 20px; }
.page-head__stat-num{ font-size: 20px; }
.page-head__deco--c{ display: none; }
}
@media (max-width: 480px){
.page-head__stats{ grid-template-columns: repeat(3, 1fr); gap: 2px; }
.page-head__stat-num{ font-size: 18px; }
.page-head__stat-label{ font-size: 11.5px; }
}
/* ============ 关于社区页头：3 个动画小角色 ============ */
.page-head--about{
background:
linear-gradient(180deg, #F4F3FF 0%, #FFFFFF 70%);
padding: 38px 0 54px;
position: relative;
overflow: hidden;
isolation: isolate;
}
.page-head--about .page-head__deco{
position: absolute;
border-radius: 50%;
filter: blur(60px);
pointer-events: none;
z-index: 0;
opacity: .55;
}
.page-head--about .page-head__deco--a{
width: 320px; height: 320px;
top: -100px; left: 8%;
background: radial-gradient(circle, rgba(91,91,214,.28) 0%, transparent 70%);
}
.page-head--about .page-head__deco--b{
width: 280px; height: 280px;
bottom: -80px; right: 10%;
background: radial-gradient(circle, rgba(242,107,58,.20) 0%, transparent 70%);
}
.page-head--about .page-head__layout{
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 56px;
align-items: center;
margin-top: 18px;
position: relative;
z-index: 1;
}
.page-head--about .page-head__copy .breadcrumb{ margin-bottom: 14px; }
.page-head--about .page-head__copy .eyebrow{
display: inline-block;
margin-bottom: 12px;
}
.page-head--about h1{
font-size: 38px;
line-height: 1.18;
letter-spacing: -.02em;
margin-bottom: 16px;
color: var(--color-ink);
}
.page-head--about .page-head__copy p{
font-size: 16px;
line-height: 1.7;
color: var(--color-text-2);
max-width: 520px;
margin: 0;
}
.page-head__roles{
list-style: none;
margin: 22px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.page-head__roles li{
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: rgba(255,255,255,.6);
border: 1px solid var(--color-border);
border-radius: 12px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.page-head__role-dot{
width: 8px; height: 8px; border-radius: 50%;
background: var(--dot, var(--color-primary));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 18%, transparent);
flex: 0 0 auto;
}
.page-head__roles b{
font-size: 13.5px;
font-weight: 600;
color: var(--color-ink);
min-width: 32px;
}
.page-head__roles span:not(.page-head__role-dot){
font-size: 13px;
color: var(--color-text-2);
}
/* 3 个动画角色 */
.page-head__mascots{
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 8px 4px;
align-items: end;
justify-items: center;
}
.page-head__mascot{
margin: 0;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
isolation: isolate;
}
.page-head__mascot img{
display: block;
width: 100%;
height: auto;
max-width: 160px;
filter: drop-shadow(0 14px 28px rgba(11,11,18,.18));
border-radius: 16px;
}
/* 角色卡片底座（柔和圆盘） */
.page-head__mascot::before{
content: "";
position: absolute;
bottom: -8px;
left: 50%;
width: 110%;
height: 24px;
border-radius: 50%;
background: radial-gradient(ellipse, rgba(11,11,18,.16) 0%, transparent 70%);
filter: blur(8px);
transform: translateX(-50%);
z-index: -1;
}
.page-head__mascot figcaption{
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 12px;
padding: 5px 12px;
background: #FFFFFF;
border: 1px solid var(--color-border);
border-radius: 999px;
font-size: 12px;
color: var(--color-text);
box-shadow: 0 4px 12px -4px rgba(11,11,18,.1);
}
.page-head__mascot figcaption span{
font-size: 13px;
}
.page-head__mascot figcaption b{
font-weight: 600;
color: var(--color-ink);
}
/* 三个动画：浮动 / 摇摆 / 弹跳 */
@keyframes bobbing{
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes swaying{
0%, 100% { transform: rotate(-3deg); }
50% { transform: rotate(3deg); }
}
@keyframes bouncing{
0%, 100% { transform: translateY(0) scale(1); }
30% { transform: translateY(-6px) scale(1.04); }
60% { transform: translateY(2px) scale(.98); }
}
.page-head__mascot--a img{ animation: bobbing 3.6s ease-in-out infinite; }
.page-head__mascot--b img{ animation: swaying 4.2s ease-in-out infinite; transform-origin: bottom center; }
.page-head__mascot--c img{ animation: bouncing 2.8s ease-in-out infinite; }
/* 大图角色放在视觉中心：让 -a 占满上半，-b 和 -c 错落左右下 */
.page-head__mascot--a{
grid-column: 1 / span 2;
align-self: end;
}
.page-head__mascot--a img{
max-width: 200px;
}
.page-head__mascot--b{
grid-column: 1;
align-self: end;
margin-left: 0;
}
.page-head__mascot--c{
grid-column: 2;
align-self: end;
margin-left: 0;
}
.page-head__mascot--c img{ max-width: 130px; }
.page-head__mascot--b img{ max-width: 130px; }
/* 减弱动画偏好 */
@media (prefers-reduced-motion: reduce){
.page-head__mascot--a img,
.page-head__mascot--b img,
.page-head__mascot--c img{ animation: none !important; }
}
@media (max-width: 1024px){
.page-head--about .page-head__layout{
grid-template-columns: 1fr;
gap: 40px;
}
.page-head--about h1{ font-size: 32px; }
.page-head__mascots{
max-width: 420px;
margin: 0 auto;
}
}
@media (max-width: 768px){
.page-head--about{ padding: 32px 0 44px; }
.page-head--about h1{ font-size: 26px; }
.page-head--about .page-head__copy p{ font-size: 14.5px; }
.page-head__mascot--a img{ max-width: 160px; }
.page-head__mascot--b img,
.page-head__mascot--c img{ max-width: 100px; }
}
@media (max-width: 480px){
.page-head--about .page-head__layout{ gap: 28px; }
.page-head--about h1{ font-size: 22px; }
.page-head__mascots{ gap: 8px 3px; }
.page-head__mascot--a img{ max-width: 130px; }
.page-head__mascot--b img,
.page-head__mascot--c img{ max-width: 80px; }
}
/* 手机版：关于社区区块——三个机器人移到主标题右侧，横向一排展示（不再单独堆在下方） */
@media (max-width: 768px){
/* copy 的子元素直接参与外层网格，便于把机器人排到标题右侧 */
.page-head--about .page-head__copy{ display: contents; }
.page-head--about .page-head__layout{
grid-template-columns: minmax(0, 1fr) auto;
gap: 0 14px;
align-items: end;
}
.page-head--about .page-head__copy > .breadcrumb{ grid-column: 1 / -1; grid-row: 1; }
.page-head--about .page-head__copy > .eyebrow{ grid-column: 1 / -1; grid-row: 2; justify-self: start; }
.page-head--about .page-head__copy > h1{ grid-column: 1; grid-row: 3; min-width: 0; margin-bottom: 0; }
/* 机器人：flex 横排贴标题右侧；用固定像素宽避免百分比内在尺寸把列撑开 */
.page-head--about .page-head__mascots{
grid-column: 2; grid-row: 3;
display: flex; flex-direction: row; flex-wrap: nowrap;
align-items: flex-end; justify-content: flex-end;
gap: 5px;
max-width: none; margin: 0;
}
/* 重置「内页右下角装饰机器人」通用规则带来的 position/width 干扰（与 .page-head__mascot 同名，须限定 about 作用域） */
.page-head--about .page-head__mascot{
flex: 0 0 auto;
width: auto; height: auto;
right: auto; bottom: auto;
}
.page-head--about .page-head__mascot::before{ display: none; }
.page-head--about .page-head__mascot figcaption{ display: none; }
.page-head--about .page-head__mascot img{ width: 56px; height: auto; max-width: none; }
.page-head--about .page-head__mascot--b img,
.page-head--about .page-head__mascot--c img{ width: 48px; }
.page-head--about .page-head__copy > p{ grid-column: 1 / -1; grid-row: 4; margin-top: 14px; }
.page-head--about .page-head__copy > .page-head__roles{ grid-column: 1 / -1; grid-row: 5; }
}
/* 手机版窄屏：机器人移到标题右侧后左列变窄，按屏宽收字号，避免标题被挤成三行 */
@media (max-width: 560px){
.page-head--about .page-head__copy > h1{ font-size: 22px; }
}
@media (max-width: 380px){
.page-head--about .page-head__copy > h1{ font-size: 20px; }
}
/* ============ 案例库 page-head · 重设计 ============ */
.page-head--cases{
background:
linear-gradient(180deg, #EEF2FF 0%, #FFFFFF 70%);
padding: 10px 0 12px;
position: relative;
overflow: hidden;
isolation: isolate;
}
.page-head--cases .page-head__deco{
position: absolute;
border-radius: 50%;
filter: blur(70px);
pointer-events: none;
z-index: 0;
}
.page-head--cases .page-head__deco--a{
width: 340px; height: 340px;
top: -120px; left: -40px;
background: radial-gradient(circle, rgba(91,91,214,.32) 0%, transparent 70%);
}
.page-head--cases .page-head__deco--b{
width: 300px; height: 300px;
top: 40%; right: -80px;
background: radial-gradient(circle, rgba(242,107,58,.18) 0%, transparent 70%);
}
.page-head--cases .page-head__deco--c{
width: 260px; height: 260px;
bottom: -120px; left: 32%;
background: radial-gradient(circle, rgba(47,191,113,.14) 0%, transparent 70%);
}
.page-head--cases .page-head__layout{
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 48px;
align-items: center;
margin-top: 18px;
position: relative;
z-index: 1;
}
.page-head--cases .page-head__copy .breadcrumb{ margin-bottom: 14px; }
.page-head--cases .page-head__copy .eyebrow{
display: inline-block;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--color-primary);
padding: 4px 10px;
border-radius: 999px;
background: rgba(91,91,214,.10);
border: 1px solid rgba(91,91,214,.18);
margin-bottom: 14px;
}
.page-head--cases h1{
font-size: 42px;
line-height: 1.16;
letter-spacing: -.02em;
margin-bottom: 16px;
color: var(--color-ink);
}
.page-head--cases .page-head__lead{
font-size: 17px;
line-height: 1.7;
color: var(--color-text-2);
max-width: 540px;
margin: 0 0 22px;
}
.page-head--cases .page-head__meta{
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.page-head--cases .page-head__chip{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
font-size: 13px;
font-weight: 500;
color: var(--color-text);
background: #FFFFFF;
border: 1px solid var(--color-border);
border-radius: 999px;
transition: all .18s ease;
}
.page-head--cases .page-head__chip:hover{
border-color: var(--color-primary);
color: var(--color-primary);
background: var(--color-primary-50);
transform: translateY(-1px);
}
.page-head--cases .page-head__chip--accent{
background: var(--color-primary);
color: #FFFFFF;
border-color: var(--color-primary);
}
.page-head--cases .page-head__chip--accent:hover{
background: var(--color-primary-dark);
color: #FFFFFF;
border-color: var(--color-primary-dark);
}
/* 机器人艺术区 */
.page-head--cases .page-head__art{
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 380px;
}
.page-head--cases .page-head__mascot-wrap{
position: relative;
width: 240px;
height: 288px;
animation: casesBob 4s ease-in-out infinite;
}
.page-head--cases .page-head__mascot-img{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 20px 40px rgba(11,11,18,.22));
}
@keyframes casesBob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce){
.page-head--cases .page-head__mascot-wrap{ animation: none !important; }
}
/* 浮动标签 */
.page-head--cases .page-head__tag{
position: absolute;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
font-size: 12px;
font-weight: 600;
color: var(--color-ink);
background: #FFFFFF;
border: 1px solid var(--color-border);
border-radius: 999px;
box-shadow: 0 8px 20px -8px rgba(11,11,18,.18);
white-space: nowrap;
z-index: 2;
}
.page-head--cases .page-head__tag::before{
content: "";
width: 7px; height: 7px;
border-radius: 50%;
background: var(--color-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 25%, transparent);
}
.page-head--cases .page-head__tag--1{
top: 18%;
left: -8%;
animation: casesFloat 5s ease-in-out infinite;
}
.page-head--cases .page-head__tag--2{
bottom: 12%;
right: -10%;
color: var(--color-primary);
animation: casesFloat 5s ease-in-out infinite reverse;
animation-delay: 1.2s;
}
.page-head--cases .page-head__tag--2::before{
background: var(--color-primary);
box-shadow: 0 0 0 3px rgba(91,91,214,.22);
}
@keyframes casesFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce){
.page-head--cases .page-head__tag{ animation: none !important; }
}
/* 底部统计条 */
.page-head--cases .page-head__stats{
margin-top: 56px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
padding: 18px 0;
position: relative;
z-index: 1;
}
.page-head--cases .page-head__stat{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 12px;
border-right: 1px solid var(--color-border);
}
.page-head--cases .page-head__stat:last-child{ border-right: none; }
.page-head--cases .page-head__stat-num{
font-family: var(--font-mono);
font-size: 28px;
font-weight: 700;
color: var(--color-ink);
letter-spacing: -.02em;
line-height: 1.1;
}
.page-head--cases .page-head__stat-label{
font-size: 12.5px;
color: var(--color-text-2);
margin-top: 4px;
}
@media (max-width: 1024px){
.page-head--cases .page-head__layout{
grid-template-columns: 1fr;
gap: 32px;
}
.page-head--cases h1{ font-size: 34px; }
.page-head--cases .page-head__art{ min-height: 320px; }
.page-head--cases .page-head__mascot-wrap{ width: 200px; height: 240px; }
.page-head--cases .page-head__stats{ grid-template-columns: repeat(2, 1fr); gap: 12px 0; }
.page-head--cases .page-head__stat:nth-child(2){ border-right: none; }
}
@media (max-width: 768px){
.page-head--cases{ padding: 8px 0 10px; }
.page-head--cases h1{ font-size: 28px; }
.page-head--cases .page-head__lead{ font-size: 15px; }
.page-head--cases .page-head__art{ min-height: 280px; }
.page-head--cases .page-head__mascot-wrap{ width: 170px; height: 205px; }
.page-head--cases .page-head__tag{ font-size: 11px; padding: 6px 10px; }
.page-head--cases .page-head__stats{ grid-template-columns: repeat(2, 1fr); padding: 14px 0; }
.page-head--cases .page-head__stat-num{ font-size: 22px; }
}
@media (max-width: 480px){
.page-head--cases .page-head__layout{ gap: 24px; }
.page-head--cases h1{ font-size: 24px; }
.page-head--cases .page-head__mascot-wrap{ width: 140px; height: 170px; }
.page-head--cases .page-head__tag{ display: none; }
}
/* camp.html hero 视频卡 */
.camp-hero{
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 48px;
align-items: center;
}
.camp-hero__video{
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 20px 60px rgba(11, 11, 18, .12);
background: var(--color-ink);
}
.camp-hero__video video{
display: block;
width: 100%;
height: auto;
}
.camp-hero__video::after{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(11, 11, 18, .35));
pointer-events: none;
}
@media (max-width: 768px) { .camp-hero{ grid-template-columns: 1fr; } }
/* 404 大图 */
.empty-state__mascot{
display: block;
width: 200px;
height: auto;
margin: 0 auto 24px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 48px;
padding-bottom: 40px;
border-bottom: 1px solid var(--color-ink-line);
}
.footer-brand p { font-size: 14px; color: var(--color-ink-text-3); margin-top: 16px; max-width: 300px; }
.footer-logo-link { display: inline-block; line-height: 0; }
/* 2026-10-20：品牌 logo 由 1681×700 横版字标换成 200×200 方形 mark，宽度相应收小 */
.footer-logo-img { display: block; width: 48px; max-width: 100%; height: auto; }
.footer-col h4 { font-size: 13px; letter-spacing: .06em; color: var(--color-ink-text-3); margin-bottom: 16px; font-weight: 600; }
.footer-col a { display: block; font-size: 14px; color: var(--color-ink-text-2); padding: 6px 0; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
padding-top: 24px;
display: flex;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
font-size: 13px;
color: var(--color-ink-text-3);
}
/* ---------- 页脚合规行：隐私政策 / 社区公约 / ICP 备案号 ---------- */
.footer-legal {
margin: 10px 0 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 10px;
font-size: 12px;
color: var(--color-ink-text-3);
}
.footer-legal a { color: var(--color-ink-text-3); text-decoration: underline; text-underline-offset: 2px; }
.footer-legal a:hover { color: var(--color-primary); }
.footer-legal span { opacity: .5; }
/* ---------- 社区公约 / 隐私说明 列表 ---------- */
.guide-list { list-style:none; padding:0; margin:22px 0 0; display:grid; gap:14px; }
.guide-list li { display:flex; gap:14px; padding:16px 18px; border:1px solid var(--color-border); border-radius:14px; background:#fff; }
.guide-list__ico { flex:0 0 auto; width:34px; height:34px; border-radius:9px; background:var(--color-primary-50, #eef0ff); color:var(--color-primary); display:grid; place-items:center; font-weight:700; font-size:16px; }
.guide-list__t { font-weight:600; color:var(--color-ink); }
.guide-list__d { font-size:13.5px; color:var(--color-ink-text-2); margin-top:3px; line-height:1.6; }
.guide-list__d a { color:var(--color-primary); }
/* 社区公约 & 隐私说明：左右两栏紧凑布局 */
.guide-cols { display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start; }
.guide-col .section-title { margin:8px 0 0; }
.guide-col .guide-list { margin-top:16px; }
.guide-list--compact { gap:10px; }
.guide-list--compact li { padding:13px 15px; }
.guide-list--compact .guide-list__d { font-size:13px; line-height:1.55; }
@media (max-width: 760px){
.guide-cols { grid-template-columns:1fr; gap:32px; }
}
/* ---------- 21. 搜索框 ---------- */
.search-wrap { position: relative; flex: 1; max-width: 360px; }
.search-input { padding-right: 40px; height: 38px; border-radius: 999px; }
.search-input::-webkit-search-cancel-button { display: none; }
.search-clear {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 26px;
height: 26px;
border: 0;
border-radius: 50%;
background: var(--color-surface-2);
color: var(--color-text-2);
font-size: 16px;
line-height: 1;
display: grid;
place-items: center;
padding: 0;
}
.search-clear:hover { background: var(--color-border); color: var(--color-text); }
.search-clear[hidden] { display: none; }
/* ---------- 22. 返回顶部 ---------- */
.back-to-top {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 95;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--color-border-strong);
background: #fff;
color: var(--color-text-2);
font-size: 18px;
line-height: 1;
display: grid;
place-items: center;
box-shadow: var(--shadow-md);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { color: var(--color-primary); border-color: var(--color-primary); }
/* ---------- 23. 工具类 ---------- */
.mt-0 { margin-top: 0; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
.mb-32 { margin-bottom: 32px; }
.text-center { text-align: center; }
.muted { color: var(--color-text-2); }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
background: #fff;
padding: 12px 20px;
z-index: 200;
}
.skip-link:focus { left: 12px; top: 12px; }
/* 主内容 + 粘性侧栏的两栏版式 */
.layout-sidebar {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 56px;
align-items: start;
}
.layout-sidebar--wide { grid-template-columns: minmax(0, 1fr) 400px; }
.layout-sidebar > aside,
.layout-sidebar--wide > aside { position: sticky; top: 96px; }
/* ---------- 23. 详情页翻页与工具行 ---------- */
.section-tools {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-top: -8px;
margin-bottom: 24px;
}
.post-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--color-border);
}
.post-nav[hidden] { display: none; }
.post-nav__item {
display: flex;
flex-direction: column;
gap: 6px;
padding: 16px 18px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: #fff;
color: var(--color-text);
min-height: 64px;
transition: border-color var(--ease), transform var(--ease);
}
.post-nav__item:hover { border-color: var(--color-primary); transform: translateY(-2px); color: var(--color-text); }
.post-nav__item--next { text-align: right; align-items: flex-end; }
.post-nav__item[hidden] { display: none; }
.post-nav__label { font-size: 12px; color: var(--color-text-3); font-weight: 600; letter-spacing: .04em; }
.post-nav__item strong { font-size: 15px; line-height: 1.4; }
@media (max-width: 480px) {
.post-nav { grid-template-columns: 1fr; }
.post-nav__item--next { text-align: left; align-items: flex-start; }
}
/* ---------- 24. 响应式 ---------- */
@media (max-width: 1024px) {
.hero-grid { grid-template-columns: 1fr; gap: 40px; padding-bottom: 64px; }
.hero h1 { font-size: 40px; }
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.footer-brand { grid-column: 1 / -1; }
.section { padding: 72px 0; }
/* 两栏版式在平板及以下改为单列，侧栏不再吸顶 */
.layout-sidebar,
.layout-sidebar--wide { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.layout-sidebar > aside,
.layout-sidebar--wide > aside { position: static; }
}
@media (max-width: 768px) {
.nav { display: none; }
.header-actions .btn { display: none; }
.nav-toggle { display: grid; }
.hero { padding-top: 56px; }
.hero h1 { font-size: 32px; }
.hero-sub { font-size: 16px; }
.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
.case-grid { grid-template-columns: 1fr; }
.section { padding: 56px 0; }
.section-head { margin-bottom: 32px; }
.section-title { font-size: 24px; }
.page-head { padding: 40px 0 32px; }
.page-head h1 { font-size: 26px; }
.article-cover { font-size: 28px; margin-bottom: 28px; }
.article h2 { font-size: 20px; margin-top: 32px; }
.cta-band { padding: 40px 24px; border-radius: var(--radius-lg); }
.cta-band h2 { font-size: 22px; }
/* 移动端页脚重设计：品牌行居中收窄 + 链接分组双栏 + 胶囊式链接（好点按、省空间） */
.site-footer { padding: 40px 0 24px; }
.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; padding-bottom: 24px; }
.footer-brand { grid-column: 1 / -1; text-align: center; }
.footer-brand p { margin: 10px auto 0; max-width: 320px; font-size: 13px; line-height: 1.7; }
.footer-logo-img { width: 40px; }
.footer-col h4 { font-size: 12px; margin-bottom: 10px; }
.footer-col a {
display: inline-block;
font-size: 12.5px;
padding: 6px 13px;
margin: 0 6px 8px 0;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 999px;
}
.footer-col a:active { background: rgba(255, 255, 255, .16); }
.footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 6px; padding-top: 18px; font-size: 12px; }
.step { grid-template-columns: 40px 1fr; gap: 14px; }
.step-index { width: 40px; height: 40px; font-size: 15px; }
.step:not(:last-child)::before { left: 19px; top: 44px; }
.filter-bar { margin-bottom: 24px; }
.filter-count { margin-left: 0; width: 100%; }
.search-wrap { max-width: 100%; }
.back-to-top { right: 16px; bottom: 16px; }
}
@media (max-width: 480px) {
.container { padding: 0 20px; }
.hero { padding-top: 40px; }
.hero h1 { font-size: 27px; }
.hero-actions .btn { width: auto; flex: 1; }
.btn { width: 100%; }
.card { padding: 20px; }
.price-card { padding: 24px; }
.stat-num { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* ================================================================
新手入门页专用组件（gs- 前缀，避免与全站类冲突）
================================================================ */
/* ---------- 步骤速览导航 ---------- */
.gs-nav {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 12px;
}
.gs-nav-item {
display: flex;
flex-direction: column;
gap: 6px;
padding: 18px 16px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: #fff;
text-decoration: none;
transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.gs-nav-item:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-sm);
transform: translateY(-2px);
}
.gs-nav-no {
display: grid;
place-items: center;
width: 26px; height: 26px;
border-radius: 8px;
background: var(--color-primary);
color: #fff;
font-size: 13px; font-weight: 700;
}
.gs-nav-t { font-size: 15px; font-weight: 600; color: var(--color-text); }
.gs-nav-d { font-size: 12.5px; color: var(--color-text-3); line-height: 1.5; }
/* ---------- 步骤头 ---------- */
.gs-step-head { margin-bottom: 32px; }
.gs-step-no {
display: inline-block;
padding: 4px 12px;
border-radius: 999px;
background: var(--color-primary);
color: #fff;
font-size: 12.5px; font-weight: 600;
letter-spacing: .02em;
margin-bottom: 12px;
}
.gs-step-head h2 { margin: 0 0 10px; font-size: 30px; line-height: 1.3; }
.gs-step-head p { margin: 0; font-size: 16px; color: var(--color-text-2); }
.gs-h3 {
margin: 48px 0 16px;
font-size: 20px;
font-weight: 600;
line-height: 1.4;
}
.gs-h3:first-of-type { margin-top: 8px; }
.gs-prose p { font-size: 16px; line-height: 1.85; color: var(--color-text-2); margin: 0 0 14px; }
.gs-prose strong { color: var(--color-text); font-weight: 600; }
.gs-prose a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
/* ---------- 截图 ---------- */
.gs-shot { margin: 20px 0 28px; }
.gs-shot img {
display: block;
width: 100%; height: auto;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
box-shadow: var(--shadow-sm);
}
.gs-shot-cap {
margin-top: 10px;
font-size: 13.5px;
color: var(--color-text-3);
text-align: center;
line-height: 1.6;
}
.gs-shot--narrow img { max-width: 560px; margin-inline: auto; }
.gs-shot-grid { display: grid; gap: 16px; margin: 20px 0 28px; }
.gs-shot-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gs-shot-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gs-shot-grid .gs-shot { margin: 0; }
/* ---------- 表格 ---------- */
.gs-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gs-table {
width: 100%;
border-collapse: collapse;
font-size: 15px;
min-width: 460px;
}
.gs-table th,
.gs-table td {
padding: 13px 16px;
text-align: left;
border-bottom: 1px solid var(--color-border);
vertical-align: top;
line-height: 1.65;
}
.gs-table thead th { background: var(--color-surface); font-weight: 600; color: var(--color-text); white-space: nowrap; }
.gs-table tbody tr:hover { background: var(--color-surface); }
.gs-table td strong { font-weight: 600; }
/* ---------- 有序步骤列表 ---------- */
.gs-steps { margin: 0 0 8px; padding-left: 22px; }
.gs-steps li { font-size: 16px; line-height: 1.85; color: var(--color-text-2); margin-bottom: 8px; }
.gs-steps li strong { color: var(--color-text); font-weight: 600; }
.gs-steps li::marker { color: var(--color-primary); font-weight: 600; }
.gs-steps--big { padding-left: 24px; margin-top: 32px; }
.gs-steps--big li { font-size: 17px; }
.gs-steps + .gs-shot { margin-top: 4px; }
/* ---------- Mac / Windows 切换 ---------- */
.gs-tabs { margin: 20px 0 8px; }
.gs-tablist { display: inline-flex; gap: 4px; padding: 4px; background: var(--color-surface); border-radius: 10px; border: 1px solid var(--color-border); }
.gs-tab {
height: 34px; padding: 0 18px;
border: 0; border-radius: 7px;
background: transparent;
font-size: 14px; font-weight: 500;
color: var(--color-text-2);
transition: background var(--ease), color var(--ease);
}
.gs-tab:hover { color: var(--color-text); }
.gs-tab.is-on { background: var(--color-primary); color: #fff; }
.gs-panel { display: none; padding-top: 20px; }
.gs-panel.is-on { display: block; }
.gs-panel[hidden] { display: none !important; }
/* ---------- 技巧卡片 ---------- */
.gs-tips { display: grid; gap: 20px; }
.gs-tip {
display: grid;
grid-template-columns: 400px minmax(0, 1fr);
gap: 28px;
align-items: start;
padding: 24px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: #fff;
transition: border-color var(--ease), box-shadow var(--ease);
}
.gs-tip:hover { border-color: #CFCFE0; box-shadow: var(--shadow-sm); }
.gs-tip .gs-shot { margin: 0; }
.gs-tip h3 {
display: flex; align-items: center; gap: 10px;
margin: 0 0 12px;
font-size: 18px; font-weight: 600;
}
.gs-tip-no {
display: grid; place-items: center;
width: 26px; height: 26px; flex: 0 0 26px;
border-radius: 8px;
background: var(--color-primary);
color: #fff; font-size: 13px; font-weight: 700;
}
.gs-tip-body p { font-size: 15px; line-height: 1.8; color: var(--color-text-2); margin: 0 0 10px; }
.gs-tip-body p:last-child { margin-bottom: 0; }
.gs-tip-bad,
.gs-tip-good {
padding: 10px 14px;
border-radius: var(--radius-sm);
font-size: 14px !important;
line-height: 1.7 !important;
}
.gs-tip-bad { background: #FDF0EF; color: #8A2E22; border-left: 3px solid #E26A55; }
.gs-tip-good { background: #EDF9F2; color: #186141; border-left: 3px solid #3ECF8E; }
/* ---------- 进阶能力左右排 ---------- */
.gs-adv { display: grid; gap: 56px; }
.gs-adv-item {
display: grid;
grid-template-columns: minmax(0, 1fr) 420px;
gap: 40px;
align-items: start;
}
.gs-adv-item--rev { grid-template-columns: 420px minmax(0, 1fr); }
.gs-adv-item--rev .gs-adv-body { order: 2; }
.gs-adv-item--rev .gs-adv-media { order: 1; }
.gs-adv-body h3 { margin: 0 0 14px; font-size: 22px; }
.gs-adv-body p { font-size: 16px; line-height: 1.85; color: var(--color-text-2); margin: 0 0 14px; }
.gs-adv-media .gs-shot { margin: 0; }
.gs-adv-media .gs-shot-grid { margin: 0; }
.gs-list { margin: 0 0 14px; padding-left: 20px; }
.gs-list li { font-size: 15px; line-height: 1.9; color: var(--color-text-2); }
.gs-list li::marker { color: var(--color-primary); }
/* ---------- 任务模板卡片 ---------- */
.gs-tpl { display: flex; flex-direction: column; }
.gs-tpl h3 { margin-bottom: 12px; font-size: 17px; }
.gs-tpl .prompt-box { position: relative; flex: 1 1 auto; }
.gs-tpl .prompt-box pre {
margin: 0;
padding: 16px;
padding-top: 46px;
font-size: 12.5px;
line-height: 1.75;
white-space: pre-wrap;
word-break: break-word;
max-height: 320px;
overflow: auto;
}
/* ---------- callout 变体 ---------- */
.callout--warn {
background: #FDF0EF;
border-color: #F3C7BE;
color: #8A2E22;
}
.callout--tip {
background: #EDF7F1;
border-color: #B9E0CB;
color: #0B5138;
}
/* 块级版 callout：正文里是「标题 + 段落/列表」结构时用，
不要改动 .callout 本身的 flex 行布局 —— about/case 页的两段式写法依赖它 */
.callout--stack {
flex-direction: column;
gap: 8px;
}
.callout--stack > p,
.callout--stack > ul,
.callout--stack > ol { margin: 0; }
.callout--stack > p { line-height: 1.75; }
.callout--stack > ul,
.callout--stack > ol { padding-left: 0; }
.callout--stack .gsteps { margin: 4px 0 0; }
/* ---------- 新手入门 图文块 ---------- */
.figure{ margin:20px 0; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:#fff; padding:16px; }
.figure svg{ width:100%; height:auto; display:block; }
.figure figcaption{ font-size:12.5px; color:var(--color-text-2); margin-top:10px; text-align:center; }
.cap-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:18px 0; }
.cap-card{ border:1px solid var(--color-border); border-radius:12px; padding:14px 16px; background:#fff; }
.cap-card__icon{ font-size:22px; line-height:1; }
.cap-card h4{ font-size:15px; margin:8px 0 4px; color:var(--color-ink); font-weight:600; }
.cap-card p{ font-size:13.5px; color:var(--color-text-2); margin:0; line-height:1.65; }
.zone-row{ display:flex; gap:14px; align-items:flex-start; padding:12px 0; border-bottom:1px dashed var(--color-border); }
.zone-row:last-child{ border-bottom:none; }
.zone-row__tag{ flex:0 0 92px; font-weight:600; color:var(--color-primary); font-size:14px; }
.zone-row__desc{ font-size:14px; color:var(--color-text-2); line-height:1.65; }
@media (max-width:640px){ .cap-grid{ grid-template-columns:1fr; } .zone-row{ flex-direction:column; gap:4px; } .zone-row__tag{ flex:none; } }
/* ---------- 入门手册步骤列表 ---------- */
.manual-steps{
list-style: none;
margin: 18px 0;
padding: 0;
counter-reset: ms;
display: flex;
flex-direction: column;
gap: 12px;
}
.manual-steps li{
position: relative;
padding: 14px 16px 14px 52px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-size: 14.5px;
line-height: 1.7;
color: var(--color-text);
transition: border-color .18s ease, background .18s ease;
}
.manual-steps li::before{
counter-increment: ms;
content: counter(ms, decimal-leading-zero);
position: absolute;
left: 14px; top: 14px;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
color: var(--color-primary);
background: var(--color-primary-50);
padding: 4px 7px;
border-radius: 6px;
letter-spacing: .04em;
}
.manual-steps li:hover{
border-color: rgba(91,91,214,.35);
background: #FCFCFE;
}
.manual-steps strong{
color: var(--color-ink);
font-weight: 600;
margin-right: 4px;
}
/* ---------- 实操案例三档 ---------- */
.cases-tier{
margin: 32px 0;
padding: 24px;
background: linear-gradient(180deg, #FBFBFD 0%, #F5F5F9 100%);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
}
.cases-tier__head{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px dashed var(--color-border-strong);
}
.cases-tier__head h3{
margin: 0;
font-size: 16px;
font-weight: 600;
color: var(--color-ink);
flex: 1 1 auto;
min-width: 0;
}
.cases-tier__head p{
flex: 1 1 100%;
margin: 0;
font-size: 13px;
color: var(--color-text-2);
}
.cases-tier__badge{
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: .02em;
}
.cases-tier__badge--l1{
background: #E6F5EE;
color: var(--color-success);
}
.cases-tier__badge--l2{
background: #E0E8FB;
color: var(--color-primary);
}
.cases-tier__badge--l3{
background: #FFF1EA;
color: var(--color-accent);
}
.cases-grid{
list-style: none;
margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.cases-grid li{
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
transition: all .18s ease;
cursor: pointer;
}
.cases-grid__link{
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: inherit;
width: 100%;
}
.cases-grid__link:hover{
text-decoration: none;
color: inherit;
}
.cases-grid li:hover{
border-color: rgba(91,91,214,.4);
transform: translateY(-2px);
box-shadow: 0 10px 24px -14px rgba(11,11,18,.18);
}
.cases-grid__num{
flex: 0 0 auto;
width: 36px; height: 36px;
display: grid; place-items: center;
border-radius: 10px;
background: var(--color-primary-50);
color: var(--color-primary);
font-family: var(--font-mono);
font-size: 14px;
font-weight: 700;
}
.cases-tier#cases-tier-l2 .cases-grid__num{
background: #E0E8FB;
color: var(--color-primary-dark);
}
.cases-tier#cases-tier-l3 .cases-grid__num{
background: #FFF1EA;
color: var(--color-accent);
}
.cases-grid strong{
display: block;
font-size: 14px;
font-weight: 600;
color: var(--color-ink);
line-height: 1.4;
margin-bottom: 2px;
}
.cases-grid span{
display: block;
font-size: 12px;
color: var(--color-text-3);
}
@media (max-width: 640px){
.cases-grid{ grid-template-columns: 1fr; }
.cases-tier{ padding: 18px 16px; }
.manual-steps li{ padding: 12px 14px 12px 50px; }
.manual-steps li::before{ left: 12px; top: 12px; }
}
/* ---------- toc 内「实操案例」分组 ---------- */
.toc__cases{
border-top: 1px dashed var(--color-border);
margin: 12px -2px 0;
padding: 14px 2px 4px;
}
.toc__cases-head{
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 10px;
font-size: 12px;
color: var(--color-text-3);
letter-spacing: .04em;
text-transform: uppercase;
font-weight: 600;
}
.toc__cases-jump{
font-size: 12px;
color: var(--color-primary);
text-decoration: none;
text-transform: none;
letter-spacing: 0;
}
.toc__cases-jump:hover{ text-decoration: underline; }
.toc__cases-list{
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1px;
max-height: 320px;
overflow-y: auto;
scrollbar-width: thin;
}
.toc__cases-list::-webkit-scrollbar{ width: 4px; }
.toc__cases-list::-webkit-scrollbar-thumb{
background: var(--color-border-strong);
border-radius: 4px;
}
.toc__cases-tier{
display: flex;
align-items: center;
gap: 8px;
margin: 6px 0 2px;
padding: 4px 6px;
font-size: 11.5px;
font-weight: 700;
color: var(--color-text-2);
letter-spacing: .02em;
}
.toc__cases-tier:first-child{ margin-top: 0; }
.toc__cases-badge{
display: inline-grid;
place-items: center;
width: 26px; height: 18px;
border-radius: 5px;
font-size: 11px;
font-family: var(--font-mono);
font-weight: 700;
}
.toc__cases-tier--l1 .toc__cases-badge{
background: #E6F5EE;
color: var(--color-success);
}
.toc__cases-tier--l2 .toc__cases-badge{
background: #E0E8FB;
color: var(--color-primary-dark);
}
.toc__cases-tier--l3 .toc__cases-badge{
background: #FFF1EA;
color: var(--color-accent);
}
.toc__cases-list a{
display: flex;
align-items: center;
gap: 8px;
padding: 5px 6px;
font-size: 12.5px;
color: var(--color-text-2);
text-decoration: none;
border-radius: 6px;
transition: background .15s ease, color .15s ease;
}
.toc__cases-list a:hover{
background: var(--color-surface);
color: var(--color-ink);
}
.toc__cases-num{
flex: 0 0 auto;
width: 22px;
text-align: center;
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 700;
color: var(--color-text-3);
}
/* 章节小注：放在 h2 下面的一句补充说明 */
.section-note {
margin: -6px 0 18px;
padding-left: 12px;
border-left: 3px solid var(--color-border-strong);
color: var(--color-text-3);
font-size: 14.5px;
}
/* ================================================================
新手入门页响应式
================================================================ */
@media (max-width: 1024px) {
.gs-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gs-tip { grid-template-columns: 320px minmax(0, 1fr); gap: 22px; }
.gs-adv-item,
.gs-adv-item--rev { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.gs-adv-item--rev .gs-adv-body { order: 1; }
.gs-adv-item--rev .gs-adv-media { order: 2; }
.gs-step-head h2 { font-size: 26px; }
}
@media (max-width: 768px) {
.gs-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gs-nav-item { padding: 14px 12px; }
.gs-nav-d { display: none; }
.gs-tip { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px; }
.gs-shot-grid--2,
.gs-shot-grid--3 { grid-template-columns: minmax(0, 1fr); }
.gs-step-head h2 { font-size: 23px; }
.gs-step-head p { font-size: 15px; }
.gs-h3 { margin: 36px 0 14px; font-size: 18px; }
.gs-steps--big li { font-size: 16px; }
.gs-tablist { display: flex; width: 100%; }
.gs-tab { flex: 1 1 0; padding: 0 10px; }
.gs-adv { gap: 40px; }
}
@media (max-width: 480px) {
.gs-nav { grid-template-columns: minmax(0, 1fr); }
.gs-nav-item { flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; }
.gs-nav-t { font-size: 14px; }
}
/* ==========================================================================
25. 新手入门 · 右侧常驻目录 与 内容组件
========================================================================== */
/* ---------- 两栏布局：正文 + 右侧目录 ---------- */
.guide-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 248px;
gap: 48px;
align-items: start;
}
/* ---------- 右侧常驻目录 ---------- */
.toc {
position: sticky;
top: calc(var(--header-h) + 24px);
max-height: calc(100dvh - var(--header-h) - 48px);
display: flex;
flex-direction: column;
min-height: 0;
}
.toc__title {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--color-text-3);
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--color-border);
}
.toc__list {
list-style: none;
margin: 0;
padding: 0;
overflow-y: auto;
flex: 1 1 auto;
min-height: 0;
scrollbar-width: thin;
scrollbar-color: var(--color-border-strong) transparent;
/* 给目录项一点呼吸空间，长目录也能滚 */
padding-right: 4px;
}
.toc__list::-webkit-scrollbar { width: 4px; }
.toc__list::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 4px; }
.toc__list::-webkit-scrollbar-track { background: transparent; }
.toc__link {
display: block;
padding: 7px 12px;
margin-bottom: 2px;
border-left: 2px solid transparent;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
font-size: 13.5px;
line-height: 1.45;
color: var(--color-text-2);
text-decoration: none;
transition: color var(--ease), background var(--ease), border-color var(--ease);
}
.toc__link:hover {
color: var(--color-text);
background: var(--color-surface);
}
.toc__link.is-active {
color: var(--color-primary-dark);
background: var(--color-primary-50);
border-left-color: var(--color-primary);
font-weight: 600;
}
/* 子级目录项 */
.toc__link.toc__link--sub { padding-left: 24px; font-size: 13px; }
.toc__num {
display: inline-block;
min-width: 20px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--color-text-3);
margin-right: 6px;
}
.toc__link.is-active .toc__num { color: var(--color-primary); }
/* ---------- TOC 头部（精简版：上方薄进度线 + 右下角极简 meta） ---------- */
.toc__head{
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 0 0 8px;
margin-bottom: 10px;
border-bottom: 1px solid var(--color-border);
min-height: 28px;
}
.toc__head-inner{
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
padding: 0 0 8px;
margin-bottom: 10px;
border-bottom: 1px solid var(--color-border);
}
.toc__head-meta{
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 500;
letter-spacing: .04em;
color: var(--color-text-3);
display: inline-flex;
align-items: baseline;
gap: 2px;
}
.toc__head-meta b{
font-weight: 700;
color: var(--color-primary);
font-size: 13px;
}
.toc__progress{
height: 2px;
background: var(--color-surface-2);
border-radius: 999px;
overflow: hidden;
margin: 0;
}
.toc__progress i{
display: block;
height: 100%;
width: 0;
background: linear-gradient(90deg, var(--color-primary), #8B7BF0);
border-radius: 999px;
transition: width .25s ease;
}
/* 旧的「01/25 + 起步 + 55%%%」三段块删除后，保留兜底（不引用） */
.toc__counter,
.toc__group-pill,
.toc__pct,
.toc__head-row,
.toc__bar,
.toc__gantt{
display: none;
}
.toc__search{
position:relative;display:flex;align-items:center;gap:8px;
margin:12px 0 8px;padding:0 12px;
height:36px;border:1px solid var(--color-border);
border-radius:var(--radius-md,10px);
background:var(--color-surface);
transition:border-color .15s ease,box-shadow .15s ease;
}
.toc__search:focus-within{
border-color:var(--color-primary);
box-shadow:0 0 0 3px rgba(91,91,214,.14);
}
.toc__search svg{
flex:0 0 16px;width:16px;height:16px;
color:var(--color-text-3);
}
.toc__search input{
flex:1 1 auto;min-width:0;
border:0;background:transparent;outline:0;
font:inherit;font-size:13px;color:var(--color-text);
}
.toc__search input::placeholder{color:var(--color-text-3)}
.toc__search-clear{
flex:0 0 22px;width:22px;height:22px;
display:grid;place-items:center;
border:0;border-radius:50%;background:var(--color-border);
color:var(--color-text-2);font-size:14px;line-height:1;
cursor:pointer;
}
.toc__search-clear[hidden]{display:none}
/* ---------- 移动端目录：悬浮按钮 + 抽屉 ---------- */
position: fixed;
right: 16px;
bottom: 78px;
z-index: 90;
display: none;
align-items: center;
gap: 8px;
height: 44px;
padding: 0 16px;
border: 1px solid var(--color-border-strong);
border-radius: 999px;
background: #fff;
color: var(--color-text);
font-size: 14px;
font-weight: 600;
box-shadow: var(--shadow-lg);
.toc-fab svg { width: 16px; height: 16px; }
.toc-scrim {
position: fixed;
inset: 0;
z-index: 95;
background: rgba(11, 11, 18, .45);
opacity: 0;
visibility: hidden;
transition: opacity var(--ease), visibility var(--ease);
}
.toc-scrim.is-on { opacity: 1; visibility: visible; }
/* ---------- 图片与图注 ---------- */
.figure {
margin: 24px 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
background: var(--color-surface);
}
.figure img {
display: block;
width: 100%;
height: auto;
cursor: zoom-in;
transition: opacity var(--ease);
}
.figure img:hover { opacity: .96; }
.figure figcaption {
padding: 10px 14px;
border-top: 1px solid var(--color-border);
background: #fff;
font-size: 13px;
color: var(--color-text-2);
}
/* 图片并排（2 栏） */
.figure-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
margin: 24px 0;
}
.figure-grid .figure { margin: 0; }
/* ---------- 数据表格 ---------- */
.table-wrap {
margin: 20px 0;
overflow-x: auto;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
-webkit-overflow-scrolling: touch;
}
.data-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
min-width: 480px;
}
.data-table th,
.data-table td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid var(--color-border);
vertical-align: top;
}
.data-table th {
background: var(--color-surface);
font-weight: 600;
color: var(--color-text);
white-space: nowrap;
}
.data-table td { color: var(--color-text-2); }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: var(--color-surface); }
/* ---------- 编号步骤（正文内的有序步骤） ---------- */
.gsteps {
list-style: none;
margin: 20px 0;
padding: 0;
counter-reset: gstep;
}
.gsteps > li {
position: relative;
counter-increment: gstep;
padding: 0 0 18px 38px;
color: var(--color-text-2);
font-size: 15px;
line-height: 1.75;
}
.gsteps > li::before {
content: counter(gstep);
position: absolute;
left: 0;
top: 2px;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--color-primary-50);
color: var(--color-primary-dark);
display: grid;
place-items: center;
font-size: 12.5px;
font-weight: 700;
}
.gsteps > li:last-child { padding-bottom: 0; }
.gsteps > li strong { color: var(--color-text); font-weight: 600; }
/* ---------- 浅色代码块（可复制） ---------- */
.code-block {
position: relative;
margin: 20px 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
overflow: hidden;
}
.code-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
background: #fff;
border-bottom: 1px solid var(--color-border);
font-size: 13px;
font-weight: 600;
color: var(--color-text);
}
.code-block pre {
margin: 0;
padding: 16px;
overflow-x: auto;
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.8;
color: var(--color-text);
white-space: pre-wrap;
word-break: break-word;
}
/* ---------- 模式卡片（Ask / Craft / Plan） ---------- */
.mode-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin: 24px 0;
}
.mode-card {
padding: 20px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: #fff;
transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.mode-card:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.mode-card__tag {
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
background: var(--color-primary-50);
color: var(--color-primary-dark);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
margin-bottom: 10px;
}
.mode-card h4 { margin: 0 0 8px; font-size: 16px; }
.mode-card p { margin: 0; font-size: 14px; color: var(--color-text-2); line-height: 1.7; }
.mode-card p + p { margin-top: 8px; }
.mode-card strong { color: var(--color-text); }
/* ---------- 图片灯箱 ---------- */
.lightbox {
position: fixed;
inset: 0;
z-index: 120;
display: grid;
place-items: center;
padding: 32px;
background: rgba(11, 11, 18, .9);
backdrop-filter: blur(4px);
}
.lightbox[hidden] { display: none; }
.lightbox img {
max-width: 100%;
max-height: 100%;
border-radius: var(--radius-md);
box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
}
.lightbox__close {
position: absolute;
top: 20px;
right: 20px;
width: 44px;
height: 44px;
display: grid;
place-items: center;
border: 1px solid rgba(255, 255, 255, .24);
border-radius: 50%;
background: rgba(255, 255, 255, .1);
color: #fff;
font-size: 22px;
line-height: 1;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .2); }
.lightbox__cap {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
text-align: center;
color: rgba(255, 255, 255, .82);
font-size: 13px;
padding: 0 24px;
}
/* ---------- 章节锚点偏移（避免被吸顶导航挡住） ---------- */
.guide-section { scroll-margin-top: calc(var(--header-h) + 20px); }
/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
.guide-layout { grid-template-columns: minmax(0, 1fr) 210px; gap: 32px; }
.toc__link { font-size: 13px; padding: 6px 10px; }
}
@media (max-width: 860px) {
.guide-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
.toc { display: none; }
.toc-fab { display: inline-flex; }
/* 抽屉里的目录 */
.toc-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 100;
width: min(320px, 86vw);
display: flex;
flex-direction: column;
padding: 20px;
background: #fff;
box-shadow: -12px 0 40px rgba(16, 16, 32, .18);
transform: translateX(100%);
transition: transform .24s cubic-bezier(.4, 0, .2, 1);
overflow: hidden;
}
.toc-drawer.is-on { transform: translateX(0); }
.toc-drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--color-border);
}
.toc-drawer__head h3 { margin: 0; font-size: 15px; }
.toc-drawer__close {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border: 1px solid var(--color-border);
border-radius: 8px;
background: var(--color-surface);
font-size: 18px;
line-height: 1;
color: var(--color-text-2);
}
.toc-drawer .toc__list { max-height: none; }
.toc-drawer .toc__link { padding: 10px 12px; font-size: 14px; }
}
@media (min-width: 861px) {
.toc-drawer { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.toc-drawer { transition: none; }
.mode-card { transition: none; }
}
/* ---------- 新手入门页补充组件 ---------- */
.page-head__lead {
font-size: 17px;
line-height: 1.75;
color: var(--color-text-2);
max-width: 720px;
}
.page-head__meta {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 20px;
font-size: 13.5px;
color: var(--color-text-3);
}
.page-head__meta span { display: inline-flex; align-items: center; gap: 6px; }
/* 勾选项列表 */
.check-list {
list-style: none;
margin: 18px 0;
padding: 0;
}
.check-list > li {
position: relative;
padding: 7px 0 7px 28px;
font-size: 15px;
line-height: 1.7;
color: var(--color-text-2);
}
.check-list > li::before {
content: "";
position: absolute;
left: 2px;
top: 15px;
width: 12px;
height: 7px;
border-left: 2px solid var(--color-primary);
border-bottom: 2px solid var(--color-primary);
transform: rotate(-45deg);
}
.check-list > li strong { color: var(--color-text); font-weight: 600; }
/* 结尾行动按钮行 */
.cta-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
}
/* 正文小标题 */
.guide-section { margin-bottom: 56px; }
.guide-section:last-child { margin-bottom: 0; }
.guide-section h2 {
font-size: 26px;
line-height: 1.4;
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--color-border);
}
.guide-section h3 {
font-size: 19px;
margin: 32px 0 12px;
}
.guide-section p {
font-size: 15.5px;
line-height: 1.8;
color: var(--color-text-2);
margin: 0 0 14px;
}
.guide-section p strong { color: var(--color-text); font-weight: 600; }
.guide-section a { color: var(--color-primary); text-decoration: underline; }
.guide-section code {
padding: 2px 6px;
border-radius: 4px;
background: var(--color-surface-2);
font-family: var(--font-mono);
font-size: 13px;
color: var(--color-text);
}
@media (max-width: 768px) {
.guide-section { margin-bottom: 44px; }
.guide-section h2 { font-size: 22px; }
.guide-section h3 { font-size: 17px; }
.page-head__meta { gap: 12px; font-size: 12.5px; }
}
/* ============ Bluebook 难度地图（start.html 第 25 章） ============ */
.bb-levels{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
margin:24px 0 32px;
}
.bb-level{
border:1px solid var(--color-border);
border-radius:var(--radius-md);
background:var(--color-surface);
padding:20px 22px 18px;
display:flex;flex-direction:column;gap:12px;
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
position:relative;overflow:hidden;
}
.bb-level::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
background:var(--bb-accent,var(--color-primary));
}
.bb-level--1{--bb-accent:#3ECF8E}
.bb-level--2{--bb-accent:#4DA3FF}
.bb-level--3{--bb-accent:#A374F4}
.bb-level--4{--bb-accent:#F26B3A}
.bb-level:hover{transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(91,91,214,.25);border-color:var(--bb-accent)}
.bb-level__tag{
display:inline-block;align-self:flex-start;
font-family:var(--font-mono);
font-size:11px;font-weight:600;letter-spacing:.04em;
padding:3px 9px;border-radius:999px;
color:#fff;background:var(--bb-accent);
}
.bb-level h4{margin:0;font-size:16px;font-weight:600;color:var(--color-ink)}
.bb-level__desc{margin:0;font-size:13px;color:var(--color-text-2);line-height:1.6}
.bb-level__chapters{
margin:0;padding:0;list-style:none;
display:flex;flex-direction:column;gap:6px;
font-size:13px;color:var(--color-text);
}
.bb-level__chapters li{
padding-left:18px;position:relative;line-height:1.5;
}
.bb-level__chapters li::before{
content:"";position:absolute;left:0;top:.6em;
width:8px;height:8px;border-radius:2px;
background:var(--bb-accent);opacity:.7;
}
.bb-level__shot{
margin:0;border-radius:var(--radius-sm);overflow:hidden;
border:1px solid var(--color-border);
background:#fff;
}
.bb-level__shot img{display:block;width:100%;height:auto}
.bb-level__shot figcaption{
padding:8px 12px;font-size:11.5px;color:var(--color-text-3);
background:var(--color-surface-2,var(--color-surface));
border-top:1px solid var(--color-border);
}
/* 配图对 */
.bb-shot-pair{
display:grid;grid-template-columns:1fr 1fr;gap:14px;
margin:16px 0 24px;
}
.bb-shot-pair figure{
margin:0;border-radius:var(--radius-md);overflow:hidden;
border:1px solid var(--color-border);background:#fff;
}
.bb-shot-pair img{display:block;width:100%;height:auto}
.bb-shot-pair figcaption{
padding:8px 12px;font-size:11.5px;color:var(--color-text-3);
background:var(--color-surface);border-top:1px solid var(--color-border);
}
/* 27 章表格 */
.bb-table-wrap{
margin:20px 0 28px;
border:1px solid var(--color-border);
border-radius:var(--radius-md);
overflow:hidden;overflow-x:auto;
}
.bb-table{
width:100%;border-collapse:collapse;
font-size:13px;
background:var(--color-surface);
}
.bb-table th,.bb-table td{
padding:10px 14px;text-align:left;
border-bottom:1px solid var(--color-border);
vertical-align:top;
}
.bb-table th{
background:var(--color-ink);color:#fff;
font-weight:600;font-size:12.5px;
position:sticky;top:0;z-index:1;
}
.bb-table tr:last-child td{border-bottom:0}
.bb-table tr:hover td{background:var(--color-surface-2,rgba(91,91,214,.04))}
.bb-table td:first-child{width:74px;white-space:nowrap}
.bb-table td:nth-child(2){width:74px;color:var(--color-text-3);font-family:var(--font-mono);font-size:12px}
.bb-pill{
display:inline-block;font-family:var(--font-mono);
font-size:11px;font-weight:600;
padding:2px 8px;border-radius:6px;color:#fff;
}
.bb-pill--1{background:#3ECF8E}
.bb-pill--2{background:#4DA3FF}
.bb-pill--3{background:#A374F4}
.bb-pill--4{background:#F26B3A}
.bb-pill--24{background:#70708A;font-size:10px}
/* 紧凑 3 列变体（首页 Bluebook L1-L3） */
.bb-levels--compact{grid-template-columns:repeat(3,1fr);gap:18px;margin:0}
.bb-levels--compact .bb-level{
padding:20px 20px 18px;
gap:10px;
background:#FFFFFF;
border:1px solid var(--color-border);
border-top:none;
border-radius:14px;
box-shadow:0 1px 2px rgba(11,11,18,.04);
position:relative;
overflow:visible;
}
.bb-levels--compact .bb-level::before{
/* 顶部色条，替换原来的左侧 4px */
content:"";
position:absolute;
left:-1px; right:-1px; top:-1px;
height:4px;
background:linear-gradient(90deg, var(--bb-accent), color-mix(in srgb, var(--bb-accent) 60%, transparent));
border-radius:14px 14px 0 0;
}
.bb-levels--compact .bb-level::after{
/* 右下小角标，强化等级色彩 */
content:"";
position:absolute;
right:-1px; bottom:-1px;
width:24px; height:24px;
background:radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--bb-accent) 12%, transparent) 0 60%, transparent 62%);
border-bottom-right-radius:14px;
pointer-events:none;
}
.bb-levels--compact .bb-level:hover{
transform:translateY(-3px);
box-shadow:0 16px 30px -14px color-mix(in srgb, var(--bb-accent) 35%, transparent);
border-color:color-mix(in srgb, var(--bb-accent) 50%, var(--color-border));
}
.bb-levels--compact .bb-level__top{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
}
.bb-levels--compact .bb-level__tag{
padding:3px 9px;
}
.bb-levels--compact .bb-level__num{
font-family:var(--font-mono);
font-size:26px;
font-weight:700;
color:var(--bb-accent);
line-height:1;
letter-spacing:-.02em;
opacity:.55;
}
.bb-levels--compact .bb-level h4{font-size:16px;line-height:1.35;margin-top:-2px}
.bb-levels--compact .bb-level__desc{font-size:12.5px;line-height:1.55}
.bb-levels--compact .bb-level__chapters{
font-size:12.5px;
gap:5px;
display:flex;
flex-wrap:wrap;
flex-direction:row;
}
.bb-levels--compact .bb-level__chapters li{
padding:3px 9px;
padding-left:9px;
background:var(--color-surface);
border:1px solid var(--color-border);
border-radius:6px;
line-height:1.35;
font-size:11.5px;
color:var(--color-text);
}
.bb-levels--compact .bb-level__chapters li::before{
display:none;
}
.bb-level__cta{
display:inline-block;align-self:flex-start;
font-size:12.5px;font-weight:500;color:var(--bb-accent,var(--color-primary));
text-decoration:none;margin-top:auto;
}
.bb-level__cta:hover{text-decoration:underline}
.bb-levels--cta-pad{padding-bottom:8px}
/* ---------- 学习路径 4 段进度条 ---------- */
.lp-path{
list-style:none;margin:0;
padding:0 0 14px;
display:flex;align-items:center;justify-content:space-between;
gap:8px;
position:relative;
}
.lp-path::before{
content:"";
position:absolute;
left:6%; right:6%;
top:14px;height:2px;
background:linear-gradient(90deg,
#3ECF8E 0%, #4DA3FF 50%, #A374F4 75%, #F26B3A 100%);
opacity:.35;
z-index:0;
}
.lp-path__node{
display:flex;flex-direction:column;align-items:center;gap:6px;
position:relative;z-index:1;
flex:0 0 auto;
}
.lp-path__dot{
width:30px;height:30px;border-radius:50%;
background:#fff;
border:2px solid;
display:block;
position:relative;
}
.lp-path__node[data-level="1"] .lp-path__dot{ border-color:#3ECF8E; box-shadow:0 0 0 4px rgba(62,207,142,.12); }
.lp-path__node[data-level="2"] .lp-path__dot{ border-color:#4DA3FF; box-shadow:0 0 0 4px rgba(77,163,255,.12); }
.lp-path__node[data-level="3"] .lp-path__dot{ border-color:#A374F4; box-shadow:0 0 0 4px rgba(163,116,244,.12); }
.lp-path__node[data-level="4"] .lp-path__dot{ border-color:#F26B3A; box-shadow:0 0 0 4px rgba(242,107,58,.12); }
.lp-path__dot::after{
content:"";position:absolute;left:50%;top:50%;
width:10px;height:10px;border-radius:50%;
transform:translate(-50%,-50%);
}
.lp-path__node[data-level="1"] .lp-path__dot::after{ background:#3ECF8E; }
.lp-path__node[data-level="2"] .lp-path__dot::after{ background:#4DA3FF; }
.lp-path__node[data-level="3"] .lp-path__dot::after{ background:#A374F4; }
.lp-path__node[data-level="4"] .lp-path__dot::after{ background:#F26B3A; }
.lp-path__num{
font-family:var(--font-mono);
font-size:11px;font-weight:700;letter-spacing:.04em;
color:var(--color-text-2);
}
.lp-path__label{
font-size:12.5px;font-weight:500;color:var(--color-text);
}
.lp-path__sep{display:none}
@media (max-width:900px){
.bb-levels{grid-template-columns:1fr}
.bb-shot-pair{grid-template-columns:1fr}
.lp-path{gap:4px}
.lp-path__label{font-size:11.5px}
.lp-path__dot{width:24px;height:24px}
.lp-path__dot::after{width:8px;height:8px}
.lp-path__num{font-size:10px}
}
@media (max-width:1024px){
.bb-levels--compact{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
.bb-levels--compact{grid-template-columns:1fr}
}
@media (max-width:480px){
.bb-level{padding:16px}
.bb-level h4{font-size:15px}
.bb-table{font-size:12px}
.bb-table th,.bb-table td{padding:8px 10px}
}
/* ==========================================================================
目录修复与增强（2026-09-04）
1) 补上断掉的 flex 链，让 .toc__list 真正能滚动
2) 滚动条加粗到肉眼可见，并阻止滚动穿透
3) 一级 / 二级目录 + 折叠
4) 章节正文可折叠
5) 学习进度甘特图
========================================================================== */
/* ---- 1. flex 链：.toc → .toc__card → .toc__body → .toc__list ----
之前 .toc__card / .toc__body 完全没有样式，导致 .toc__list 的 flex:1
在非 flex 父容器里失效，25 章目录被 max-height 硬裁掉约 465px 且滚不到。 */
.toc{
height: calc(100dvh - var(--header-h) - 48px);
}
.toc__card{
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.toc__body{
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
/* ---- 2. 滚动条：4px 太细看不见，加粗并支持 hover 高亮 ---- */
.toc__list{
overscroll-behavior: contain; /* 滚到头不把页面带着走 */
scrollbar-width: thin;
scrollbar-color: var(--color-border-strong) transparent;
}
.toc__list::-webkit-scrollbar{ width: 8px; }
.toc__list::-webkit-scrollbar-track{ background: transparent; }
.toc__list::-webkit-scrollbar-thumb{
background: var(--color-border-strong);
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
}
.toc__list:hover::-webkit-scrollbar-thumb{
background: var(--color-text-3);
background-clip: padding-box;
}
/* ---- 3. 一级 / 二级目录 ---- */
.toc__item{ list-style: none; }
.toc__row{
display: flex;
align-items: stretch;
gap: 2px;
}
.toc__row .toc__link{ flex: 1 1 auto; min-width: 0; }
.toc__toggle{
flex: 0 0 22px;
width: 22px;
display: grid;
place-items: center;
border: 0;
background: transparent;
color: var(--color-text-3);
cursor: pointer;
border-radius: var(--radius-sm);
}
.toc__toggle:hover{ color: var(--color-primary); background: var(--color-surface-2); }
.toc__toggle svg{
width: 12px; height: 12px;
transition: transform .18s ease;
}
.toc__item.is-open > .toc__row > .toc__toggle svg{ transform: rotate(90deg); }
.toc__toggle[hidden]{ display: none; }
.toc__sub{
list-style: none;
margin: 2px 0 6px 16px;
padding: 0 0 0 10px;
border-left: 1px solid var(--color-border);
display: none;
}
.toc__item.is-open > .toc__sub{ display: block; }
.toc__sublink{
display: block;
padding: 4px 10px;
font-size: 12.5px;
line-height: 1.45;
color: var(--color-text-3);
text-decoration: none;
border-radius: var(--radius-sm);
transition: color var(--ease), background var(--ease);
}
.toc__sublink:hover{ color: var(--color-text); background: var(--color-surface-2); }
.toc__sublink.is-active{
color: var(--color-primary);
background: var(--color-primary-50);
font-weight: 500;
}
/* ---- 4. 章节正文可折叠 ---- */
.guide-section__head{
display: flex;
align-items: flex-start;
gap: 12px;
}
.guide-section__head > h2{ flex: 1 1 auto; min-width: 0; margin: 0; }
.guide-fold{
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
font: inherit;
font-size: 12px;
line-height: 1.4;
color: var(--color-text-3);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 999px;
cursor: pointer;
white-space: nowrap;
transition: color var(--ease), border-color var(--ease), background var(--ease);
}
.guide-fold:hover{
color: var(--color-primary);
border-color: var(--color-primary);
background: var(--color-primary-50);
}
.guide-fold svg{ width: 12px; height: 12px; transition: transform .18s ease; }
.guide-section.is-collapsed .guide-fold svg{ transform: rotate(-90deg); }
.guide-section.is-collapsed .guide__collapsible{ display: none; }
.guide-section.is-collapsed{ padding-bottom: 4px; }
/* ---- 5. 学习进度甘特图：每章一根，已读实心、当前高亮 ---- */
.toc__gantt{
display: flex;
align-items: flex-end;
gap: 2px;
height: 22px;
margin-top: 10px;
}
.toc__gantt i{
flex: 1 1 0;
min-width: 2px;
height: 8px;
border-radius: 2px;
background: var(--color-surface-2);
transition: height .22s ease, background .22s ease;
}
.toc__gantt i.is-done{ background: var(--color-primary); }
.toc__gantt i.is-current{ background: var(--color-accent); height: 22px; }
@media (max-width:560px){
.guide-section__head{ flex-wrap: wrap; }
.guide-fold{ padding: 3px 8px; font-size: 11px; }
}
/* ---- 实战营报名：扫码进群卡片 ---- */
.signup-qr{
display: flex;
gap: 32px;
align-items: center;
padding: 24px;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
}
.signup-qr__figure{
flex: 0 0 auto;
margin: 0;
text-align: center;
}
.signup-qr__figure img{
display: block;
width: 184px;
height: 184px;
border-radius: var(--radius-md);
box-shadow: 0 4px 16px rgba(11, 11, 18, .08);
background: #fff;
}
.signup-qr__figure figcaption{
margin-top: 8px;
font-size: 12px;
color: var(--color-text-3);
}
.signup-qr__steps{
flex: 1 1 auto;
min-width: 0;
}
.signup-qr__steps ol{
margin: 0;
padding-left: 20px;
}
.signup-qr__steps li{ margin-bottom: 8px; line-height: 1.6; }
@media (max-width: 640px) {
.signup-qr{ flex-direction: column; gap: 16px; padding: 16px; }
}
/* ================================================================
评论区组件（.cmt）—— 全局可复用
用于：案例详情页 / 交流论坛帖子详情
两态：未登录（门禁 + 禁用输入/点赞） vs 已登录会员（可发表/点赞/嵌套回复）
================================================================ */
/* 全局：确保 hidden 属性始终隐藏元素（覆盖 .cmt__gate/.cmt__list 等自身 display 规则） */
[hidden]{ display: none !important; }
.cmt{
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 22px;
}
.cmt__head{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 18px;
}
.cmt__title{ font-size: 16px; font-weight: 600; color: var(--color-ink); margin: 0; }
.cmt__count{
font-family: var(--font-mono);
font-size: 12px;
color: var(--color-text-3);
background: var(--color-surface-2);
padding: 3px 9px;
border-radius: 999px;
}
/* 未登录提示条（引流注册） */
.cmt__gate{
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
padding: 16px;
border-radius: var(--radius-md);
background: linear-gradient(135deg, rgba(91,91,214,.06), rgba(242,107,58,.05));
border: 1px dashed var(--color-border-strong);
margin-bottom: 18px;
}
.cmt__gate p{
margin: 0;
font-size: 13.5px;
color: var(--color-text-2);
flex: 1;
min-width: 180px;
line-height: 1.6;
}
.cmt__gate b{ color: var(--color-ink); }
.cmt__gate-actions{ display: flex; gap: 8px; flex: 0 0 auto; }
/* 输入框 */
.cmt__box{ display: flex; gap: 12px; margin-bottom: 20px; }
.cmt__avatar{
flex: 0 0 36px;
width: 36px;
height: 36px;
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
font-weight: 700;
font-size: 15px;
background: linear-gradient(135deg, var(--color-primary), #8B7BF0);
user-select: none;
}
.cmt__avatar--gray{
background: var(--color-border-strong);
color: var(--color-text-3);
font-size: 17px;
}
.cmt__input-wrap{ flex: 1; min-width: 0; }
.cmt__input{
width: 100%;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 10px 12px;
font-size: 14px;
font-family: inherit;
resize: vertical;
min-height: 62px;
transition: border-color .18s ease;
background: #fff;
color: var(--color-text);
box-sizing: border-box;
}
.cmt__input:focus{ outline: none; border-color: var(--color-primary); }
.cmt__input:disabled{ background: var(--color-surface); cursor: not-allowed; }
.cmt__bar{
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 8px;
}
.cmt__hint{ font-size: 12px; color: var(--color-text-3); }
.cmt__send{
padding: 7px 16px;
border: none;
border-radius: var(--radius-sm);
background: var(--color-primary);
color: #fff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: background .18s ease;
}
.cmt__send:hover{ background: var(--color-primary-dark); }
.cmt__send:disabled{ background: var(--color-border-strong); cursor: not-allowed; }
/* 评论列表 */
.cmt__list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.cmt__item{ display: flex; gap: 12px; }
.cmt__body{ flex: 1; min-width: 0; }
.cmt__meta{
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 5px;
}
.cmt__name{ font-size: 13.5px; font-weight: 600; color: var(--color-ink); }
.cmt__tag{
font-size: 11.5px;
font-weight: 600;
padding: 1px 6px;
border-radius: 4px;
letter-spacing: .02em;
}
.cmt__tag--author{ background: rgba(91,91,214,.12); color: var(--color-primary-dark); }
.cmt__tag--me{ background: rgba(47,191,113,.12); color: #1E8E4E; }
.cmt__tag--mod{ background: rgba(242,107,58,.14); color: #C4501F; }
.cmt__time{ font-size: 12px; color: var(--color-text-3); }
.cmt__text{ font-size: 14px; line-height: 1.65; color: var(--color-text); margin: 0 0 8px; }
.cmt__text--quote{
margin: 0 0 10px;
padding-left: 10px;
border-left: 2px solid var(--color-border-strong);
color: var(--color-text-3);
font-size: 13px;
}
.cmt__actions{ display: flex; gap: 14px; }
.cmt__act{
border: none;
background: none;
padding: 0;
cursor: pointer;
font-size: 12.5px;
color: var(--color-text-3);
font-family: inherit;
display: inline-flex;
align-items: center;
gap: 4px;
transition: color .18s ease;
}
.cmt__act:hover{ color: var(--color-primary); }
.cmt__act.is-on{ color: var(--color-primary); font-weight: 600; }
.cmt__act:disabled{ cursor: not-allowed; opacity: .5; }
.cmt__act:disabled:hover{ color: var(--color-text-3); }
/* 回复嵌套 */
.cmt__replies{
list-style: none;
margin: 14px 0 0;
padding: 0 0 0 14px;
border-left: 2px solid var(--color-border);
display: grid;
gap: 14px;
}
.cmt__replies .cmt__avatar{ flex-basis: 28px; width: 28px; height: 28px; font-size: 12px; }
/* 回复输入框 */
.cmt__reply-box{ display: flex; gap: 10px; margin-top: 12px; }
.cmt__reply-box .cmt__avatar{ flex-basis: 28px; width: 28px; height: 28px; font-size: 12px; }
.cmt__reply-box .cmt__input{ min-height: 44px; font-size: 13.5px; }
/* 空态 */
.cmt__empty{
text-align: center;
padding: 28px 0;
color: var(--color-text-3);
font-size: 13.5px;
}
@media (max-width: 560px){
.cmt{ padding: 16px; }
.cmt__box{ gap: 10px; }
.cmt__avatar{ flex-basis: 32px; width: 32px; height: 32px; font-size: 13px; }
.cmt__actions{ gap: 12px; }
.cmt__replies{ padding-left: 10px; }
}
/* ---------- 交流论坛入口区 ---------- */
.section--forum { background: #fff; }
.section-head--forum { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.forum-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
max-width: 960px;
margin: 0 auto;
}
.forum-card {
display: flex;
align-items: flex-start;
gap: 18px;
padding: 28px;
background: #fff;
border: 1px solid #E8E8EE;
border-radius: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,.04);
text-decoration: none;
color: inherit;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.forum-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 24px -8px rgba(91,91,214,.18);
border-color: rgba(91,91,214,.35);
}
.forum-card__icon {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 12px;
display: grid;
place-items: center;
color: #fff;
}
.forum-card--ask .forum-card__icon { background: linear-gradient(135deg, #5B5BD6, #7B7BFF); }
.forum-card--share .forum-card__icon { background: linear-gradient(135deg, #2FBF71, #26A65F); }
.forum-card__body h3 { font-size: 18px; font-weight: 600; margin: 0 0 8px; color: #0B0B12; }
.forum-card__body p { font-size: 14px; line-height: 1.75; color: #555; margin: 0 0 12px; }
.forum-card__link {
font-size: 13px;
font-weight: 600;
display: inline-flex;
align-items: center;
transition: gap .2s ease;
}
.forum-card--ask .forum-card__link { color: #5B5BD6; }
.forum-card--share .forum-card__link { color: #2FBF71; }
.forum-card:hover .forum-card__link { gap: 6px; }
.forum-cta {
text-align: center;
margin-top: 36px;
}
@media (max-width: 768px) {
.forum-actions { grid-template-columns: 1fr; }
}
/* ---------- 投稿区（重做）：四步流程条 + 分区表单 + 附件上传 ---------- */
.section-head--center {
text-align: center;
max-width: 760px;
margin: 0 auto 36px;
}
.submit-flow {
list-style: none;
margin: 0 0 40px;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.submit-flow__item {
position: relative;
padding: 22px 18px 18px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: 0 10px 30px -26px rgba(11, 11, 18, .25);
}
/* 步骤之间的小箭头 */
.submit-flow__item::after {
content: "";
position: absolute;
top: 36px;
right: -12px;
width: 8px;
height: 8px;
border-top: 2px solid var(--color-border-strong);
border-right: 2px solid var(--color-border-strong);
transform: rotate(45deg);
}
.submit-flow__item:last-child::after { display: none; }
.submit-flow__num {
display: grid;
place-items: center;
width: 30px;
height: 30px;
margin-bottom: 12px;
border-radius: 50%;
background: var(--color-primary);
color: #fff;
font-size: 14px;
font-weight: 700;
}
.submit-flow__item h4 { font-size: 15px; margin-bottom: 6px; }
.submit-flow__item p { font-size: 13px; line-height: 1.6; color: var(--color-text-2); }
/* 投稿表单：分区卡片 */
.submit-form {
display: grid;
gap: 18px;
background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFB 100%);
border: 1px solid var(--color-border);
border-radius: 18px;
padding: 24px;
box-shadow: 0 16px 40px -28px rgba(11, 11, 18, .18);
}
.submit-form__head h3 { font-size: 18px; margin-bottom: 6px; }
.submit-sec { border: 0; margin: 0; padding: 0; min-width: 0; }
.submit-sec__title {
display: flex;
align-items: center;
gap: 8px;
padding: 0;
margin-bottom: 12px;
font-size: 15px;
font-weight: 700;
color: var(--color-text);
}
.submit-sec__no {
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 6px;
background: var(--color-primary-50);
color: var(--color-primary-dark);
font-size: 12px;
font-weight: 700;
}
.submit-sec__body { display: grid; gap: 14px; }
.submit-body-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 16px;
}
.submit-body-grid .field { margin: 0; }
/* 附件上传区 */
.uploader {
position: relative;
display: grid;
justify-items: center;
gap: 6px;
padding: 26px 18px;
border: 1.5px dashed var(--color-border-strong);
border-radius: 14px;
background: var(--color-surface);
text-align: center;
cursor: pointer;
transition: border-color var(--ease), background var(--ease);
}
.uploader:hover,
.uploader.is-over {
border-color: var(--color-primary);
background: var(--color-primary-50);
}
.uploader:focus-within {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-50);
}
/* 真实 input 铺满透明覆盖，保留键盘可达与点击选择 */
.uploader__input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.uploader__icon {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--color-primary);
color: #fff;
font-size: 18px;
}
.uploader__title { font-size: 14.5px; font-weight: 600; color: var(--color-text); }
.uploader__title b { color: var(--color-primary); }
.uploader__hint { font-size: 12.5px; color: var(--color-text-3); }
/* 已选文件列表 */
.filelist {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 8px;
}
.filelist[hidden] { display: none; }
.filelist__item {
display: grid;
grid-template-columns: 38px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 8px 10px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: 10px;
}
.filelist__ext {
display: grid;
place-items: center;
height: 30px;
border-radius: 7px;
background: var(--color-primary-50);
color: var(--color-primary-dark);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
}
.filelist__meta { display: grid; gap: 2px; min-width: 0; }
.filelist__meta strong {
font-size: 13.5px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.filelist__meta span { font-size: 12px; color: var(--color-text-3); }
.filelist__del {
width: 26px;
height: 26px;
border: 0;
border-radius: 8px;
background: var(--color-surface-2);
color: var(--color-text-2);
font-size: 16px;
line-height: 1;
cursor: pointer;
transition: background var(--ease), color var(--ease);
}
.filelist__del:hover { background: var(--color-danger-bg); color: var(--color-danger); }
.submit-form__foot {
display: grid;
grid-template-columns: auto 1fr;
gap: 12px 16px;
align-items: center;
}
@media (max-width: 1024px) {
.submit-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.submit-flow__item::after { display: none; }
}
@media (max-width: 768px) {
.submit-flow { grid-template-columns: 1fr; }
.submit-body-grid { grid-template-columns: 1fr; }
.submit-form { padding: 18px; }
.submit-form__foot { grid-template-columns: 1fr; }
.filelist__item { grid-template-columns: 32px minmax(0, 1fr) auto; }
}
/* ---------- 投稿表单：整行横屏 + 案例/技能分段选择 ---------- */
.submit-form--inline { display: grid; gap: 16px; }
.submit-type { margin: 0; }
.submit-type > label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--color-text-2); }
.seg { display: inline-flex; border: 1px solid var(--color-border-strong); border-radius: 12px; overflow: hidden; background: var(--color-surface); }
.seg__item { position: relative; display: flex; align-items: center; justify-content: center; padding: 9px 24px; font-size: 14px; font-weight: 600; color: var(--color-text-2); cursor: pointer; user-select: none; }
.seg__item + .seg__item { border-left: 1px solid var(--color-border); }
.seg__item input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.seg__item.is-active { background: var(--color-primary); color: #fff; }
.seg__item:not(.is-active):hover { background: var(--color-surface-2); }
.submit-row { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.submit-row .field { margin: 0; }
.submit-row__main { flex: 1 1 320px; min-width: 0; }
.submit-row__upload { flex: 0 0 auto; width: 220px; }
.submit-row__acts { flex: 0 0 auto; display: flex; align-items: flex-end; }
.uploader--compact { padding: 18px 14px; }
.submit-form__tip { margin-top: 2px; }
@media (max-width: 768px) {
.submit-row { flex-direction: column; align-items: stretch; }
.submit-row__upload { width: 100%; }
.submit-row__acts .btn { width: 100%; }
}
/* ---------- 案例库：征集提示条 ---------- */
.case-callout{
display: flex;
align-items: center;
gap: 14px;
margin: 0 0 24px;
padding: 16px 20px;
border-radius: var(--radius-md);
background: linear-gradient(135deg, rgba(91,91,214,.06), rgba(242,107,58,.05));
border: 1px solid rgba(91,91,214,.18);
}
.case-callout__badge{
flex: 0 0 auto;
padding: 4px 10px;
border-radius: 999px;
background: linear-gradient(135deg, var(--color-accent), #FF9239);
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: .02em;
white-space: nowrap;
}
.case-callout__body{ flex: 1; min-width: 0; }
.case-callout__body strong{
display: block;
font-size: 14.5px;
color: var(--color-ink);
margin-bottom: 2px;
}
.case-callout__body span{
font-size: 13px;
color: var(--color-text-2);
line-height: 1.5;
}
.case-callout__body b{ color: var(--color-accent); font-weight: 700; }
.case-callout__cta{ flex: 0 0 auto; }
@media (max-width: 640px){
.case-callout{ flex-wrap: wrap; }
.case-callout__cta{ width: 100%; justify-content: center; }
}
/* ============================================================
深色模式 / 夜间模式
由 .theme-toggle 切换
仅重定义 tokens + 覆盖硬编码白色容器 + 按钮样式；QR 码容器保持白底
============================================================ */
html[data-theme="dark"] {
color-scheme: dark;
--color-primary-50: rgba(142, 143, 245, .30);
--color-accent: #F6844F;
--color-accent-hover: #FF9566;
--color-text: #E8E8F2;
--color-text-2: #A9A9BD;
--color-text-3: #6E6E82;
--color-bg: #0D0E14;
--color-surface: #15161F;
--color-surface-2: #1E1F2B;
--color-border: #262838;
--color-border-strong: #353A4E;
--color-ink-text-2: rgba(255, 255, 255, .78);
--color-ink-text-3: rgba(255, 255, 255, .55);
--shadow-sm: 0 2px 6px rgba(0, 0, 0, .40);
--shadow-md: 0 4px 16px rgba(0, 0, 0, .45);
--shadow-lg: 0 16px 40px rgba(0, 0, 0, .55);
}
/* 顶部导航：毛玻璃暗化 */
html[data-theme="dark"] .site-header {
background: rgba(15, 16, 22, .82);
border-bottom-color: var(--color-border);
}
html[data-theme="dark"] .logo-mark {
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}
/* 强调色文字在暗底提亮（导航选中 / eyebrow / 箭头链接） */
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .nav-link.is-active,
html[data-theme="dark"] .nav-link[aria-current="page"],
html[data-theme="dark"] .link-arrow { color: #A6A7FF; }
/* 通用深色表面：把硬编码白色容器换成深色 surface（QR 码容器除外，必须留白可扫） */
/* 用 :is() 确保每个选择器都带 html[data-theme="dark"] 前缀，避免污染日间模式 */
html[data-theme="dark"] :is(
.nav-toggle, .mobile-menu, .btn--secondary, .btn--light, .card, .card--step,
.aside-card, .accordion-trigger, .chip, .case-card, .day-card, .price-card,
.input, .contributor, .page-head__card, .page-head__mascot figcaption,
.page-head--cases .page-head__chip, .page-head--cases .page-head__tag,
.guide-list li, .back-to-top, .skip-link, .post-nav__item, .gs-nav-item,
.gs-tip, .figure, .cap-card, .manual-steps li, .cases-grid li,
.figure figcaption, .code-head, .mode-card, .toc-drawer, .bb-level__shot,
.bb-shot-pair figure, .bb-levels--compact .bb-level, .lp-path__dot,
.cmt, .cmt__input, .section--forum, .forum-card, .submit-flow__item,
.filelist__item, .hero-video__live, .bt-eye
) { background: var(--color-surface); }
/* 深色文字风险修正：原白底上的深色字，换深色表面后需转浅 */
html[data-theme="dark"] .btn--light { color: var(--color-text); }
html[data-theme="dark"] .guide-list__t,
html[data-theme="dark"] .cap-card h4,
html[data-theme="dark"] .bb-level h4 { color: var(--color-text); }
/* 渐变白背景 → 暗色渐变 */
html[data-theme="dark"] .form--landscape {
background: linear-gradient(180deg, #16171F 0%, #1A1B26 100%);
box-shadow: 0 16px 40px -28px rgba(0, 0, 0, .6);
}
html[data-theme="dark"] .cta-banner {
background: linear-gradient(180deg, #14131F 0%, #0D0E14 60%);
color: var(--color-text);
}
html[data-theme="dark"] .cta-banner h2 { color: #F2F2FA; }
html[data-theme="dark"] .cta-banner__steps li { background: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .page-head--guide,
html[data-theme="dark"] .page-head--about,
html[data-theme="dark"] .page-head--cases,
html[data-theme="dark"] .submit-form {
background: linear-gradient(180deg, #16171F 0%, #0D0E14 70%);
}
html[data-theme="dark"] .page-head h1,
html[data-theme="dark"] .page-head__title { color: var(--color-text); }
/* 下拉箭头在暗输入框上提亮 */
html[data-theme="dark"] select.input {
background-image: url("data:image/svg+xml;utf8,");
}
/* 选区 + 滚动条抛光 */
html[data-theme="dark"] ::selection { background: rgba(142, 143, 245, .30); color: #fff; }
html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0D0E14; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2A2C3A; border-radius: 8px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #353A4E; }
/* ---------- 主题切换按钮（自绘 sun / moon 图标，交叉淡入旋转） ---------- */
.theme-toggle {
position: fixed;
right: 85px;
top: calc(50% - 142px);
left: auto;
bottom: auto;
z-index: 96;
width: 46px;
height: 46px;
border-radius: 50%;
display: grid;
place-items: center;
border: 1px solid var(--color-border-strong);
background: var(--color-bg);
color: var(--color-text-2);
box-shadow: var(--shadow-md);
cursor: pointer;
transition: transform var(--ease), color var(--ease), border-color var(--ease), background var(--ease), box-shadow var(--ease);
}
.theme-toggle:hover {
color: var(--color-primary);
border-color: var(--color-primary);
transform: translateY(-2px);
box-shadow: 0 8px 22px -10px rgba(91, 91, 214, .5);
}
.theme-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.theme-toggle svg {
width: 23px;
height: 23px;
position: absolute;
top: 50%;
left: 50%;
transition: opacity .3s ease, transform .4s cubic-bezier(.4, 0, .2, 1);
}
/* 月亮更醒目：日间用品牌紫实心 + 柔光晕；夜间切换瞬间保留金色光晕 */
.theme-toggle .tt-moon { color: var(--color-primary); filter: drop-shadow(0 0 4px rgba(91, 91, 214, .45)); }
html[data-theme="dark"] .theme-toggle .tt-moon { filter: drop-shadow(0 0 5px rgba(255, 213, 107, .7)); }
.theme-toggle .tt-moon { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
.theme-toggle .tt-sun { opacity: 0; transform: translate(-50%, -50%) rotate(-90deg); }
html[data-theme="dark"] .theme-toggle { color: #FFD56B; background: var(--color-surface); }
html[data-theme="dark"] .theme-toggle:hover {
color: #FFE08A;
border-color: #FFD56B;
box-shadow: 0 8px 22px -10px rgba(255, 213, 107, .4);
}
html[data-theme="dark"] .theme-toggle .tt-moon { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
html[data-theme="dark"] .theme-toggle .tt-sun { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
@media (max-width: 768px) {
.theme-toggle { left: 24px; bottom: 24px; right: auto; top: auto; }
}
@media (max-width: 640px) {
.theme-toggle { left: 16px; bottom: 16px; width: 42px; height: 42px; right: auto; top: auto; }
}
/* ==========================================================================
移动端 / Pad 底部悬浮导航（≤1024px 显示，桌面隐藏）
DOM 由 assets/js/theme.js 的 renderMobileTabbar() 注入
========================================================================== */
.mobile-tabbar { display: none; }
@media (max-width: 1024px) {
/* 为底部导航让出空间，避免遮挡页脚 / 内容 */
body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0)); }
.mobile-tabbar {
display: flex;
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 0;
width: 100%;
max-width: 560px;
height: 62px;
z-index: 950;
align-items: stretch;
justify-content: space-around;
padding-bottom: env(safe-area-inset-bottom, 0);
background: rgba(255, 255, 255, 0.82);
-webkit-backdrop-filter: saturate(180%) blur(16px);
backdrop-filter: saturate(180%) blur(16px);
border-top: 1px solid var(--color-border, #E4E4EA);
box-shadow: 0 -8px 28px rgba(11, 11, 18, 0.10);
}
.mobile-tabbar__item {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
text-decoration: none;
color: var(--color-text-2, #5a5a68);
font-size: 11px;
line-height: 1;
-webkit-tap-highlight-color: transparent;
transition: color .18s ease;
}
.mobile-tabbar__item svg { width: 23px; height: 23px; display: block; }
.mobile-tabbar__item.is-active { color: var(--color-primary, #5B5BD6); }
.mobile-tabbar__item.is-active svg { stroke: var(--color-primary, #5B5BD6); }
/* 交流论坛：居中凸起的品牌主按钮（站点主推内容） */
.mobile-tabbar__item--forum {
position: relative;
flex: 0 0 66px;
justify-content: flex-end;
padding-bottom: 9px;
}
.mobile-tabbar__fab {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 54px;
height: 54px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: linear-gradient(135deg, #F26B3A 0%, #FF9A5A 100%);
border: 3px solid #fff;
box-shadow: 0 10px 22px rgba(242, 107, 58, 0.42);
}
.mobile-tabbar__fab svg { width: 26px; height: 26px; stroke: #fff; }
/* 交流论坛气泡里的三个点：依次脉冲，波浪式循环播放，持续吸引点击 */
@keyframes mtbDotWave {
0%, 62%, 100% { opacity: .38; transform: scale(.72); }
30% { opacity: 1; transform: scale(1.45); }
}
.mobile-tabbar__fab .mtb-dot {
transform-box: fill-box;
transform-origin: center;
animation: mtbDotWave 1.5s ease-in-out infinite;
}
.mobile-tabbar__fab .mtb-dot--a { animation-delay: 0s; }
.mobile-tabbar__fab .mtb-dot--b { animation-delay: .18s; }
.mobile-tabbar__fab .mtb-dot--c { animation-delay: .36s; }
/* 尊重系统「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
.mobile-tabbar__fab .mtb-dot { animation: none; opacity: 1; }
}
.mobile-tabbar__item--forum.is-active .mobile-tabbar__fab {
box-shadow: 0 10px 26px rgba(242, 107, 58, 0.55), 0 0 0 4px rgba(242, 107, 58, 0.18);
}
.mobile-tabbar__item--forum .mobile-tabbar__label { color: var(--color-text-2, #5a5a68); }
.mobile-tabbar__item--forum.is-active .mobile-tabbar__label { color: var(--color-accent, #F26B3A); font-weight: 600; }
/* 夜间模式适配 */
html[data-theme="dark"] .mobile-tabbar {
background: rgba(18, 18, 28, 0.86);
border-top-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] .mobile-tabbar__item { color: rgba(255, 255, 255, 0.62); }
html[data-theme="dark"] .mobile-tabbar__item.is-active { color: #9b9bf0; }
html[data-theme="dark"] .mobile-tabbar__item.is-active svg { stroke: #9b9bf0; }
html[data-theme="dark"] .mobile-tabbar__fab { border-color: #12121c; }
html[data-theme="dark"] .mobile-tabbar__item--forum .mobile-tabbar__label { color: rgba(255, 255, 255, 0.62); }
html[data-theme="dark"] .mobile-tabbar__item--forum.is-active .mobile-tabbar__label { color: #FF9A5A; }
/* 让主题切换按钮浮在底部导航之上，避免遮挡 */
.theme-toggle {
bottom: calc(74px + env(safe-area-inset-bottom, 0));
left: 16px;
right: auto;
top: auto;
}
}
@media (max-width: 640px) {
.mobile-tabbar__item { font-size: 11.5px; }
.mobile-tabbar__item svg { width: 22px; height: 22px; }
.mobile-tabbar__fab { width: 50px; height: 50px; top: -18px; }
.mobile-tabbar__fab svg { width: 24px; height: 24px; }
}
/* ===== 后台置顶标记（案例 / 技能卡片，由「首页展示设置」控制） ===== */
.top-flag{ display:inline-flex; align-items:center; margin-left:6px; padding:1px 7px; border-radius:999px; font-size:11px; font-weight:600; line-height:1.6; color:#fff; background:var(--color-accent,#F26B3A); vertical-align:middle; white-space:nowrap; }
/* 示例标记：cases.js 里带 demo:true 的案例才会出现，真实投稿不带。
与论坛种子帖同一套口径——哪条是示例由数据说了算，不写死在页面文案里。 */
.demo-flag{ display:inline-flex; align-items:center; margin-left:6px; padding:1px 7px; border-radius:999px; font-size:11px; font-weight:600; line-height:1.6; color:var(--color-primary-dark,#3A3AA0); background:var(--color-primary-50,#EEEEFB); box-shadow:inset 0 0 0 1px rgba(91,91,214,.32); vertical-align:middle; white-space:nowrap; }
.cases-demo-note{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 18px; padding:9px 13px; font-size:12.5px; line-height:1.65; color:var(--color-text-2,#5C5C6B); background:rgba(91,91,214,.05); border:1px dashed rgba(91,91,214,.3); border-radius:10px; }
.cases-demo-note[hidden]{ display:none; }
.cases-demo-note__tag{ flex:0 0 auto; font-size:11.5px; font-weight:700; letter-spacing:.04em; padding:2px 8px; border-radius:999px; color:#fff; background:var(--color-primary,#5B5BD6); }
/* ===== 移动端可点击性：页脚 / 面包屑链接最小 24px（WCAG 2.5.8） ===== */
@media (max-width: 768px){
.site-footer a{ display:inline-flex; align-items:center; min-height:24px; }
.breadcrumb a, .page-head a{ display:inline-flex; align-items:center; min-height:24px; }
}
/* ===== 手机端 hero 视频：只显示封面，叠加播放按钮（点进弹窗才真正加载 11.8MB） ===== */
.hero-video__play{
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
width:56px; height:56px; border-radius:50%;
background:rgba(11,11,18,.55);
backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
box-shadow:0 6px 20px rgba(0,0,0,.28);
display:flex; align-items:center; justify-content:center;
pointer-events:none; z-index:2;
}
.hero-video__play::before{
content:""; display:block; width:0; height:0; margin-left:4px;
border-left:18px solid #fff;
border-top:11px solid transparent;
border-bottom:11px solid transparent;
}