/* =========================================================================
* 护工邻坊 · C 端移动端 Design Tokens（Phase 2 产出 / Phase 3 输入）
* 基准：375×812（微信小程序 / H5 / App 共用一套稿）
* 品牌色：#FFC80A 暖阳金（仅作 信任标记 + 主按钮 + 强调，不大面积铺底）
* 严格对齐《C 端产品规划》第 7 章 Design Token 与需求摘要。
*
* 用法：在原型 HTML 中
* 所有组件直接调用下方 :root 变量与基础类即可。
* ========================================================================= */
:root {
/* ---------- 颜色 Color ---------- */
--color-brand: #FFC80A; /* 品牌主色：主按钮、强调、选中态、信任标记 */
--color-brand-dark: #E0A800; /* 主色-深：按压态、深金文字（金字统一用此色保对比度） */
--color-brand-light: #FFF7E0; /* 主色-浅底：金色标签背景、横幅浅底 */
--color-text: #1F2329; /* 正文主文字 / 标题 */
--color-text-secondary: #646A73; /* 次要文字 / 说明 */
--color-text-weak: #8F959E; /* 弱提示 / 占位符 / 禁用（仅非必要信息） */
--color-success: #34A853; /* 成功 / 服务中 */
--color-success-bg: #E9F7EE; /* 成功浅底（由 --color-success 派生 10% 绿） */
--color-danger: #F54A45; /* 警示 / 退款（克制使用） */
--color-danger-bg: #FDECEC; /* 警示浅底（由 --color-danger 派生） */
--color-bg: #F7F8FA; /* 页面背景 */
--color-surface: #FFFFFF; /* 卡片 / 弹层背景 */
--color-divider: #EDEFF2; /* 浅分割线 / 卡片内部分隔 */
--color-divider-strong: #E0E3E8; /* 较强分割线（吸底栏顶边、输入框边框） */
--color-on-brand: #1F2329; /* 金色背景上的安全文字色（深字，勿用白） */
/* ---------- 字号 Font Size（移动端基准，px）---------- */
--fs-title-lg: 20px; /* 页面大标题 600 */
--fs-title-card: 17px; /* 卡片标题 600 */
--fs-price: 18px; /* 价格 / 金额 600（关键信息 ≥17px，满足适老化） */
--fs-body: 15px; /* 正文 400（适老化下限，禁止更小） */
--fs-caption: 13px; /* 辅助说明 400 */
--fs-weak: 12px; /* 弱提示 400（仅装饰 / 非必要信息，正文禁用） */
/* ---------- 字重 Font Weight ---------- */
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
/* ---------- 行高 Line Height ---------- */
--lh-tight: 1.3;
--lh-base: 1.5;
--lh-loose: 1.7;
/* ---------- 圆角 Radius ---------- */
--radius-card: 12px;
--radius-btn: 10px;
--radius-tag: 4px;
--radius-pill: 999px;
--radius-input: 10px;
/* ---------- 间距 Spacing（4px 基准）---------- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
/* ---------- 阴影 Shadow ---------- */
--shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04); /* 卡片轻投影 */
--shadow-bar: 0 -1px 0 rgba(0, 0, 0, 0.04); /* 吸底栏顶边 */
--shadow-float: 0 4px 16px rgba(0, 0, 0, 0.08); /* 浮层 / 弹窗 */
/* ---------- 层级 Z-index ---------- */
--z-base: 0;
--z-dropdown: 100;
--z-sticky: 200; /* 吸底操作栏 / Tab 栏 */
--z-float: 250; /* 悬浮按钮 FAB（目录/客服/回到顶部）：高于 sticky，低于 modal */
--z-modal: 300;
--z-toast: 400;
--z-overlay: 500;
/* ---------- 动效 Motion ---------- */
--dur-tap: 120ms; /* 点击即时反馈 */
--dur-fast: 160ms;
--dur-page: 280ms; /* 页面转场 < 300ms */
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
/* ---------- 字体栈 Font Stack ---------- */
--font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC",
"Helvetica Neue", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
/* ---------- 布局常量 Layout ---------- */
--screen-base: 375px;
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--tabbar-h: 50px;
--bottombar-h: 56px;
}
/* ===================== 基础重置（原型用） ===================== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: var(--lh-base);
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
}
/* 价格 / 数字统一等宽，避免跳动 */
.num, .price { font-variant-numeric: tabular-nums; }
/* 遵循系统「减弱动态效果」 */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
/* ===================== 按钮 Button ===================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px; /* 适老化：可点区域 ≥44×44 */
min-width: 44px;
padding: 0 var(--space-5);
font-size: var(--fs-price); /* 18px */
font-weight: var(--fw-semibold);
line-height: 1;
border: none;
border-radius: var(--radius-btn);
cursor: pointer;
box-sizing: border-box;
transition: background var(--dur-tap) var(--ease-standard),
transform var(--dur-tap) var(--ease-standard);
}
.btn:active { transform: scale(0.98); }
.btn-block { display: flex; width: 100%; }
/* 主按钮：金底深字 */
.btn-primary { background: var(--color-brand); color: var(--color-on-brand); }
.btn-primary:active { background: var(--color-brand-dark); }
/* 次按钮：白底金边金字（金字用深金 #E0A800 保对比度） */
.btn-secondary {
background: var(--color-surface);
color: var(--color-brand-dark);
border: 1px solid var(--color-brand);
}
.btn-secondary:active { background: var(--color-brand-light); }
/* 文字按钮：金色（深金） */
.btn-text {
background: transparent;
color: var(--color-brand-dark);
padding: 0 var(--space-2);
min-width: 44px;
}
/* 禁用态 */
.btn[disabled], .btn.is-disabled {
background: #F2F3F5;
color: var(--color-text-weak);
border: none;
cursor: not-allowed;
transform: none;
}
/* 全圆角按钮（高 44px） */
.btn-pill { border-radius: var(--radius-pill); }
/* 小按钮变体：可点区域仍 44px（适老化），仅字号降到 15px、padding 收窄，用于窄横向布局 */
.btn-sm { font-size: var(--fs-body); padding: 0 var(--space-3); }
/* ===================== 卡片 Card ===================== */
.card {
background: var(--color-surface);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
padding: var(--space-4);
}
/* ===================== 表单输入框 Input ===================== */
.input {
width: 100%;
min-height: 44px; /* 适老化：可点区域 ≥44 */
padding: 0 var(--space-3);
font-size: var(--fs-body);
color: var(--color-text);
background: var(--color-surface);
border: 1px solid var(--color-divider-strong);
border-radius: var(--radius-input);
box-sizing: border-box;
outline: none;
}
.input::placeholder { color: var(--color-text-weak); }
.input:focus {
border-color: var(--color-brand);
box-shadow: 0 0 0 2px rgba(255, 200, 10, 0.25);
}
/* ===================== 吸底操作栏 Action Bar ===================== */
/* 上下文：下单 / 确认 / 结算等流程页，与 Tab 栏互斥（不同时出现） */
.actionbar {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: var(--z-sticky);
display: flex;
align-items: center;
gap: var(--space-3);
height: calc(var(--bottombar-h) + var(--safe-bottom));
padding: 0 var(--space-4) var(--safe-bottom);
background: var(--color-surface);
border-top: 1px solid var(--color-divider);
box-shadow: var(--shadow-bar);
}
.actionbar .total { display: flex; flex-direction: column; }
.actionbar .total .label { font-size: var(--fs-weak); color: var(--color-text-secondary); }
.actionbar .total .amount {
font-size: var(--fs-price); font-weight: var(--fw-semibold);
color: var(--color-text); font-variant-numeric: tabular-nums;
}
.actionbar .btn { flex: 1; max-width: 220px; margin-left: auto; }
/* ===================== Tab 栏（3 个：首页 / 订单 / 我的） ===================== */
/* 上下文：一级导航页，与吸底操作栏互斥 */
.tabbar {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: var(--z-sticky);
display: flex;
height: calc(var(--tabbar-h) + var(--safe-bottom));
padding-bottom: var(--safe-bottom);
background: var(--color-surface);
border-top: 1px solid var(--color-divider);
}
.tabbar-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-height: 44px; /* 适老化 */
color: var(--color-text-weak);
font-size: var(--fs-weak);
text-decoration: none;
}
.tabbar-item .icon { width: 24px; height: 24px; }
.tabbar-item.active { color: var(--color-brand-dark); }
/* ===================== 标签胶囊 Pill ===================== */
.pill {
display: inline-flex;
align-items: center;
padding: 3px 10px;
font-size: var(--fs-weak);
color: var(--color-brand-dark);
background: var(--color-brand-light);
border-radius: var(--radius-pill);
white-space: nowrap;
}
/* ===================== 状态标签 Status Tag（6 态） ===================== */
/* 注：「待评价」不单列状态（作为「已完成」详情页动作）；新增状态须满足「文字 + 非颜色信号」双通道。 */
.tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
font-size: var(--fs-weak);
font-weight: var(--fw-medium);
line-height: 18px;
border-radius: var(--radius-tag);
white-space: nowrap;
}
.tag--pending { background: #F2F3F5; color: var(--color-text-secondary); } /* 待匹配 中性灰 */
.tag--matching { background: var(--color-brand-light); color: var(--color-brand-dark); } /* 匹配中 金 */
.tag--signed { background: var(--color-success-bg); color: var(--color-success); } /* 已签约 绿 */
.tag--service { background: var(--color-success-bg); color: var(--color-success); } /* 服务中 绿 + 实时点 */
.tag--done { background: var(--color-divider); color: var(--color-text); } /* 已完成 深中性 */
.tag--cancelled { background: var(--color-danger-bg); color: var(--color-danger); } /* 已取消 红 */
/* 服务中实时点（脉冲） */
.tag--service::before {
content: "";
width: 6px; height: 6px; border-radius: 50%;
background: var(--color-success);
animation: pulse 1.6s var(--ease-standard) infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(52, 168, 83, 0.4); }
70% { box-shadow: 0 0 0 5px rgba(52, 168, 83, 0); }
100% { box-shadow: 0 0 0 0 rgba(52, 168, 83, 0); }
}
/* ===================== 信任条 / 六重保障图标条 ===================== */
/* 六重保障：持证上岗｜健康体检｜实名审查｜双层保险｜签约合同｜免费更换 */
.trust-bar {
display: flex;
gap: var(--space-3);
overflow-x: auto;
padding: var(--space-3) 0;
scrollbar-width: none;
}
.trust-bar::-webkit-scrollbar { display: none; }
.trust-item {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
width: 84px;
}
.trust-item .icon { width: 28px; height: 28px; color: var(--color-brand-dark); }
.trust-item .label { font-size: var(--fs-weak); color: var(--color-text-secondary); text-align: center; }
/* 数据信任条：9 城直营｜2700+ 护工｜2000+ 家庭｜98% 好评 */
.trust-data {
display: flex;
justify-content: space-around;
background: var(--color-brand-light);
border-radius: var(--radius-card);
padding: var(--space-4) var(--space-3);
}
.trust-data .item { display: flex; flex-direction: column; align-items: center; }
.trust-data .num {
font-size: var(--fs-price); font-weight: var(--fw-semibold);
color: var(--color-text); font-variant-numeric: tabular-nums;
}
.trust-data .desc { font-size: var(--fs-weak); color: var(--color-text-secondary); margin-top: 2px; }
/* ===================== 价格明细卡 Price Card ===================== */
.price-card .price-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-2) 0;
font-size: var(--fs-body);
color: var(--color-text-secondary);
}
.price-card .price-row .val { color: var(--color-text); font-variant-numeric: tabular-nums; }
.price-card .price-row--total {
border-top: 1px solid var(--color-divider);
margin-top: var(--space-2);
padding-top: var(--space-3);
font-weight: var(--fw-semibold);
}
.price-card .price-row--total .val { font-size: var(--fs-price); color: var(--color-text); }
/* ===================== 进度时间轴 Timeline（5 节点） ===================== */
.timeline { position: relative; }
.timeline-step {
position: relative;
padding-left: 28px;
padding-bottom: var(--space-5);
}
.timeline-step:last-child { padding-bottom: 0; }
.timeline-step::before { /* 连接线 */
content: "";
position: absolute;
left: 9px; top: 18px; bottom: 0;
width: 2px;
background: var(--color-divider);
}
.timeline-step:last-child::before { display: none; }
.timeline-step .dot {
position: absolute;
left: 2px; top: 2px;
width: 18px; height: 18px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 11px;
}
.timeline-step.is-done .dot { background: var(--color-success); color: #fff; }
.timeline-step.is-current .dot {
background: var(--color-brand); color: var(--color-on-brand);
box-shadow: 0 0 0 3px rgba(255, 200, 10, 0.25);
}
.timeline-step.is-todo .dot { background: #fff; border: 2px solid var(--color-divider); }
.timeline-step .title { font-size: var(--fs-body); color: var(--color-text); }
.timeline-step.is-todo .title { color: var(--color-text-weak); }
.timeline-step .time { font-size: var(--fs-weak); color: var(--color-text-secondary); }
/* ===================== 电话一键拨打 Call Button ===================== */
.call-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 44px; /* 适老化 */
padding: 0 var(--space-4);
border-radius: var(--radius-btn);
background: var(--color-brand);
color: var(--color-on-brand);
font-size: var(--fs-price); /* 电话号码 ≥17px */
font-weight: var(--fw-semibold);
text-decoration: none;
font-variant-numeric: tabular-nums;
}
/* ===================== 悬浮按钮 FAB（目录 / 客服 / 回到顶部） ===================== */
/* 层级用 --z-float(250)：压在内容/吸底栏之上，但被弹窗(modal 300)覆盖 */
.fab {
position: fixed;
right: var(--space-4);
bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--space-4));
z-index: var(--z-float);
display: flex; align-items: center; justify-content: center;
width: 48px; height: 48px;
border-radius: var(--radius-pill);
background: var(--color-surface);
color: var(--color-brand-dark);
box-shadow: var(--shadow-float);
border: none; cursor: pointer;
}
/* ===================== 图片占位符 Image Placeholder ===================== */
/* 用法：
* 【图1·头图 750×400】产品场景实拍
*
*/
.img-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background: #F2F3F5;
border: 1px dashed #C9CDD4;
border-radius: var(--radius-card);
color: var(--color-text-weak);
font-size: var(--fs-weak);
line-height: 1.5;
text-align: center;
padding: var(--space-4);
box-sizing: border-box;
}