/* ============================================================ 念安 NIAN·AN — 宠物云端纪念馆 UI 设计系统 视觉基底 Token / 交付页样式 / 原型样式 Version 1.0 · Light-first · WCAG AA ============================================================ */ /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } ul, ol { list-style: none; } /* ============================================================ 1. DESIGN TOKENS — 浅色（默认 · 日间温柔模式） ============================================================ */ :root { /* — 品牌情绪色 ——————————————————————— */ --paper: #F5F1EC; /* 浅杏米白 · 全站底色 */ --paper-sunk: #EFE9E2; /* 下沉层背景 */ --mist: #EAECEF; /* 薄雾浅灰 · 卡片/分区 */ --mist-blue: #B8C8D8; /* 柔雾奶蓝 · 原色（装饰/肌理用） */ --mist-blue-t: #DDE4EB; /* 柔雾奶蓝 · 淡化（大面积分区） */ --clay: #C9B9A8; /* 暖柔浅棕 · 原色（描边/装饰） */ --clay-ink: #7A6448; /* 暖柔浅棕 · 加深文本版 AA */ --clay-deep: #6B5942; /* 暖褐 · 主按钮底 */ --clay-deep-h: #5B4B36; /* 暖褐 · 按钮 hover */ --ob-wash: rgba(122,100,72,.10); /* 引导页第 4 屏插画底衬（比照 .ob-halo 的淡填充） */ --rose: #D9C0C0; /* 柔粉豆沙 · 原色（关怀提示底） */ --rose-t: #F2E7E7; /* 柔粉豆沙 · 淡化 */ --rose-ink: #6E5252; /* 柔粉豆沙 · 加深文本版 AA */ /* — 底部导航「重点色块」· 取自甲方提供的图标原色（天蓝 #A3C2E1） ——— 浅蓝在浅底上只有 1.6:1，够不上 WCAG 1.4.11 的 3:1，所以选中态不靠它单打独斗： 底块 / 描边环 / 标签色三层同时变化，「状态不靠颜色单独表意」。 */ --tab-emph: #A3C2E1; /* 选中图标实色（原色直用，不随主题换） */ --tab-emph-wash: rgba(163,194,225,.48); /* 选中底块 · 上（实测底块/页面 ≈1.17:1） */ --tab-emph-wash-b:rgba(163,194,225,.22); /* 选中底块 · 下 */ --tab-emph-halo: rgba(163,194,225,.62); /* 图标背后的光晕 */ --tab-emph-ring: rgba(103,138,180,.55); /* 点击扩散环 */ --tab-emph-ink: #47698B; /* 选中标签文字 5.15:1 */ /* — 中性暖灰阶（替代纯黑） ————————————— */ --ink-900: #332E28; /* 一级标题 */ --ink-700: #4C443B; /* 正文 body */ --ink-500: #6F665B; /* 次要文字 */ --ink-400: #8C8275; /* 辅助/占位（限 ≥18px） */ --ink-300: #A79C8E; /* 禁用 / 分隔装饰 */ --hairline: rgba(51, 46, 40, 0.10); --hairline-s: rgba(51, 46, 40, 0.06); --on-primary: #FBF8F4; /* — 字号阶梯 (1.125 · Major-second-ish) ———————— */ --fs-2xs: 0.6875rem; /* 11px 标签 */ --fs-xs: 0.75rem; /* 12px 辅助 */ --fs-sm: 0.875rem; /* 14px 次要正文 */ --fs-base:1rem; /* 16px 正文 */ --fs-md: 1.125rem; /* 18px 小标题 */ --fs-lg: 1.25rem; /* 20px */ --fs-xl: 1.5rem; /* 24px 区块标题 */ --fs-2xl: 1.875rem; /* 30px */ --fs-3xl: clamp(2.25rem, 4.4vw, 3.25rem); /* Hero */ /* — 字体栈 ————————————————————————— */ --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", SimSun, Georgia, serif; --font-sans: "Noto Sans SC", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif; /* — 间距阶梯（4pt 基准） ————————————— */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; /* — 圆角 ——————————————————————————— */ --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* — 阴影（无硬核黑影，暖调扩散） ——————————— */ --sh-1: 0 1px 2px rgba(51,46,40,.04); --sh-2: 0 2px 6px -2px rgba(51,46,40,.08), 0 1px 2px rgba(51,46,40,.04); --sh-3: 0 18px 40px -24px rgba(51,46,40,.26), 0 2px 8px -4px rgba(51,46,40,.08); --sh-glow: 0 0 0 3px rgba(122,100,72,.10); /* — 动效 ——————————————————————————— */ --ease-out: cubic-bezier(.22,.86,.31,1); /* 出场·缓和如叹息 */ --ease-quart: cubic-bezier(.165,.84,.44,1); --ease-breath: cubic-bezier(.45,0,.55,1); /* 呼吸对称 */ --t-fast: 180ms; --t-base: 320ms; --t-slow: 620ms; --t-breath: 6000ms; /* — 交付页用（非产品 token） ————————————— */ --doc-bg: #F5F1EC; --doc-surface: #FBF9F6; --device-bg: #2E2A26; } /* ============================================================ 2. DESIGN TOKENS — 夜间温柔模式 ============================================================ */ [data-theme="night"] { --paper: #1B1917; --paper-sunk: #161413; --mist: #241F1B; --mist-blue: #3A4149; --mist-blue-t:#232629; --clay: #574C3F; --clay-ink: #C3AF94; --clay-deep: #8A7458; --clay-deep-h:#9C8567; --ob-wash: rgba(242,236,228,.07); /* 夜间底衬换成浅色低透明，深底上才看得见 */ --rose: #5C4A4A; --rose-t: #221D1D; --rose-ink: #CDB6B6; /* 导航选中态：浅蓝在深底上反差反而最好（#A3C2E1 vs #1B1917 = 9.8:1）， 故图标实色日夜一致，只把底块与光晕压暗，避免夜里糊成一块亮斑。 */ --tab-emph: #A3C2E1; --tab-emph-wash: rgba(163,194,225,.24); --tab-emph-wash-b:rgba(163,194,225,.10); --tab-emph-halo: rgba(163,194,225,.38); --tab-emph-ring: rgba(163,194,225,.50); --tab-emph-ink: #A9C7E6; /* 选中标签文字 8.9:1 */ --ink-900: #F2ECE4; --ink-700: #DDD5CA; --ink-500: #AFA597; --ink-400: #8E8478; --ink-300: #5E564D; --hairline: rgba(242,236,228,.10); --hairline-s: rgba(242,236,228,.06); --on-primary: #171412; --sh-1: 0 1px 2px rgba(0,0,0,.30); --sh-2: 0 2px 8px -2px rgba(0,0,0,.40); --sh-3: 0 20px 44px -26px rgba(0,0,0,.70); --sh-glow: 0 0 0 3px rgba(195,175,148,.14); --doc-bg: #131110; --doc-surface: #1F1C19; } /* ============================================================ 3. BASE ============================================================ */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--doc-bg); color: var(--ink-700); font-family: var(--font-sans); font-size: var(--fs-base); font-weight: 350; line-height: 1.75; letter-spacing: .01em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background var(--t-slow) var(--ease-out), color var(--t-slow) var(--ease-out); } /* 页面级微光晕（装饰层，不影响交互） */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(900px 600px at 12% -8%, rgba(200,184,166,.20), transparent 62%), radial-gradient(760px 520px at 92% 6%, rgba(184,200,216,.18), transparent 60%); } [data-theme="night"] body::before { background: radial-gradient(900px 600px at 12% -8%, rgba(138,116,88,.16), transparent 62%), radial-gradient(760px 520px at 92% 6%, rgba(58,65,73,.30), transparent 60%); } ::selection { background: rgba(122,100,72,.18); color: var(--ink-900); } :focus-visible { outline: 2px solid var(--clay-ink); outline-offset: 3px; border-radius: 4px; } h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 400; color: var(--ink-900); line-height: 1.28; } p { text-wrap: pretty; } /* ============================================================ 4. LAYOUT ============================================================ */ .shell { display: grid; grid-template-columns: 216px minmax(0,1fr); gap: var(--sp-12); max-width: 1360px; margin: 0 auto; padding: 0 var(--sp-8) var(--sp-24); position: relative; z-index: 1; } /* — 侧边索引 — */ .rail { position: sticky; top: 0; height: 100vh; padding: var(--sp-12) 0; } .rail-brand { margin-bottom: var(--sp-10); } .rail-mark { font-family: var(--font-serif); font-size: var(--fs-md); color: var(--ink-900); letter-spacing: .16em; } .rail-sub { font-size: var(--fs-2xs); letter-spacing: .34em; text-transform: uppercase; color: var(--ink-400); margin-top: 2px; } .rail-nav { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--hairline); } .rail-link { padding: 7px 0 7px 14px; font-size: var(--fs-sm); color: var(--ink-400); text-decoration: none; border-left: 2px solid transparent; margin-left: -1px; transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), padding-left var(--t-fast) var(--ease-out); } .rail-link:hover { color: var(--ink-700); } .rail-link.is-active { color: var(--clay-ink); border-left-color: var(--clay-ink); padding-left: 18px; font-weight: 500; } .rail-foot { position: absolute; bottom: var(--sp-12); font-size: var(--fs-2xs); color: var(--ink-300); letter-spacing: .04em; } main { padding-top: var(--sp-12); } /* — 通用区块 — */ .sec { padding: var(--sp-16) 0; border-top: 1px solid var(--hairline-s); } .sec:first-child { border-top: 0; padding-top: 0; } .sec-head { display: flex; align-items: baseline; gap: var(--sp-4); margin-bottom: var(--sp-8); } .sec-index { font-family: var(--font-serif); font-size: var(--fs-xs); color: var(--clay-ink); letter-spacing: .2em; padding-top: 6px; } .sec-title { font-size: var(--fs-xl); letter-spacing: .04em; } .sec-lede { max-width: 60ch; color: var(--ink-500); font-size: var(--fs-base); margin-top: calc(var(--sp-2) * -1 + 4px); margin-bottom: var(--sp-10); } /* ============================================================ 5. HERO ============================================================ */ .hero { padding: var(--sp-16) 0 var(--sp-12); position: relative; } .hero-eyebrow { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-6); } .hero-eyebrow span { font-size: var(--fs-2xs); letter-spacing: .38em; text-transform: uppercase; color: var(--ink-400); } .hero-eyebrow i { display: block; width: 44px; height: 1px; background: var(--clay); } .hero h1 { font-size: var(--fs-3xl); letter-spacing: .06em; font-weight: 300; line-height: 1.18; } .hero h1 em { font-style: normal; color: var(--clay-ink); } .hero-lede { margin-top: var(--sp-6); max-width: 56ch; font-size: var(--fs-md); color: var(--ink-500); line-height: 2; } .hero-meta { margin-top: var(--sp-10); display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-12); } .hero-meta div { border-top: 1px solid var(--hairline); padding-top: var(--sp-3); min-width: 150px; } .hero-meta dt { font-size: var(--fs-2xs); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-400); } .hero-meta dd { font-family: var(--font-serif); font-size: var(--fs-md); color: var(--ink-900); margin-top: 2px; } /* ============================================================ 6. 原型舞台（手机 + 注解） ============================================================ */ .stage { display: grid; grid-template-columns: 400px minmax(0,1fr); gap: var(--sp-16); align-items: start; } .stage-device { position: sticky; top: var(--sp-10); } .devtoolbar { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-5); } .chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border: 1px solid var(--hairline); border-radius: var(--r-pill); background: var(--doc-surface); font-size: var(--fs-xs); color: var(--ink-500); letter-spacing: .06em; transition: all var(--t-fast) var(--ease-out); } .chip:hover { border-color: var(--clay); color: var(--ink-900); } .chip.is-on { background: var(--clay-deep); color: var(--on-primary); border-color: var(--clay-deep); } .chip svg { width: 13px; height: 13px; } /* — 手机外壳 — */ .phone { position: relative; width: 390px; height: 844px; border-radius: 54px; background: var(--device-bg); padding: 12px; box-shadow: var(--sh-3), 0 0 0 1px rgba(0,0,0,.06) inset; } [data-theme="night"] .phone { background: #000; } .phone-screen { position: relative; width: 100%; height: 100%; border-radius: 43px; overflow: hidden; background: var(--paper); color: var(--ink-700); font-family: var(--font-sans); font-size: 15px; line-height: 1.7; transition: background var(--t-slow) var(--ease-out), color var(--t-slow) var(--ease-out); isolation: isolate; } /* 原 .phone-notch 已由「灵动岛」.island 取代（见 §20） */ /* ============================================================ 7. APP 通用 ============================================================ */ .app-scroll { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; padding-bottom: 96px; } .app-scroll::-webkit-scrollbar { width: 0; height: 0; } .app-status { display: flex; justify-content: space-between; align-items: center; padding: 14px 26px 4px; font-size: 11px; letter-spacing: .06em; color: var(--ink-500); z-index: 60; position: relative; } .app-status b { font-weight: 500; } /* 页面切换 */ .app-page { position: absolute; inset: 0; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); } .app-page.is-active { opacity: 1; pointer-events: auto; transform: none; } /* 微光呼吸背景 */ .app-aura { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(320px 300px at 78% 4%, rgba(184,200,216,.26), transparent 70%), radial-gradient(300px 260px at 6% 22%, rgba(201,185,168,.20), transparent 72%); animation: aura var(--t-breath) var(--ease-breath) infinite; } @keyframes aura { 0%,100% { opacity: .78; } 50% { opacity: 1; } } [data-theme="night"] .app-aura { background: radial-gradient(320px 300px at 78% 4%, rgba(122,100,72,.24), transparent 70%), radial-gradient(300px 260px at 6% 22%, rgba(58,65,73,.30), transparent 72%); } .app-body { position: relative; z-index: 10; padding: 0 26px; } /* — 通用小件 — */ .kicker { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-400); } .app-h { font-family: var(--font-serif); font-weight: 400; font-size: 23px; letter-spacing: .05em; color: var(--ink-900); } .app-h2 { font-family: var(--font-serif); font-weight: 400; font-size: 17px; letter-spacing: .05em; color: var(--ink-900); } .app-p { font-size: 14px; color: var(--ink-500); line-height: 1.85; } .divider { height: 1px; background: var(--hairline-s); margin: 22px 0; } /* — 卡片（柔形无硬影） — */ .acard { position: relative; border-radius: var(--r-lg); padding: 18px; background: linear-gradient(168deg, rgba(255,255,255,.72), rgba(255,255,255,.34)); border: 1px solid var(--hairline-s); box-shadow: var(--sh-1); transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out); } [data-theme="night"] .acard { background: linear-gradient(168deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); } .acard:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: rgba(122,100,72,.22); } .acard:active { transform: scale(.985); } /* — 图标底座 — */ .ico-badge { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex: none; background: linear-gradient(160deg, rgba(184,200,216,.36), rgba(201,185,168,.26)); border: 1px solid rgba(122,100,72,.10); } .ico-badge svg { width: 21px; height: 21px; stroke: var(--clay-ink); fill: none; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; } /* 甲方原图直接落进列表行（我的订单 / 消息静默）。 这两张是「大画布 + 极细线」：订单图 186×206 的画布里线宽只有 5.7px。 按原始细度缩到这儿能用的十几 px，线宽只剩 0.4px —— 覆盖度峰值 0.42， 整条线淡成灰、糊掉（实测见 _dev/_newicon_thin.py）。 所以生成时按「目标显示线宽」做了 SDF 加粗：形状 / 比例 / 颜色一概不动， 只把线宽重定到小尺寸下还能辨的档位。 生成方 _dev/_rowicon_gen.py，尺寸契约 _dev/_rowicon.json（手改尺寸要同步那边）。 上色走 var(--clay-ink)：与旁边 .ico-badge svg 的描边同一个 token —— 日间 #7A6448 与甲方文件墨色 #7B664A 只差 1/255（肉眼无分）， 夜间随 token 转浅；若硬锁原色，夜间会糊在深底上。 */ .row-ico { flex: none; background-color: var(--clay-ink); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } /* 遮罩里「图形较长边」= 160px，屏幕上正好 13 CSS px，四周各留 2px 安全边 */ .row-ico.ri-order { width: 12.19px; height: 13.33px; -webkit-mask-image: url("icons/row-order.png"); mask-image: url("icons/row-order.png"); } .row-ico.ri-mute { width: 13.33px; height: 11.29px; -webkit-mask-image: url("icons/row-mute.png"); mask-image: url("icons/row-mute.png"); } [data-theme="night"] .ico-badge { background: linear-gradient(160deg, rgba(195,175,148,.16), rgba(138,116,88,.10)); } /* — 行式列表 — */ .row { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--hairline-s); } .row:last-child { border-bottom: 0; } .row-main { flex: 1; min-width: 0; } .row-title { font-size: 15px; color: var(--ink-900); letter-spacing: .02em; } .row-sub { font-size: 12.5px; color: var(--ink-400); margin-top: 1px; } /* 箭头是"这行可点"的唯一视觉提示，--ink-300 只有 2.40:1；提到 --ink-400（3.36:1）达标 */ .row-arrow { width: 16px; height: 16px; stroke: var(--ink-400); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; } /* — 标签 — */ .tag { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); font-size: 11px; letter-spacing: .08em; } .tag--mist { background: var(--mist-blue-t); color: #4A5461; } .tag--rose { background: var(--rose-t); color: var(--rose-ink); } .tag--clay { background: rgba(122,100,72,.10); color: var(--clay-ink); } [data-theme="night"] .tag--mist { color: #B9C3CE; } .tag svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.4; } /* ============================================================ 8. 启动页 ============================================================ */ #p-splash { z-index: 80; } .splash { position: absolute; inset: 0; display: grid; place-items: center; background: var(--paper); } .splash-in { text-align: center; animation: splashIn 1200ms var(--ease-quart) both; } @keyframes splashIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* 旧 SVG 版启动插画遗留的两行已删除（`.splash-art { width:168px; animation:breathe }` 与 `.splash-art svg {…}`）：宽高被下面新版的 .splash-art 覆盖、动画被 `.splash-in > *` 的 riseIn 覆盖，两行都不生效却会让人读成「整幅在呼吸」，是上一轮已标记的误导性死代码。 注意 @keyframes breathe **不能删** —— 纪念馆爪印 .mem-paw 还在用。 */ @keyframes breathe { 0%,100% { opacity: .80; transform: scale(.988); } 50% { opacity: 1; transform: scale(1); } } .splash-title { font-family: var(--font-serif); font-size: 27px; letter-spacing: .34em; color: var(--ink-900); text-indent: .34em; line-height: 1.6; } .splash-sub { margin-top: 14px; font-size: 12px; letter-spacing: .3em; color: var(--ink-400); text-indent: .3em; } .splash-dots { display: flex; gap: 6px; justify-content: center; margin-top: 46px; } .splash-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--clay); animation: dot 2.4s var(--ease-breath) infinite; } .splash-dots i:nth-child(2) { animation-delay: .25s; } .splash-dots i:nth-child(3) { animation-delay: .5s; } @keyframes dot { 0%,100% { opacity: .3; } 50% { opacity: 1; } } /* ============================================================ 9. 页面一：陪伴（首页） ============================================================ */ .greet { padding: 16px 0 4px; } .greet-date { font-size: 11px; letter-spacing: .26em; color: var(--ink-400); text-transform: uppercase; } .greet-line { font-family: var(--font-serif); font-size: 21px; letter-spacing: .06em; color: var(--ink-900); margin-top: 8px; line-height: 1.6; } .svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; } /* v1.9：四块服务由「上下图文」改为「左右图文」——图案在左、标题与说明在右。 机身去掉 12px 外壳后再减 26px 版心、12px 栅格间距，单卡内宽只剩约 151px； 扣掉 11px×2 内边距后，左边给图案、右边才是文字——宽度必须两边一起算。 所以历史上底座一路从 40px 收到 34px、标题从 14.5px 降到 13.5px —— 否则 「宠物临终咨询」这类 6 字标题会折成两行，把卡片高度顶成参差。 （v1.10 起连底座一起撤掉，图案放大到 30px 裸放，详见下方 .ico-img.svc-ico。） */ .svc { display: flex; align-items: center; gap: 9px; padding: 12px 11px; border-radius: var(--r-lg); text-align: left; background: linear-gradient(168deg, rgba(255,255,255,.74), rgba(255,255,255,.36)); border: 1px solid var(--hairline-s); box-shadow: var(--sh-1); transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); } [data-theme="night"] .svc { background: linear-gradient(168deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); } .svc:hover { transform: translateY(-3px); box-shadow: var(--sh-2); } .svc:active { transform: scale(.98); } /* v1.10：四块服务的图案放大到 30px，并**撤掉 34px 圆角底座**，让图案直接落在卡面上。 目的：和底部 Tab Bar 拉开层级——Tab 是"22px 小图标 + 选中时填色块"，这里是"30px 裸图案"， 一眼就能看出「导航」与「内容」不是同一种东西。 顺带也解决了宽度问题：去掉底座后文字列反而从 86px 宽到 89px，6 字标题更不容易折行。 */ .ico-img.svc-ico { width: 30px; height: 30px; flex: none; } .svc-ico.ico-img--consult { -webkit-mask-image: url("icons/svc-consult-big.png"); mask-image: url("icons/svc-consult-big.png"); } .svc-ico.ico-img--homecare { -webkit-mask-image: url("icons/svc-homecare-big.png"); mask-image: url("icons/svc-homecare-big.png"); } .svc-ico.ico-img--funeral { -webkit-mask-image: url("icons/svc-funeral-big.png"); mask-image: url("icons/svc-funeral-big.png"); } .svc-ico.ico-img--ceremony { -webkit-mask-image: url("icons/svc-ceremony-big.png"); mask-image: url("icons/svc-ceremony-big.png"); } .svc-txt { flex: 1; min-width: 0; } .svc-t { font-size: 13.5px; color: var(--ink-900); letter-spacing: .02em; } .svc-d { font-size: 11px; color: var(--ink-400); margin-top: 3px; line-height: 1.6; } /* 关怀横幅 */ .care { margin-top: 16px; display: flex; gap: 13px; align-items: flex-start; padding: 15px 16px; border-radius: var(--r-lg); background: var(--rose-t); border: 1px solid rgba(110,82,82,.10); } .care svg { width: 20px; height: 20px; stroke: var(--rose-ink); fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; flex: none; margin-top: 2px; } .care-t { font-size: 13.5px; color: var(--rose-ink); letter-spacing: .03em; } .care-d { font-size: 12px; color: var(--rose-ink); opacity: .82; margin-top: 3px; line-height: 1.75; } /* 科普 —— v1.11 起缩略图内嵌甲方图标（指南书 / 挥手 / 情绪清单，均带爪印）， 不再是纯色渐变块。图标走 mask + currentColor：跟随 --clay-ink，夜间自动转浅。 */ .know-item { display: flex; gap: 13px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--hairline-s); position: relative; transition: transform 180ms var(--ease-out); } .know-item:last-child { border-bottom: 0; } /* 悬停底色交给伪元素「出血」到发丝线之外：直接改 padding/margin 会把 1px 分隔线一起推歪 */ .know-item::before { content: ""; position: absolute; inset: 3px -9px; border-radius: 12px; background: rgba(201,185,168,.20); opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease-out); } .know-item:hover::before { opacity: 1; } .know-item:active { transform: scale(.985); } .know-thumb { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; background: linear-gradient(150deg, var(--mist-blue-t), rgba(201,185,168,.42)); position: relative; overflow: hidden; } .know-thumb::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 30% 25%, rgba(255,255,255,.55), transparent 70%); } /* 原图是 3508×2480 的细线插画（笔画仅占画布长边 1.6%~2.4%）， 已在 _dev/_iconfin.py 里按目标线宽做过形态学加粗，28px 下笔画约 1.3px， 与 21/24/30px 三处自绘图标（1.25~1.75px）粗细一致。 */ .ico-img.know-ico { position: relative; z-index: 1; width: 28px; height: 28px; color: var(--clay-ink); transition: transform 320ms var(--ease-quart); } .know-ico--care { -webkit-mask-image: url("icons/know-care.png"); mask-image: url("icons/know-care.png"); } .know-ico--farewell { -webkit-mask-image: url("icons/know-farewell.png"); mask-image: url("icons/know-farewell.png"); } .know-ico--heal { -webkit-mask-image: url("icons/know-heal.png"); mask-image: url("icons/know-heal.png"); } .know-item .row-arrow { transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out); } .know-item:hover .know-ico { transform: scale(1.12); } .know-item:hover .row-arrow { transform: translateX(3px); } .know-t { font-size: 14px; color: var(--ink-900); } .know-m { font-size: 11.5px; color: var(--ink-400); margin-top: 2px; letter-spacing: .05em; } /* 悬浮一键倾诉 */ .fab { position: absolute; right: 20px; bottom: 104px; z-index: 70; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; color: var(--on-primary); background: linear-gradient(160deg, var(--clay-deep), var(--clay-deep-h)); box-shadow: 0 14px 28px -14px rgba(107,89,66,.72), 0 0 0 6px rgba(107,89,66,.07); transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); } .fab:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 20px 34px -14px rgba(107,89,66,.62), 0 0 0 9px rgba(107,89,66,.09); } .fab:active { transform: scale(.95); } .fab svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; } .fab-label { position: absolute; right: 74px; white-space: nowrap; font-size: 11.5px; letter-spacing: .16em; color: var(--clay-ink); background: var(--doc-surface); padding: 5px 10px; border-radius: var(--r-pill); box-shadow: var(--sh-1); opacity: 0; transform: translateX(6px); transition: all var(--t-base) var(--ease-out); pointer-events: none; } .fab:hover .fab-label { opacity: 1; transform: none; } /* ============================================================ 10. 页面二：纪念馆 ============================================================ */ .mem-cover { position: relative; border-radius: var(--r-xl); overflow: hidden; padding: 22px 20px 20px; min-height: 172px; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(150deg, #DDE4EB 0%, #E7E1D8 46%, #F0E4E4 100%); } [data-theme="night"] .mem-cover { background: linear-gradient(150deg, #2A2E34 0%, #2E2823 46%, #33292A 100%); } .mem-cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 30% 20%, rgba(255,255,255,.55), transparent 70%); pointer-events: none; } .mem-grain { position: absolute; inset: 0; opacity: .5; pointer-events: none; background-image: radial-gradient(rgba(51,46,40,.055) .6px, transparent .6px); background-size: 4px 4px; } /* 爪印：甲方第二轮给的线条插画（爪印 + 爱心），直接铺原图 —— 用 background-image 而不是矢量描边染色，因为甲方明确要「原图本色 + 原图线宽」，不做主题换色。 ⚠ 路径用 CSS 相对 URL（相对 styles.css 自己，不是相对页面）：这样 index.html、 _dev 下的探针页、样机克隆页里都能解析到 icons/ 下同一份资产。 旧版那次事故是 `.mem-paw svg { … }` 落空（svg 内部只有 ，没有后代 svg）； 现在宿主是 ，连 svg 都没有了，选择器就是 .mem-paw 本身。 */ /* 它是装饰性水印，不是内容：视线该先落在「豆豆」和那句墓志铭上。 原画线色 #C9B9A8（暖棕，≈ --clay），在浅底封面上的对比度天生低于原来的饱和蓝， 所以日间 alpha 要给到 .85 才读得出「有一枚印记」（实测约 1.5:1，比旧版 2.27:1 更含蓄， 反而更贴近甲方要的「若隐若现」）。夜间封面极暗，暖棕比底亮得多，alpha 必须压住 才不会糊在暗底上刺眼 —— 沿用 .28（实测约 2.8:1，仍在装饰区间内）。 判据见 _pawmeasure.py（差分法：与 opacity=0 的参考图逐像素相减）。 */ /* 尺寸按原图宽高比 606:746 = 0.812 给：宽 86px → 高 106px，与旧版那枚爪印的视觉尺寸 （约 85×87px）同量级。原图线宽约占图案宽度 3.7%，按甲方要求保持原图比例，未做归一化。 */ .mem-paw { position: absolute; right: 10px; top: 12px; width: 86px; height: 106px; background: url("icons/mem-paw-heart.png") center / contain no-repeat; opacity: .85; } /* 夜间封面底极暗、爪印比底亮，压 alpha 等于朝底色靠，弱化幅度比日间更大 */ [data-theme="night"] .mem-paw { opacity: .28; } .mem-name { position: relative; z-index: 2; font-family: var(--font-serif); font-size: 30px; letter-spacing: .1em; color: var(--ink-900); line-height: 1.2; } .mem-meta { position: relative; z-index: 2; margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .mem-quote { position: relative; z-index: 2; margin-top: 14px; font-size: 12.5px; line-height: 1.9; color: var(--ink-700); opacity: .9; border-left: 2px solid var(--clay); padding-left: 10px; } .mem-lock { position: absolute; top: 16px; right: 16px; z-index: 3; } /* 六宫格 */ .mem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 4px; margin-top: 20px; } .mem-cell { text-align: center; padding: 12px 2px 10px; border-radius: var(--r-md); cursor: pointer; transition: background var(--t-fast) var(--ease-out); } .mem-cell:hover { background: rgba(122,100,72,.055); } .mem-cell:active { transform: scale(.96); } .mem-cell .ico-badge { margin: 0 auto 9px; width: 46px; height: 46px; border-radius: 16px; } .mem-cell span { display: block; font-size: 11.5px; color: var(--ink-700); letter-spacing: .04em; } /* 时间线画廊 */ .tl { position: relative; margin-top: 22px; padding-left: 18px; } .tl::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(var(--hairline), var(--clay), var(--hairline-s)); } .tl-item { position: relative; padding: 0 0 20px; } .tl-item::before { content: ""; position: absolute; left: -18px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 1.2px solid var(--clay); box-shadow: 0 0 0 3px var(--paper); } .tl-year { font-size: 11px; letter-spacing: .24em; color: var(--clay-ink); } .tl-t { font-size: 14px; color: var(--ink-900); margin-top: 3px; } .tl-d { font-size: 12.5px; color: var(--ink-500); margin-top: 3px; line-height: 1.8; } /* 星光打卡 */ .stars { display: flex; gap: 9px; margin-top: 14px; } .star { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--hairline); background: var(--doc-surface); cursor: pointer; transition: all var(--t-base) var(--ease-out); } .star svg { width: 15px; height: 15px; stroke: var(--ink-300); fill: none; stroke-width: 1.2; stroke-linejoin: round; } .star.is-lit { border-color: var(--clay); background: rgba(122,100,72,.10); animation: pop 520ms var(--ease-quart); } .star.is-lit svg { stroke: var(--clay-ink); fill: rgba(122,100,72,.18); } .star:hover { transform: translateY(-2px); } @keyframes pop { 0% { transform: scale(.7); } 55% { transform: scale(1.14); } 100% { transform: scale(1); } } /* ============================================================ 11. 页面三：情绪树洞 ============================================================ */ .pour { border-radius: var(--r-lg); padding: 16px; background: rgba(255,255,255,.5); border: 1px solid var(--hairline-s); } [data-theme="night"] .pour { background: rgba(255,255,255,.04); } .pour textarea { width: 100%; min-height: 88px; resize: none; border: 0; background: none; outline: none; font-size: 14px; color: var(--ink-900); line-height: 1.9; } .pour textarea::placeholder { color: var(--ink-300); } .pour-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline-s); } .pour-anon { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-400); letter-spacing: .06em; } .pour-send { height: 34px; padding: 0 16px; border-radius: var(--r-pill); background: var(--clay-deep); color: var(--on-primary); font-size: 12.5px; letter-spacing: .1em; transition: all var(--t-fast) var(--ease-out); } .pour-send:hover { background: var(--clay-deep-h); } .quote-card { border-radius: var(--r-lg); padding: 20px 18px; background: linear-gradient(165deg, var(--rose-t), rgba(221,228,235,.45)); border: 1px solid var(--hairline-s); } .quote-txt { font-family: var(--font-serif); font-size: 16px; line-height: 2.05; color: var(--ink-900); letter-spacing: .05em; } .quote-src { margin-top: 12px; font-size: 11.5px; color: var(--ink-400); letter-spacing: .18em; } .audio { display: flex; align-items: center; gap: 13px; padding: 14px; border-radius: var(--r-lg); background: rgba(255,255,255,.52); border: 1px solid var(--hairline-s); } [data-theme="night"] .audio { background: rgba(255,255,255,.04); } .audio-play { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 1px solid var(--hairline); background: var(--doc-surface); transition: all var(--t-fast) var(--ease-out); } .audio-play:hover { border-color: var(--clay); transform: scale(1.04); } .audio-play svg { width: 15px; height: 15px; stroke: var(--clay-ink); fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .audio-wave { flex: 1; display: flex; align-items: flex-end; gap: 3px; height: 22px; } .audio-wave i { flex: 1; border-radius: 2px; background: var(--clay); opacity: .55; animation: wv 2600ms var(--ease-breath) infinite; } @keyframes wv { 0%,100% { height: 22%; } 50% { height: 100%; } } .is-paused .audio-wave i { animation-play-state: paused; opacity: .35; } /* ============================================================ 12. 页面四：我的 ============================================================ */ .me-head { display: flex; align-items: center; gap: 15px; padding: 18px 0 22px; } .me-ava { width: 60px; height: 60px; border-radius: 50%; flex: none; display: grid; place-items: center; background: linear-gradient(150deg, var(--mist-blue-t), var(--rose-t)); border: 1px solid var(--hairline-s); } .me-ava svg { width: 26px; height: 26px; stroke: var(--clay-ink); fill: none; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; } .me-name { font-family: var(--font-serif); font-size: 19px; letter-spacing: .1em; color: var(--ink-900); } .me-sub { font-size: 12px; color: var(--ink-400); margin-top: 3px; letter-spacing: .06em; } .storage-bar { height: 6px; border-radius: var(--r-pill); background: var(--mist); overflow: hidden; margin-top: 10px; } .storage-bar i { display: block; height: 100%; width: 38%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--clay), var(--clay-ink)); } .switch { width: 46px; height: 27px; border-radius: var(--r-pill); flex: none; position: relative; cursor: pointer; background: var(--mist); border: 1px solid var(--hairline-s); transition: all var(--t-base) var(--ease-out); } .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; background: var(--doc-surface); box-shadow: var(--sh-1); transition: transform var(--t-base) var(--ease-quart), background var(--t-base); } .switch.is-on { background: var(--clay-deep); border-color: var(--clay-deep); } .switch.is-on::after { transform: translateX(19px); background: var(--on-primary); } /* ============================================================ 13. Tab Bar ============================================================ */ .tabbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 75; height: 84px; padding: 8px 14px 20px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: start; background: linear-gradient(to top, var(--paper) 62%, rgba(245,241,236,0)); backdrop-filter: blur(14px) saturate(1.05); -webkit-backdrop-filter: blur(14px) saturate(1.05); } [data-theme="night"] .tabbar { background: linear-gradient(to top, var(--paper) 62%, rgba(27,25,23,0)); } /* 未选中态原用 --ink-300（#A79C8E / 夜 #5E564D），在底色上只有 2.40:1 / 2.43:1， 低于 WCAG 1.4.11 对图形元素要求的 3:1；再经 1.75px 细线的抗锯齿稀释，实测仅 1.9~2.1:1， 图标肉眼几乎消失。改为 --ink-500（5.01:1 / 7.22:1），10.5px 标签也一并满足 1.4.3 的 4.5:1。 */ .tab { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 0 4px; color: var(--ink-500); transition: color var(--t-fast) var(--ease-out), transform var(--t-base) var(--ease-out); } .tab svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-base) var(--ease-quart); } .tab .tab-label { font-size: 10.5px; letter-spacing: .12em; transition: color var(--t-fast) var(--ease-out); } /* v1.11：选中态图标换成甲方提供的天蓝实心图（原色 #A3C2E1 直用）。 标签必须跟着走同色系加深版 —— 暖褐文字配冷蓝图标会割裂，且天蓝在浅底上只有 1.6:1， 直接当文字色用读不清；--tab-emph-ink 在日间 5.15:1 / 夜间 8.9:1，均过 AA。 */ .tab.is-active { color: var(--tab-emph-ink); } .tab.is-active svg { transform: translateY(-1px) scale(1.04); } .tab.is-active::after { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--tab-emph); margin-top: 1px; } .tab:hover { color: var(--ink-700); } .tab.is-active:hover { color: var(--tab-emph-ink); } /* 线性图标在 Tab 内已由甲方蒙版图标取代，隐藏原有 ::after 圆点避免双重指示 */ .tabbar .tab.is-active::after { display: none; } /* 选中色块：圆润底块 + 悬浮光影 + 顶层光晕，随图标一起「弹」出来 —— 参考微信选中态：图标本身变成实心色块，而不是只换颜色 v1.11：底块与光晕由暖褐改为与图标同源的天蓝（--tab-emph-wash / -halo）， 否则冷蓝实心图压在暖褐底块上会显脏。 */ .tab-badge { position: relative; display: grid; place-items: center; width: 46px; height: 30px; flex: none; border-radius: 15px; transition: background-color 380ms var(--ease-out), box-shadow 380ms var(--ease-out), transform 220ms var(--ease-out); } /* 图标背后的柔和光晕（选中时淡入） */ .tab-badge::before { content: ""; position: absolute; inset: -4px; border-radius: 19px; opacity: 0; transform: scale(.8); background: radial-gradient(60% 60% at 50% 45%, var(--tab-emph-halo), transparent 72%); transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-quart); } .tab.is-active .tab-badge { background: linear-gradient(180deg, var(--tab-emph-wash), var(--tab-emph-wash-b)); box-shadow: 0 2px 8px -3px rgba(90,124,164,.34), inset 0 1px 0 rgba(255,255,255,.62); } .tab.is-active .tab-badge::before { opacity: 1; transform: none; } .tab.is-active .tab-badge .tab-ico, .tab.is-tap .tab-badge .tab-ico { animation: tabFill 520ms var(--ease-quart); } @keyframes tabFill { 0% { transform: scale(.86); } 52% { transform: scale(1.06); } 100% { transform: scale(.94); } } /* — 点击手感（v1.11 新增）——————————————— ① 按下：底块与图标一起「沉」一下（90ms，比页面切换快，才跟手）； ② 松开落座：图标弹一次（tabFill），同时底块外扩一圈蓝色描边环（tabRing）。 环用 .tab-badge::after 画 —— .tab::after 已被「未选中圆点」占用（见上）。 */ .tab:active .tab-badge { transform: scale(.90); transition-duration: 90ms; } .tab:active .tab-ico { transform: scale(.84); } .tab-badge::after { content: ""; position: absolute; inset: -1px; border-radius: 16px; border: 1.5px solid var(--tab-emph-ring); opacity: 0; pointer-events: none; } .tab.is-tap .tab-badge::after { animation: tabRing 560ms var(--ease-quart); } @keyframes tabRing { 0% { opacity: 0; transform: scale(.70); } 28% { opacity: .85; } 100% { opacity: 0; transform: scale(1.42); } } [data-theme="night"] .tab.is-active .tab-badge { background: linear-gradient(180deg, var(--tab-emph-wash), var(--tab-emph-wash-b)); box-shadow: 0 2px 10px -4px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.10); } /* ============================================================ 14. 注解列 ============================================================ */ .notes { display: flex; flex-direction: column; gap: var(--sp-10); padding-top: 4px; } .note { border-top: 1px solid var(--hairline); padding-top: var(--sp-5); } .note-top { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-3); } .note-idx { font-family: var(--font-serif); font-size: var(--fs-xs); color: var(--clay-ink); letter-spacing: .16em; } .note-title { font-size: var(--fs-md); font-family: var(--font-serif); color: var(--ink-900); letter-spacing: .04em; } .note-body { color: var(--ink-500); font-size: var(--fs-sm); line-height: 1.95; } .note-body strong { color: var(--ink-700); font-weight: 500; } .note-list { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: 6px; } .note-list li { position: relative; padding-left: 15px; font-size: var(--fs-sm); color: var(--ink-500); line-height: 1.85; } .note-list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 1px; background: var(--clay); } .spec-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); } .spec-pill { font-size: var(--fs-2xs); letter-spacing: .06em; padding: 4px 9px; border-radius: var(--r-sm); background: var(--doc-surface); border: 1px solid var(--hairline-s); color: var(--ink-500); font-family: var(--font-sans); } .spec-pill b { color: var(--ink-900); font-weight: 500; } /* ============================================================ 15. 色彩系统展示 ============================================================ */ .palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: var(--sp-4); } .sw { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--hairline-s); background: var(--doc-surface); } .sw-chip { height: 84px; position: relative; } .sw-chip span { position: absolute; left: 12px; bottom: 9px; font-size: var(--fs-2xs); letter-spacing: .16em; color: rgba(51,46,40,.55); text-transform: uppercase; } .sw-body { padding: 11px 13px 13px; } .sw-name { font-size: var(--fs-sm); color: var(--ink-900); letter-spacing: .04em; } .sw-token { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: var(--ink-400); margin-top: 2px; } .sw-hex { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; color: var(--clay-ink); margin-top: 6px; letter-spacing: .04em; } .sw-note { font-size: 11px; color: var(--ink-400); margin-top: 5px; line-height: 1.7; } .warn { display: inline-block; margin-top: 6px; font-size: 11px; color: var(--rose-ink); background: var(--rose-t); padding: 3px 8px; border-radius: 6px; letter-spacing: .04em; } /* ============================================================ 16. 字体 / 间距 / 组件 展示 ============================================================ */ .spec-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-12); } .type-sample { border: 1px solid var(--hairline-s); border-radius: var(--r-lg); padding: var(--sp-8); background: var(--doc-surface); } .type-line { padding: 14px 0; border-bottom: 1px dashed var(--hairline-s); display: flex; align-items: baseline; gap: var(--sp-6); } .type-line:last-child { border-bottom: 0; } .type-meta { flex: none; width: 128px; font-size: var(--fs-2xs); color: var(--ink-400); letter-spacing: .08em; line-height: 1.9; } .type-meta b { display: block; color: var(--clay-ink); font-weight: 500; font-size: 11.5px; } .type-demo { flex: 1; min-width: 0; } .t-serif-3xl { font-family: var(--font-serif); font-size: var(--fs-3xl); font-weight: 300; letter-spacing: .06em; color: var(--ink-900); line-height: 1.2; } .t-serif-xl { font-family: var(--font-serif); font-size: var(--fs-xl); letter-spacing: .06em; color: var(--ink-900); } .t-serif-md { font-family: var(--font-serif); font-size: var(--fs-md); letter-spacing: .08em; color: var(--ink-900); } .t-base { font-size: var(--fs-base); line-height: 1.85; color: var(--ink-700); } .t-sm { font-size: var(--fs-sm); line-height: 1.8; color: var(--ink-500); } .t-xs { font-size: var(--fs-xs); letter-spacing: .16em; color: var(--ink-400); } .scale-row { display: flex; align-items: flex-end; gap: var(--sp-3); margin-top: var(--sp-6); flex-wrap: wrap; } .scale-cell { text-align: center; } .scale-bar { width: 100%; background: linear-gradient(180deg, var(--clay), rgba(201,185,168,.35)); border-radius: 5px 5px 2px 2px; } .scale-cap { font-size: 10.5px; color: var(--ink-400); margin-top: 6px; letter-spacing: .04em; } .scale-cap b { display: block; color: var(--ink-700); font-weight: 500; } .comp-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--sp-6); align-items: start; } .comp-unit { } .comp-label { font-size: var(--fs-2xs); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-400); margin-bottom: var(--sp-3); } .comp-stack { display: flex; flex-direction: column; gap: var(--sp-3); } /* 交付页组件演示 */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--r-pill); font-size: var(--fs-sm); letter-spacing: .06em; transition: all var(--t-fast) var(--ease-out); } .btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; } .btn--primary { background: var(--clay-deep); color: var(--on-primary); box-shadow: var(--sh-1); } .btn--primary:hover { background: var(--clay-deep-h); transform: translateY(-1px); box-shadow: var(--sh-2); } .btn--primary:active { transform: translateY(0) scale(.985); } .btn--secondary { background: var(--doc-surface); color: var(--ink-700); border: 1px solid var(--hairline); } .btn--secondary:hover { border-color: var(--clay); color: var(--ink-900); } .btn--ghost { background: none; color: var(--clay-ink); } .btn--ghost:hover { background: rgba(122,100,72,.07); } .btn--sm { height: 36px; padding: 0 15px; font-size: var(--fs-xs); } .btn:disabled { opacity: .42; pointer-events: none; cursor: not-allowed; } .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: var(--fs-xs); letter-spacing: .1em; color: var(--ink-500); } .inp { height: 46px; padding: 0 15px; border-radius: var(--r-md); border: 1px solid var(--hairline); background: var(--doc-surface); color: var(--ink-900); font-size: var(--fs-sm); outline: none; transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); } .inp::placeholder { color: var(--ink-300); } .inp:focus { border-color: var(--clay-ink); box-shadow: var(--sh-glow); } .inp.is-error { border-color: var(--rose-ink); } .inp.is-error:focus { box-shadow: 0 0 0 3px rgba(110,82,82,.12); } .field-hint { font-size: var(--fs-xs); color: var(--ink-400); } .field-err { font-size: var(--fs-xs); color: var(--rose-ink); } .icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--sp-3); } .icon-cell { aspect-ratio: 1; border-radius: var(--r-md); border: 1px solid var(--hairline-s); background: var(--doc-surface); display: grid; place-items: center; gap: 6px; transition: all var(--t-fast) var(--ease-out); } .icon-cell:hover { border-color: var(--clay); transform: translateY(-2px); } .icon-cell svg { width: 24px; height: 24px; stroke: var(--clay-ink); fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; } .icon-cell span { font-size: 10.5px; color: var(--ink-400); letter-spacing: .06em; } .table-wrap { overflow-x: auto; border: 1px solid var(--hairline-s); border-radius: var(--r-md); background: var(--doc-surface); } table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 560px; } th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--hairline-s); } th { font-size: var(--fs-2xs); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-400); font-weight: 500; } td { color: var(--ink-500); } td:first-child { color: var(--ink-900); } tr:last-child td { border-bottom: 0; } .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; } .pass { color: #4E7A57; } [data-theme="night"] .pass { color: #8FBF9C; } .fail { color: var(--rose-ink); } .prin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 1px; background: var(--hairline-s); border: 1px solid var(--hairline-s); border-radius: var(--r-lg); overflow: hidden; } .prin { background: var(--doc-bg); padding: var(--sp-6); } .prin-n { font-family: var(--font-serif); font-size: var(--fs-xs); color: var(--clay-ink); letter-spacing: .2em; } .prin-t { font-family: var(--font-serif); font-size: var(--fs-md); color: var(--ink-900); margin: 8px 0 8px; letter-spacing: .05em; } .prin-d { font-size: var(--fs-sm); color: var(--ink-500); line-height: 1.85; } /* ============================================================ 17. Footer ============================================================ */ .sig { margin-top: var(--sp-20); padding-top: var(--sp-8); border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-6); flex-wrap: wrap; } .sig-mark { font-family: var(--font-serif); font-size: var(--fs-xl); color: var(--ink-900); letter-spacing: .16em; } .sig-meta { font-size: var(--fs-xs); color: var(--ink-400); letter-spacing: .1em; line-height: 2; text-align: right; } /* ============================================================ 17b. 启动页 · 扫墓场景（宠念时光） ============================================================ */ .splash { position: absolute; inset: 0; display: grid; place-items: center; background: var(--paper); overflow: hidden; } .splash-halo { position: absolute; width: 440px; height: 440px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(201,185,168,.30), rgba(184,200,216,.16) 48%, transparent 66%); animation: haloPulse 7000ms var(--ease-breath) infinite; } [data-theme="night"] .splash-halo { background: radial-gradient(circle, rgba(138,116,88,.30), rgba(58,65,73,.24) 48%, transparent 66%); } @keyframes haloPulse { 0%,100% { transform: scale(.90); opacity: .48; } 50% { transform: scale(1.06); opacity: .92; } } /* 共用插画 —— 甲方线条图切成的 6 层遮罩：各层用 mask 染主题色（跟随 --clay-ink 的日/夜切换）， 彼此独立，所以能分别做动效。图层来源与坐标见 _dev/_splashsplit.py 与 _dev/_splashparts.json —— 生成方与校验方共用同一份坐标，不许各猜一套。 **启动页 .splash-art 与登录页 .lg-art 共用这一套 .sf-* 图层**（两页只差容器尺寸）， 所以图层样式必须写成与容器无关的百分比 —— 换容器就自动跟着缩放。 前缀从 .sp-* 改成 .sf-* 是修一个真缺陷：服务二级页的滚动容器也叫 .sp-body （`flex:1; overflow-y:auto; padding:0 22px 34px`，index.html 里出现 7 次）， 插画层的 .sp-body 因此白沾了那套服务页样式。全局 box-sizing:border-box 让它 侥幸没露出视觉破绽，但只要哪天给 .sp-body 添一条 margin/background，插画就会 静默移位 —— 属于「读代码看不出来」的那类耦合。改名后 .sf-* 全局唯一。 校验脚本会读计算值确认 padding/overflow/flex 回到初始态（见探针的 layers[].padding）。 */ .splash-art, .lg-art { position: relative; aspect-ratio: 3 / 2; } .splash-art { width: 232px; margin: 0 auto 26px; } .sf { position: absolute; background-color: var(--clay-ink); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .sf-body { left: 0; top: 14.5%; width: 100%; height: 85.5%; -webkit-mask-image: url("icons/splash-body.png"); mask-image: url("icons/splash-body.png"); } .sf-halo { left: 44.3333%; top: 0.5%; width: 18.1667%; height: 11.5%; -webkit-mask-image: url("icons/splash-halo.png"); mask-image: url("icons/splash-halo.png"); } .sf-wing-l { left: 30.5%; top: 0; width: 12.1667%; height: 13.25%; -webkit-mask-image: url("icons/splash-wing-l.png"); mask-image: url("icons/splash-wing-l.png"); } .sf-wing-r { left: 64.1667%; top: 0; width: 12.1667%; height: 13.25%; -webkit-mask-image: url("icons/splash-wing-r.png"); mask-image: url("icons/splash-wing-r.png"); } .sf-heart { left: 19.5%; top: 16.75%; width: 10.6667%; height: 15.25%; -webkit-mask-image: url("icons/splash-heart.png"); mask-image: url("icons/splash-heart.png"); } .sf-flower { left: 11%; top: 37%; width: 23%; height: 37%; -webkit-mask-image: url("icons/splash-flower.png"); mask-image: url("icons/splash-flower.png"); } /* 花要叠两层旋转才摆得不像节拍器：外层带 mask，内层只负责第二个频率 */ .sf-core { position: absolute; inset: 0; background-color: var(--clay-ink); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-image: url("icons/splash-flower.png"); mask-image: url("icons/splash-flower.png"); } /* ① 鲜花随风飘动 —— 绕茎底端摆。原点 (54%, 98.6%) 就是花茎与台基的接合点， 所以花怎么摆接缝都不动，不会露缝。两个周期 5.8s : 3.4s 不是整数比， 合成出来疏密不均 —— 像风，不像节拍器。 */ .sf-flower { transform-origin: 54% 98.6%; animation: spSway 5800ms var(--ease-breath) infinite; } .sf-flower .sf-core { transform-origin: 54% 98.6%; animation: spSway2 3400ms var(--ease-breath) infinite; } @keyframes spSway { 0%,100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.2deg); } } @keyframes spSway2 { 0%,100% { transform: rotate(1.1deg); } 50% { transform: rotate(-1.1deg); } } /* ② 天使翅膀扇动 —— 绕翼根开合。左右镜像：一只顺时针抬、另一只就逆时针抬， 合起来才是「两翼同时上下扇」，而不是两只各扇各的。 */ .sf-wing-l { transform-origin: 91.8% 66%; animation: spFlapL 3200ms var(--ease-breath) infinite; } .sf-wing-r { transform-origin: 9.6% 66%; animation: spFlapR 3200ms var(--ease-breath) infinite; } @keyframes spFlapL { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(6.5deg); } } @keyframes spFlapR { 0%,100% { transform: rotate(3deg); } 50% { transform: rotate(-6.5deg); } } /* ③ 爱心轻微跳动 —— 双峰（lub-dub）节奏，峰值只放大 9%：是「轻微跳动」，不是弹跳 */ .sf-heart { transform-origin: 50.8% 50%; animation: spBeat 2000ms var(--ease-breath) infinite; } @keyframes spBeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.09); } 28% { transform: scale(1); } 42% { transform: scale(1.05); } 56% { transform: scale(1); } } /* 品牌区 —— 甲方要求去掉名字左边的猫爪印，只留中间的名字与副标题 */ .splash-brand { display: flex; align-items: center; justify-content: center; } /* 更名前是两字名，34px/.42em 是那时的设定。改四字「宠念时光」时带爪印标，收到 30px/.36em。 现在爪印已按甲方要求移除，容器余量从 14px 放宽到 49px，但字号保持不动 —— 本轮只要求去掉图标，没要求动字阶，少改少错。 */ .splash-title { font-size: 30px; letter-spacing: .36em; text-indent: .36em; line-height: 1.5; } /* 启动页 stagger 入场 */ .splash-in > * { animation: riseIn 900ms var(--ease-quart) both; } .splash-in > *:nth-child(1) { animation-delay: 120ms; } .splash-in > *:nth-child(2) { animation-delay: 300ms; } .splash-in > *:nth-child(3) { animation-delay: 460ms; } .splash-in > *:nth-child(4) { animation-delay: 620ms; } @keyframes riseIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } } /* ============================================================ 17c. 新用户引导（Onboarding） ============================================================ */ .ob { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 48px 26px 32px; z-index: 10; } .ob-top { display: flex; justify-content: flex-end; } .ob-skip { font-size: 12.5px; letter-spacing: .12em; color: var(--ink-400); padding: 7px 12px; border-radius: var(--r-pill); transition: all var(--t-fast) var(--ease-out); } .ob-skip:hover { color: var(--ink-700); background: rgba(122,100,72,.06); } .ob-stage { flex: 1; position: relative; } .ob-panel { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; opacity: 0; transform: translateX(16px); pointer-events: none; transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out); } .ob-panel.is-on { opacity: 1; transform: none; pointer-events: auto; } .ob-panel.is-out { transform: translateX(-16px); } .ob-art { width: 232px; margin-bottom: 26px; } .ob-art svg { width: 100%; height: auto; stroke: var(--clay-ink); fill: none; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; } .ob-card { fill: rgba(255,255,255,.55); stroke: var(--clay); } [data-theme="night"] .ob-card { fill: rgba(255,255,255,.05); } .ob-ph { opacity: .42; } .ob-ring { stroke: var(--mist-blue); opacity: .55; transform-box: fill-box; transform-origin: center; animation: ringPulse 3200ms var(--ease-breath) infinite; } @keyframes ringPulse { 0%,100% { transform: scale(.94); opacity: .25; } 50% { transform: scale(1.03); opacity: .7; } } .ob-plus { stroke: var(--clay-ink); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: nudge 2400ms var(--ease-breath) infinite; } @keyframes nudge { 0%,100% { transform: translate(0,0); } 50% { transform: translate(2px,-2px); } } .ob-tl { stroke: var(--hairline); stroke-width: 1; } .ob-dot { fill: var(--clay); stroke: none; transform-box: fill-box; transform-origin: center; animation: dotPulse 2400ms var(--ease-breath) infinite; animation-delay: var(--d,0ms); } @keyframes dotPulse { 0%,100% { opacity: .28; transform: scale(1); } 50% { opacity: 1; transform: scale(1.18); } } .ob-halo { fill: rgba(184,200,216,.28); stroke: none; } .ob-star { fill: rgba(122,100,72,.16); stroke: var(--clay); transform-box: fill-box; transform-origin: center; animation: starSpin 14000ms linear infinite; } @keyframes starSpin { to { transform: rotate(360deg); } } /* 第 4 屏插画 v1.12：甲方提供的「小狗趴着被抚摸」线稿，线宽与颜色对齐前 3 屏。 线宽：源图笔画 15px（内容 989px 宽），在源图分辨率上腐蚀 3px 磨细，按 2× 出资产 300×194、显示 150×97 → 屏上线宽 1.55px；前 3 屏 SVG 是 1.45px （232 容器 / viewBox 200 × stroke-width 1.25），差 7%，肉眼不可分。 （v1.11 是 200×129 直接落原线宽，屏上 2.34px，比别屏粗 61% —— 一眼两样。） 颜色：仍走 mask + --clay-ink，与 .ob-art svg 的 stroke 同色。 底衬：照第 3 屏 .ob-halo 的做法补一层淡底。前 3 屏都是「淡填充 + 深主线」两层， 第 4 屏原先只有一层实心深线，观感比别屏重，补上才像同一套画。 */ .ob-art--img { display: grid; place-items: center; position: relative; } .ob-art--img::before { content: ""; position: absolute; left: 50%; top: 50%; width: 196px; height: 132px; margin: -66px 0 0 -98px; border-radius: 50%; background: var(--ob-wash); animation: obBreathe 3600ms var(--ease-breath) infinite; } .ob-art--img .ico-img.ob-ico { position: relative; width: 150px; height: 97px; color: var(--clay-ink); -webkit-mask-image: url("icons/know-only.png"); mask-image: url("icons/know-only.png"); } @keyframes obBreathe { 0%,100% { transform: scale(.97); opacity: .72; } 50% { transform: scale(1.02); opacity: 1; } } .ob-panel.is-on .ob-art--img { animation: stgIn 620ms var(--ease-quart) both; } .ob-t { font-family: var(--font-serif); font-size: 26px; letter-spacing: .04em; color: var(--ink-900); font-weight: 400; } .ob-d { margin-top: 14px; font-size: 14.5px; line-height: 1.9; color: var(--ink-500); letter-spacing: .06em; } /* 短句节奏：标题先落，副句跟上 —— 让「3 秒内读完」成为版式的一部分 */ .ob-panel.is-on .ob-kick { animation: stgIn 520ms var(--ease-quart) both; } .ob-panel.is-on .ob-t { animation: stgIn 560ms var(--ease-quart) 90ms both; } .ob-panel.is-on .ob-d { animation: stgIn 560ms var(--ease-quart) 190ms both; } /* — 第 5 屏 · 功能地图 ————————————————— */ .ob-kick { font-size: 10.5px; letter-spacing: .3em; text-indent: .3em; color: var(--clay-ink); opacity: .72; margin-bottom: 12px; } .ob-map { width: 100%; max-width: 308px; margin-top: 22px; display: flex; flex-direction: column; gap: 8px; } .ob-map-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--r-md); border: 1px solid var(--hairline); background: var(--doc-surface); text-align: left; } .ob-map-row.is-core { border-color: var(--clay); background: linear-gradient(160deg, rgba(201,185,168,.32), var(--doc-surface) 78%); box-shadow: 0 3px 12px -6px rgba(122,100,72,.30); } /* 蒙版图标靠 currentColor 着色，这里必须显式给色：否则会继承 onboarding 面板的 正文色，主题一切换就跟着飘。与同格内的 svg 规格（--clay-ink）保持一致。 */ .ob-map-ico { width: 34px; height: 34px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--hairline-s); color: var(--clay-ink); } .ob-map-ico svg { width: 18px; height: 18px; stroke: var(--clay-ink); fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; } .ob-map-txt { min-width: 0; flex: 1; } .ob-map-t { display: flex; align-items: center; gap: 7px; font-size: 13.5px; letter-spacing: .06em; color: var(--ink-900); } .ob-map-tag { font-style: normal; font-size: 10px; letter-spacing: .12em; padding: 2px 7px; border-radius: var(--r-pill); background: var(--clay-deep); color: var(--on-primary); } .ob-map-s { margin-top: 3px; font-size: 11px; line-height: 1.75; color: var(--ink-400); letter-spacing: .01em; } .ob-first { margin-top: 20px; display: flex; align-items: center; gap: 8px; max-width: 300px; font-size: 12px; line-height: 1.85; color: var(--ink-500); text-align: left; } .ob-first svg { width: 14px; height: 14px; flex: none; stroke: var(--clay-ink); fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .ob-first b { color: var(--clay-ink); font-weight: 500; } /* 功能地图逐行浮现 */ .ob-panel.is-on .ob-map-row { animation: stgIn 560ms var(--ease-quart) both; } .ob-panel.is-on .ob-map-row:nth-child(1) { animation-delay: 230ms; } .ob-panel.is-on .ob-map-row:nth-child(2) { animation-delay: 300ms; } .ob-panel.is-on .ob-map-row:nth-child(3) { animation-delay: 370ms; } .ob-panel.is-on .ob-map-row:nth-child(4) { animation-delay: 440ms; } .ob-panel.is-on .ob-first { animation: stgIn 620ms var(--ease-quart) both; animation-delay: 560ms; } /* 指示点不再待在左下角的底栏里 —— 它现在跟着每一屏的内容流，落在最后一句的正下方 居中（.ob-panel 本身是 align-items:center，所以这里不用再写居中）。 用