/* ============================================================================= * 1520心理 · www 用户端设计系统 v4「静谧蓝 · 轻盈范式」 * ----------------------------------------------------------------------------- * 单一来源：本文件。取代 v2.1 暖橙 theme.css（已归档为 theme.css.v2.1-legacy.bak）。 * 设计上下文见项目根 .impeccable.md；首页标准模版见 deploy/www/index.html。 * * 设计原则 * · 轻盈有秩序 —— 大留白、细描边、克制的阴影 * · 暖色稀缺 —— 珊瑚色仅用于次要 CTA / 关怀，不做主色 * · 安危分层 —— 危机为全站唯一高饱和红，且不喧哗 * · 冷调中性 —— 灰阶偏蓝，避免"暖橙回潮" * · 无障碍底线 —— 正文 ≥16px、对比度 AA、focus-visible、reduced-motion * * 兼容策略：保留 v2.1 与 v4 两套变量命名（--color-* / --text-1 / --primary-500 …）， * 页面无需改动即可整体换肤。 * ========================================================================== */ /* ============================== 1. Design Tokens ============================ */ :root { /* —— 品牌（静谧蓝）—— */ --primary: #2B5FD9; --primary-dark: #1F4CB8; --primary-50: #EAF0FE; --primary-100: #D6E2FC; --primary-200: #B9CDF8; --primary-300: #92B1F2; --primary-400: #5E86E6; --primary-500: #2B5FD9; --primary-600: #2450BC; --primary-700: #1F4CB8; --primary-800: #1B3E92; --primary-900: #17306B; /* —— 辅色（同族蓝，供渐变/图标底）—— */ --secondary: #2B5FD9; --secondary-50: #EAF0FE; --secondary-100: #D6E2FC; --secondary-200: #B9CDF8; --secondary-300: #92B1F2; --secondary-500: #2B5FD9; --secondary-700: #1F4CB8; /* —— 暖色（稀缺：次要 CTA / 关怀）—— */ --accent: #E8734A; --accent-dark: #C2410C; --accent-ink: #2B1A12; /* —— 危机（全站唯一高饱和红）—— */ --crisis: #D93A3A; --crisis-dark: #B32020; --crisis-light: #FEF4F3; --crisis-bg: #FEF4F3; --crisis-line: #F9DAD6; --crisis-ink: #B42318; /* —— 深色锚 / 页脚 —— */ --deep: #17306B; --deep-2: #0F2149; --footer: #101724; /* —— 中性（冷偏蓝）—— */ --bg: #F7F8FB; --bg-soft: #FBFCFE; --bg-1: #FFFFFF; --bg-2: #F7F8FB; --bg-3: #F1F4F9; --bg-soft-legacy: #FBFCFE; --bg-warm: #FBFCFE; /* v2.1 暖背景 → 收敛为冷白 */ --surface: #FFFFFF; --surface-2: #F4F6FB; --text: #16202E; --text-1: #16202E; --text-2: #454F5E; --text-3: #6B7686; --text-4: #A3ADBD; --text-on-primary: #FFFFFF; --text-on-crisis: #FFFFFF; --muted: #5B6675; --tertiary: #98A2B3; --border: #E6E9F0; --border-light: #EFF2F7; --border-primary: #B9CDF8; /* —— 中性灰阶（Tailwind 命名，冷调）—— */ --color-neutral-50: #F8FAFD; --color-neutral-100: #F1F4F9; --color-neutral-200: #E6E9F0; --color-neutral-300: #D3D9E4; --color-neutral-400: #A3ADBD; --color-neutral-500: #6B7686; --color-neutral-600: #5B6675; --color-neutral-700: #454F5E; --color-neutral-800: #2B3543; --color-neutral-900: #16202E; /* —— 语义色 —— */ --success: #0E9F6E; --success-bg: #E7F7F1; --warning: #B7791F; --warning-bg: #FDF3E3; --error: #D93A3A; --error-bg: #FEF2F2; --info: #2B5FD9; --info-bg: #EAF0FE; /* —— 语义别名（页面层 --color-*）—— */ --color-primary: var(--primary); --color-secondary: var(--primary-50); /* 页面把它当"浅色底片"，配 --color-primary 文字 */ --color-success: var(--success); --color-warning: var(--warning); --color-danger: var(--error); --color-info: var(--info); /* —— 间距（4pt 基准）—— */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --sp-1: var(--space-1); --sp-2: var(--space-2); --sp-3: var(--space-3); --sp-4: var(--space-4); --sp-5: var(--space-5); --sp-6: var(--space-6); --sp-7: var(--space-7); --sp-8: var(--space-8); --sp-9: var(--space-9); /* —— 圆角 —— */ --radius-sm: 8px; --radius: 12px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; --r-sm: 10px; --r: 16px; --r-lg: 24px; /* —— 阴影（克制 · 冷调）—— */ --shadow-sm: 0 1px 2px rgba(23,48,107,.05); --shadow: 0 1px 3px rgba(23,48,107,.06); --shadow-md: 0 10px 28px -10px rgba(23,48,107,.16); --shadow-lg: 0 24px 56px -22px rgba(23,48,107,.28); --shadow-xl: 0 32px 64px -24px rgba(23,48,107,.32); --shadow-warm: 0 10px 30px -10px rgba(43,95,217,.30); --shadow-crisis: 0 8px 24px -8px rgba(217,58,58,.45); /* —— 字号阶梯（rem，基准 16px）—— */ --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 2.75rem; --text-6xl: 3.5rem; /* —— 动效 —— */ --ease: cubic-bezier(.4,0,.2,1); --ease-out: cubic-bezier(.16,1,.3,1); --maxw: 1200px; } /* ============================== 2. Base ==================================== */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } html, body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", "Hiragino Sans GB", system-ui, sans-serif; font-size: 16px; line-height: 1.6; font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input, select, textarea { font-family: inherit; font-size: inherit; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; } ::selection { background: var(--primary-100); } /* ============================== 3. 布局工具 ================================ */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-5); } .text-center { text-align: center; } .text-muted { color: var(--text-3); } .text-mono { font-family: "SF Mono", Menlo, Consolas, monospace; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } .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; } section { padding: var(--space-8) 0; } /* ============================== 4. 危机条 ================================== */ /* 细 · 浅底 · 克制（首页标准）。`.crisis-bar` 为旧标记兼容别名。 */ .crisis-strip, .crisis-bar { background: var(--crisis-bg); border-bottom: 1px solid var(--crisis-line); color: var(--crisis-ink); font-size: 13px; padding: 0; /* 覆盖通用 section{padding:64px 0}（危机条应为紧凑单行） */ } .crisis-strip-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; padding-top: 9px; padding-bottom: 9px; } .crisis-strip-text { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .crisis-strip-text strong { font-weight: 700; } .crisis-strip-text a, .crisis-strip a, .crisis-bar a { color: var(--crisis-ink); font-weight: 700; border-bottom: 1px solid transparent; transition: border-color .15s; } .crisis-strip-text a:hover, .crisis-strip a:hover, .crisis-bar a:hover { border-bottom-color: currentColor; } .crisis-strip .sep { opacity: .38; } .crisis-strip .aside { font-size: 12px; opacity: .8; } /* 旧标记（无 .wrap）时兜底内边距 */ .crisis-bar { padding: 9px clamp(16px, 4vw, 24px); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; } /* ============================== 5. 顶部导航 ================================ */ .app-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.88); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: var(--space-5); } .brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .brand-mark { width: 34px; height: 34px; border-radius: 8px; object-fit: contain; flex-shrink: 0; } .brand-text { display: flex; flex-direction: column; line-height: 1.1; } .brand-text .name { font-size: 17px; font-weight: 800; color: var(--deep); letter-spacing: .3px; } .brand-text .tag { font-size: 11px; color: var(--muted); margin-top: 3px; } .brand-text small { font-size: 10px; color: var(--text-3); font-weight: 500; letter-spacing: .08em; } .nav-menu { display: flex; align-items: center; gap: 30px; flex: 1; justify-content: center; } .nav-menu a { color: var(--text); font-size: 14px; font-weight: 500; padding: 6px 0; position: relative; transition: color .18s; } .nav-menu a:hover { color: var(--primary); } .nav-menu a.active { color: var(--primary); font-weight: 600; } .nav-menu a.active::after { content: ''; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); width: 20px; height: 2px; background: var(--primary); border-radius: 2px; } .nav-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } /* ============================== 6. 按钮 ==================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 8px 20px; border-radius: var(--radius-full); font-size: 14px; font-weight: 600; white-space: nowrap; text-align: center; border: 1.5px solid transparent; text-decoration: none; transition: background .2s var(--ease-out), border-color .2s, color .2s, transform .2s, box-shadow .2s; } .btn:active { transform: translateY(1px); } .btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; } .btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 6px 16px -8px rgba(43,95,217,.7); } .btn-primary:hover:not(:disabled) { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: 0 10px 22px -10px rgba(43,95,217,.8); } .btn-ghost { color: var(--text); border-color: var(--border); background: var(--surface); } .btn-ghost:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); } .btn-outline { background: var(--surface); color: var(--primary); border-color: var(--primary-200); } .btn-outline:hover:not(:disabled) { background: var(--primary-50); border-color: var(--primary); } .btn-accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .btn-accent:hover:not(:disabled) { background: var(--accent-dark); color: #fff; border-color: var(--accent-dark); } .btn-crisis { background: var(--crisis); color: #fff; border-color: var(--crisis); box-shadow: var(--shadow-crisis); } .btn-crisis:hover:not(:disabled) { background: var(--crisis-dark); border-color: var(--crisis-dark); } .btn-danger { background: var(--error); color: #fff; border-color: var(--error); } .btn-danger:hover:not(:disabled) { background: #C42F2F; border-color: #C42F2F; } .btn-sm { min-height: 30px; padding: 5px 14px; font-size: var(--text-sm); } .btn-lg { min-height: 52px; padding: 12px 28px; font-size: 15px; } .btn-block { width: 100%; } /* ============================== 7. 表单 ==================================== */ .input { width: 100%; padding: 11px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-md); font-size: var(--text-base); background: var(--surface); color: var(--text); transition: border-color .2s, box-shadow .2s; } .input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-100); } .input::placeholder { color: var(--text-4); } .input-lg { padding: 14px 18px; font-size: var(--text-lg); } label { font-size: var(--text-sm); color: var(--text-2); font-weight: 500; } .field { margin-bottom: var(--space-4); } .field > label { display: block; margin-bottom: var(--space-2); } .req { color: var(--error); margin-left: 2px; } .opt { color: var(--text-4); font-size: var(--text-xs); font-weight: 400; } /* ============================== 8. 卡片 / 标签 ============================== */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); transition: transform .22s var(--ease-out), box-shadow .22s, border-color .22s; } .card-hover:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: transparent; } .tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; background: var(--bg-3); color: var(--text-2); white-space: nowrap; } .tag-primary { background: var(--primary-50); color: var(--primary-700); } .tag-secondary { background: var(--primary-50); color: var(--primary-700); } .tag-success { background: var(--success-bg); color: var(--success); } .tag-warning { background: var(--warning-bg); color: var(--warning); } .tag-error { background: var(--error-bg); color: var(--error); } .tag-info { background: var(--info-bg); color: var(--info); } .tag-crisis { background: var(--crisis); color: #fff; } .tag-warm { background: var(--accent); color: #fff; border: 1px solid var(--accent); } /* ============================== 9. 区块标题 ================================ */ .section-head { text-align: center; max-width: 660px; margin: 0 auto var(--space-7); } .section-eyebrow { display: inline-block; color: var(--primary); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: var(--space-3); } .section-title { font-size: clamp(24px, 2.8vw, 32px); font-weight: 800; color: var(--deep); letter-spacing: -.01em; margin-bottom: var(--space-3); } .section-desc { color: var(--muted); font-size: 15px; line-height: 1.7; } .section-head-left { text-align: left; max-width: none; } .section-head-left .section-desc { margin: 0; } /* ============================== 10. Hero（浅色 · 轻盈）===================== */ .hero { position: relative; overflow: hidden; background: var(--bg-soft); padding: clamp(56px, 7.5vw, 104px) 0 clamp(48px, 6vw, 88px); text-align: center; } .hero::before, .hero::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; } .hero::before { width: 560px; height: 560px; left: -160px; top: -200px; background: radial-gradient(circle, rgba(43,95,217,.16) 0%, rgba(43,95,217,0) 68%); } .hero::after { width: 520px; height: 520px; right: -180px; top: -140px; background: radial-gradient(circle, rgba(232,115,74,.15) 0%, rgba(232,115,74,0) 68%); } .hero-inner { position: relative; z-index: 1; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); color: var(--deep); font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: var(--radius-full); box-shadow: var(--shadow-sm); margin-bottom: var(--space-5); } .hero h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.12; letter-spacing: -.02em; font-weight: 800; color: var(--deep); margin-bottom: var(--space-4); } .hero h1 em { font-style: normal; color: var(--primary); } .hero .sub, .hero p.sub { color: var(--muted); font-size: clamp(15px, 1.35vw, 17px); line-height: 1.8; max-width: 640px; margin: var(--space-5) auto var(--space-6); } .hero-cta { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; } .hero-points { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3) var(--space-7); margin-top: var(--space-7); } .hero-points li { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; } .hero-points .ico { font-size: 17px; line-height: 1; } .hero-trust { display: flex; gap: var(--space-5); align-items: center; color: var(--text-3); font-size: var(--text-sm); flex-wrap: wrap; justify-content: center; } .hero-trust .num { color: var(--text); font-weight: 700; font-size: var(--text-lg); } .hero-fastats { background: var(--surface); border-radius: var(--radius-xl); padding: var(--space-6); border: 1px solid var(--border); box-shadow: var(--shadow-md); } .hero-stat { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-light); } .hero-stat:last-child { border-bottom: none; } .hero-stat-icon { width: 40px; height: 40px; border-radius: var(--radius); background: var(--primary-50); color: var(--primary); display: grid; place-items: center; font-size: 20px; flex-shrink: 0; } .hero-stat-body { flex: 1; } .hero-stat-num { font-size: var(--text-2xl); font-weight: 700; color: var(--text); line-height: 1.2; } .hero-stat-label { font-size: var(--text-xs); color: var(--text-3); margin-top: 2px; } .hero-stats { background: transparent; } .hero-crisis-link { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-5); background: var(--crisis-bg); border: 1px solid var(--crisis-line); color: var(--crisis-ink); font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: var(--radius-full); transition: background .18s, border-color .18s; } .hero-crisis-link:hover { background: #FDECEA; border-color: #F3C9C4; } /* ============================== 11. 数据锚带 =============================== */ .stats-band { background: linear-gradient(135deg, var(--deep) 0%, var(--deep-2) 100%); color: #fff; padding: clamp(34px, 4vw, 48px) 0; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .stat { text-align: center; padding: var(--space-1) var(--space-4); position: relative; } .stat + .stat::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 52px; background: rgba(255,255,255,.16); } .stat .num { font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -.01em; line-height: 1.15; font-variant-numeric: tabular-nums; } .stat .num small { font-size: 14px; font-weight: 600; opacity: .82; margin-left: 2px; } .stat .lbl { font-size: 13px; color: rgba(255,255,255,.72); margin-top: var(--space-2); } /* ============================== 12. 金刚区 ================================= */ .features { background: var(--surface); } .features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } .feature-card { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-6) var(--space-4); cursor: pointer; position: relative; overflow: hidden; transition: transform .22s var(--ease-out), box-shadow .22s, border-color .22s; } .feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; } .feature-emoji { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--primary-50); color: var(--primary); font-size: 26px; margin-bottom: var(--space-3); transition: transform .2s; } .feature-card:hover .feature-emoji { transform: scale(1.08); } .feature-name { font-size: var(--text-base); font-weight: 700; margin-bottom: 4px; color: var(--text); } .feature-desc { font-size: var(--text-xs); color: var(--muted); line-height: 1.5; } .kingkong { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); } .kingkong-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-6) var(--space-4); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; color: var(--text); transition: transform .22s var(--ease-out), box-shadow .22s, border-color .22s; } .kingkong-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; } .kingkong-item .emoji { width: 56px; height: 56px; border-radius: 18px; background: var(--primary-50); display: grid; place-items: center; font-size: 26px; } .kingkong-item .title { font-size: 15px; color: var(--text); font-weight: 700; } .kingkong-item .desc { font-size: 12px; color: var(--muted); } /* ============================== 13. 咨询师 ================================= */ .counselors { background: var(--bg); } .counselor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); } .counselor-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5); transition: transform .22s var(--ease-out), box-shadow .22s, border-color .22s; cursor: pointer; display: block; } .counselor-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; } .counselor-head, .head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); } .counselor-avatar, .avatar { width: 52px; height: 52px; border-radius: 50%; color: #fff; flex-shrink: 0; display: grid; place-items: center; font-size: 18px; font-weight: 700; background: linear-gradient(135deg, var(--primary-400), var(--primary-600)); } /* 头像图片变体：img 绝对覆盖字母兜底，onerror 移除 img 自动回落首字母。 图片存 api 域绝对地址（/uploads/ location 仅在 api.1520psy.cn）。 */ .avatar-media { position: relative; overflow: hidden; } .avatar-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; } .counselor-info { flex: 1; min-width: 0; } .name-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .name-row h3, .counselor-info h3 { font-size: var(--text-lg); font-weight: 700; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tier-badge { padding: 2px 8px; background: var(--primary-50); color: var(--primary-700); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; } .counselor-info .meta, .sub { font-size: var(--text-xs); color: var(--muted); margin-top: 2px; } .counselor-stats, .stats { display: flex; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-2); margin-bottom: var(--space-3); flex-wrap: wrap; } .stats span, .counselor-stats .item { display: flex; align-items: center; gap: 4px; } .counselor-stats .val, .stats .val { color: var(--primary); font-weight: 700; } .counselor-bio, .bio { font-size: var(--text-sm); color: var(--text-3); line-height: 1.6; margin-bottom: var(--space-3); min-height: 42px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .counselor-foot, .price-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); } .counselor-price, .price b { color: var(--primary); font-weight: 800; font-size: var(--text-lg); } .counselor-price small, .price { font-size: var(--text-xs); color: var(--muted); font-weight: 400; } .counselor-tags, .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--space-3); } .counselor-tag, .tag-pill { padding: 3px 10px; background: var(--primary-50); color: var(--primary-700); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; } /* ============================== 14. 测评 ================================== */ .scales { background: var(--surface); } .scale-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } .scale-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5); cursor: pointer; overflow: hidden; transition: transform .22s var(--ease-out), box-shadow .22s, border-color .22s; } .scale-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; } /* 量表卡片头图（scales.html 三张静态卡）：负 margin 抵消卡片内边距，顶部通栏 */ .scale-cover { height: 148px; margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-4); border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; background: var(--primary-50); } .scale-cover img { width: 100%; height: 148px; object-fit: cover; display: block; } .scale-code { display: inline-block; padding: 2px 8px; background: var(--primary); color: #fff; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; margin-bottom: var(--space-2); } .scale-title { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-2); color: var(--text); } .scale-desc { font-size: var(--text-sm); color: var(--text-3); line-height: 1.5; margin-bottom: var(--space-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 42px; } .scale-foot { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-xs); color: var(--text-3); } /* ============================== 15. 文章 / 直播 ============================ */ .articles-live { background: var(--bg); } .dual-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-6); } .article-list { display: flex; flex-direction: column; gap: var(--space-3); } .article-row { display: flex; gap: var(--space-4); padding: var(--space-4); background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border); cursor: pointer; transition: transform .2s var(--ease-out), box-shadow .2s, border-color .2s; } .article-row:hover { border-color: transparent; box-shadow: var(--shadow-md); transform: translateX(2px); } .article-cover { width: 80px; height: 80px; border-radius: var(--radius); flex-shrink: 0; color: var(--primary); display: grid; place-items: center; font-size: 28px; background: linear-gradient(135deg, var(--primary-50), var(--primary-100)); } .article-body { flex: 1; min-width: 0; } .article-title { font-size: var(--text-base); font-weight: 600; margin-bottom: 4px; color: var(--text); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .article-meta { font-size: var(--text-xs); color: var(--text-3); display: flex; gap: var(--space-2); align-items: center; } .article-tag { font-size: var(--text-xs); color: var(--primary); font-weight: 600; } .live-card { background: linear-gradient(135deg, var(--primary-600), var(--deep)); color: #fff; border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); } .live-time { font-size: var(--text-xs); opacity: .85; font-weight: 600; } .live-time strong { font-size: var(--text-lg); font-weight: 800; display: block; margin-top: 2px; } .live-title { font-size: var(--text-xl); font-weight: 700; line-height: 1.4; } .live-desc { font-size: var(--text-sm); opacity: .9; line-height: 1.6; } .live-cta { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; background: #fff; color: var(--primary-700); border-radius: var(--radius-full); font-weight: 700; font-size: var(--text-sm); margin-top: var(--space-2); align-self: flex-start; } /* ============================== 16. 学习中心 =============================== */ .learn-center { background: var(--bg); } .learn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-7); align-items: start; } .learn-col { display: flex; flex-direction: column; gap: var(--space-4); } .learn-col-head, .learn-col-header { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 2px solid var(--border); margin-bottom: var(--space-2); } .learn-col-icon { width: 42px; height: 42px; border-radius: 12px; background: var(--primary-50); color: var(--primary); display: grid; place-items: center; font-size: 20px; flex-shrink: 0; } .learn-col-title { font-size: 16px; font-weight: 700; color: var(--deep); } .learn-col-title small { display: block; font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 2px; } /* 紧凑列表（缩略图 + 单行标题 + 单行摘要） */ .learn-list { display: flex; flex-direction: column; } .learn-item { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--border-light); transition: opacity .18s; } .learn-item:first-child { padding-top: 0; } .learn-item:last-child { border-bottom: none; } .learn-item:hover { opacity: .75; } .learn-thumb { width: 84px; height: 60px; border-radius: var(--radius-md); flex-shrink: 0; overflow: hidden; display: grid; place-items: center; font-size: 22px; background: linear-gradient(135deg, var(--primary-50), var(--primary-100)); color: var(--primary); } .learn-thumb img { width: 100%; height: 100%; object-fit: cover; } .learn-thumb .ph { opacity: .45; } .learn-item-body { flex: 1; min-width: 0; } .learn-item-title { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .learn-item-sub { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .learn-item-meta { font-size: 12px; color: var(--primary); font-weight: 700; flex-shrink: 0; } .learn-empty { padding: var(--space-6) var(--space-4); text-align: center; color: var(--muted); font-size: 13px; border: 1px dashed var(--border); border-radius: var(--radius); } .learn-more { margin-top: var(--space-5); color: var(--primary); font-size: 13px; font-weight: 700; transition: opacity .2s; } .learn-more:hover { opacity: .8; } .course-card { display: flex; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius); border: 1px solid var(--border); cursor: pointer; transition: transform .2s var(--ease-out), box-shadow .2s, border-color .2s; } .course-card:hover { border-color: transparent; box-shadow: var(--shadow-md); transform: translateX(2px); } .course-thumb { width: 64px; height: 64px; border-radius: var(--radius); flex-shrink: 0; color: #fff; display: grid; place-items: center; font-size: 24px; background: linear-gradient(135deg, var(--primary-300), var(--primary-600)); } .course-body { flex: 1; min-width: 0; } .course-title { font-size: var(--text-sm); font-weight: 600; margin-bottom: 4px; color: var(--text); line-height: 1.4; } .course-meta { font-size: var(--text-xs); color: var(--text-3); display: flex; gap: var(--space-2); align-items: center; } /* ============================== 17. Trust ================================= */ .trust-strip { background: var(--bg); } .trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7); } .trust-card { text-align: left; } .trust-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--primary-50); color: var(--primary); display: grid; place-items: center; font-size: 22px; margin-bottom: var(--space-4); } .trust-title { font-size: 17px; font-weight: 700; color: var(--deep); margin-bottom: var(--space-2); } .trust-desc { font-size: 14px; color: var(--muted); line-height: 1.8; } /* ============================== 18. CTA =================================== */ .cta-section { padding: 0 0 clamp(56px, 7vw, 96px); } .cta-panel { position: relative; overflow: hidden; border-radius: var(--radius-lg); color: #fff; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); padding: clamp(44px, 5vw, 72px) var(--space-6); text-align: center; } .cta-panel::before { content: ''; position: absolute; width: 420px; height: 420px; right: -120px; top: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.16), rgba(255,255,255,0) 70%); } .cta-panel > * { position: relative; z-index: 1; } .cta-panel h2, .cta-section h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.01em; margin-bottom: var(--space-3); color: #fff; } .cta-panel p, .cta-section p { font-size: var(--text-lg); color: rgba(255,255,255,.92); line-height: 1.8; margin-bottom: var(--space-6); max-width: 540px; margin-left: auto; margin-right: auto; } .cta-panel .btn, .cta-section .btn-cta { background: #fff; color: var(--primary); border-color: #fff; min-height: 50px; padding: 12px 30px; font-size: 15px; font-weight: 700; box-shadow: var(--shadow-lg); } .cta-panel .btn:hover, .cta-section .btn-cta:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } /* ============================== 19. Footer =============================== */ footer { background: var(--footer); color: rgba(255,255,255,.66); padding: var(--space-8) 0 var(--space-5); font-size: 14px; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--space-6); margin-bottom: var(--space-7); } .footer-brand { font-size: 19px; font-weight: 800; color: #fff; margin-bottom: var(--space-3); } .footer-tagline { line-height: 1.8; } .footer-col h4 { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: var(--space-3); letter-spacing: .5px; } .footer-col a, .footer-col li a { display: block; padding: 5px 0; color: rgba(255,255,255,.66); transition: color .15s; } .footer-col a:hover { color: #fff; } .footer-bottom { padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); color: rgba(255,255,255,.5); font-size: 12px; } .footer-bottom a { color: #fff; text-decoration: underline; text-underline-offset: 2px; } footer .brand { color: #fff; } footer .brand-mark { width: 34px; height: 34px; } /* ============================== 20. 危机浮球 ============================== */ .crisis-fab { position: fixed; right: 24px; bottom: 24px; width: 56px; height: 56px; border-radius: 50%; background: var(--crisis); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: 0 10px 24px -8px rgba(217,58,58,.6); z-index: 60; text-decoration: none; transition: transform .18s var(--ease-out); } .crisis-fab:hover { transform: scale(1.07); background: var(--crisis-dark); } .crisis-fab-tip { position: fixed; right: 92px; bottom: 36px; background: var(--text); color: #fff; padding: 8px 12px; border-radius: var(--radius); font-size: var(--text-xs); z-index: 60; white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none; } .crisis-fab:hover + .crisis-fab-tip, .crisis-fab:focus + .crisis-fab-tip { opacity: 1; } /* ============================== 21. 筛选 / Tab ============================= */ .filter-wrap { text-align: center; } .filter-tabs { display: inline-flex; gap: var(--space-2); background: var(--bg-3); padding: 4px; border-radius: var(--radius-full); margin: 0 auto var(--space-6); flex-wrap: wrap; } .filter-tab { padding: 8px 22px; border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 600; color: var(--text-2); cursor: pointer; transition: all .2s; border: none; background: transparent; } .filter-tab:hover { color: var(--primary); } .filter-tab.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); } .filter-bar { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-5); padding: var(--space-3); background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--border); align-items: center; } .filter-chip { padding: 6px 14px; border-radius: var(--radius-full); background: var(--bg-3); cursor: pointer; font-size: var(--text-sm); border: 1px solid transparent; transition: all .18s; } .filter-chip:hover { background: var(--primary-50); color: var(--primary); } .filter-chip.active { background: var(--primary); color: #fff; } /* ============================== 22. 活动 =================================== */ .activity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } .activity-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); cursor: pointer; transition: transform .22s var(--ease-out), box-shadow .22s, border-color .22s; } .activity-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; } .activity-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .activity-title { font-size: var(--text-lg); font-weight: 700; color: var(--text); } .activity-theme { font-size: var(--text-sm); color: var(--text-3); } .activity-time { font-size: var(--text-sm); color: var(--text-2); } .activity-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--border-light); } .activity-price { color: var(--primary); font-weight: 800; font-size: var(--text-lg); } .activity-cap { font-size: var(--text-xs); color: var(--text-3); } .act-pill, .act-meta { font-size: var(--text-xs); color: var(--muted); } .act-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--radius-full); background: var(--bg-3); font-weight: 600; } /* ============================== 23. 详情页 ================================= */ .detail-wrap { max-width: 820px; margin: 0 auto; } .detail-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); } .detail-title { font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: var(--deep); margin-bottom: var(--space-3); } .detail-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); align-items: center; } .detail-section { margin-top: var(--space-5); } .detail-section h3, .sec-title { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-2); color: var(--text); } .detail-section p, .dt-prose { color: var(--text-2); line-height: 1.8; white-space: pre-wrap; } .detail-info-row, .dt-fact { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-light); font-size: var(--text-base); } .detail-info-row .label { color: var(--text-3); width: 88px; flex-shrink: 0; } .detail-info-row .value { color: var(--text); font-weight: 500; } .detail-actions { margin-top: var(--space-6); display: flex; gap: var(--space-3); flex-wrap: wrap; } .pay-box { background: var(--warning-bg); border: 1px solid #F0DFC0; border-radius: var(--radius); padding: var(--space-4); margin-top: var(--space-4); } .success-box { background: var(--success-bg); border: 1px solid #BFEAD8; border-radius: var(--radius); padding: var(--space-4); margin-top: var(--space-4); } .my-activity-item { display: block; margin-bottom: var(--space-4); } .my-activity-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); } /* ============================== 24. 空态 / 骨架 / 弹窗 ===================== */ .empty-state { text-align: center; padding: var(--space-7) var(--space-4); color: var(--text-3); } .empty-state-icon { font-size: 56px; margin-bottom: var(--space-3); opacity: .85; } .empty-state-title { font-size: var(--text-lg); font-weight: 600; color: var(--text-2); margin-bottom: var(--space-2); } .empty-state-desc { font-size: var(--text-sm); color: var(--text-3); } .empty, .empty-mini, .learn-empty, .feed-empty { text-align: center; color: var(--muted); font-size: var(--text-sm); background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); padding: var(--space-7) var(--space-5); } .empty-mini, .feed-empty { padding: var(--space-5) var(--space-4); font-size: var(--text-xs); } .empty .ico, .feed-empty .ico { font-size: 44px; margin-bottom: var(--space-3); opacity: .35; display: block; } .skeleton { background: linear-gradient(90deg, #F0F2F7 25%, #E6E9F0 50%, #F0F2F7 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-md); } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .modal-mask { position: fixed; inset: 0; background: rgba(16,23,36,.5); display: none; align-items: center; justify-content: center; z-index: 100; padding: var(--space-4); backdrop-filter: blur(2px); } .modal-mask.show { display: flex; } .modal { background: var(--surface); border-radius: var(--radius-lg); padding: var(--space-6); max-width: 480px; width: 100%; box-shadow: var(--shadow-xl); animation: modalIn .2s var(--ease); } @keyframes modalIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .modal-title { font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--space-3); } .modal-desc { color: var(--text-3); margin-bottom: var(--space-5); } .modal-actions { display: flex; gap: var(--space-3); justify-content: flex-end; } /* ============================== 25. 通用列表行 ============================= */ .item-row, .sum-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-light); } .item-row:last-child, .sum-row:last-child { border-bottom: none; } .k { color: var(--text-3); } .v { color: var(--text); font-weight: 600; } .meta { font-size: var(--text-xs); color: var(--muted); } .title { font-weight: 600; color: var(--text); } .desc { font-size: var(--text-sm); color: var(--muted); line-height: 1.6; } .muted { color: var(--muted); } .ico { display: inline-flex; align-items: center; } .cover { border-radius: var(--radius); overflow: hidden; background: var(--surface-2); } /* ============================== 26. 响应式 ================================= */ @media (max-width: 1024px) { .features-grid, .scale-grid, .activity-grid { grid-template-columns: repeat(2, 1fr); } .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } .dual-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 980px) { .nav-menu { display: none; } .kingkong { grid-template-columns: repeat(3, 1fr); } .learn-grid { grid-template-columns: 1fr; gap: var(--space-8); } .trust-grid { grid-template-columns: 1fr; gap: var(--space-6); } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6) 0; } .stat:nth-child(3)::before { display: none; } } @media (max-width: 768px) { section { padding: var(--space-7) 0; } .section-title { font-size: var(--text-3xl); } .wrap { padding: 0 var(--space-4); } .counselor-grid { grid-template-columns: 1fr; } .features-grid, .scale-grid, .activity-grid, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } } @media (max-width: 620px) { .nav-actions .btn-ghost { display: none; } .hero-points { gap: var(--space-2) var(--space-4); } .hero-points li { font-size: 13px; } .kingkong { grid-template-columns: repeat(2, 1fr); } .stats-grid { grid-template-columns: 1fr 1fr; } .stat + .stat::before { display: none; } .crisis-strip .aside, .crisis-bar .aside { display: none; } } /* ============================== 27. 无障碍 ================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } } @media print { .crisis-fab, .app-header, .crisis-strip, .crisis-bar, footer { display: none !important; } } /* ============================================================================= * 28. 页面框架（子页统一基座） * ----------------------------------------------------------------------------- * 用途：所有内页（非首页）= 浅色 page-banner（面包屑 + 标题 + 引导语）+ page-main。 * 背景：09-19 一版只换了配色，35/38 页仍各自内联