/* 赐名堂 2.0 · C 端旗舰版样式 墨青 #22504A + 暖金 #B98B3C，浅底无阴影无渐变，靠边框与留白分隔 */ /* ================================================================== 分层约定（2026-10-15 定，**改样式前先读这段**） —— 以前全站一个样式表、选择器不加作用域，于是「起名页的桌面侧栏」 把官网首页也顶出 232px 空白，宽屏左右不匀，看着像杂八凑。 现在按「一套令牌 + 四个页面系统」分片，**每片只认自己的 body 类**： ① 令牌层 :root 变量（颜色/字号/间距/主题色）—— 全站唯一色源 ② 通用层 按钮 .btn、卡片 .card、容器 .wrap、toast —— 四页共用 ③ 官网层 body.home 首页（营销页：hero / features / 下载区） ④ 会员层 body.home 会员页（沿用官网框架，勿再加 App 类） ⑤ 应用层 body.app 起名/我的/工具箱：左侧导航栏 + 宽屏内容列 + 结果页多列栅格，全部 body.app 前缀 ⑥ 后台层 body.admin 运营后台（worker 内嵌页） ⑦ 404 body.site 极简提示页 铁律：给某一页加样式，必须带它自己的 body 前缀；不许再写裸的 body{} / .view{} / .sheet{} 这类会外溢的选择器。 ================================================================== */ :root{ /* ================================================================== v3 典藏版令牌（墨玉青 · 旧金 · 宣纸） 色只用三色系（墨玉青 / 旧金 / 朱砂，各配 soft 底）；汉字标题走衬线； 阴影极克制，靠描边（--line）分层。下面那组「旧变量名」是全站既有的 1000+ 处引用，值全部指回 v3 令牌 —— 改这一处 = 整站换装。 ================================================================== */ --paper:#F2EFE6; --paper2:#EAE5D8; --card:#FFFDF8; --ink:#16140E; --ink2:#4A4639; --ink3:#6B6558; --line:#E4DDC9; --line2:#F0EBDC; --line3:#D7CCB2; /* 输入控件描边：比 --line 深一档，保证"看得见这里能填" */ --brand:#17352E; --brand2:#2C5A4E; --brandSoft:#E7EEEA; /* 2026-10-26 全站换肤补齐的三个派生色：深色主色块 / 卡片渐变末端 / 金边渐变末端。 原来这些位置是写死的 #122A24、#FBF6EB、#F6F0E2，换皮肤时它们不动，就成了「几个颜色」。 */ --brandDeep:#122A24; --card2:#FBF6EB; --goldSoft2:#F6F0E2; --gold:#9A7729; --gold2:#C09A46; --goldSoft:#F6EFDC; --goldLine:#E6D5A6; --red:#8E3B2C; --redSoft:#F7E9E5; /* 2026-10-26 新增：命盘卡里的「警示色」原来全是写死的（#A8331F / #FBF0EC / #E8CFC4）， 换皮肤时它一动不动，主色变了这块还是原来的暖红，看着就是「有几个颜色」。 现在统一走三个变量。默认值取原来的硬编码值，所以墨玉青下视觉 100% 不变。 */ --warn:#A8331F; --warnSoft:#FBF0EC; --warnLine:#E8CFC4; --serif:"Songti SC","STSong","Source Han Serif SC","Noto Serif SC",serif; --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif; /* 旧变量名 → v3 令牌（兼容层） */ --bg:var(--paper); --pri:var(--brand); --text:var(--ink); --sub:var(--ink2); --faint:var(--ink3); --mu:#4C8A6B; --huo:#C06A4A; --tu:#B58A33; --jin:#5C7FA3; --shui:#2E6E8E; --r-card:14px; --r-btn:12px; --r-pill:10px; --tabbar-h:56px; /* ---------- 全站水墨背景（换主题即换图/换色调） ---------- */ --bg-img:url('/hero-ink.jpg'); /* 背景图，设 none 则为纯色纸面 */ --bg-filter:saturate(.78) sepia(.16); /* 让水墨图压在宣纸底色上，不抢内容 */ --bg-rgb:242,239,230; /* 与 --bg 同色的 RGB，用于蒙版 */ --bg-veil:radial-gradient(1100px 620px at 50% -10%, rgba(var(--bg-rgb),.86), rgba(var(--bg-rgb),0) 62%), linear-gradient(180deg, rgba(var(--bg-rgb),.62) 0%, rgba(var(--bg-rgb),.30) 40%, rgba(var(--bg-rgb),.46) 74%, rgba(var(--bg-rgb),.72) 100%); } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;padding:0} /* 全站水墨山水背景：拆成两层固定图层，任何页面开箱即满铺，主题只改变量不动结构 */ html{background-color:var(--bg)} body{ background:transparent; color:var(--text); font:13px/1.6 var(--sans); padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom)); -webkit-font-smoothing:antialiased; } body::before, body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-3} /* ⚠️ 三层必须分开排（2026-10-29 修）： 原来图、蒙版、雾全是 z-index:-1，同一层里按 DOM 顺序画 —— ::after 排在最后， 蒙版就把雾整片盖住了（顶部不透明度 .86，雾等于白做）。 现在：图 -3 → 蒙版 -2 → 雾 -1 → 内容 0。 */ body::after{z-index:-2} body::before{ /* 底：水墨图，可整体调色 */ background-image:var(--bg-img); background-position:center top; background-size:cover; background-repeat:no-repeat; filter:var(--bg-filter); } body::after{ /* 面：浅雾蒙版，把图压淡到正文可读 */ background:var(--bg-veil); } /* ==================== 山间云雾（2026-10-29 · 第九版 canvas） ==================== 前八版都是「一张贴图横着漂」：贴图本身不变，漂到哪儿都是同一团形状； 而且灰度 PNG 当 mask 时 mask-mode:match-source 按 alpha 解析（那张图没有 alpha 通道），遮罩整块失效 —— 线上实测就是四个米黄大方块盖在山上。 现场截图：tmp/mist-a0.png。 第九版改成 canvas 实时绘制：纹理由 js/mist.js 用周期噪声现场算（fbm + 域扭曲）， 横向严格无缝、不依赖任何外部图片 —— 少一个资源就少一次 404。 层级仍是：底图 -3 → 纸蒙版 -2 → 雾 -1 → 内容 0；雾不吃鼠标事件。 */ canvas.mist{ position:fixed; inset:0; display:block; width:100%; height:100%; z-index:-1; pointer-events:none; } @media print{ canvas.mist{display:none} } button,input,select{font-family:inherit;font-size:13px;color:inherit} a{color:var(--pri);text-decoration:none} /* ---------- 顶栏 ---------- */ .appbar{ position:sticky;top:0;z-index:30;background:rgba(var(--bg-rgb),.84); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding:10px 16px;display:flex;align-items:center;gap:10px;min-height:50px; } .brand{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-size:17px;font-weight:700;letter-spacing:2.5px} /* 品牌位：后台「基础配置 → 品牌 Logo」传了图就换掉「赐」字印。 横标（通常自带品牌名）优先于「方标 + 文字」；两个都没传就完全不显示。 */ .brand-mark{width:30px;height:30px;border-radius:8px;object-fit:contain;flex:none} .brand-word{height:26px;width:auto;max-width:190px;object-fit:contain} .seal{ width:27px;height:27px;border-radius:6px;border:1px solid var(--goldLine); background:linear-gradient(150deg,var(--brand),var(--brandDeep));color:var(--gold2); display:grid;place-items:center;font-family:var(--serif);font-size:15px;font-weight:700;flex:none; } .brand-sub{font-size:11px;color:var(--faint);font-weight:400;letter-spacing:0} .appbar .sp{flex:1} .iconbtn{ width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--card); display:grid;place-items:center;font-size:14px;color:var(--sub); } .backbtn{ display:flex;align-items:center;gap:2px;font-size:13px;color:var(--sub);margin-left:-4px; } .homebtn{ flex:none;font-size:13px;color:var(--sub);text-decoration:none; border:1px solid var(--line);background:var(--card); padding:6px 12px;border-radius:8px;line-height:1; } .homebtn:active{background:var(--line)} .appbar-title{font-size:15px;font-weight:600} /* ---------- 视图切换 ---------- */ .view{display:none;padding:14px 16px 24px} .view.on{display:block} /* ---------- 卡片 ---------- */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:14px} .card + .card{margin-top:12px} .card.tight{padding:12px} .sec-title{font-family:var(--serif);font-size:12.5px;color:var(--faint);letter-spacing:1.5px;margin:0 0 8px} .mut{color:var(--sub)} .faint{color:var(--faint)} .mini{font-size:12px} /* ---------- 输入块 ---------- */ .field{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:12px 14px} .field + .field{margin-top:10px} .frow{display:flex;align-items:center;gap:12px} .flabel{width:52px;flex:none;font-size:13px;color:var(--sub)} .fbody{flex:1;min-width:0} .fhint{font-size:12px;color:var(--faint);margin-top:5px;line-height:1.6} .fhint b{color:var(--gold);font-weight:600} .farrow{color:var(--faint);font-size:15px;flex:none;align-self:center} /* ==================== 「下面三项，是缩小范围用的」 ==================== 2026-10-29 主人：「勾选得越多，出的字就少了……是不是得有个说明类的」。 放在字辈 / 避讳 / 补五行三行之上，先说清"填=收窄"，名字少了就不算事故。 刻意不做成警告条：没有底色块、没有圆角框、没有图标 —— 只用一道 2px 金线贴着左边，读起来像书眉批注，不像系统弹出来的提示。 */ .narrowhint{ display:flex;flex-direction:column;gap:3px; margin:0 0 13px;padding:1px 0 1px 11px; border-left:2px solid var(--gold); } .narrowhint b{font-size:13.5px;color:var(--ink);font-weight:600;letter-spacing:.2px} .narrowhint span{font-size:12.5px;color:var(--sub);line-height:1.7} /* ==================== 起名页尾部（不加底板） ==================== 2026-10-29 22:2x 主人：「那个画布的那一片干啥呀？」—— 我先给这一整块兜过一张淡纸（.tailblock），在表单下面铺出一大块米色画布， 主人不要。撤掉，底板一步不留。 字压在水墨上的问题不靠底板，靠文字自己的白晕（跟首屏标题同一个办法）： 白晕贴着色走，看不出是一块，也不会把版心切开。 */ .gobefore,.v3-trust,.lostline{ text-shadow:0 0 10px rgba(var(--bg-rgb),.96),0 0 20px rgba(var(--bg-rgb),.9); } /* ==================== 小号「开始起名」（2026-10-29 晚 主人） ==================== 「那么大一条一个大按钮，给改成小按钮，直接改到那个功能栏里头去」—— 宽屏上那条 100% 宽的实心条把表单卡片下半截整个盖住了。 现在收成一个小按钮，塞进「补五行」这一行的右端空白（主人画框的位置）。 ★ 手机不显示：390 宽那一行右边根本放不下，硬塞会把五行圆片挤成两行； 手机上仍旧用通栏大按钮，那才是拇指够得到的地方。 */ .genmini{display:none} .gb-b{display:none} @media (min-width:900px){ .genmini{ display:inline-flex;align-items:center;justify-content:center;flex:none; margin-left:18px;align-self:center; padding:12px 28px;border:0;border-radius:12px; background:var(--brand);color:#fff;font-size:14px;font-weight:500;letter-spacing:1.5px; font-family:var(--sans,inherit);cursor:pointer;white-space:nowrap; box-shadow:0 4px 14px rgba(23,53,46,.16); transition:background .16s ease,transform .12s ease; } .genmini:hover{background:var(--brand2)} .genmini:active{transform:scale(.985)} /* 宽屏上把通栏大按钮和它上面那句「点下面」一起收掉，换成不依赖方位的那句 */ body.app #genBtn{display:none} .gb-a{display:none} .gb-b{display:inline} } /* ==================== 「加到手机桌面」三步指引 ==================== 2026-10-29：安卓 / iPhone / 微信三套说法各走各的，这里只负责把三步排整齐。 用序号圆点而不是 1. 2. 3. —— 手机上一眼能对上手指点哪一步。 */ /* 弹层两栏：左边步骤、右边二维码（2026-10-29 晚） 电脑上点「加到手机桌面」，右边出码，手机一扫带走。 ★ 只在给码时才两栏（qrHtml 为空时 .addh-wrap 会是单栏，见下面的 :has 兜底）。 */ /* 加宽弹层：480 的默认宽度塞进 132 的码之后，左边步骤只剩 300， 「点右上角 ⋮ 或 ··· 打开菜单」会被折断。:has 不支持的浏览器只是仍旧窄一点，不影响功能。 */ @media (min-width:900px){ #sheetInner:has(.addh-wrap){max-width:640px} } .addh-wrap{display:flex;gap:20px;align-items:flex-start} .addh-l{flex:1;min-width:0} .addh-qr{ flex:none;width:132px;display:flex;flex-direction:column;align-items:center;gap:7px; padding:10px 8px 9px;border:1px solid var(--line);border-radius:12px;background:var(--card); } .addh-qr > div{width:112px;height:112px;display:block} .addh-qr svg{width:112px;height:112px;display:block} .addh-qr span{font-size:11px;color:var(--sub);line-height:1.45;text-align:center} .addh-step{display:flex;gap:10px;align-items:flex-start;margin:0 0 10px} .addh-step>b{ flex:none;width:20px;height:20px;border-radius:50%;margin-top:2px; background:var(--goldSoft);color:var(--gold); display:grid;place-items:center;font-size:11.5px;font-weight:600; } .addh-step span{font-size:13px;color:var(--sub);line-height:1.6} .addh-step span b{color:var(--ink);font-weight:600} /* ==================== 并排两块入口（「我的记录 / 加到手机桌面」）==================== 2026-10-29 主人：「那么大个空白，然后右边有个很小很小的小箭头，眼神不好都看不见…… 给它从中间切开，变成两个功能按钮」。 原来是 .listrow 竖排：一条满宽白条 + 右侧一个 15px 的 ›，看起来像设置项，不像入口。 现在等宽两块，标题 15px 自己站得住，副标题交代点进去有什么；箭头跟着副标题走， 不再飘到 300px 开外。整块可点，按下去有反馈 —— 手指不用瞄准。 */ .duo{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} /* 三块跟上面的功能区同宽（2026-10-29 22:3x 主人：「你那三个块跟咱的功能区为啥不对齐呢？」） 量出来的实情：上面表单卡 948 宽（x 166→1114），三块被我限成 780（166→946）， 左边是齐的，右边短 168 —— 看着就是没对齐。 现在撤掉 max-width，宽度跟着功能区走；三块各约 309，比 253 更舒展，不会显得空。 */ /* 2026-10-29 22:2x 主人最终定：「那下边不有两个功能块了吗？然后给他也列一个功能块， 放到第三个功能块的位置，就下边并排三个功能块」—— 三块一样大、等宽并排（前两版先缩成窄块、再让第三块独占一行的做法都作废）。 列数在任何宽度都不变 —— 主人要的是「三块并排」，不是「手机上变成两行」。 窄屏的字号/内边距收一档，见下面 .duo-i span i 之后的 @media。 */ .duo-i{ display:flex;flex-direction:column;gap:6px; padding:15px 16px 14px;border:1px solid var(--line);border-radius:14px; background:var(--card);cursor:pointer; transition:border-color .18s ease,background .18s ease,transform .12s ease; } .duo-i:active{background:var(--goldSoft);border-color:var(--goldLine);transform:scale(.985)} .duo-i b{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:.4px;line-height:1.3} .duo-i span{ display:flex;align-items:center;justify-content:flex-start;gap:5px; font-size:12px;color:var(--sub);line-height:1.45; } /* 副标题两套文案（2026-10-29 22:2x）：桌面上写全（「不用下载 · 一点就进」）， 手机上三块并排每块只有 114，长文案必折两行，换短的（「一点就进」）。 两套都写在 HTML 里，靠这一条媒体查询切换 —— 不用 JS、不会闪。 */ .duo-i em.dl,.duo-i em.ds{font-style:normal} .duo-i em.ds{display:none} @media (max-width:640px){ .duo-i em.dl{display:none} .duo-i em.ds{display:inline} } .duo-i span i{font-style:normal;font-size:14px;color:var(--faint);line-height:1;flex:none} /* 窄屏三块并排（2026-10-29 22:2x）：390 宽下每块 114、360 宽下 104， 15px 的「加到手机桌面」正好放不下，会折成「加到手机桌 / 面」。 收一档字号 + 内边距，六个字一行站住；三块仍是等宽等高。 ★ 必须写在这几条 .duo-i 规则后面：同特异性下靠后的才生效， 写在前面会被上面的 15px 盖掉（第一版就栽在这儿，实测折行）。 */ @media (max-width:640px){ .duo{gap:8px} .duo-i{padding:12px 10px 11px;border-radius:12px} .duo-i b{font-size:13px;letter-spacing:0} .duo-i span{font-size:10.5px;gap:3px;line-height:1.4} .duo-i span i{font-size:11px} } /* 极窄屏（小于 340，多见于老机型）再挤下去「加到手机桌面」会折成两行，改竖排 */ @media (max-width:339px){ .duo{grid-template-columns:1fr} } /* ==================== 角落里的小宝宝（2026-10-29） ==================== 主人要：「不能做成真实照片那种突兀的，要有一层蒙版、色调跟环境搭， 隐隐约约知道这块是个宝宝、特别可爱，但不用看得特别清楚」。 所以不是「贴一张图」，是让它像从宣纸里透出来的—— · 透明度压到 .38：远看是一团暖色，近看才认出是张脸 · 径向羽化（mask-image）：四周全部淡出，没有一条硬边 · 降饱和 + 轻微暖调（filter）：跟米色宣纸同一个色系 · 定位在 .dsel 右侧的空白里（宽屏才有的那块），不压表单也不压提示字 · pointer-events:none：鼠标点上去直接穿到底下的控件 窄屏一律不显示 —— 手机上表单占满宽度，放图必然压字。 */ .babyart{ display:none; /* 2026-10-29 第二版：第一版 212px 卡在出生行下半截，主人圈出「字数」行右侧 到「出生」行上半那一大片还是空的。放大到 320px 并整体上移， 让脑袋落在那块空白中间，身子自然压到出生行下拉的右边。 */ position:absolute;right:-18px;top:-79px;transform:translateY(-50%); width:320px;height:auto;pointer-events:none;user-select:none; /* 面积大了，浓度必须跟着降 —— 212px 时 .33 刚好，320px 时 .33 就「跳出来」了， 脸和手都看得清清楚楚，主人要的是「隐隐约约知道这块是个宝宝」。 */ opacity:.26; filter:saturate(.68) sepia(.12) brightness(1.02); -webkit-mask-image:radial-gradient(ellipse 74% 76% at 50% 44%,#000 46%,rgba(0,0,0,0) 86%); mask-image:radial-gradient(ellipse 74% 76% at 50% 44%,#000 46%,rgba(0,0,0,0) 86%); } @media (min-width:1200px){ /* 只有这块（出生日期的 fbody）要变成定位参照 —— 不能给 .fbody 全局加 relative， 别的行里没有绝对定位元素，加了没问题但没必要，改动越小越稳。 */ .fbody.hasart{position:relative} .fbody.hasart .babyart{display:block} } /* 内容比 label 高得多的行（出生：日历+五格下拉+城市+经度，近 300px）： label 必须贴顶，居中会飘在整块的正中间，看着像走错了位置。 */ .frow.frow-top{align-items:flex-start} .frow.frow-top > .flabel{margin-top:9px} /* 城市下拉与经度并排：手机上太窄会挤，窄屏时自动退回上下两行 */ .row2{display:flex;gap:8px;margin-top:8px} .row2 > .citysel{flex:1 1 auto;min-width:0} .row2 > #birthLng{flex:0 0 186px;width:186px} @media (max-width:640px){ .row2{display:block} .row2 > #birthLng{margin-top:8px} } .inp{ width:100%;border:0;outline:0;background:transparent;font-size:15px;color:var(--text); padding:0;letter-spacing:.5px; } .inp::placeholder{color:var(--sub)} /* 覆盖浏览器「自动填充」那条浅蓝底（密码框被填充时），保持输入框观感统一 */ .inp:-webkit-autofill,.inp:-webkit-autofill:hover,.inp:-webkit-autofill:focus{box-shadow:0 0 0 1000px var(--card) inset;-webkit-text-fill-color:var(--text);transition:background 9999s} select.inp{appearance:none;-webkit-appearance:none;padding-right:14px} /* 分段控制 */ .seg2{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden;background:var(--card)} .seg2 button{ border:0;background:transparent;padding:6px 16px;font-size:13px;color:var(--sub); } .seg2 button.on{background:var(--pri);color:#fff;font-weight:500} /* chips 多选 */ .chips{display:flex;flex-wrap:wrap;gap:7px} .chip{ border:1px solid var(--line);background:var(--card);border-radius:var(--r-pill); padding:6px 13px;font-size:12px;color:var(--sub); } .chip.on{border-color:var(--pri);background:var(--pri);color:#fff} /* 展开更多 */ .more{ display:flex;align-items:center;justify-content:center;gap:4px; padding:11px;font-size:12px;color:var(--sub); border:1px dashed var(--line);border-radius:var(--r-card);margin-top:10px;background:transparent; } .morebox{margin-top:10px;display:none} .morebox.on{display:block} /* 出生「年 / 月 / 日 / 时」选择：年=下拉，月/日=左右箭头切换 */ .dsel{display:flex;align-items:center;gap:5px;flex-wrap:wrap} .dcol,.dstep{display:inline-flex;align-items:center;gap:3px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:5px 7px} .dcol select.inp{width:auto;min-width:42px;text-align:center;font-size:14px;padding:0} .dcol select#birthYear{min-width:64px} .dcol select#birthHour{min-width:78px} .dcol select#birthMin{min-width:56px} .dcol select#dMon,.dcol select#bzMon{min-width:48px} .dcol select#dDay,.dcol select#bzDay{min-width:44px} .dcol i,.dstep i{font-style:normal;font-size:11px;color:var(--faint);font-weight:400} .dstep .dnum{min-width:26px;text-align:center;font-size:15px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums} .dstep .dbtn{border:0;background:transparent;color:var(--sub);font-size:17px;line-height:1;padding:0 3px} .dstep .dbtn:active{color:var(--pri)} /* 未操作前的引导：整体呼吸高亮 + 箭头闪烁 */ .dsel.attn .dcol,.dsel.attn .dstep{border-color:var(--gold)} .dsel.attn .dcol{animation:cmtGlow 1.6s ease-in-out infinite} .dsel.attn .dbtn{color:var(--gold);animation:cmtBlink 1s ease-in-out infinite} @keyframes cmtGlow{0%,100%{box-shadow:0 0 0 0 rgba(185,139,60,0)}50%{box-shadow:0 0 0 3px rgba(185,139,60,.28)}} @keyframes cmtBlink{0%,100%{opacity:.28}50%{opacity:1}} /* ---------- 表单控件（应用层）：一律做成「看得见的框」---------- 以前 .inp 是 border:0 + 透明底，混在正文里跟一行普通文字一模一样， 用户根本看不出哪儿能填（彪哥 2026-10-16：「输入框不明显，应该和日期那块一样深」）。 现在与「日期 / 时辰」那块同一套观感：有底色、有描边、有圆角。 只作用于 body.app，官网/会员页/后台不受影响；日期胶囊里的 select 不重复套框。 */ body.app .fbody > .inp, body.app .field > .inp, body.app .row2 > .inp{ background:var(--bg); border:1px solid var(--line3); border-radius:10px; padding:9px 11px; font-size:14px; } body.app .field > .inp{width:100%;margin-top:2px} /* 弹层底色本身就是宣纸色，控件改用白卡底才分得出来 */ body.app .sheet .inner > .inp, body.app .sheet .inner .field > .inp{ background:var(--card); } body.app .inp:focus{border-color:var(--gold)} /* 日期/时辰胶囊里的 select 保持无框（外层的 .dcol 就是它的框） */ body.app .dcol .inp, body.app .dstep .inp{background:transparent;border:0;border-radius:0;padding:0} /* 下拉框补一个箭头：select 被 appearance:none 抽掉了原生箭头， 补上小三角才看得出"这是可以点开选的"（与输入框同一条线色） */ body.app .fbody > select.inp, body.app .field > select.inp, body.app .row2 > select.inp, body.app #bzShichen, body.app #bzCity, body.app #bzHour, body.app #bzMin, body.app #arcSex{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8' fill='none' stroke='%238A8474' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important; background-repeat:no-repeat!important; background-position:right 11px center!important; padding-right:30px!important; } /* 主按钮 */ .btn{ border:1px solid var(--line);background:var(--card);border-radius:var(--r-btn); padding:11px 16px;font-size:13px;color:var(--text); } .btn:active{opacity:.85} .btn.primary{ background:var(--pri);border-color:var(--pri);color:#fff;font-weight:500; } .btn.gold{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:500} .btn.block{width:100%} .btn:disabled{opacity:.5} .bigbtn{ width:100%;background:var(--pri);color:#fff;border:0;border-radius:var(--r-btn); padding:14px;font-size:15px;font-weight:500;letter-spacing:2px;margin-top:18px; } .bigbtn:disabled{opacity:.6} /* 表单安抚句（2026-10-29 加）：压在表单最上面，先卸顾虑。 这一页要填到分钟、还要填经纬度，第一眼就觉得麻烦，不先说清「本机算、不传走」，他会退。 */ /* 2026-10-29 22:5x 主人：「这整条这句话这个胶囊撤掉不要了，把这句话添加到下边白边、 功能区的白条里头，白条给它再加宽一点」—— 胶囊（自带底色 + 描边）整条撤掉，这句话改成白卡内的一行说明： 不做底色、不做边框，只在下面压一道极淡的分隔线，把「说明」和「要填的字段」分开。 卡片顶部内边距单独加高（.field-calm），让这一行有地方站，不像被硬塞进去。 */ .calmline{ margin:0 0 14px;padding-bottom:12px; border-bottom:1px solid var(--line); font-size:12.5px;line-height:1.75;color:var(--sub); } .calmline b{color:var(--brand);font-weight:600} .field-calm{padding-top:18px} /* 按钮上方那句「点下去会怎样」（2026-10-29 加）。 客户最怕点了之后要钱、要注册、要加微信 —— 提前说清楚。 */ .gobefore{ margin:22px 0 0;text-align:center;font-size:12.5px;line-height:1.7; color:var(--sub); } .gobefore b{color:var(--gold);font-weight:600} /* 免费体检按钮（2026-10-29 加，成人改名页首屏）。 整站门槛最低的入口：不花钱、不填生辰、不注册。 做成描边胶囊，比主按钮轻、比小字重，位置压在说明下面。 用 a 标签因为要 onclick 弹工具层，不是跳页。 */ .freecheck{ display:inline-flex;align-items:center;gap:6px; margin:16px auto 0;padding:9px 20px;border-radius:22px; background:var(--card,#FFFDF8);border:1.5px solid var(--gold); color:var(--gold);font-size:13px;font-weight:600;letter-spacing:.6px; cursor:pointer;transition:background .18s,color .18s; box-shadow:0 1px 6px rgba(154,119,41,.1); } .freecheck b{font-weight:400;font-size:14px;line-height:1} .freecheck:hover{background:var(--gold);color:#fff} /* 免费测名入口（2026-11-01 主人两改）：先去掉胶囊和箭头，又不许它单独占一行 —— 「就那几个字儿就给它放到我给你画的那块就可以了」，那块就是说明句的右边。 所以把它和那句话并成一行：字在左、入口在右，字号行高跟说明句完全一致， 看上去是同一行话的两头，不是新加的一块。 只在这页用（app.html 那句说明不要这个入口），所以容器叫 calmrow，不碰 .calmline。 */ .calmrow{ display:flex;align-items:center;gap:14px; margin:0 0 14px;padding-bottom:12px; border-bottom:1px solid var(--line); } .calmrow .calmline{margin:0;padding:0;border-bottom:0;flex:1 1 auto} /* 胶囊规格照抄功能区那条广告里的「去起名」(.v3-checkrow .ar)： 11.5px / 600 / 内边距 6px 11px / 全圆角 / 深棕底白字 —— 主人要「跟那胶囊大小一样」， 量过再写，不目测。文字比它长，所以只长在宽度上，高度一致。 */ .freelink{ flex:0 0 auto;white-space:nowrap; display:inline-flex;align-items:center; padding:6px 11px;border-radius:999px; background:var(--pri);color:#fff; font-size:11.5px;font-weight:600;letter-spacing:.6px; /* 光泽：照抄全站小块那套（见 .plan .ptag 那组）—— 上亮下暗的竖向渐变 + 内亮线 + 内暗线，不加外阴影（小块带外阴影会脏）。 */ background-image:linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.12) 22%, rgba(255,255,255,.02) 55%, rgba(0,0,0,.15) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.12); cursor:pointer;text-decoration:none; transition:filter .18s; } .freelink:hover{filter:brightness(1.08);text-decoration:none} /* 手机：一行放不下两头，让它掉到下一行、靠右 */ @media (max-width:640px){ .calmrow{flex-wrap:wrap;gap:8px} .calmrow .calmline{flex:1 1 100%} .freelink{margin-left:auto} } /* ---------- 「我的」页底部的合规入口 ---------- * 隐私政策 / 用户协议必须让每个用户都够得着：不放进登录态分支， * 未登录也能看见（收集出生时间、卖 298 元服务，前提都是先给人看到协议）。 */ .melegal{ margin:26px 2px 4px;text-align:center; font-size:11.5px;line-height:1.9;color:var(--faint); padding-top:14px;border-top:1px dashed var(--line); } .melegal a{color:var(--sub);text-decoration:none;border-bottom:1px solid var(--line2)} .melegal a:hover{color:var(--gold);border-bottom-color:var(--goldLine)} .melegal i{font-style:normal;margin:0 7px;opacity:.45} .melegal-note{margin-top:5px;font-size:11px;color:var(--faint);opacity:.9} /* ---------- 结果页 ---------- */ /* 2026-10-24：一批 100 个名字之后结果页长达九千像素，筛选栏跟着滚走等于不存在。 改成吸顶贴在顶栏下沿（appbar 是 sticky top:0、min-height 50px）。 底色用**页面本色** --bg-rgb 的 88% + 磨砂，不要近白 —— 近白会在宣纸底上 显出一条横贯的浅色带（第一次改就是这么翻车的），同色磨砂才无缝。 只加定位与底色，chips 的大小、颜色、间距一个没动。 */ .filterbar{display:flex;gap:7px;overflow-x:auto;padding:2px 0 10px;-webkit-overflow-scrolling:touch; position:sticky;top:50px;z-index:20; background:rgba(var(--bg-rgb),.88); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); padding-top:9px;margin-top:-9px;} .filterbar::-webkit-scrollbar{display:none} .fchip{ flex:none;border:1px solid var(--line);background:var(--card);border-radius:var(--r-pill); padding:6px 12px;font-size:12px;color:var(--sub);white-space:nowrap; } .fchip.on{border-color:var(--pri);background:var(--pri);color:#fff;font-weight:500} /* 名字卡：整张卡都是「点开看命理报告」的入口（onclick=openDetail）。 * 2026-10-17 彪哥：「鼠标移到没有视觉反馈，估计人家都不知道点击还能查看命理， * 需要加一个视觉反馈效果，再加个音效，并提示点击查看命理报告」—— * 以前只有 cursor 默认箭头 + 没有任何 hover 变化，等于把整页最值钱的动作藏起来了。 * 现在的四层反馈：① 指针变手 ② 浮起 + 金边 + 投影 ③ 左侧金条展开 ④ 底部提示条点亮。 * 音效在 app.js 的 SFX.tap()（openDetail 里触发）。 */ .namecard{ position:relative; background:var(--card);border:1px solid var(--line);border-radius:var(--r-card); padding:13px 14px;margin-bottom:10px;display:flex;gap:12px;align-items:stretch; cursor:pointer;-webkit-tap-highlight-color:transparent; transition:transform .16s ease-out, box-shadow .22s ease-out, border-color .22s ease-out, background .22s ease-out; } /* 左侧金条：平时高度收成 0，鼠标移上去从中间往两头展开 */ .namecard::before{ content:'';position:absolute;left:0;top:50%;width:3px;height:calc(100% - 22px); background:var(--gold);border-radius:0 3px 3px 0; transform:translateY(-50%) scaleY(0);transform-origin:center; transition:transform .24s cubic-bezier(.2,.8,.3,1); } /* 鼠标设备才给 hover（触屏上 hover 会「粘住」，点了以后一直亮着） */ @media (hover:hover) and (pointer:fine){ .namecard:hover{ transform:translateY(-3px); border-color:var(--gold); background:#fff; box-shadow:0 14px 28px -16px rgba(64,50,24,.45), 0 3px 8px -4px rgba(64,50,24,.16); } .namecard:hover::before{transform:translateY(-50%) scaleY(1)} .namecard:hover .nc-name{color:var(--gold)} .namecard:hover .nc-hint{color:var(--gold);background:var(--goldSoft);border-color:var(--goldLine);opacity:1} .namecard:hover .nc-hint i{transform:translateX(4px)} } /* 按下：轻微下压，给手指一个「收到了」的回执 */ .namecard:active{ transform:translateY(0) scale(.988); border-color:var(--goldLine); box-shadow:0 2px 8px -4px rgba(64,50,24,.3); } /* 底部提示条：「点击查看命理报告」。手机上（没有 hover）也常驻显示， * 只是颜色比 hover 时淡 —— 触屏用户同样得知道自己能点。 * 做成一个小金签而不是一行灰字：灰字在说明文字堆里根本没人看， * 而这一句是整页最该被看见的话。 */ .nc-hint{ margin-top:auto;display:flex;align-items:center;justify-content:flex-end;gap:4px; width:max-content;margin-left:auto;padding:3px 9px; font-size:11.5px;color:var(--gold);letter-spacing:.3px;line-height:1.35; background:transparent;border:1px solid var(--line2);border-radius:999px; opacity:.72; transition:color .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease; } .nc-hint i{ font-style:normal;font-size:14px;line-height:1; transition:transform .22s cubic-bezier(.2,.8,.3,1); } @media (prefers-reduced-motion: reduce){ .namecard,.namecard::before,.nc-hint,.nc-hint i{transition:none!important} .namecard:hover,.namecard:active{transform:none!important} } /* 新版本提示条（2026-10-18） 位置：appbar 之后、所有视图之前，属于页面流——一打开就在顶上看到，滚下去就让位。 为什么不 fixed：手机上底部已有 tabbar + actbar，顶部再来一条常驻会吃掉两块版面； 这条是「顺便通知一句」，不是「拦着你」。点过「稍后」同一版本就不再出现。 配色：旧金（不是会员的墨玉青）——它代表「有新东西」，不代表付费。 */ .updatebar{ display:flex;align-items:center;gap:10px; margin:8px 12px 0;padding:10px 12px; background:linear-gradient(180deg,rgba(185,139,60,.085),rgba(185,139,60,.03)); border:1px solid var(--goldLine);border-left:3px solid var(--gold); border-radius:10px; opacity:0;transform:translateY(-5px); transition:opacity .26s ease,transform .26s ease; } .updatebar[hidden]{display:none} .updatebar.on{opacity:1;transform:none} .ub-ic{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center; font-size:11px;font-weight:700;color:var(--gold);background:rgba(185,139,60,.12)} .ub-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .ub-tx b{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:.2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ⚠ 这里必须只作用于说明文字：之前写成 .ub-tx span，把标题里的版本号 span 也吃成了 「两行截断块」，结果「新版本 v1.0.99」被竖着拆成三行，提示条 121px 高。 */ .ub-tx .ub-note{font-size:11.5px;line-height:1.6;color:var(--sub); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ub-go{flex:none;font-size:12.5px;font-weight:600;color:#fff;background:var(--gold); border:none;border-radius:999px;padding:6px 13px;cursor:pointer;white-space:nowrap} .ub-go:active{opacity:.85} .ub-x{flex:none;font-size:12px;color:var(--faint);background:none;border:none; padding:6px 2px;cursor:pointer;white-space:nowrap} @media (prefers-reduced-motion: reduce){ .updatebar{transition:none!important} } /* 工具箱「检查更新」右侧：有新版时用旧金强调，一眼看出「这里能点」 */ #verNow.hasnew{color:var(--gold);font-weight:600} /* 「发现新版本」弹窗里的改动清单 */ .upd-list{margin:10px 0 0;padding-left:18px;font-size:12.5px;line-height:1.9;color:var(--ink2)} .upd-list li{margin:2px 0} .upd-list li::marker{color:var(--gold)} @media (min-width:640px){ .updatebar{max-width:560px;margin:8px auto 0} } @media (min-width:1024px){ .updatebar{max-width:950px} } @media (min-width:1500px){ .updatebar{max-width:950px} } /* 会员区提示条（2026-10-18 撤掉大红心 · 体检报告 P1-2） 为什么撤：那颗 400px 粉红爱心跟宣纸 / 墨玉青 / 旧金三色系完全不搭，占首屏近一半， 还把真正的内容挤出屏外；名字被糊得看不清——用户既没看到名字，也没被说服。 现在是一条 56px 的墨玉青细条：一句话说清「还剩几个、免费看多少分、会员看多少分」， 想看真东西点「看示例」——真名真分，一颗，不糊。 全部动效只有 0.35 秒淡入，尊重系统「减少动态效果」。 */ .lockbar{ display:flex;align-items:center;gap:10px; margin:0 0 12px;padding:10px 13px; background:linear-gradient(180deg,rgba(44,90,78,.055),rgba(44,90,78,.02)); border:1px solid rgba(44,90,78,.16);border-left:3px solid var(--brand2); border-radius:10px;animation:lbIn .35s ease both; } @keyframes lbIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}} .lb-ic{flex:none;font-size:15px;color:var(--brand2);opacity:.75} .lb-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .lb-tx b{font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:.2px} .lb-tx span{font-size:11.5px;line-height:1.6;color:var(--sub)} .lb-tx a{color:var(--gold);cursor:pointer;margin-left:5px;white-space:nowrap; text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:.5px} .lb-go{flex:none;font-size:12.5px;font-weight:600;color:var(--gold);background:none; border:1px solid var(--goldLine);border-radius:999px;padding:6px 12px;cursor:pointer;white-space:nowrap} .lb-go:hover{background:rgba(185,139,60,.09)} @media (prefers-reduced-motion: reduce){ .lockbar{animation:none!important} } /* 访客提示条：一行说完「先给几个 + 去哪注册」，不再占一整块 */ .guesttip{ display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:8px 12px; border:1px solid rgba(185,139,60,.28);border-radius:10px;background:rgba(185,139,60,.055); } .guesttip .gt-t{flex:1;min-width:0;font-size:12px;line-height:1.55;color:var(--sub)} .guesttip .gt-t b{color:var(--gold);font-weight:600} .guesttip .gt-b{flex:none;font-size:12px;font-weight:600;color:var(--gold);background:none;border:0; padding:4px 2px;cursor:pointer;white-space:nowrap} /* 「看示例」弹层里的那张真名卡：不用打糊，就堂堂正正给一个 */ .lock-sample{margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--card)} .ls-top{display:flex;align-items:baseline;gap:9px} .ls-top b{font-size:21px;font-weight:600;letter-spacing:3px;color:var(--ink)} .ls-reason{margin-top:6px;font-size:12.5px;line-height:1.7;color:var(--ink2)} .ls-grid{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:5px 10px;margin-top:10px; font-size:11.5px;color:var(--sub)} .ls-grid .ls-k{color:var(--faint)} .ls-grid .ls-v{font-weight:600;color:var(--brand2)} .ls-note{margin-top:9px;font-size:11px;color:var(--faint)} /* 免责声明在结果网格里必须通栏：以前它按自动流占了「最后一个空格」， * 两列时右边挂着一行小字、左边是卡片，看着像漏排（彪哥 2026-10-17 截图）。 * 通栏 + 居中，退成一条脚注，不再参与卡片的行列争抢。 */ .cmt-disclaim{grid-column:1/-1;margin:12px 0 4px;font-size:11px;line-height:1.7;color:var(--faint);text-align:center} /* 分数：圆环已撤（彪哥 2026-10-17：「把分数外边的圈去掉，因为你不会做」）， * 回归跟在名字旁边的彩色数字 + 「分」 */ .nc-score{font-size:15px;font-weight:700;white-space:nowrap;margin-left:2px} .nc-score i{font-style:normal;font-size:10px;font-weight:500;margin-left:1px;letter-spacing:0} /* 卡片主体竖排：让底部提示签用 margin-top:auto 顶到底， * 同一行卡片等高（网格 stretch）时，所有提示签就在同一条线上。 */ .nc-main{flex:1;min-width:0;display:flex;flex-direction:column} .nc-top{display:flex;align-items:baseline;gap:8px} .nc-name{font-size:19px;font-weight:600;letter-spacing:2px} .grade{ font-size:11px;padding:2px 7px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--sub); } .grade.上吉{border-color:var(--gold);color:var(--gold)} .grade.吉{border-color:var(--pri);color:var(--pri)} .tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px} .tag{ font-size:11px;padding:2px 7px;border-radius:var(--r-pill); background:#F4F3EF;color:var(--sub); } .tag.wx{background:#EEF4FB;color:var(--shui)} .tag.gold{background:#FBF3E4;color:var(--gold)} /* 说明：最多两行。长短不一的点评句（「喜用与忌神混杂（忌「土」），换掉忌神字更佳」） * 以前会把某一张卡单独撑高，看着像排版没对齐；两行以后高度差控制在半行内。 */ .nc-why{font-size:12px;color:var(--sub);margin-top:8px;line-height:1.55; margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* 名字出处（优先诗词模式）：诗句用衬线、出处用细体，让「有来历」一眼看得见 */ .nc-poem{font-family:var(--serif);font-size:12.5px;color:var(--gold);margin-top:7px;line-height:1.6; letter-spacing:.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .poemcard{background:var(--goldSoft);border:1px solid var(--goldLine)} .pc-quote{font-family:var(--serif);font-size:16.5px;line-height:2;color:var(--ink);letter-spacing:.8px; margin-top:4px;text-indent:0} .pc-src{font-size:12px;color:var(--gold);margin-top:9px;letter-spacing:.5px} .pc-why{margin-top:9px;font-size:12.5px;color:var(--ink2);line-height:1.8; border-top:1px dashed var(--goldLine);padding-top:9px} /* 年代用字：徽标 / 结果页年代卡 / 高频字小片 */ .nc-era{font-size:12px;color:var(--brand);margin-top:7px;letter-spacing:.3px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nc-era::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%; background:var(--brand);margin-right:6px;vertical-align:1px;opacity:.6} .eracard{border-left:2px solid var(--goldLine)} .erachips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .erachip{font-family:var(--serif);font-size:14px;letter-spacing:1px;color:var(--ink); background:var(--goldSoft);border:1px solid var(--goldLine);border-radius:8px;padding:3px 9px} .star{flex:none;align-self:flex-start;font-size:17px;color:var(--line);padding:2px} .star.on{color:var(--gold)} /* 卡片右侧功能区（2026-10-24）：收藏 ★ 在上，对比按钮在下。 老板原话：「把那个对比直接就放到名字那块儿去……在他那个名字卡片上找一个合适的位置， 写上对比，这是功能按钮。」所以它是卡片内的按钮，不是底部那条操作栏。 ★ 与「对比」同列，纵向撑满卡片高度，卡片高矮不一时也贴在上下两端。 */ .nc-side{flex:none;display:flex;flex-direction:column;align-items:center; justify-content:flex-start;gap:7px;padding-left:2px;padding-right:1px} .cmpbtn{ font-family:inherit;font-size:11.5px;letter-spacing:1.5px;line-height:1; padding:6px 9px 6px 10px;border-radius:999px;cursor:pointer;white-space:nowrap; color:var(--gold);background:var(--goldSoft);border:1px solid var(--goldLine); transition:color .2s ease,background .2s ease,border-color .2s ease,transform .12s ease; -webkit-tap-highlight-color:transparent; } @media (hover:hover) and (pointer:fine){ .namecard:hover .cmpbtn{color:#fff;background:var(--gold);border-color:var(--gold)} } .cmpbtn:active{transform:scale(.94)} /* ---------- 名字对比页（2026-10-24）---------- 横向表格：第一列对比项固定不动，每个名字一列，列头就是那张「名字卡」 （名字 + 保存 + 移除）。名字多到十几个时整块左右滑，不挤成一团。 */ .cmp-h{display:flex;align-items:baseline;gap:10px;margin:2px 2px 10px;flex-wrap:wrap} .cmp-t{font-family:var(--serif);font-size:17px;color:var(--ink);letter-spacing:2px} .cmp-sum{flex:1;min-width:180px;font-size:11.5px;color:var(--faint);line-height:1.6} .cmpwrap{overflow-x:auto;-webkit-overflow-scrolling:touch; border:1px solid var(--line);border-radius:var(--r-card);background:var(--card)} .cmpt{border-collapse:separate;border-spacing:0;min-width:100%} .cmpt th,.cmpt td{ border-bottom:1px solid var(--line);padding:11px 13px; font-size:12.5px;line-height:1.6;text-align:left;vertical-align:middle;white-space:nowrap; } .cmpt tr:last-child th,.cmpt tr:last-child td{border-bottom:0} .cmpt thead th{background:var(--card);border-bottom:1px solid var(--goldLine)} .cmpt-k,.cmpt tbody th{ position:sticky;left:0;z-index:2;background:var(--card); color:var(--faint);font-weight:400;min-width:76px;letter-spacing:.5px; } .cmpt thead .cmpt-k{z-index:3} .cmptc{text-align:center!important;min-width:132px;vertical-align:top!important;padding-top:13px!important} .cc-name{font-family:var(--serif);font-size:15.5px;color:var(--ink);letter-spacing:2px;margin-bottom:8px;white-space:nowrap} .cc-save{ font-family:inherit;font-size:11.5px;line-height:1;padding:5px 12px;border-radius:999px; cursor:pointer;color:var(--ink2);background:transparent;border:1px solid var(--line2); white-space:nowrap;transition:all .2s ease; } .cc-save.on{color:#fff;background:var(--gold);border-color:var(--gold)} .cc-x{ font-family:inherit;font-size:13px;line-height:1;padding:2px 6px;margin-left:4px; cursor:pointer;color:var(--faint);background:transparent;border:0; } .cc-x:hover{color:var(--gold)} /* ---------- 详情报告页 ---------- */ .hero{text-align:center;padding:20px 0 16px} .hero .hname{font-size:30px;font-weight:600;letter-spacing:6px;margin-right:-6px} .hero .hmeta{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:9px;font-size:12px;color:var(--sub)} .hero .hscore{font-size:22px;font-weight:600;color:var(--gold)} .tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:14px} .tabs div{ flex:1;text-align:center;padding:10px 0;font-size:13px;color:var(--sub); border-bottom:2px solid transparent;margin-bottom:-1px; } .tabs div.on{color:var(--pri);border-bottom-color:var(--pri);font-weight:500} .tabpane{display:none} .tabpane.on{display:block} /* 八字四柱 */ .pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .pillar{ border:1px solid var(--line);border-radius:11px;padding:10px 4px;text-align:center;background:var(--card); } .pillar.day{border-color:var(--gold);background:var(--goldSoft)} .pillar .pk{font-size:10px;color:var(--faint)} .pillar .pg{font-size:17px;font-weight:600;margin:3px 0;letter-spacing:1px} .pillar .pw{font-size:10px;color:var(--sub)} /* 五行分布 */ .wxrow{display:flex;align-items:center;gap:9px;margin-bottom:9px} .wxname{width:22px;font-size:12.5px;flex:none;font-weight:600;line-height:1} .wxbar{ flex:1;height:9px;background:#EAE5DB;border-radius:5px;overflow:hidden; box-shadow:inset 0 1px 2px rgba(80,60,35,.13); } .wxfill{ display:block;height:100%;border-radius:5px; transition:width .45s cubic-bezier(.2,.7,.3,1); box-shadow:inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(0,0,0,.06); } .wxrow:not(.zero) .wxfill{min-width:7px} .wxval{width:46px;text-align:right;font-size:11.5px;color:var(--sub);flex:none;font-variant-numeric:tabular-nums} .wxrow.zero .wxname{color:var(--pri);font-weight:600} .wxrow.zero .wxval{color:var(--pri);font-weight:600} .wxrow.zero .wxbar{ background:repeating-linear-gradient(135deg,#F3E7E3 0 5px,#FBF4F1 5px 10px); box-shadow:none; } /* 五格五宫格 */ .wuge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .wg{ border:1px solid var(--line);border-radius:11px;padding:9px 6px;text-align:center;background:var(--card); } .wg.main{border-color:var(--gold);background:var(--goldSoft)} .wg .wk{font-size:10px;color:var(--faint)} .wg .wv{font-size:18px;font-weight:600;margin:2px 0} .wg .wj{font-size:10px;color:var(--sub)} .wg.span2{grid-column:span 1} .kv{display:flex;gap:10px;font-size:12px;padding:7px 0;border-bottom:1px dashed var(--line)} .kv:last-child{border-bottom:0} .kv .k{width:64px;flex:none;color:var(--faint)} .kv .v{flex:1;color:var(--text)} /* 结论卡 */ .concl{ background:#FBF3E4;border:1px solid #EFE0C4;border-radius:11px;padding:11px 13px; font-size:12px;line-height:1.65;color:#6B5426; } .concl b{color:var(--gold)} /* ---------- 工具箱 ---------- */ .grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .tile{ background:var(--card);border:1px solid var(--line);border-radius:var(--r-card); padding:14px 6px;text-align:center; } .tile .ti{font-size:20px;line-height:1} .tile .tn{font-size:12px;margin-top:7px;color:var(--text)} .tile .td{font-size:10px;color:var(--faint);margin-top:2px} .listrow{ display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line); } .listrow:last-child{border-bottom:0} .listrow .lname{font-size:15px;letter-spacing:1px;flex:none} .listrow .lmeta{flex:1;min-width:0;font-size:12.5px;color:var(--faint)} /* 收藏 / 方案这些「点一下就能看报告」的行，也要显得能点。 * 2026-10-17 彪哥：「不是一个事全部名字卡都要有」—— 名字卡不只结果页那一种， * 收藏列表、方案列表同样是名字卡，以前光秃秃一行、没有箭头没有反应。 */ .listrow.tap{cursor:pointer;border-radius:8px;transition:background .16s ease, box-shadow .2s ease} .listrow.tap:active{background:var(--goldSoft)} .lr-go{ flex:none;font-style:normal;font-size:15px;line-height:1;color:var(--faint);opacity:.55; transition:color .18s ease, opacity .18s ease, transform .2s cubic-bezier(.2,.8,.3,1); } @media (hover:hover) and (pointer:fine){ .listrow.tap:hover{background:var(--goldSoft)} .listrow.tap:hover .lname{color:var(--gold)} .listrow.tap:hover .lr-go{color:var(--gold);opacity:1;transform:translateX(3px)} } @media (prefers-reduced-motion: reduce){ .listrow.tap,.lr-go{transition:none!important} .listrow.tap:hover .lr-go{transform:none!important} } /* ---------- 底部栏 ---------- */ .tabbar{ position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--card); border-top:1px solid var(--line);display:flex;height:var(--tabbar-h); padding-bottom:env(safe-area-inset-bottom); } .tabbar a{ flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; font-size:10px;color:var(--faint);position:relative; } .tabbar a.on{color:var(--pri)} .tabbar svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7} /* 有新版时「工具箱」角上的小金点：点过「稍后」的人，事后从这里找得到更新入口 */ .tabbar a .nub{ position:absolute;top:5px;left:calc(50% + 5px); width:6px;height:6px;border-radius:50%;background:var(--gold); box-shadow:0 0 0 2px var(--card); } /* 结果页底部操作条 */ .actbar{ position:fixed;left:0;right:0;bottom:var(--tabbar-h);z-index:35;background:var(--card); border-top:1px solid var(--line);padding:9px 16px;display:flex;gap:10px; padding-bottom:calc(9px + env(safe-area-inset-bottom)); } .actbar .btn{flex:1} /* ============ 底部浮条：滚到中后段才浮出来 ============ 主人 2026-10-24 原话：「生成名字之后要排很多名字，往下拉，到最后想回到顶上， 还得搁鼠标滚。现在拉到最底下或者中部以下了，你就给它在最底下弄一个导航栏儿， 有功能的 —— 关于（写咱们这个网站的文化）、回到顶部，还有什么功能放到那栏里。」 又补一句：「那个导航栏开始是不出来的，走到中部或中下部的时候，它那块会显示出来。」 所以它是**浮层**，不是常驻条：进页面时完全看不见（translateY 藏到屏幕外）， 滚过中段由 JS 加 .on 浮起。底下本来就有「换一批」操作条，两条不能叠， 底部偏移由 JS 按操作条实测高度算（见 syncDockBottom）。 配色沿用全站的宣纸底 + 墨玉青 + 旧金，不做第二套视觉。 */ .dockbar{ position:fixed;left:0;right:0;z-index:34; bottom:calc(var(--tabbar-h) + 10px); display:flex;justify-content:center;padding:0 12px; opacity:0;transform:translateY(16px);pointer-events:none; transition:opacity .26s ease,transform .3s cubic-bezier(.2,.8,.3,1); } .dockbar.on{opacity:1;transform:none;pointer-events:auto} .dockbar .dk{ display:flex;align-items:center;gap:2px;padding:5px; background:rgba(var(--bg-rgb),.95); border:1px solid var(--line);border-radius:999px; box-shadow:0 8px 26px rgba(24,38,33,.18),inset 0 1px 0 rgba(255,255,255,.95); backdrop-filter:blur(10px) saturate(1.15); -webkit-backdrop-filter:blur(10px) saturate(1.15); max-width:100%; } /* 2026-10-25 22:45 主人：「把这个变得长的和功能区对齐」。 原来是一条居中的小胶囊，宽度由内容撑开，和上面的卡片列对不齐。 现在桌面上直接拉成内容列那么宽（.view 是 950px、padding 26px → 卡片实际 898）， 四项均分；手机上仍是居中胶囊（屏幕本来就只有那么宽）。 */ @media (min-width:701px){ body.app .dockbar{padding:0 26px} /* 871 是输入页卡片的实测宽度（.view 950 − padding 52 − 卡片自身左右余量 27） */ body.app .dockbar .dk{width:100%;max-width:871px;justify-content:space-around} } @media (min-width:1500px){ body.app .dockbar .dk{max-width:871px} } .dockbar .dk-i{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; min-width:56px;padding:6px 9px;border:0;background:transparent;border-radius:999px; font-family:var(--sans,inherit);font-size:11px;line-height:1.1;letter-spacing:.3px; color:var(--ink2);cursor:pointer;text-decoration:none; transition:background .16s ease,color .16s ease; } .dockbar .dk-i svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} .dockbar .dk-i:hover,.dockbar .dk-i:focus-visible{background:var(--brandSoft);color:var(--brand)} /* 回到顶部：整条里唯一带金的一项 —— 滚到中段时人最想干的事 */ .dockbar .dk-i.dk-top{color:var(--brand)} .dockbar .dk-i.dk-top svg{stroke-width:1.9} .dockbar .dk-sep{width:1px;height:22px;background:var(--line);flex:none;margin:0 2px} /* 桌面这栏只有 4 项（官网已在顶栏），手机上把「更新记录」藏掉省地方 */ @media (max-width:640px){ .dockbar .dk-i{min-width:52px;padding:6px 7px;font-size:10.5px} .dockbar .dk-i.dk-hide-sm{display:none} } /* ---------- 底部浮条压住内容（2026-10-29 实测修） ---------- body 的 padding-bottom 只算了 tabbar（56px），没算浮出来的 .dockbar。 390×844 实测：最后一张卡片里的「加到手机桌面」在 y=703~749， 浮条从 724 起 —— 被盖掉 25px，滚到底也点不到（Playwright 点它直接超时， 报的正是 "dockbar subtree intercepts pointer events"）。 现在给到 56 + 72 + 安全区 = 128，浮条顶边在距底 120，还剩 8px 余量。 只在手机/平板生效：桌面端 tabbar 收进顶栏，body.app 另有 32px 的规则。 */ @media (max-width:1023px){ body.app{padding-bottom:calc(var(--tabbar-h) + 72px + env(safe-area-inset-bottom))} } /* ---------- 弹层 ---------- */ .sheet{ position:fixed;inset:0;z-index:60;background:rgba(28,28,26,.42); display:none;align-items:flex-end; } .sheet.on{display:flex} .sheet .inner{ width:100%;background:var(--bg);border-radius:16px 16px 0 0;padding:18px 16px calc(20px + env(safe-area-inset-bottom)); max-height:86vh;overflow-y:auto; } .sheet h3{margin:0 0 10px;font-size:15px} .toast{ position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(8px); background:rgba(28,28,26,.9);color:#fff;font-size:12px;padding:8px 16px;border-radius:var(--r-pill); opacity:0;pointer-events:none;z-index:80;transition:.22s; } .toast.on{opacity:1;transform:translateX(-50%) translateY(0)} /* 广告遮罩 */ .admask{ position:fixed;inset:0;z-index:90;background:rgba(28,28,26,.72); display:flex;align-items:center;justify-content:center;padding:22px; } .adbox{background:var(--bg);border-radius:var(--r-card);padding:14px;width:100%;max-width:340px;text-align:center} .admedia{width:100%;max-height:220px;object-fit:contain;border-radius:8px;background:#000} .adtag{font-size:10px;color:var(--faint);text-align:left;margin-bottom:6px} .adtitle{font-size:13px;margin:9px 0 4px} .adlink{font-size:12px;color:var(--pri)} .adgo{width:100%;margin-top:10px} .adsub{font-size:10px;color:var(--faint);margin-top:6px} /* 空态 */ .empty{text-align:center;color:var(--faint);font-size:12px;padding:40px 20px;line-height:1.9} .note{font-size:12px;color:var(--faint);line-height:1.65;margin:0 0 10px} /* 对比 */ .cmp{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .cmpcol{border:1px solid var(--line);border-radius:11px;padding:11px 8px;text-align:center;background:var(--card)} .cmpcol .cn{font-size:16px;font-weight:600;letter-spacing:1px} .cmpcol .cs{font-size:13px;color:var(--gold);margin-top:3px;font-weight:600} .cmpcol .cr{font-size:10px;color:var(--faint);margin-top:6px;line-height:1.5} /* 档案 */ .arc{ display:flex;align-items:center;gap:11px;padding:11px 13px; border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);margin-bottom:9px; } .arc.on{border-color:var(--pri)} .arc .ai{width:34px;height:34px;border-radius:50%;background:#F0EEE9;display:grid;place-items:center;font-size:15px;flex:none} .arc .an{font-size:14px} .arc .am{font-size:11px;color:var(--faint);margin-top:1px} .arc .arowbtns{display:flex;flex-direction:column;gap:6px;flex:none;text-align:right} .arc .arowbtns .faint{cursor:pointer;white-space:nowrap} .arc .arowbtns .faint:hover{color:var(--pri)} .arc .arowbtns .faint.danger:hover{color:var(--huo)} .sl{font-size:12px;color:var(--faint);margin-bottom:2px} .sl+.inp,.sl+input,.sl+select{margin-top:0} /* ---------- 会员 ---------- */ .rolebadge{ font-size:11px;padding:3px 9px;border-radius:20px;cursor:pointer;flex:none; border:1px solid var(--line);color:var(--faint);background:transparent; } .rolebadge.member{color:var(--brand2);border-color:var(--brandSoft);background:var(--brandSoft)} .rolebadge.master{color:var(--gold);border-color:var(--gold2);background:var(--goldSoft)} /* 顶栏用户徽标：登录显示「昵称 · 会员版/免费版」，未登录显示「登录 / 注册」 */ .userchip{ display:inline-flex;align-items:center;gap:6px;flex:none;max-width:46vw; font-size:12px;padding:5px 11px;border-radius:20px;cursor:pointer; border:1px solid var(--line);background:var(--card);color:var(--sub);line-height:1;white-space:nowrap; } .userchip .uc-nick{font-weight:600;color:var(--text);max-width:26vw;overflow:hidden;text-overflow:ellipsis} .userchip .uc-ver{font-size:10px;padding:1px 6px;border-radius:10px;flex:none;color:var(--gold);border:1px solid var(--gold2);background:var(--goldSoft)} .userchip.on.master .uc-nick{color:var(--gold)} .userchip.guest{color:var(--gold);border-color:rgba(185,139,60,.45);background:rgba(185,139,60,.10);font-weight:600} .quota{ font-size:11px;color:var(--faint);padding:7px 11px;border-radius:9px; background:#F6F4F0;margin-top:8px;line-height:1.7; } .quota.warn{background:#FCEBEB;color:#A32D2D} .quota.ok{background:var(--brandSoft);color:var(--brand2)} .quota b{color:inherit;font-weight:600} .qlink{color:var(--gold);margin-left:8px;cursor:pointer;text-decoration:underline} .plans{display:flex;flex-direction:column;gap:9px;margin-top:12px} .plan{ border:1px solid var(--line);border-radius:12px;padding:12px 13px;cursor:pointer;background:var(--card); } .plan.on{border-color:var(--pri);background:var(--brandSoft)} .plan.hot{border-color:var(--gold)} .plan .pn{font-size:14px;font-weight:600;display:flex;align-items:center;gap:7px} .plan .ptag{font-size:10px;background:var(--gold);color:#fff;border-radius:4px;padding:1px 6px;font-weight:400} .plan .pp{font-size:13px;color:var(--gold);margin-top:4px;font-weight:600} .plan .pf{font-size:11px;color:var(--faint);margin-top:6px;line-height:1.6} .plan .pnow{font-size:10px;color:var(--pri);margin-top:6px} .tabs div.locked{color:var(--faint)} .memb{border-color:var(--line)} .memb.member{border-color:var(--brandSoft);background:#F3FAF8} .memb.master{border-color:var(--gold2);background:var(--goldSoft)} .mseal{ width:38px;height:38px;border-radius:9px;flex:none;display:grid;place-items:center; font-size:16px;color:#fff;background:#B4B2A9; } .memb.member .mseal{background:var(--brand2)} .memb.master .mseal{background:#BA7517} /* ---------- 响应式骨架 ---------- 本产品主场景是手机：默认（<640px）保持 App 形态 —— 单栏 + 底部 tabbar + 底部上滑弹层，全部按拇指操作设计。 平板 640–1023：原样居中 560px，不做改动。 桌面 ≥1024：换一套真正的宽屏布局（左侧导航 + 宽内容 + 多列卡片 + 居中对话框）， 而不是把手机版硬塞进窄框里。 */ /* —— 平板：原样居中 —— */ @media (min-width:640px) and (max-width:1023.98px){ .appbar{ max-width:560px;margin:0 auto; box-shadow:0 0 0 100vmax var(--bg);clip-path:inset(0 -100vmax); } .tabbar,.actbar{ max-width:560px;margin:0 auto; box-shadow:0 0 0 100vmax var(--card);clip-path:inset(0 -100vmax); } .view{max-width:560px;margin:0 auto} .sheet .inner{max-width:560px;margin:0 auto} } /* —— 桌面：真正的宽屏布局 —— ⚠ 2026-10-15 修「首页左侧空着、右侧挨边」：这一段原本是**全局**的 （`body{padding-left:232px}`），于是官网首页、会员页、404 在宽屏下 统统被塞了 232px 左内边距 —— 给起名页让出来的侧栏，白占了半张屏。 现在全部收进 body.app：只有起名页（App 外壳）才有左侧导航栏， 其余页面用 .wrap 居中容器。改这一处，别再加全局规则。 */ @media (min-width:1024px){ /* 2026-10-24 主人重排（附截图圈了三个区域）： 「把区域一（起名/工具箱/我的）放到功能栏的顶上那一层，跟赐名堂 logo 一个平行线」。 原设计是 body{padding-left:232px} + .tabbar 固定成左侧 232px 竖栏 —— 那一条 白占掉一竖条屏幕，主人嫌「占了一个面积」。现在： · body 不再让出左内边距，整页横向铺满 · .tabbar 由 JS 的 dockTabbar() 搬进 .appbar，横排贴在 logo 右边 · 搬进去之前先 display:none，避免桌面上闪一下底部那条 */ body.app{padding-left:0;padding-bottom:32px} body.app .tabbar{display:none} body.app .tabbar.docked{ display:flex;position:static;width:auto;height:auto; flex-direction:row;align-items:center;gap:3px; padding:0 0 0 18px;border:0;background:transparent; } body.app .tabbar.docked a{ flex:none;flex-direction:row;align-items:center;gap:7px; padding:6px 11px;border-radius:8px;font-size:13px;color:var(--ink2); } body.app .tabbar.docked a.on{background:var(--brandSoft);color:var(--brand);font-weight:600} body.app .tabbar.docked a:hover{background:#F4F2ED} body.app .tabbar.docked svg{width:15px;height:15px} body.app .tabbar.docked a .nub{display:none} /* 2026-10-29 23:1x 主人：「首页顶上那一行是顶到屏幕两头的，到宝宝起名这页就不顶到头了， 跟功能栏对齐了，这个设计是对的吗？」 —— 之前是我把顶栏整条压成 1000 宽居中，所以底色只铺到内容栏，两边留白， 跟官网那条通栏细带不是一套。现在改成：**底色通栏**（跟官网一样顶到两头）， 里面的品牌与按钮仍然卡在内容栏上，左右内边距用 calc 把这段留白补出来， 视觉上底带连贯、字还是和下面的功能区对齐。 ★ 2026-10-30 14:4x 主人（第三次为这件事发火）：「所有页头都按首页的改」。 原来这里写的是 950，是我自己按截图比例折算出来的数，比官网首页那条窄了 210px， 所以起名三页的页头永远比首页"收进去一块"。现在统一回首页的 1160（.wrap 同值）， 内容区 .view 仍是 950 —— 页头按首页走，表单不动。 */ body.app .appbar{ max-width:none;margin:0; padding:12px max(26px, calc((100% - 1160px) / 2 + 24px)); } /* 底部留白要盖住固定操作条（否则最后一行卡片被压在条下） */ body.app .view{max-width:950px;margin:0 auto;padding:22px 26px 104px} body.app .actbar{left:0;right:0;bottom:0;width:950px;max-width:100%;margin:0 auto;padding:11px 26px} /* 底部上滑弹层 → 居中对话框 */ body.app .sheet{align-items:center;justify-content:center} body.app .sheet .inner{ width:100%;max-width:600px;border-radius:16px; padding:24px 24px 26px;max-height:82vh; } /* 列表 → 多列，把宽度用起来。 必须用 minmax(0,1fr)：卡片里的「出处」是不换行文本（省略号截断）， 而 nowrap 元素的 min-content 仍是整句宽，1fr 轨道会被它撑开 → 整列变宽、列表冲出屏幕右侧。 2026-10-17 彪哥「名字模块布局不均匀」： ① 去掉 align-items:start —— 它让每张卡按各自内容撑高，同一行两张卡一高一矮、底边参差； 默认 stretch 才会让同一行的卡等高，配上卡内 .nc-hint 的 margin-top:auto， 所有「点击查看命理报告」标签落在同一条水平线上，整片列表才像排版而不是砖头乱堆。 ② 只有 3 个名字时（访客/免费首批）两列必然剩一个空格 + 免责小字孤零零挂在右边 → 这种数量改走居中单列，卡片放宽到 760px，读起来舒展、也没有空位。 */ body.app #resultList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px} body.app #resultList.rl-single{grid-template-columns:minmax(0,1fr);max-width:760px;margin:0 auto} /* 结果页顶部的说明（诗典口径 / 年代用字偏好）整体占一整行，不跟名字卡抢格子 */ body.app .rl-notes{grid-column:1/-1;display:grid;gap:11px;align-items:start} body.app .rl-notes>.card{margin:0} /* 最低高度：内容少的卡（没有年代行 / 没有诗词出处）以前只有 130px 上下， * 与旁边的 170px 排在一起，整行高低跳。158px 是不带任何附加行的卡的自然高度， * 让每一行的「块感」接近，差出来的空间由底部提示签的 auto 外边距吸收。 */ body.app .namecard{margin-bottom:0;min-height:158px} body.app .grid6{grid-template-columns:repeat(4,1fr)} body.app #pane-arc{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} body.app .cmp{gap:12px} } @media (min-width:1500px){ /* 顶栏保持通栏（跟首页一样顶到两头），内容栏对齐 1160 的 .wrap； 不再把 appbar 整体限宽（那样会破坏通栏、跟首页不一致）。 */ body.app .appbar{max-width:none;padding:12px max(26px,calc((100% - 1160px) / 2 + 24px))} body.app .view{max-width:950px} body.app .actbar{width:950px;max-width:calc(100% - 132px)} body.app #resultList{grid-template-columns:repeat(3,minmax(0,1fr))} body.app .grid6{grid-template-columns:repeat(6,1fr)} } /* —— 桌面·起名页：一条标题 + 一张面板（2026-10-24 · 主人圈图重排后二次收拾） —— 第一轮重排把三块位置摆对了，但首屏还剩三个毛病： ① 离线/本地/15项 那行细字**飘在标题和表单之间**，谁也不挨着，看着像掉下来的碎屑； ② 体检入口（金条）+ 姓氏～出生（白面板）+ 字辈/避讳/补五行（另一张卡）是**三套皮肤**， 一眼看过去像三个不相干的组件堆在一起； ③ 标题 24px 在左、说明文字一行半靠左，右边空一大片，重心偏左。 这一轮只做收拾，不动任何文案与功能： · 离线/本地/15项 → 归位到「开始起名」按钮下面，做收尾，不再夹在中间 · 体检入口 → 保留金底当唯一亮点，与白面板留 12px 气口，不再挤成一团 · 字辈/避讳/补五行 → 并进同一张白面板（原来是一张单独小卡） · 说明文字 → 限宽右对齐，跟标题一左一右撑满 DOM 仍一个没动（JS 全靠 #surname / #birthDate 这些 id），只用 flex + order 重排。 */ @media (min-width:1120px){ body.app #view-input.on{display:flex;flex-direction:column} /* 标题条：标题在左，说明限宽沉到右边，左右各占一头。 2026-10-29：加 flex-wrap，好让价格带那层（flex-basis:100%）能落到第二行， 不跟标题说明挤在一排。 */ body.app #view-input .v3-hero{ order:-3;display:flex;flex-wrap:wrap;align-items:flex-end;gap:30px;padding:24px 0 20px; } body.app #view-input .v3-hero .kick{position:absolute;opacity:0;pointer-events:none} body.app #view-input .v3-hero h1,body.app #view-input .v3-hero h1,.v3-hero h2{ font-size:24px;letter-spacing:2px;margin:0;line-height:1.28;white-space:nowrap;flex:none; } body.app #view-input .v3-hero h1 br,body.app #view-input .v3-hero h2 br{display:none} body.app #view-input .v3-hero .orn{display:none} /* 2026-10-29 23:0x 主人：「小字改成一行，小字的底跟大字的底保持在一个平行线上」。 做法：这一行不许折（nowrap）、宽度按内容走；容器原本 align-items:center， 改成 flex-end 之后，标题和这句话的底边落在同一条水平线上。 line-height 收到 1.45 —— 1.8 会让这行字底下多出一截空白，看着比标题「低」半格。 */ body.app #view-input .v3-hero p{ margin:0 0 0 auto;flex:0 1 auto;font-size:12px;line-height:1.45;color:var(--ink2); text-align:right;white-space:nowrap; } /* 体检入口：唯一一块金底，单独一条，与下面面板留一口气 */ body.app #view-input .v3-checkrow{ order:-2;margin:0 0 12px;padding:12px 16px; } body.app #view-input .v3-checkrow .ic{width:28px;height:28px;border-radius:8px} body.app #view-input .v3-checkrow .ic svg{width:15px;height:15px} body.app #view-input .v3-checkrow .tx b{font-size:13px} body.app #view-input .v3-checkrow .tx span{font-size:10.5px;margin-top:2px} /* 面板：姓氏→出生→字辈/避讳/补五行 连成一整张，中间只用细线分隔 */ body.app #view-input > .field{ margin:0;padding:15px 18px;border-radius:0; border:1px solid var(--line);border-top:0;border-bottom:0; } /* 首尾标记 p-first / p-last 由 app.js 的 markPanelEnds() 打上。 不能写 :first-of-type —— 它按 div 计数，前面的 .v3-hero 抢了第一， 结果第一个字段永远匹配不到，面板顶部就没边没圆角。 */ body.app #view-input > .field.p-first{ border-top:1px solid var(--line);border-radius:var(--r-card) var(--r-card) 0 0; } body.app #view-input > .field + .field{border-top:1px solid var(--line2)} body.app #view-input > .field.p-last{border-bottom:0} /* 「更多选项」原来是面板外单独一张小卡 → 并进面板，去掉自己的圆角与描边 */ body.app #view-input > .morebox{margin:0} body.app #view-input > .morebox .card{ margin:0;padding:15px 18px;border-radius:0; border:1px solid var(--line);border-top:1px solid var(--line2);border-bottom:0; background:var(--card); } /* 面板收口永远在这张卡上（它紧接最后一个 .field） */ body.app #view-input > .morebox .card{ border-bottom:1px solid var(--line);border-radius:0 0 var(--r-card) var(--r-card); } /* 开始起名：接着面板，留足够气口 */ body.app #view-input > .bigbtn{margin-top:18px} /* 离线 / 本地 / 15 项：归位到按钮下面做收尾，一行居中细字，不再占一整条边框 */ body.app #view-input .v3-trust{ order:0;display:flex;justify-content:center;align-items:baseline;gap:0; margin:16px 0 0;padding:0;border:0; } body.app #view-input .v3-trust div{ flex:0 0 auto;display:flex;align-items:baseline;gap:6px;text-align:left;padding:0 16px; position:relative; } body.app #view-input .v3-trust div+div::before{ content:'';position:absolute;left:0;top:2px;bottom:2px;width:1px;background:var(--line);display:block; } body.app #view-input .v3-trust b{font-family:inherit;font-size:12px;color:var(--ink2);letter-spacing:.5px;display:inline} body.app #view-input .v3-trust span{font-size:11px;margin:0;color:var(--faint);letter-spacing:.5px;display:inline} /* 手机上那 14px 占位条在这里是多余的 */ body.app #view-input > div[style*="height:14px"]{display:none} } /* ===== 完整命理报告（子平八字） ===== */ .bztab{width:100%;table-layout:fixed;border-collapse:collapse;font-size:11px} .bztab td,.bztab th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bztab .cg{white-space:normal;word-break:break-all;line-height:1.5} .bztab th{font-weight:500;color:var(--faint);font-size:10px;padding:0 0 6px;text-align:left} .bztab td{padding:6px 4px;border-top:1px dashed var(--line);vertical-align:middle} .bztab tr.day td{background:var(--goldSoft)} .bztab tr.day .pk{color:var(--gold);font-weight:600} .bztab .pk{font-size:10px;color:var(--faint);width:30px} .bztab .gz b{font-size:15px;font-weight:600;letter-spacing:1px} .bztab .gz .faint{font-size:15px;font-weight:600;margin-left:1px} .bztab .ss{font-size:11px;color:var(--sub);width:44px} .bztab .cg{font-size:10px} .bztab .cgw{margin-right:5px;white-space:nowrap} .bztab .cgw i{font-style:normal;color:var(--faint);font-size:9px;margin-left:1px} .bztab .ny{font-size:10px;color:var(--faint);text-align:right} /* 强弱条 */ .strbar{position:relative;height:6px;background:#EFEDE7;border-radius:4px;margin:8px 0 2px;overflow:hidden} .strfill{position:absolute;left:0;top:0;bottom:0;background:var(--ink);border-radius:4px;opacity:.55} .strmid{position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:var(--gold)} /* 喜忌标签 */ .wxtag{display:inline-block;color:#fff;font-size:11px;font-weight:600; padding:2px 9px;border-radius:11px;margin-right:5px;vertical-align:middle} .wxtag.yong{box-shadow:0 0 0 2px var(--gold)} .wxtag.ji,.wxtag.chou{opacity:.9} .reasons{margin-top:8px;padding:9px 11px;background:#F7F6F2;border-radius:8px;font-size:11px;line-height:1.8;color:var(--sub)} .reasons p{margin:0} /* 五行说明 */ .mixline{font-size:11px;line-height:1.8;margin-top:6px;color:var(--sub)} .mixline u{text-decoration:none;border-bottom:1px solid var(--pri);color:var(--pri)} /* 本名喜忌对照 */ .hitwrap{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:6px 0 2px} .namehit{display:inline-flex;flex-direction:column;align-items:center;gap:1px; min-width:44px;padding:7px 9px;border-radius:10px;border:1.5px solid var(--line);background:#fff} .namehit b{font-size:19px;font-weight:600;line-height:1.1} .namehit i{font-style:normal;font-size:10px;color:var(--sub)} .namehit u{text-decoration:none;font-size:9px;color:#fff;border-radius:7px;padding:1px 6px;margin-top:2px} .namehit.yong{border-color:var(--gold);background:var(--goldSoft)} .namehit.yong u{background:var(--ink)} .namehit.xi{border-color:#C9D6CE} .namehit.xi u{background:#4E7A63} .namehit.xian u{background:#A8A398} .namehit.ji{border-color:var(--pri);background:var(--brandSoft)} .namehit.ji u{background:var(--pri)} .namehit.chou u{background:#8A5A4A} .hitsep{color:var(--faint);font-size:13px} .subsec{font-size:10px;color:var(--faint);letter-spacing:1px;margin:10px 0 2px} /* 大运 */ .dylist{display:grid;grid-template-columns:repeat(4,1fr);gap:7px} @media (max-width:400px){ /* 窄屏优先保住四柱与十神，纳音列让位 */ .bztab .ny{display:none} .bztab th:last-child{display:none} .bztab .cg{font-size:9px} .dylist{grid-template-columns:repeat(4,1fr);gap:5px} .dy .dygz{font-size:12px} } .dy{text-align:center;padding:7px 2px;border:1px solid var(--line);border-radius:9px;background:#fff} .dy.on{border-color:var(--gold);background:var(--goldSoft)} .dy .dygz{font-size:13px;font-weight:600;letter-spacing:1px} .dy .dyage{font-size:9px;color:var(--faint);margin-top:2px} .dy.on .dyage{color:var(--gold)} /* ================================================================== 运营后台（admin.html）样式 设计语言与 C 端一致：墨青 + 暖金，浅底、细边框、不靠阴影 断点：<900 侧栏收窄；<640 侧栏改为顶部横向滚动条 ================================================================== */ body.admin{ padding-bottom:0; /* 背景与 C 端同源（沿用全站水墨层），不再单独覆盖，保证每页观感一致 */ } /* ---------- 登录 ---------- */ .login{position:fixed;inset:0;z-index:100;background:rgba(247,246,242,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px} .login .box{ width:100%;max-width:340px;background:var(--card);border:1px solid var(--line); border-radius:16px;padding:28px 24px;text-align:center; } .login .seal{margin:0 auto 14px} .login .hint{font-size:11px;color:var(--faint);line-height:1.6} /* ---------- 布局 ---------- */ .adm{display:flex;min-height:100vh} .side{ width:232px;flex:none;background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border-right:1px solid var(--line); padding:16px 12px;display:flex;flex-direction:column;gap:2px; } .side .brand{padding:0 8px 14px;font-size:15px} .side a{ padding:9px 12px;border-radius:9px;font-size:13px;color:var(--sub); cursor:pointer;transition:background .15s,color .15s; } .side a:hover{background:#F4F3EE;color:var(--text)} .side a.on{background:var(--pri);color:#fff} .side a[href]{margin-top:2px} .main{flex:1;min-width:0;padding:22px 26px 40px} .main h1{font-size:19px;font-weight:600;margin:0 0 18px;letter-spacing:.5px} /* ---------- 面板 ---------- */ .panel{ background:var(--card);border:1px solid var(--line);border-radius:var(--r-card); padding:16px 18px;margin-bottom:14px; } .panel h2{font-size:13px;font-weight:600;margin:0 0 4px;letter-spacing:.3px} .panel .hint{font-size:11px;color:var(--faint);line-height:1.7;margin:2px 0 0} .panel .hint b{color:var(--gold);font-weight:600} .panel .field{padding:0;border:0;background:transparent;margin-top:12px} .panel .field label{display:block;font-size:11px;color:var(--sub);margin-bottom:5px} .panel .field .inp{ border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:13px; background:#fff;width:100%; } .panel .field .inp:focus{border-color:var(--gold)} .panel .field textarea.inp{min-height:64px;resize:vertical;line-height:1.6} .panel > button.abtn{margin-top:14px} /* KPI 网格 */ .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px} .kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:14px 16px} .kpi .n{font-size:22px;font-weight:600;letter-spacing:.5px;line-height:1.2} .kpi .l{font-size:11px;color:var(--sub);margin-top:2px} /* ---------- 按钮 ---------- */ .abtn{ border:1px solid var(--pri);background:var(--pri);color:#fff; padding:8px 18px;border-radius:var(--r-btn);font-size:13px;cursor:pointer; transition:opacity .15s; } .abtn:hover{opacity:.88} .abtn.sec{border-color:var(--line);background:#fff;color:var(--sub)} .abtn.sec:hover{border-color:var(--pri);color:var(--pri);opacity:1} .abtn.dang{border-color:#E8D6D2;background:#fff;color:var(--huo)} .abtn.dang:hover{border-color:var(--huo);color:var(--huo);opacity:1} .abtn.cur{border-color:var(--pri);background:var(--pri);color:#fff} .abtn.cur:hover{opacity:1;color:#fff} /* ---------- 标签 ---------- */ .pill{ display:inline-block;font-size:10px;padding:1px 7px;border-radius:7px; border:1px solid var(--line);color:var(--sub);background:#fff;white-space:nowrap; } .pill.cur{border-color:var(--pri);color:var(--pri);background:var(--brandSoft)} /* ---------- 表格 ---------- */ table{width:100%;border-collapse:collapse;font-size:12px} thead th{ text-align:left;font-weight:600;color:var(--sub);font-size:11px; padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap; } tbody td{padding:10px;border-bottom:1px solid #F2F1EC;vertical-align:middle} tbody tr:last-child td{border-bottom:0} tbody td .abtn{padding:5px 11px;font-size:11px} code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace} /* ---------- 拖拽上传 ---------- */ .drop{ margin-top:12px;border:1.5px dashed var(--line);border-radius:var(--r-card); padding:26px 16px;text-align:center;color:var(--sub);font-size:12px;cursor:pointer; background:#FCFCFA;transition:border-color .15s,background .15s; } .drop:hover{border-color:var(--gold);background:var(--goldSoft)} .drop.on{border-color:var(--gold);background:var(--goldSoft);color:var(--gold)} .progress{height:5px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:6px} .progress i{display:block;height:100%;background:var(--gold);transition:width .2s} /* 二维码放大浮层：盖在会员弹层（.sheet z-60）之上，但**不替换**它 —— 用户填了一半的手机号、正在输入的激活码都不能因为点了一下图片就丢。 */ .qrbox{ position:fixed;inset:0;z-index:150;background:rgba(28,28,26,.82); display:flex;align-items:center;justify-content:center;padding:22px; } .qrbox-in{background:var(--bg);border-radius:16px;padding:16px;width:100%;max-width:340px;text-align:center} .qrbox-in h3{margin:0 0 10px;font-size:15px} .qrbox-in img{width:100%;border-radius:12px;display:block} /* ---------- Toast ---------- */ .toast{ position:fixed;left:50%;bottom:38px;transform:translate(-50%,14px); background:#2B2B28;color:#fff;font-size:12px;padding:9px 18px;border-radius:10px; opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;z-index:200; } .toast.on{opacity:1;transform:translate(-50%,0)} /* ---------- 响应式 ---------- */ @media (max-width:900px){ .side{width:180px;padding:14px 10px} .main{padding:18px 16px 32px} .grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .adm{flex-direction:column} .side{ width:auto;flex:none;border-right:0;border-bottom:1px solid var(--line); flex-direction:row;align-items:center;gap:6px;padding:10px 12px; overflow-x:auto;-webkit-overflow-scrolling:touch; } .side .brand{padding:0 10px 0 0;font-size:14px;flex:none} .side a{padding:7px 13px;font-size:13px;flex:none;white-space:nowrap;border:1px solid var(--line)} .side a.on{border-color:var(--pri)} .side a[onclick]{margin-left:auto} .main{padding:16px 14px 30px} .panel{padding:14px} .panel .grid{grid-template-columns:1fr;gap:0} .kpi .n{font-size:19px} /* 后台表格在手机上横向滚动，避免挤成一团（仅限后台 .panel 内的表格， 否则会外溢到 App 命理页的 .bztab，把「藏干/纳音」列挤出屏幕外） */ .panel{overflow-x:auto} .panel table{min-width:520px} } /* ---------- 使用手册（helpSheet） ---------- */ .helplist{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)} .helpitem{border-bottom:1px solid var(--line)} .helpitem:last-child{border-bottom:0} .helpitem summary{ list-style:none;cursor:pointer;padding:12px;font-size:14px;letter-spacing:.5px; display:flex;align-items:center;gap:8px; } .helpitem summary::-webkit-details-marker{display:none} .helpitem summary::after{content:'›';margin-left:auto;color:var(--faint);transition:transform .2s} .helpitem[open] summary::after{transform:rotate(90deg)} .helpitem summary .hicon{font-size:15px;flex:none} .helpitem[open] summary{color:var(--gold)} .hbody{padding:0 12px 12px 35px;font-size:12.5px;line-height:1.85;color:var(--sub)} .hbody b{color:var(--text)} /* ================================================================== 官网首页（index.html）样式 官网与 App 共用本文件；首页 body 带 .home，去掉 App 的底部 tabbar 预留 ================================================================== */ body.home{padding-bottom:26px;font-size:15px} /* 官网基准字号（2026-10-29 主人定）： 原来是全站 body 的 13px 打底，于是页面上到处是「小得不能再点」的字。 主人原话：「咱们是有什么见不得人的地方吗？非得弄那么小吗？」 现在官网整层提到 15px —— 凡是没有单独指定字号的文字，一律按 15 走。 ★ 只挂 body.home，应用站的紧凑布局不受影响。 */ /* 站点统一容器：首页 / 会员 / 404 都用它，宽屏居中留白一致。 （2026-10-15：以前首页另立 .home .wrap{max-width:1440px}，跟别页不一致， 宽屏下看着左右不匀，见下方那条已删。） */ .wrap{max-width:1160px;margin:0 auto;padding:0 24px} /* ---------- 吸顶导航 ---------- */ .nav{ position:sticky;top:0;z-index:30; background:rgba(250,250,248,.80); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .navrow{display:flex;align-items:center;gap:10px;min-height:54px;padding-top:8px;padding-bottom:8px} .nav .links{margin-left:auto;display:flex;align-items:center;gap:2px;flex-wrap:wrap} .nav .links a{ padding:7px 11px;border-radius:9px;font-size:13px;color:var(--sub);white-space:nowrap; } .nav .links a:hover{background:#F0EFE9;color:var(--text)} .nav .links a.on{background:var(--pri);color:#fff;font-weight:500} /* 手机导航收拢（2026-10-18 · 体检报告 P1-7） 390 宽下原来 5 个链接挤成两行：品牌名被折成「赐名堂 ·」/「起名」两截， 功能/正源/开始起名/会员/登录 糊成一排 12px 小字，首屏信息密度过高。 现在：≤640 只留两个真动作（开始起名 / 会员），「功能」「正源」两段是页内锚点， 往下滑就是，不必占导航位；用户名太长时截断不换行。 */ .nav .brand{white-space:nowrap;min-width:0;flex:none} .nav .links{min-width:0;flex-wrap:nowrap} @media (max-width:700px){ .nav .links a[href="#feat"],.nav .links a[href="#zhengyuan"]{display:none} .nav .links a{padding:6px 9px;font-size:12.5px} .nav #navUser{max-width:124px;overflow:hidden;text-overflow:ellipsis} } /* 390 这一档：品牌 + 开始起名 + 会员 + 登录 仍然溢出（登录被切掉半个字）。 * 「开通会员版」页内到处都是入口（hero、会员卡、页脚），导航上先让位给「登录」。 */ @media (max-width:440px){ .nav .links a[href="/member"]{display:none} .nav .links a{padding:6px 8px} .nav #navUser{max-width:112px} } @media (max-width:520px){ .nav .links a{padding:6px 8px;font-size:12px} } /* ---------- 首屏 ---------- */ .hero{text-align:center;padding:44px 0 28px} .kicker{font-size:13.5px;letter-spacing:6px;text-indent:6px;color:var(--gold);font-weight:600} .hero h1{font-size:28px;line-height:1.42;font-weight:600;letter-spacing:.5px;margin:14px 0 0} .hero h1 em{font-style:normal;color:var(--gold)} /* ---------- 核心卖点条（2026-10-29 主人定） ---------- 主人原话：「应该在最醒目的地方，字不能太小，写上老祖宗留下的方法、周易、康熙字典正源， 每个字都有依据有出处，这是赐名堂与普通起名软件最根本的不同。为啥不放到显眼的地方、 突出的字体，让它成为一个亮点？」 原来这个位置是一行 10.5px 的金褐色小字（.orn 那句「以八字为据·以音义为尺」）， 夹在大标题和说明中间，等于没有。现在换成上下双线夹住的「依据条」， 正标题下方第一眼就是它，字号比正文大一倍多。 三句分工：① 用什么（周易八字 / 康熙字典）② 意味着什么（每字有出处） ③ 跟别人的根本不同（不是日本五格、不是随机字库）—— 不点名、不骂人，只划界线。 */ .credo{ /* 2026-10-29 主人否掉第一版：上下两条金线 + 淡金底，他说像给文字套了一块画布， 跟水墨背景不是一路。原话：「把这画布撤了吧，要它干啥呀？直接就这在那个 整个网页和背景上就直接就有这就行了」。 现在只剩文字本身 —— 靠字号（23px，正文 13.5）和金句里的《周易》《康熙字典》抓眼， 不加框、不加底。两侧山墨重的地方用一点点白晕托住字，只托字，不形成块。 */ margin:26px auto 0; width:100%;max-width:780px; padding:0; } .credo-main{ font-family:var(--serif); font-size:clamp(19px, 2.7vw, 26px); font-weight:600;line-height:1.5;letter-spacing:3px;color:var(--ink); /* 只给字本身一圈纸色光晕，不加底块 —— 压在两侧山墨上也不糊 */ text-shadow:0 0 12px rgba(var(--bg-rgb),.96), 0 0 26px rgba(var(--bg-rgb),.9), 0 1px 0 rgba(var(--bg-rgb),.8); } .credo-main b{color:var(--gold);font-weight:700;letter-spacing:3px} /* 依据行（2026-10-29 17:2x 加）：老祖宗那行是「来头」，这一行是「凭什么」—— 周易、康熙字典两本书名还得是主角，只是让出第一眼的位置，字号仍有 19px（正文 13.5）。 */ .credo-book{ margin:11px 0 0;font-family:var(--serif); font-size:clamp(15px, 1.95vw, 19px); font-weight:600;line-height:1.6;letter-spacing:1.3px;color:var(--ink2); text-shadow:0 0 11px rgba(var(--bg-rgb),.95), 0 0 22px rgba(var(--bg-rgb),.88); } .credo-book b{color:var(--gold);font-weight:700} .credo-book span{display:inline-block} .credo-book .dot{font-style:normal;color:var(--goldLine);margin:0 12px} /* 分句：手机上让两句各占一行，「定五行」不会孤零零掉在第二行末尾三个字 */ .credo-main span{display:inline-block} .credo-main .dot{font-style:normal;color:var(--goldLine);margin:0 13px} /* ★ 2026-10-29 23:48 主人：「给这三种字体改成一种字体」—— 实测三行的 font-family 完全相同（都是 -apple-system / 苹方 / 雅黑）， 差的是：字号 14.5 与 15、字距 1px 与 0、颜色 ink2 与 sub、还有 HTML 里手打的空格。 四项一叠，看着就像三种字体。现在四样全部拉平： 同字号 15px、同字距 0、同色 --ink2、同字重 400。 第一行与右边那句之间那道竖线保留 —— 那是分段，不是字体差异。 */ .credo-sub{ margin:10px 0 0;font-size:15px;line-height:1.95;letter-spacing:0;color:var(--ink2); /* ★★ 2026-10-29 23:56 主人：「我不是说那个字体要改成一个字体吗？你现在还是两个字体呀」 —— 上一版我只统一了字号/字距/颜色，漏了最关键的一样： 这一行有 text-shadow（0 0 10px + 0 0 20px 的米白白光），下面「五行不是缺啥补啥」没有。 同样的黑体，套一层白光就发虚、笔画变细，跟下面那行放在一起，一眼看着就是两种字体。 白光撤掉 —— 跟下面两行完全同一套（无晕、同色、同号、同字距）。 */ text-shadow:none; } .credo-sub span{ display:inline-block;margin-left:11px;padding-left:12px; border-left:1px solid var(--goldLine);letter-spacing:0;font-size:15px;color:var(--ink2); } @media (max-width:640px){ .credo{margin-top:20px;padding:0;max-width:none} .credo-main{font-size:18px;letter-spacing:.6px;line-height:1.5} .credo-main b{letter-spacing:1.5px} .credo-book{font-size:14px;letter-spacing:.3px;margin-top:9px} .credo-book span{display:block} .credo-book .dot{display:none} .credo-main span{display:block} .credo-main .dot{display:none} .credo-sub{font-size:14px;letter-spacing:0;line-height:1.85} .credo-sub span{font-size:14px} .credo-sub span{display:block;margin:7px 0 0;padding:0;border:0} } .hero > p{color:var(--ink2);font-size:15px;line-height:1.95;margin:16px auto 0;max-width:640px} /* 卖点条下面那段（2026-10-29 17:2x）：加了「老祖宗」一行之后，这段离得太近， 读起来像挤在依据条里。单独给它 20px 的呼吸。 */ .credo + p{margin-top:20px} .cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px; /* 2026-10-29 修「鼠标一晃三个箭头跟着闪」： 原来这个 flex 容器撑满整行（1440 屏下实测 1112px 宽），可三个按钮只占 390px。 鼠标在右边那块空白里上下动，只要跨过容器的上下边，就等于「进了这一组又出来」， 触发 .cta:hover .btn.primary:not(:hover) 那条规则 —— 宝宝取名的实心色块一进一出地翻。 收成内容宽度后，空白处不再算「进组」。 */ width:max-content;max-width:100%;margin-left:auto;margin-right:auto; } .cta .btn{padding:12px 24px;font-size:14px} /* ==================== 两档价格并排（官网首屏 · 2026-10-29） ==================== 主人：「师傅亲改 198 能给搁到一个光明正大显眼的地方吗？好像咱不想干这买卖似的， 藏得又小又在旮旯。把 9.9 跟 198 光明正大放一个价格表。」 做法上刻意**不画两个盒子** —— 主人一直不喜欢厚重的方块边框， 两块之间只用一道金线分开，像账房的一页流水：同一张纸上的两行， 而不是「两个套餐二选一」。198 那块不放大、不描边、不加阴影， 只靠数字颜色和一枚「含上面全部」的小标记说明它们的关系。 */ .price2{ display:flex;justify-content:center;align-items:stretch; /* width:100% 不能省（2026-10-29 实测踩过）：.home .hero 是 display:flex 列容器， 而 flex item 一旦带了左右 auto margin，交叉轴上就**不再拉伸**，宽度缩成内容宽度 —— max-width:860 完全不起作用，实测只有 477，两块字挤成一团。 给了 width:100% 才有确定的 860 上限。 */ width:100%;max-width:860px;margin:24px auto 0; /* 2026-10-29 22:4x 主人：「把这两个 9.9 跟 198 这个画布去掉，然后那个字， 就是链接点的字就进去了」—— 垫的那张淡纸撤掉，底板不留。 字压在水墨上改用文字自己的白晕（跟首屏标题、页脚同一个办法）， 不切版心、也不像贴了块膏药。 整块仍是链接：左块点进 app 起名，右块点进师傅亲改页，点字就算点中。 */ background:none; padding:16px 6px; /* 2026-10-29 22:4x 主人第二次说：「那两块的画布还在，就那个蒙版，字底下那块蒙版还在， 要做镂空的」。上一版我把底色去掉、却给字加了白晕（text-shadow 10px + 22px）， 一层铺满整块 —— 远看就是又一块白蒙版。白晕一并撤掉，一个字都不留，彻底镂空。 */ text-shadow:none; } .price2 .p2{ flex:1 1 0;min-width:0;padding:0 34px; display:flex;flex-direction:column;align-items:center;gap:3px; text-decoration:none;color:inherit; } .price2 .p2 + .p2{border-left:1px solid var(--goldLine)} .price2 .p2-h{display:flex;align-items:baseline;gap:4px;line-height:1} .price2 .p2-num{ font-size:34px;font-weight:600;color:var(--gold);letter-spacing:-.5px; font-family:var(--serif); } .price2 .p2-h i{font-style:normal;font-size:13px;color:var(--gold);opacity:.9} .price2 .p2-t{font-size:14.5px;color:var(--ink);font-weight:600;margin-top:7px;letter-spacing:.3px} .price2 .p2-s{ font-size:12.5px;color:var(--ink2);line-height:1.6;margin-top:3px; /* 同上：小字的白晕也全撤。要镂空就镂到底，不留半层雾。 */ text-shadow:none; } /* 「含上面全部」：198 那块的关键句。没有它，并排摆就会变成「贵的给得更多」的误解。 做成极轻的一句话，不做成角标 —— 角标像促销，不像交代。 */ .price2 .p2-tag{ font-size:10.5px;color:var(--gold);border:1px solid var(--goldLine); border-radius:20px;padding:1px 7px;margin-left:4px;line-height:1.5;white-space:nowrap; } .price2 .p2:hover .p2-t{color:var(--gold)} .price2 .p2:hover .p2-num{opacity:.82} @media (max-width:640px){ /* 手机上横向放不下两档（390 - 32 = 358，两列各 179，「首选 + 备选，写明理由， 1 个工作日给到」要折三四行）。改上下两行，中间那道线从竖的变横的。 */ .price2{flex-direction:column;gap:15px;margin-top:20px;padding:16px 10px} .price2 .p2{padding:0} .price2 .p2 + .p2{ border-left:0;border-top:1px solid var(--goldLine);padding-top:15px; } .price2 .p2-num{font-size:30px} } .btn.ghost{background:transparent} /* 2026-10-28 主人：「那两个按钮为什么没有颜色呢？按钮的颜色也要和我后台那个皮肤模板一样」， 随后又定：「鼠标到了之后就变成我设置那个颜色，默认就停留在宝宝取名那个位置， 鼠标移到成人改名，那个色块就到成人改名，宝宝取名那块就变成没有颜色的」。 做法：三个都是主色描边；默认第一个实心（色块停在它身上）； 鼠标进这一组但没停在主按钮时，主按钮让出色块变描边，停在哪个哪个变实心。 只限定 .cta 内，会员页等别处的 ghost 按钮一个字不动。 */ .cta .btn{transition:background-color .16s ease,color .16s ease,border-color .16s ease} .cta .btn.ghost{border-color:var(--pri);color:var(--pri);background:var(--card);font-weight:500} .cta .btn.ghost:hover{border-color:var(--pri);background-color:var(--pri);color:#fff} /* 只在真的用鼠标的设备上让色块跟着走；触屏没有 hover，别让它粘住 */ @media (hover:hover) and (pointer:fine){ .cta:hover .btn.primary:not(:hover){border-color:var(--pri);background:var(--card);color:var(--pri)} } /* 首屏第二个入口（名字体检）下面的那行小字：只做说明，不抢主按钮。 写成 .hero p.cta-note 是为了压过上面那条 .hero > p（0,1,1）， 否则字号和上边距会被它顶掉；旧规则一个字没动。 2026-10-29：这行压在水墨山水上基本读不出来，垫一层半透明纸底， 跟上面那条价格带呼应，做成第二枚小标签。 */ /* 2026-10-29 晚：主人「给这几个字撤了吧，不要」—— 那块胶囊连着样式一起撤。 它长得跟三个按钮一样、客人会去点，但它是

、点不动，是个假按钮。 */ /* 2026-10-29 23:0x 主人：「把每个页面上的这个给我去掉，不要了」—— 价格带（9.9 元 · 一次给 100 个名字 那条金边胶囊）连同外层 .pricewrap 一起撤， HTML 里已删，样式也一起清掉，不留空壳给别人以后再贴回去。 */ /* 免费体检按钮的外层（2026-10-29，成人改名页）：同一个道理，占满整行、居中。 */ .fcw{display:flex;justify-content:center;flex:0 0 100%;margin:14px 0 0} .fcw .freecheck{margin:0;flex:0 0 auto} /* 六宫格引导句（2026-10-29 加）：把这六个卡片从「功能表」变成「凭什么信」。 这行落在水墨山水上，加一层极淡白晕，让它从背景里浮出来，但不至于像贴了块板。 */ .feat-lead{ text-align:center;font-size:15px;font-weight:600;color:var(--ink); letter-spacing:.6px;margin:36px auto -8px;max-width:640px; text-shadow:0 0 10px rgba(255,253,248,.95),0 0 4px rgba(255,253,248,.9); } .feat-lead span{ display:block;font-size:14px;font-weight:400;color:var(--ink2); margin-top:7px;letter-spacing:.25px; } /* 公司起名只在电脑端露出（2026-10-28 主人：「不要手机端」）。 手机竖屏放三个按钮会掉一行（实测 390px 下总宽 393.2），而且公司资料本来就在电脑上填。 隐藏之后手机端回到两个按钮，排版与加按钮之前完全一致。 */ @media (max-width:640px){ .cta .desk-only{display:none} } /* ---------- 功能六宫格 ---------- */ .features{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 6px} .feat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:15px} .feat .ic{font-size:19px;line-height:1} .feat h3{font-size:14px;margin:9px 0 5px;letter-spacing:.5px} .feat p{font-size:12px;color:var(--sub);line-height:1.8;margin:0} /* ---------- 乾元 / 坤元 双线 ---------- */ .two{display:grid;grid-template-columns:1fr;gap:12px;margin:14px 0} .line{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:18px} .line .tag{ display:inline-block;font-size:11px;letter-spacing:4px;text-indent:4px; padding:3px 10px;border-radius:8px;color:#fff;font-weight:500; } .line.m .tag{background:var(--pri)} .line.f .tag{background:var(--gold)} .line h3{font-size:20px;margin:12px 0 4px;letter-spacing:3px} .line p{font-size:12.5px;margin:0 0 10px} .line ul{margin:0;padding-left:18px;font-size:12.5px;color:var(--sub);line-height:2.1} @media (min-width:760px){ .hero{padding:64px 0 40px} .hero h1{font-size:36px} .features{grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px} .two{grid-template-columns:1fr 1fr;margin:20px 0} } /* ---------- 下载卡片 ---------- */ .dlbox{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;margin:20px 0 8px;padding:22px} .qrcol{display:flex;flex-direction:column;align-items:center;gap:10px;flex:none;width:176px} .qr{background:#fff;border:1px solid var(--line);border-radius:12px;padding:7px} /* ★ 二维码 SVG 用 scalable 生成（只有 viewBox、无 width/height），在 display:grid 盒子里 若浏览器不按 viewBox 推高，height:auto 会塌成 0 → 整块空白（用户报的「二维码一直是白的」）。 加 aspect-ratio:1/1 强制按宽度撑出正方形，任何浏览器都不再塌。 */ .qr svg{display:block;width:100%;height:auto;aspect-ratio:1/1} .qrtip{font-size:11px;color:var(--sub);text-align:center;line-height:1.75;white-space:pre-line} .qrtip b,.steps b{color:var(--text)} .qrhelp{width:100%;font-size:12px;color:var(--sub)} .qrhelp summary{cursor:pointer;color:var(--pri);list-style:none} .qrhelp summary::-webkit-details-marker{display:none} .steps{ margin-top:8px;padding:10px 12px;background:#F7F6F2;border-radius:9px; font-size:11px;line-height:1.9;color:var(--sub); } .dlbox .info{min-width:240px;flex:1} .dlbox .info h3{font-size:17px;margin:2px 0 8px;letter-spacing:.5px} .dlbox .info p{font-size:12.5px;color:var(--sub);line-height:1.85;margin:0 0 12px} /* 会员页·付款二维码卡片：两卡等宽等高，标题条 + 方形码 */ .qrcards{display:flex;gap:22px;flex-wrap:wrap;align-items:stretch} .qrcard{flex:none;width:180px;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column} .qrcard-h{font-size:13px;font-weight:600;letter-spacing:.5px;text-align:center;padding:10px 8px;color:#fff;line-height:1.45} .qrcard.pay .qrcard-h{background:#07C160} .qrcard.kefu .qrcard-h{background:var(--gold)} .qrcard-img{background:#fff;padding:11px;flex:1;display:flex;align-items:center} .qrcard-img img{display:block;width:100%;height:auto;aspect-ratio:1/1;border-radius:6px} .qrcard-tip{font-size:11.5px;color:var(--sub);text-align:center;line-height:1.75;padding:9px 8px 11px;border-top:1px solid var(--line)} .qrcard-tip b{color:var(--text)} .qrcard-info{flex:1;min-width:240px} @media (max-width:560px){.qrcard{width:calc(50% - 11px)}} code.input{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:#F4F3EE;border:1px solid var(--line);border-radius:9px;color:var(--text); } /* 锚点定位让出吸顶导航高度 */ .hero,#feat,#lines,#dl{scroll-margin-top:66px} /* ---------- 页脚 ---------- */ footer{ /* 2026-10-29 22:4x 主人：「给底下那蒙蒙版撤了，那画布撤了」—— 原来这里有一道从透明渐入纸色的渐变，往上盖住半张画（我当时是为了让 14px 字能看清）。 撤掉，页脚直接落在画上，不加任何底色、不留任何蒙版。 字色改用 var(--ink)（正文最深那一档），靠字本身的深浅去顶，不靠垫纸。 */ border-top:0;margin-top:30px;padding:26px 0 12px; background:none; font-size:13.5px;color:var(--ink);text-align:center;line-height:1.95; } /* 原来那条 border-top 换成一道渐隐的细线，否则会像硬切一刀 */ footer::before{ content:"";display:block;height:1px;margin:-1px auto 0;width:min(560px,86%); background:linear-gradient(90deg,transparent,var(--line) 22%,var(--line) 78%,transparent); } /* 正文和链接同一个色了，靠下划线区分「这个能点」——不能只靠颜色， 页脚是给手机看的，手指点之前得先看出哪儿能点。 */ footer a{color:inherit;text-decoration:none;border-bottom:1px solid var(--goldLine);padding-bottom:1px} footer a:hover{color:var(--red);border-bottom-color:var(--red)} @media (max-width:640px){ footer{padding:24px 0 12px;line-height:2.05} } a.gold{color:var(--gold)} /* ---------- 头图：背景由全站水墨层统一提供；首屏撑满，整页不留白 ---------- */ .home .wrap{padding:0 24px} .home .hero{ position:relative; /* 2026-10-25 22:35 主人：「这些在首页上要漏一半，不然人家不知道往下拉」。 原来 min-height:88vh（最高 780）——首屏几乎被 hero 占满，功能卡正好卡在折线下面， 看起来像已经到底了。现在压到 72vh / 最高 640，让第一排卡片完整、第二排露半截， 人一眼就知道下面还有。★ 不用 overflow:hidden 去"裁一半"——那会把内容真藏掉。 */ min-height:min(72vh,640px); display:flex;flex-direction:column;justify-content:center; padding:48px 0 34px; } .home .hero > *{position:relative;z-index:1} /* 笔记本 1366×768 / 1280×800 这类矮屏：72vh 还是会把卡片推出首屏，再压一档， 保证第一排卡片一定是"被底边切断"的样子，看得见下面还有东西。 */ @media (max-height:820px) and (min-width:701px){ .home .hero{min-height:min(62vh,520px);padding:34px 0 26px} } /* 卡片改为半透：水墨透上来，整页不再是一块块白板 */ .home .feat,.home .line,.home .card{ background:rgba(255,255,255,.74); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); } /* 导航与页脚也半透，整页通铺水墨，不留整块白 */ .home .nav{background:rgba(var(--bg-rgb),.72)} .home footer{border-top-color:rgba(0,0,0,.06)} /* ---------- 首页手机端：字号放大保证可读 ---------- */ @media (max-width:640px){ .nav .links a{font-size:14px;padding:8px 10px} .brand{font-size:15px} .kicker{font-size:13px;letter-spacing:5px;text-indent:5px} .hero h1{font-size:27px} .hero > p{font-size:15px;line-height:2} .cta .btn{font-size:15px;padding:13px 22px} .feat h3{font-size:15.5px} .feat p{font-size:13.5px;line-height:1.85} .line h3{font-size:21px} .line p{font-size:14px;line-height:1.9} .line ul{font-size:14px;line-height:2} .dlbox .info h3{font-size:18px} .dlbox .info p{font-size:14px} .qrtip{font-size:13.5px} .steps{font-size:13.5px;line-height:2} .qrhelp{font-size:13.5px} footer{font-size:14px} } /* ---------- 首页轻量入场动画（清幽淡雅·仙气：如薄雾轻拢、缓缓化开；纯 CSS+IO，不影响字号） ---------- */ @keyframes cmtFadeUp { from { opacity:0; transform:translateY(16px); filter:blur(7px) } /* 收尾必须是 none，不能是 blur(0)：filter 只要不是 none，浏览器就把整块压成 一个合成层，而且动画 fill-mode:both 会一直挂着不摘。首屏那一片颜色一变， 整层就要重画一遍 —— 细笔画（↗ 这种）重画时最先看出来，三个箭头一起闪就是这么来的。 2026-10-29 实测：改前收尾停在 blur(0px)，改后是 none。 */ to { opacity:1; transform:none; filter:none } } /* 进场动画只把“准备好了”的页面藏起来：html.anim-ready 由 JS 打上 —— JS 挂了/观察器不可用时文字照常可见，绝不白屏（彪哥 2026-10-15：有的字都看不见）。 */ html.anim-ready .home .anim{opacity:0} html.anim-ready .home .anim.in{animation:cmtFadeUp 1.15s cubic-bezier(.22,.61,.36,1) both} /* 动画收尾后彻底摘掉图层（2026-10-29）： 光把 keyframe 的终点写成 filter:none 不够 —— Chromium 会把动画的计算值规范化回 blur(0px)，只要不是字面 none，整块照样被压成一个合成层；再叠上 fill-mode:both 一直挂着不摘，首屏那一片颜色一变就得整层重画，细笔画（↗）最先看出来。 所以由 JS 在 animationend 时打上 .done，把 animation / filter 全部清成 none。 */ html.anim-ready .home .anim.done{ animation:none !important;opacity:1 !important;transform:none !important;filter:none !important; } @media (prefers-reduced-motion: reduce){ html.anim-ready .home .anim{opacity:1 !important;animation:none !important;filter:none !important} } /* ---------- 官网桌面端可读性：小字整体抬一档 ---------- （原先只有手机端把字号放大了，宽屏反而满屏 12px 上下的小字 —— 彪哥 2026-10-15「字体大小都有问题」。现在桌面与手机同标准。） */ @media (min-width:1024px){ .nav .links a{font-size:14.5px;padding:8px 12px} .kicker{font-size:12.5px;letter-spacing:6px;text-indent:6px} .hero > p{font-size:15px;line-height:2} .feat h3{font-size:16.5px} .feat p{font-size:14px;line-height:1.9} .line p,.line ul,.zy li{font-size:14.5px;line-height:1.95} .zhengyuan p{font-size:14.5px;line-height:1.9} .dlbox .info p{font-size:14.5px} .qrtip,.steps{font-size:13.5px;line-height:1.95} .qrhelp{font-size:14px} footer{font-size:14px} } /* ================================================================== 报告打印 / 导出 PDF（print.js） 打印时只保留 #printArea，其余界面元素全部隐藏 ================================================================== */ @media print { @page { size: A4 portrait; margin: 14mm 12mm; } html, body { background:#fff !important; padding:0 !important; margin:0 !important; font-size:11pt; color:#000; } /* 隐藏 App 全部界面，只留打印区 */ body > *:not(#printArea), body.printing .appbar, body.printing .tabbar, .no-print { display:none !important; } #printArea { display:block !important; } body { padding-bottom:0 !important; } /* 打印区排版 */ .rpt { font-size:11pt; line-height:1.75; } .rhead { border-bottom:1.5px solid #000; padding-bottom:8px; margin-bottom:16px; } .rbrand { font-size:17pt; font-weight:600; letter-spacing:2px; } .rsub { font-size:9.5pt; color:#444; margin-top:3px; } .rsec { margin-bottom:16px; break-inside:avoid; page-break-inside:avoid; } .rsec h2 { font-size:12pt; font-weight:600; margin:0 0 8px; border-left:3.5px solid #000; padding-left:8px; } .rfoot { border-top:1px solid #999; margin-top:20px; padding-top:8px; font-size:8.5pt; color:#555; } .rdis { margin-top:3px; font-size:8pt; color:#666; line-height:1.55; } /* 表格（收藏清单） */ .rtab { width:100%; border-collapse:collapse; font-size:10pt; } .rtab th { text-align:left; border-bottom:1px solid #000; padding:5px 6px; font-size:9.5pt; } .rtab td { padding:5px 6px; border-bottom:1px solid #ddd; } .rtab .rn { font-weight:600; letter-spacing:1px; } .rtab .rt { color:#666; font-size:9pt; } /* 报告里的卡片：去掉底色与阴影，靠边框分隔（省墨、清晰） */ .rpt .card, .rpt .panel { background:#fff !important; border:1px solid #bbb !important; box-shadow:none !important; break-inside:avoid; } .rpt .bztab { font-size:9pt; } .rpt .pill, .rpt .grade { border-color:#666 !important; color:#000 !important; } .rpt a { color:#000 !important; text-decoration:none; } .rpt button, .rpt .drop { display:none !important; } } /* ================================================================== 主题切换（用户可换界面主色） 默认墨青+暖金即 :root；其余 5 套覆盖 CSS 变量。 ================================================================== */ /* ================================================================== 四季四色（2026-10-15 定：只留春夏秋冬） ------------------------------------------------------------------ 配色的三条原则（就是彪哥说的"要和水墨背景相得益彰"）： ① 主色一律**低饱和**的中式色，压得住，不跟水墨打架； ② 背景图（水墨）用 --bg-filter 只"洇"一层季节调子，不许改得浓艳； ③ 纸面 --bg 跟着季节偏一点冷暖（春偏青、夏偏水、秋偏暖、冬偏灰）， 文字与分割线同步走，整页才是一张画，不是贴上去的色块。 ================================================================== */ /* 春 · 柳色 —— 苍苔柳绿，纸面带一点返青的湿气 */ html[data-theme="spring"]{--pri:#4A7358;--gold:#B3894A;--bg:#F7FAF6;--bg-rgb:247,250,246;--card:#FFFFFF;--line:#E2EAE1;--sub:#5E7A66;--faint:#5A6E60;--text:#1E271E; /* 2026-10-26 补派生色：以前只换主色，金边/卡片/分割线还留着上一套的暖金， 同一屏里两套色打架，看着就"好几个颜色"。现在每套都把派生色配齐。 */ --paper2:#EAF2EC;--line2:#F1F6F1;--line3:#D6E2D8;--goldSoft:#F4F2E3;--goldLine:#E3D9BC; --brand:#3A5C45;--brand2:#4A7358;--brandSoft:#E4EEE6;--brandDeep:#25402E;--card2:#F4F8F4;--goldSoft2:#EFEAD8;--warn:#9A4B2C;--warnSoft:#FAF0E8;--warnLine:#E8CDBC; --bg-filter:hue-rotate(80deg) saturate(.58) brightness(1.07); --bg-veil:linear-gradient(180deg,rgba(var(--bg-rgb),.5) 0%,rgba(var(--bg-rgb),.16) 42%,rgba(var(--bg-rgb),.46) 74%,rgba(var(--bg-rgb),.94) 100%)} /* 夏 · 水碧 —— 碧潭青，纸面偏水色，金作骄阳淡金提亮 */ html[data-theme="summer"]{--pri:#2C6A78;--gold:#C09A4E;--bg:#F6F9FA;--bg-rgb:246,249,250;--card:#FFFFFF;--line:#DEE8EC;--sub:#5C757E;--faint:#566A72;--text:#1A262B; --paper2:#E6F0F3;--line2:#EEF5F7;--line3:#D2E2E6;--goldSoft:#F5F1E2;--goldLine:#E5DABB; --brand:#245663;--brand2:#2C6A78;--brandSoft:#E2EDF0;--brandDeep:#173F4A;--card2:#F0F6F8;--goldSoft2:#EFEADA;--warn:#9C4E2E;--warnSoft:#FAF0EA;--warnLine:#E6CBBD; --bg-filter:hue-rotate(184deg) saturate(.55) brightness(1.06); --bg-veil:linear-gradient(180deg,rgba(var(--bg-rgb),.48) 0%,rgba(var(--bg-rgb),.15) 42%,rgba(var(--bg-rgb),.44) 74%,rgba(var(--bg-rgb),.94) 100%)} /* 秋 · 柿金 —— 赭石打底、柿金点睛，纸面是本色宣纸偏暖 */ html[data-theme="autumn"]{--pri:#7F5620;--gold:#C08A2E;--bg:#FBF7EF;--bg-rgb:251,247,239;--card:#FFFFFF;--line:#EFE4D2;--sub:#87704E;--faint:#7A6B52;--text:#241D13; --paper2:#F0E8D6;--line2:#F7F1E2;--line3:#E4D6BB;--goldSoft:#FAF2DF;--goldLine:#EBDCB8; --brand:#654416;--brand2:#7F5620;--brandSoft:#F3EAD9;--brandDeep:#42290D;--card2:#F8F2E4;--goldSoft2:#F4EBD5;--warn:#A8331F;--warnSoft:#FBF0EC;--warnLine:#E8CFC4; --bg-filter:sepia(.52) saturate(1.24) brightness(1.03); --bg-veil:linear-gradient(180deg,rgba(var(--bg-rgb),.52) 0%,rgba(var(--bg-rgb),.18) 42%,rgba(var(--bg-rgb),.48) 74%,rgba(var(--bg-rgb),.95) 100%)} /* 冬 · 苍青 —— 黛青压住，纸面雪灰，金转暖褐（雪后枯枝那点暖） */ html[data-theme="winter"]{--pri:#3C5666;--gold:#A98A5E;--bg:#F7F8FA;--bg-rgb:247,248,250;--card:#FFFFFF;--line:#E3E7EC;--sub:#6B7883;--faint:#5D666E;--text:#1C2228; --paper2:#E8EDF1;--line2:#F2F5F7;--line3:#D8E0E6;--goldSoft:#F5F1EA;--goldLine:#E6DCCB; --brand:#2F444F;--brand2:#3C5666;--brandSoft:#E6EBEF;--brandDeep:#1C3038;--card2:#F2F5F8;--goldSoft2:#EFEAE0;--warn:#8E4436;--warnSoft:#F7EDEA;--warnLine:#E2CCC5; --bg-filter:saturate(.24) brightness(1.09) contrast(1.07); --bg-veil:linear-gradient(180deg,rgba(var(--bg-rgb),.54) 0%,rgba(var(--bg-rgb),.2) 42%,rgba(var(--bg-rgb),.5) 74%,rgba(var(--bg-rgb),.95) 100%)} /* 2026-10-26 新增三套「一眼看得出换了」的皮肤。 前五套（墨玉青 + 四季）都是低饱和的近色，站长反馈换了没感觉， 这三套把色相拉开：朱砂偏红、天青偏瓷青、紫檀偏紫褐。 仍然守住同一条底线 —— 低饱和、不跟水墨抢，纸面同步冷暖。 */ /* 朱砂 —— 印泥红压底，金转赭，纸面带一点暖红（喜庆、满月、办酒那一路） */ html[data-theme="cinnabar"]{--pri:#9C3D2E;--gold:#B8823C;--bg:#FBF6F1;--bg-rgb:251,246,241;--card:#FFFDFA;--line:#EFDDD3;--sub:#8A5B4C;--faint:#7A5F52;--text:#241814; --paper2:#F3E3DA;--line2:#F8EEE8;--line3:#E7CDBF;--goldSoft:#FAF0DF;--goldLine:#EBD7B6; --brand:#7A3024;--brand2:#9C3D2E;--brandSoft:#F6E7E2;--brandDeep:#5C1F16;--card2:#FDF4F0;--goldSoft2:#F5E9D3;--warn:#7A2A1E;--warnSoft:#F7E4DE;--warnLine:#E0C0B6; --bg-filter:sepia(.34) saturate(1.3) hue-rotate(-16deg) brightness(1.05); --bg-veil:linear-gradient(180deg,rgba(var(--bg-rgb),.5) 0%,rgba(var(--bg-rgb),.16) 42%,rgba(var(--bg-rgb),.46) 74%,rgba(var(--bg-rgb),.95) 100%)} /* 天青 —— 汝窑天青，像青瓷底子，金用旧铜色（清雅、书卷气） */ html[data-theme="sky"]{--pri:#3E6E78;--gold:#A8873F;--bg:#F4F8F9;--bg-rgb:244,248,249;--card:#FFFFFF;--line:#DCE8EB;--sub:#5A7A83;--faint:#566B72;--text:#16262B; --paper2:#E6F0F2;--line2:#EFF6F7;--line3:#D3E3E6;--goldSoft:#F4F3E4;--goldLine:#E1DCC0; --brand:#31575F;--brand2:#3E6E78;--brandSoft:#E3EFF1;--brandDeep:#1F3D44;--card2:#F2F8F9;--goldSoft2:#EFEDDC;--warn:#9C5230;--warnSoft:#F9F0EA;--warnLine:#E5CEC1; --bg-filter:hue-rotate(150deg) saturate(.46) brightness(1.1); --bg-veil:linear-gradient(180deg,rgba(var(--bg-rgb),.5) 0%,rgba(var(--bg-rgb),.16) 42%,rgba(var(--bg-rgb),.46) 74%,rgba(var(--bg-rgb),.95) 100%)} /* 紫檀 —— 老紫檀木色，稳重压场，金偏黄铜（比墨玉青更"贵"，适合做礼品单） */ html[data-theme="zitan"]{--pri:#5B3B4E;--gold:#B08A55;--bg:#F9F5F7;--bg-rgb:249,245,247;--card:#FFFDFE;--line:#EBDDE5;--sub:#7C5F6E;--faint:#6E5A66;--text:#221620; --paper2:#EFE4EC;--line2:#F7F1F5;--line3:#E2D3DD;--goldSoft:#F8F0E4;--goldLine:#E8D8BF; --brand:#472F3D;--brand2:#5B3B4E;--brandSoft:#F0E7EC;--brandDeep:#38222E;--card2:#FAF4F7;--goldSoft2:#F4EBDF;--warn:#8E3E37;--warnSoft:#F8EAE7;--warnLine:#E2C6C1; --bg-filter:sepia(.2) saturate(.72) hue-rotate(-52deg) brightness(1.06); --bg-veil:linear-gradient(180deg,rgba(var(--bg-rgb),.5) 0%,rgba(var(--bg-rgb),.16) 42%,rgba(var(--bg-rgb),.46) 74%,rgba(var(--bg-rgb),.95) 100%)} /* 打印/导出 PDF 时不带背景 */ @media print{body::before,body::after{display:none}html{background:#fff}} /* ================================================================== 用户账户体系（注册 / 设置 / 注销 / 退出） ================================================================== */ /* 账户卡 */ .ucard{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:13px 14px} .ucard .uavatar{width:48px;height:48px;flex:none;border-radius:50%;overflow:hidden;background:#F0EEE9;display:grid;place-items:center} .ucard .uavatar svg{display:block;width:100%;height:100%} .ucard .uinfo{flex:1;min-width:0} .ucard .un{font-size:15px;font-weight:600;letter-spacing:.5px} .ucard .um{font-size:11px;color:var(--faint);margin-top:2px} /* 头像选择网格 */ .avatar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px} .avatar-item{border:2px solid var(--line);border-radius:12px;padding:6px;background:var(--card);cursor:pointer;display:grid;place-items:center;transition:border-color .15s} .avatar-item .uavatar{width:46px;height:46px} .avatar-item.on{border-color:var(--pri)} .avatar-item:active{opacity:.85} /* 主题选择网格 */ .theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px} .theme-item{border:1px solid var(--line);border-radius:12px;padding:9px 8px;background:var(--card);cursor:pointer;font-size:12px;color:var(--sub);display:flex;align-items:center;gap:7px;transition:border-color .15s} .theme-item.on{border-color:var(--pri);color:var(--text);font-weight:500} .theme-item .tswatch{width:16px;height:16px;border-radius:50%;flex:none;border:1px solid rgba(0,0,0,.08)} /* 开关 */ .switch{position:relative;display:inline-block;width:42px;height:24px;flex:none} .switch input{opacity:0;width:0;height:0} .switch .slider{position:absolute;inset:0;background:var(--line);border-radius:24px;transition:.2s;cursor:pointer} .switch .slider:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.2)} .switch input:checked + .slider{background:var(--pri)} .switch input:checked + .slider:before{transform:translateX(18px)} /* ===== 自组名（自选字·自己组合） ===== */ .zhpooltitle{font-size:12px;color:var(--faint);margin-bottom:6px;text-align:center;font-weight:600;letter-spacing:.5px} .zhgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .zhcell{position:relative;border-radius:13px;padding:10px 0 7px;text-align:center;cursor:pointer;overflow:hidden; background:linear-gradient(160deg,#fbfbfb,#ececea);border:1px solid var(--line); box-shadow:0 2px 5px rgba(0,0,0,.10),inset 0 1px 1px rgba(255,255,255,.65); transition:transform .12s ease,box-shadow .12s ease,filter .12s ease} .zhcell::before{content:"";position:absolute;left:0;right:0;top:0;height:46%; background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0));pointer-events:none} .zhcell:hover{transform:translateY(-3px);filter:brightness(1.07); box-shadow:0 7px 16px rgba(0,0,0,.20),inset 0 1px 2px rgba(255,255,255,.8)} .zhcell:active{transform:translateY(-1px) scale(.97)} .zhcell .zc{position:relative;font-size:23px;font-weight:800;line-height:1.05;color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.4),0 0 1px rgba(0,0,0,.5)} .zhcell .zp{position:relative;font-size:10px;color:rgba(255,255,255,.92);margin-top:2px;height:12px;overflow:hidden; text-shadow:0 1px 1px rgba(0,0,0,.35)} .zhcell .zw{position:relative;font-size:9px;margin-top:2px;font-weight:700;color:rgba(255,255,255,.95); text-shadow:0 1px 1px rgba(0,0,0,.35)} /* 五行配色 + 光泽（立体感） */ .zhcell.w-木{background:linear-gradient(160deg,#D8ED9D,#7FB22E 55%,#4E8A1E);border-color:#3f7417} .zhcell.w-火{background:linear-gradient(160deg,#FFC8B7,#E85B45 55%,#C0392B);border-color:#a82f22} .zhcell.w-土{background:linear-gradient(160deg,#EFDCA8,#C9A85C 55%,#A6853E);border-color:#8c6d2f} .zhcell.w-金{background:linear-gradient(160deg,#F9E8A7,#D9A441 52%,#B5812B);border-color:#9c6e22} .zhcell.w-水{background:linear-gradient(160deg,#C3E3FF,#4F9FE6 55%,#2E78C9);border-color:#2461a8} /* 选中：保持本字五行色不变，仅加「白+金」双圈 + ✓（金为固定色 #D9A441，不随站点主题变， 否则站点主题偏红/粉时选中圈会变成玫红色，显得“颜色不对”） */ .zhcell.on{transform:translateY(-3px) scale(1.05); box-shadow:0 0 0 3px #fff,0 0 0 5px #D9A441,0 9px 20px rgba(0,0,0,.30),inset 0 1px 2px rgba(255,255,255,.7); filter:brightness(1.03)} .zhcell.on::after{content:"✓";position:absolute;top:3px;right:5px;width:15px;height:15px;line-height:15px; font-size:11px;font-weight:800;color:#fff;background:#D9A441; border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.3)} /* 顶部组合预览卡 */ .zh-combo{min-height:78px;display:flex;flex-direction:column;justify-content:center} .zh-empty{color:var(--sub);font-size:13px;line-height:1.8;text-align:center} .zhnm{font-size:30px;font-weight:800;letter-spacing:3px;line-height:1.2} .zhnm-s{color:var(--pri)} .zhnm-c{text-shadow:0 1px 2px rgba(0,0,0,.12)} /* 组合名里每个字用「固定」五行色（与字块一致，不随站点主题变； 金=金铜色，不再用全局 --jin 的灰色，避免金属性的字在名字里显示成灰色） */ .zhnm-c.wx-木{color:#4E8A1E} .zhnm-c.wx-火{color:#C0392B} .zhnm-c.wx-土{color:#A0762A} .zhnm-c.wx-金{color:#C08A2E} .zhnm-c.wx-水{color:#2E78C9} .zh-score-btn{padding:10px 22px;font-size:16px;font-weight:700} /* ================================================================== 八字排盘 · 白话注解（给完全不懂周易的人看的「掰开揉碎」版） 顶部一张"3 秒看懂"的结论卡，底部一个可展开的详解区；术语点一下弹解释。 ================================================================== */ .bzp-hero{ background:linear-gradient(160deg,var(--goldSoft),var(--goldSoft2)); border:1px solid var(--gold);border-radius:var(--r-card);padding:14px; } .bzp-hero .who{font-size:16px;font-weight:700;line-height:1.55;letter-spacing:.3px} .bzp-hero .who em{font-style:normal;color:var(--gold);font-size:19px;letter-spacing:1px} .bzp-hero .one{margin-top:9px;font-size:13px;line-height:1.95;color:var(--text)} .bzp-hero .one .m{color:var(--sub)} .bzp-hero .concl{margin-top:10px;padding-top:10px;border-top:1px dashed var(--gold);font-size:13px;line-height:1.9} .bzp-hero .concl b{color:var(--gold)} .bzp-hero .warn{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);font-size:11.5px;line-height:1.85;color:var(--sub)} .bzp-hero .warn b{color:var(--gold)} /* 术语：点一下弹解释 */ .bzp-t{color:var(--gold);border-bottom:1px dotted rgba(185,139,60,.7);cursor:pointer;white-space:nowrap} .bzp-t i{font-style:normal;font-size:9px;vertical-align:super;margin-left:1px;opacity:.85} .bzp-pop{ position:fixed;left:12px;right:12px;bottom:86px;z-index:80; background:#2C2B27;color:#F6F2E8;border-radius:12px;padding:12px 14px; font-size:13px;line-height:1.75;box-shadow:0 10px 30px rgba(0,0,0,.3); opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .18s,transform .18s; } .bzp-pop.on{opacity:1;transform:none} .bzp-pop b{display:block;color:#EBD3A0;margin-bottom:4px;font-size:13px} /* 详解折叠区 */ .bzp-fold{border:1px solid var(--line);border-radius:12px;background:var(--card);margin-top:10px} .bzp-fold>summary{ list-style:none;cursor:pointer;padding:13px;font-size:13.5px;font-weight:600; display:flex;align-items:center;gap:8px;color:var(--text); } .bzp-fold>summary::-webkit-details-marker{display:none} .bzp-fold>summary::after{content:'›';margin-left:auto;color:var(--faint);transition:transform .2s} .bzp-fold[open]>summary::after{transform:rotate(90deg)} .bzp-fold[open]>summary{color:var(--gold);border-bottom:1px solid var(--line)} .bzp-fold .bzp-body{padding:2px 13px 14px} .bzp-sec{margin-top:14px} .bzp-sec .st{font-size:13px;font-weight:700;color:var(--text);margin-bottom:7px} .bzp-sec .st span{font-weight:400;font-size:11px;color:var(--faint);margin-left:6px} .bzp-3{font-size:12.5px;line-height:1.95;color:var(--sub)} .bzp-3>div{margin-bottom:3px} .bzp-3 .t{color:var(--text);font-weight:600} .bzp-3 b{color:var(--text)} .bzp-3 .hi{color:var(--gold);font-weight:600} .bzp-list{margin:4px 0 0;padding-left:0;list-style:none;font-size:12.5px;line-height:1.9;color:var(--sub)} .bzp-list li{padding:4px 0;border-bottom:1px solid var(--line);display:flex;gap:8px} .bzp-list li:last-child{border-bottom:0} .bzp-list .lk{color:var(--text);width:52px;flex:none} .bzp-list .lv{flex:1} .bzp-pill{display:inline-block;padding:2px 9px;border-radius:12px;font-size:12px;margin:2px 4px 0 0;background:#F2F0E8;color:var(--sub)} /* ================================================================== v3 典藏版 · 字体与新增组件 规则：汉字标题走衬线、数字走衬线；描边分层；术语必配白话。 只新增类（前缀 v3-），不改既有类的语义，方便随时回退。 ================================================================== */ .nc-name,.hero .hname,.zhnm,.tabbar a,.grade,.listrow .lname{font-family:var(--serif)} .hero .hscore,.nc-score,.bzp-hero .who em{font-family:var(--serif)} /* ---------- ① 首页头图区（一句话讲清产品） ---------- */ .v3-hero{padding:4px 2px 0} .v3-hero .kick{font-size:12px;letter-spacing:3.4px;color:var(--gold);font-weight:700} .v3-hero h2{font-family:var(--serif);font-size:29px;letter-spacing:3px;line-height:1.34;margin:12px 0 0;font-weight:700} .v3-hero h1 em,.v3-hero h2 em{font-style:normal;color:var(--brand)} .v3-hero .orn{display:flex;align-items:center;gap:9px;margin-top:14px} .v3-hero .orn i{height:1px;flex:1;background:var(--line)} .v3-hero .orn s{text-decoration:none;font-size:10.5px;letter-spacing:3px;color:var(--ink3)} .v3-hero p{font-size:12.5px;color:var(--ink2);margin:12px 0 0;line-height:1.85} /* ---------- ② 名字体检入口（旧金条，一级入口） ---------- */ .v3-checkrow{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:var(--r3,14px); background:var(--goldSoft);border:1px solid var(--goldLine);margin-top:13px;cursor:pointer; /* 2026-10-29：这一条已经改成 （整条点击直接跳页）， 要把链接的默认样式压掉，不然整条变成蓝色带下划线。 */ text-decoration:none;color:inherit} .v3-checkrow .ic{width:34px;height:34px;border-radius:9px;background:var(--card);border:1px solid var(--goldLine); display:grid;place-items:center;flex:none} .v3-checkrow .ic svg{width:17px;height:17px;stroke:var(--gold);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round} .v3-checkrow .tx{flex:1;min-width:0} .v3-checkrow .tx b{font-size:14px;font-weight:700;display:block;letter-spacing:.8px} .v3-checkrow .tx span{font-size:10.5px;color:#8A7434;display:block;margin-top:3px} .v3-checkrow .ar{flex:none;display:inline-flex;align-items:center;gap:2px; white-space:nowrap;font-size:11.5px;font-weight:600;letter-spacing:.6px; padding:6px 11px;border-radius:999px; background:var(--pri);color:#fff; /* 2026-11-01 主人：「那个胶囊是否都有那个光泽吧？那个光泽感也要弄进去，都统一了」。 和改名页那个免费测名胶囊用同一套光泽，不再只有一道平阴影。 */ background-image:linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.12) 22%, rgba(255,255,255,.02) 55%, rgba(0,0,0,.15) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.12)} .v3-checkrow .ar b{font-size:13px;font-weight:400;line-height:1} .v3-checkrow .tags{display:none} .v3-checkrow .tags i{font-style:normal;white-space:nowrap} .v3-checkrow:active{filter:brightness(.97)} /* 桌面宽屏：这张卡原来字小、右半张全空着（2026-10-26 主人： 「空那么大的地方，把体检那几个字挪过去，醒目一点」）。 2026-10-27 主人又说「不明显，空那么大」—— 光把副标题推到右边， 中间还是空着四五百像素，等于没解决。 现在改成三段铺满：图标 | 标题紧接副标题 | 右侧实心按钮。 重量落在右端的按钮上，整行就撑起来了。 手机窄屏不加这条，副标题保持竖排，按钮缩小，不然挤成一行读不了。 */ @media (min-width:701px){ body.app #view-input .v3-checkrow{padding:16px 20px;gap:18px} body.app #view-input .v3-checkrow .ic{width:38px;height:38px;border-radius:10px} body.app #view-input .v3-checkrow .ic svg{width:20px;height:20px} /* 701~999 这一段卡片只有 520 左右宽，放不下「标题 + 副标题」横排， 强行横排标题会被压折成两行。所以这一段保持竖排，只放大字号。 */ body.app #view-input .v3-checkrow .tx b{font-size:17px;letter-spacing:1px} body.app #view-input .v3-checkrow .tx span{font-size:12.5px;margin-top:3px;letter-spacing:.4px} body.app #view-input .v3-checkrow .ar{font-size:12px;padding:8px 16px} body.app #view-input .v3-checkrow .ar b{font-size:13px} } /* 够宽才放大。701~999 这一段卡片只有 520 左右宽， 23px 标题 + 15px 副标题 + 按钮塞不下，标题会被折成两行。 */ @media (min-width:1000px){ body.app #view-input .v3-checkrow{padding:18px 22px;gap:20px} body.app #view-input .v3-checkrow .ic{width:44px;height:44px;border-radius:12px} body.app #view-input .v3-checkrow .ic svg{width:22px;height:22px} body.app #view-input .v3-checkrow .tx{flex:none} /* 基础样式里 tx 是 flex:1，会把标签组顶到最右边 */ /* 字距必须是整数：19px 字号配 1.2px 字距，每字步进 20.2px， 浏览器取整后余数分摊不匀，看着就是「一个字一个字地跳」。 改成 1px 正好凑成 20px 整。 */ body.app #view-input .v3-checkrow .tx b{font-size:19px;letter-spacing:1px} /* 那句说明换成四个小标签铺在中段。 只把副标题往右推，中间还是空着四五百像素（2026-10-27 主人： 「不明显，空那么大」）—— 空的地方必须有东西，才不叫空。 */ body.app #view-input .v3-checkrow .tx .sub{display:none} body.app #view-input .v3-checkrow .tags{ display:flex;flex:1;align-items:center;justify-content:space-between; gap:10px;min-width:0; } /* 标签不能再做成胶囊 —— 一圈描边看着就是按钮， 四个假按钮围着右边那个真按钮，主次全乱。只留文字。 */ body.app #view-input .v3-checkrow .tags i{ font-size:14.5px;color:var(--gold);letter-spacing:.5px; opacity:.9; } body.app #view-input .v3-checkrow .ar{font-size:13px;padding:10px 20px;letter-spacing:.8px} body.app #view-input .v3-checkrow .ar b{font-size:15px} } /* 标题扫光（2026-10-27 主人要的：「一到光闪过这几个字」）。 试过在字上盖一条白色高光带 —— 卡片是浅米色底，白光衬不出来， 亮度一够又把字盖白。改成字色本身流过一道亮金： background-clip:text，渐变里 8% 的一段是亮金，从右往左循环。 任何底色上都看得见，字也不会糊。 */ .v3-checkrow .tx b{ /* 扫光：主角是深墨字，扫过的那一段是**深金**（不是亮金）。 2026-10-29 实机发现，原先最亮那段 rgb(240,214,150) 扫到字上时， 跟米色底几乎融成一片，截图里那几个字像被抠掉了。 换成深金（#C49232）之后动画还在，但任何一帧都读得清。 */ background:linear-gradient(108deg, rgb(22,20,14) 40%, rgb(152,106,26) 47%, rgb(178,128,36) 50%, rgb(152,106,26) 53%, rgb(22,20,14) 60%); background-size:280% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:cmtShine 8.5s linear infinite; } @keyframes cmtShine{ 0%{background-position:135% 0} 70%,100%{background-position:-135% 0} } @media (prefers-reduced-motion: reduce){ .v3-checkrow .tx b{animation:none;color:rgb(22,20,14);background:none} } /* ---------- ③ 信任条（离线 / 本地 / 工具数） ---------- */ .v3-trust{display:flex;padding:14px 0;margin-top:13px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .v3-trust div{flex:1;text-align:center;position:relative} .v3-trust div+div::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;background:var(--line)} .v3-trust b{font-family:var(--serif);font-size:17px;color:var(--brand);display:block;font-weight:700;letter-spacing:1px} .v3-trust span{font-size:10px;color:var(--ink3);display:block;margin-top:4px;letter-spacing:1px} /* ---------- ④ 命盘结论卡（签名组件：普通人只看这一张） ---------- */ /* 结果页「命盘折叠」（2026-10-18 · 体检报告 P1-1） 以前命盘结论卡 + 五行旺衰条占满首屏，第一个名字要下滑 1.3 屏才出现。 现在压成一行摘要，展开才见结论与旺衰 —— 名字在最上面，命理是说服材料，跟在后面。 */ .bzfold{ margin:0 0 12px;border:1px solid var(--line);border-left:2px solid var(--goldLine); border-radius:10px;background:rgba(var(--bg-rgb),.55); } .bzfold>summary{ display:block;padding:9px 12px;cursor:pointer; list-style:none;font-size:12px;line-height:1.5; } /* 2026-10-25：折叠行改成两行。 * 主人问「你的大运怎么看，你的大运在哪里」——起运与当前大运原来要展开才看得见， * 客户根本不知道算过。现在折叠状态就直接写着「4.2 岁起运 · 现走壬寅」， * 第一眼就能看出这是真排过的盘，不是随机生成的名字。 */ .bzfold .bzf-r1{display:flex;align-items:center;gap:10px} .bzfold .bzf-dy{margin-top:3px;color:var(--faint);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bzfold .bzf-dy b{color:var(--gold);font-weight:600;letter-spacing:.4px} /* 名字体检的历法切换（2026-10-25：主人指出体检「里边缺农历」） 体检的用户是给自己改名的成年人，四五十岁的人记生日记的都是农历 —— 没有农历入口，等于让客户自己折算公历，错一天月柱就变了。 */ .sncal{display:flex;gap:8px;margin:0 0 10px} .sncal button{font:inherit;font-size:13px;padding:5px 17px;border-radius:20px;border:1px solid var(--line3);background:var(--card);color:var(--sub);cursor:pointer;transition:.15s} /* 2026-10-27 主人：「颜色不统一，都要随后台皮肤调节」。 原来这里用 --gold，而旁边的「男/女」和「开始测分」用的是 --pri —— 一套皮肤里这俩本来就是两个色（比如秋·柿金：#7F5620 深棕 vs #C08A2E 金）， 放进同一个弹窗就成了一眼看得出两套色。全站选中态统一取 --pri。 */ .sncal button.on{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:600} .snlymd{display:grid;grid-template-columns:1.35fr 1fr .9fr;gap:8px;margin:0 0 6px} .snlymd select{background:var(--card);border:1px solid var(--line3);padding:10px 6px;border-radius:10px;font:inherit;font-size:14px;color:var(--ink);width:100%} .bzfold>summary::-webkit-details-marker{display:none} .bzfold .bzf-t{flex:1;min-width:0;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bzfold .bzf-t b{font-weight:600;color:var(--ink);letter-spacing:.4px} .bzfold .bzf-t b.g{color:var(--gold)} .bzfold .bzf-x{flex:none;font-size:11.5px;color:var(--faint);white-space:nowrap} .bzfold .bzf-x i{font-style:normal;display:inline-block;margin-left:3px;transition:transform .2s} .bzfold[open] .bzf-x i{transform:rotate(90deg)} .bzfold .bzf-body{padding:0 12px 2px} .bzfold .bzf-body .v3-verdict{margin-top:4px} @media (prefers-reduced-motion: reduce){ .bzfold .bzf-x i{transition:none} } .v3-verdict{position:relative;border-radius:18px;padding:18px 19px;overflow:hidden;margin-bottom:12px; background:linear-gradient(155deg,var(--brand) 0%,var(--brandDeep) 100%);border:1px solid #0A1D18; box-shadow:0 8px 28px rgba(50,40,20,.16)} .v3-verdict::before{content:"";position:absolute;inset:5px;border:1px solid rgba(192,154,70,.22);border-radius:13px;pointer-events:none} .v3-verdict::after{content:"";position:absolute;right:-46px;top:-46px;width:160px;height:160px;border-radius:50%; background:radial-gradient(circle,rgba(192,154,70,.26),transparent 68%)} .v3-verdict .lb{font-size:10.5px;letter-spacing:4px;color:#9FBFB4;font-weight:700;position:relative;z-index:2} .v3-verdict .big{font-family:var(--serif);font-size:24px;letter-spacing:3px;margin-top:10px;font-weight:700; display:flex;align-items:center;gap:9px;color:#FDFAF0;position:relative;z-index:2;flex-wrap:wrap} .v3-verdict .big i{font-style:normal;background:linear-gradient(160deg,#D9B863,#9A7729);color:#241806; font-size:14px;padding:3px 12px;border-radius:6px;letter-spacing:4px;font-weight:700} .v3-verdict .expl{font-size:12.5px;color:#C4D8D1;margin-top:10px;line-height:1.8;position:relative;z-index:2} .v3-verdict .pro{font-size:10.5px;color:#8DAEA3;margin-top:10px;padding-top:9px; border-top:1px solid rgba(192,154,70,.20);line-height:1.75;position:relative;z-index:2} .v3-verdict .warn{font-size:10.5px;color:#E3C98F;margin-top:9px;line-height:1.75;position:relative;z-index:2} /* ---------- ⑤ 五行旺衰条 ---------- */ .v3-wx{padding:13px 14px;margin-bottom:12px} .v3-wxrow{display:flex;align-items:center;gap:9px;font-size:12.5px;margin:7px 0} .v3-wxrow .nm{width:20px;font-family:var(--serif);font-size:14px;color:var(--ink2);flex:none;font-weight:700} .v3-wxrow .track{height:7px;border-radius:4px;background:var(--line2);flex:1;overflow:hidden} .v3-wxrow .track i{display:block;height:100%;border-radius:4px} .v3-wxrow .vv{width:26px;text-align:right;font-family:var(--serif);font-size:13px;color:var(--ink2);flex:none;font-weight:700} .v3-wxrow .st{width:34px;text-align:right;font-size:10.5px;color:var(--ink3);flex:none} .v3-wxrow.self .nm,.v3-wxrow.self .vv{color:var(--brand)} .v3-wxrow.zero .nm{color:var(--red)} /* ---------- ⑥ 分项评分表（专业人验货的那一屏） ---------- */ .v3-scoretab{padding:4px 0;margin-bottom:12px} .v3-sr{display:flex;align-items:center;gap:10px;padding:8px 14px;font-size:13px} .v3-sr .k{width:64px;color:var(--ink2);flex:none} .v3-sr .track{flex:1;height:5px;border-radius:4px;background:var(--line2);overflow:hidden} .v3-sr .track i{display:block;height:100%;border-radius:4px;background:var(--brand2)} .v3-sr .v{width:26px;text-align:right;font-family:var(--serif);font-size:13px;font-weight:700;flex:none} .v3-sr.tot{border-top:1px solid var(--line);margin-top:3px;padding-top:10px} .v3-sr.tot .k{font-weight:700;color:var(--ink)} .v3-sr.tot .v{color:var(--gold);font-size:15px} .v3-scorenote{padding:0 14px 10px;font-size:10.5px;color:var(--ink3);line-height:1.7} /* ---------- ⑦ 大运时间轴（十年一运，可读版） ---------- */ .v3-dy{display:flex;gap:7px;padding:13px 14px;overflow-x:auto;margin-bottom:12px;-webkit-overflow-scrolling:touch} .v3-dy::-webkit-scrollbar{display:none} .v3-dy .d{flex:1 0 auto;min-width:56px;text-align:center;border:1px solid var(--line);border-radius:10px; padding:8px 4px;background:var(--paper)} .v3-dy .d.on{background:var(--brand);border-color:var(--brand)} .v3-dy .d .a{font-family:var(--serif);font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:1px} .v3-dy .d.on .a{color:#EFE4C6} .v3-dy .d .b{font-size:9.5px;color:var(--ink3);margin-top:4px;letter-spacing:.5px} .v3-dy .d.on .b{color:#A9C7BC} /* ---------- ⑧ 工具箱四分组 ---------- */ .v3-grp{display:flex;align-items:center;gap:9px;margin:18px 0 9px} .v3-grp:first-child{margin-top:0} .v3-grp b{font-family:var(--serif);font-size:15px;font-weight:700;letter-spacing:1.5px} .v3-grp .ln{flex:1;height:1px;background:var(--line)} .v3-grp span{font-size:10.5px;color:var(--ink3);white-space:nowrap} /* 工具箱图标改成单线 SVG（v3 红线：不加 emoji，气质走典籍） */ .tile .ti{display:grid;place-items:center;height:22px} .tile .ti svg{width:21px;height:21px;stroke:var(--brand);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round} .tile:active{background:var(--brandSoft)} /* ============================================================ 传统排盘表 · 专业盘面（会员视图） 背景：彪哥 23:19「咱也想赚会员钱，排盘感觉不专业」——引擎不缺东西， 缺的是一屏看得全的横表 + 干支五行配色 + 大运点开看流年。 ============================================================ */ .bzt{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13px;background:var(--card)} .bzt th,.bzt td{border:1px solid var(--line);padding:5px 2px;text-align:center;vertical-align:middle;word-break:break-all} .bzt th{background:var(--paper2);color:var(--ink2);font-size:12px;font-weight:600;letter-spacing:1px} .bzt td.lb{background:var(--paper2);color:var(--ink3);font-size:11px;width:56px;letter-spacing:.5px} .bzt .gz{font-family:var(--serif);font-size:19px;font-weight:700;letter-spacing:1px;line-height:1.25} .bzt .cg{font-family:var(--serif);font-size:13.5px;letter-spacing:1px} .bzt .ss{font-size:11.5px;color:var(--ink2)} .bzt .ss.dm{color:var(--gold);font-weight:700} .bzt .ny{font-size:11.5px;color:var(--ink3)} .bzt .kw{font-size:11.5px;color:var(--red);font-weight:600} .bzt .shs{font-size:10.5px;color:var(--gold);line-height:1.5} .bzi{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline} .bzi b{font-weight:600} .bzrow{margin-top:6px;font-size:12.5px;color:var(--ink2);line-height:1.7} .bzrow b{font-family:var(--serif);font-weight:600;font-size:13.5px;color:var(--ink)} .wxp{margin-right:7px;font-size:12.5px} .wxp b{font-family:var(--serif);margin-right:2px} .gxc{display:inline-block;border:1px solid var(--line);border-radius:7px;padding:1px 6px;margin:2px 4px 0 0;font-size:11.5px;background:var(--paper)} .bzdy{display:flex;flex-wrap:wrap;gap:6px} .bzdy .c{border:1px solid var(--line);border-radius:9px;padding:3px 8px;background:var(--paper);cursor:pointer;text-align:center;line-height:1.15} .bzdy .c.on{border-color:var(--gold);background:var(--goldSoft)} .bzdy .c i{display:block;font-style:normal;font-size:10.5px;color:var(--ink3);margin-top:1px;font-family:var(--sans)} .bzdy .gz{font-family:var(--serif);font-size:15px;font-weight:700;letter-spacing:1px} .bzln{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);display:flex;flex-wrap:wrap;gap:5px} .bzln .lnc{border:1px solid var(--line2);border-radius:7px;padding:2px 6px;background:var(--card);text-align:center;line-height:1.15} .bzln .lnc i{display:block;font-style:normal;font-size:10px;color:var(--ink3)} .bzln .lnc em{display:block;font-style:normal;font-size:10px;color:var(--ink3)} .bzln .gz{font-family:var(--serif);font-size:14px;font-weight:700} /* 运营后台入口：官网/网页版一律不出现。 彪哥 23:40：「网页版的也不要后台入口，我本地桌面上有后台入口就够了」—— 入口只留在他自己桌面的快捷方式上（https://api.cimingtang.cn/admin， 或 cimingtang.cn/admin 会 307 过去）。这里留一条兜底：万一有人把带 .adminlink 的链接加回页面，任何尺寸都不显示。*/ .adminlink{display:none!important} /* ============================================================ 官网首页 · 与 App 首页同一套 v3 典藏版语言 彪哥 08:05「手机版和网页版不一样，首页」—— App 首页是 v3（墨玉青/旧金/宣纸、衬线汉字标题、金色分隔线、单线图标）， 官网首页还停在 v3 之前那套（无衬线大标题、emoji 功能卡），两边不像一家人。 这里只把「脸」统一，不动官网的活（介绍 / 正源 / 下载安装）。 作用域限定 body.home（官网首页），不碰 App 内页面。 ============================================================ */ body.home .hero .kicker{font-size:13.5px;letter-spacing:5.5px;text-indent:5.5px;color:var(--gold);font-weight:700} body.home .hero h1{font-family:var(--serif);font-size:31px;font-weight:700;letter-spacing:2px;line-height:1.42} body.home .hero h1 em{color:var(--brand)} body.home .hero .orn{display:flex;align-items:center;gap:10px;max-width:340px;margin:15px auto 0} body.home .hero .orn i{height:1px;flex:1} body.home .hero .orn i:first-child{background:linear-gradient(90deg,transparent,var(--goldLine))} body.home .hero .orn i:last-child{background:linear-gradient(270deg,transparent,var(--goldLine))} body.home .hero .orn s{text-decoration:none;font-size:10.5px;letter-spacing:3px;color:var(--gold)} body.home .hero > p{max-width:600px} body.home .slogan{font-family:var(--serif);text-align:center;font-size:15px;letter-spacing:2px; color:var(--ink2);max-width:640px;margin:18px auto 22px;line-height:1.8} body.home .slogan em{font-style:normal;color:var(--brand)} body.home .feat .ic{width:36px;height:36px;border-radius:10px;background:var(--goldSoft);border:1px solid var(--goldLine); display:grid;place-items:center;font-size:0;line-height:1} body.home .feat .ic svg{width:18px;height:18px;stroke:var(--gold);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round} body.home .feat h3{font-family:var(--serif);font-size:15px;letter-spacing:1.2px;margin:11px 0 5px} /* 2026-10-29 22:5x 主人：「为啥两段话的头标题不一边大呢？就按下边那个大小就行」 —— 上卡「我们的依据，从哪来」是 22.5px、下卡「为什么不是缺啥补啥」是 17px， 两张卡同宽并排之后，头一大一小更显眼。统一按下卡那档：17px / 字重 600 / 字距 2.4。 */ body.home .zhengyuan > h2{ font-family:var(--serif);font-size:17px;font-weight:600; letter-spacing:2.4px;margin:0 0 14px; } body.home .two .line h3{font-family:var(--serif);letter-spacing:5px} body.home .dlbox .info h3{font-family:var(--serif);letter-spacing:1.5px} body.home .nav .brand{font-family:var(--serif);letter-spacing:1.5px} /* ---------- 取名正源入口（2026-10-29 主人定） ---------- 「单独做一个页儿，从哪块跳转进去」—— 三个口子：导航 / 页尾那张卡的末尾 / 页脚。 导航这个用金色描边，跟「赐名码登入」的灰底区分开：一个是老客户回来，一个是新客人想多看看。 */ body.home .nav .links a.navref{color:var(--gold);border:1px solid var(--goldLine);background:transparent} body.home .nav .links a.navref:hover{background:var(--goldSoft);color:var(--gold);border-color:var(--gold2)} body.home .zy-more{margin:15px 0 0;text-align:center} body.home .zy-more a{font-size:14px;color:var(--gold);text-decoration:none; border-bottom:1px dashed var(--goldLine);padding-bottom:2px;letter-spacing:.3px} body.home .zy-more a:hover{color:var(--red);border-bottom-color:var(--red)} @media (max-width:640px){ body.home .nav .links a.navref{padding:6px 8px;font-size:11.5px} body.home .zy-more a{font-size:12.5px;line-height:1.8;display:inline-block} } /* ---------- 文化页共用小件（名·字·号 / 汉字源流 / 交节查询） ---------- */ .guap{font-size:13.5px;color:var(--ink2);line-height:1.95;margin-top:12px} .guabtns{display:flex;gap:7px;margin-top:15px} .guabtns .btn{flex:1;padding:9px 2px;font-size:11.5px;white-space:nowrap} .guahd{margin:18px 0 8px;font-size:11.5px;letter-spacing:6px;color:var(--gold); padding-left:10px;border-left:2px solid var(--goldLine)} .guaend{margin-top:15px;padding:13px 14px;border-radius:12px;background:var(--goldSoft); border:1px solid var(--goldLine);font-family:var(--serif);font-size:14.5px; line-height:1.9;color:var(--ink);letter-spacing:.5px} /* 姓氏（《百家姓》503 姓总表 + 源流补档） */ .xsh{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:2px} .xsn{font-family:var(--serif);font-size:19px;font-weight:700;letter-spacing:1px;color:var(--ink)} .xsn i{font-family:var(--sans);font-size:12px;font-style:normal;color:var(--gold);margin-left:2px} .xspy{font-size:12.5px;color:var(--brand)} .xstag{font-size:10.5px;color:var(--ink3);letter-spacing:.5px} .bknow{margin:12px 0 2px;display:flex;flex-direction:column;gap:8px} .bk{font-size:12.5px;color:var(--ink2);line-height:1.9;padding-left:10px; border-left:2px solid var(--goldLine)} .bjxhd{display:flex;justify-content:space-between;align-items:baseline;gap:8px; flex-wrap:wrap;margin:0 0 8px} .bjxhd span:first-child{font-size:12.5px;color:var(--brand)} .bjxgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .bjxcell{background:var(--card);border:1px solid var(--line);border-radius:10px; padding:7px 4px 6px;text-align:center;cursor:pointer;overflow:hidden} .bjxcell:active{background:var(--goldSoft);border-color:var(--goldLine)} .bjxc{font-family:var(--serif);font-size:15px;font-weight:700;letter-spacing:1px;color:var(--ink)} .bjxp{font-size:10px;color:var(--ink3);margin-top:2px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} /* 名 · 字 · 号（文化知识） */ .mzchips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px} .mzchip{font-size:11.5px;padding:5px 10px;border-radius:999px;border:1px solid var(--line); background:var(--card);color:var(--ink2);letter-spacing:.5px} .mzchip.on{background:var(--brandSoft);border-color:var(--brand);color:var(--brand);font-weight:600} .mzrow{display:flex;align-items:baseline;justify-content:space-between;gap:10px; padding:11px 2px;border-bottom:1px solid var(--line)} .mzrow:last-child{border-bottom:0} .mzrow:active{background:var(--brandSoft)} .mznm{font-family:var(--serif);font-size:15.5px;font-weight:700;letter-spacing:1.5px;color:var(--ink)} .mznm span{font-family:var(--sans);font-size:11.5px;font-weight:400;letter-spacing:0; color:var(--gold);margin-left:8px} .mzd{font-size:10.5px;color:var(--faint);letter-spacing:.5px;white-space:nowrap} .mzfa{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)} .mzfa b{flex:0 0 74px;font-size:12.5px;color:var(--brand);letter-spacing:1px} .mzfa span{flex:1;font-size:12.5px;color:var(--ink2);line-height:1.8} .mzk{padding:9px 0;border-bottom:1px solid var(--line)} .mzk:last-child{border-bottom:0} .mzkq{font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:.5px} .mzka{font-size:12.5px;color:var(--ink2);line-height:1.9;margin-top:5px} .mzdet-nm{font-family:var(--serif);font-size:26px;font-weight:700;letter-spacing:3px;color:var(--ink)} .mzdet-sub{font-size:11.5px;color:var(--gold);letter-spacing:.5px;margin-top:4px} .mzrow2{display:flex;gap:10px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line)} .mzrow2 span{flex:0 0 26px;font-size:11.5px;color:var(--faint)} .mzrow2 b{flex:1;font-family:var(--serif);font-size:16px;font-weight:700; letter-spacing:2px;color:var(--brand)} /* ============================================================ 汉字源流（文化知识） 六书 6 卡 · 部首网格（153 个偏旁形）· 精选字源网格 · 查字卡 底色与线条沿用 v3 令牌，与 64 卦 / 名·字·号 同一套观感。 ============================================================ */ .zyls{padding:11px 0;border-bottom:1px solid var(--line)} .zyls:last-of-type{border-bottom:0} .zyls-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px} .zyls-h b{font-family:var(--serif);font-size:15px;font-weight:700;letter-spacing:2px;color:var(--brand)} .zyls-h span{font-size:11.5px;color:var(--gold);letter-spacing:.3px} .zyls-q{margin-top:6px;padding:8px 11px;border-radius:10px;background:var(--goldSoft); border:1px solid var(--goldLine);font-family:var(--serif);font-size:13px; line-height:1.85;color:var(--ink);letter-spacing:.5px} .zyls-q i{display:block;margin-top:3px;font-family:var(--sans);font-style:normal; font-size:10px;color:var(--ink3);letter-spacing:0} .zyls-s{font-size:12.5px;color:var(--ink2);line-height:1.9;margin-top:7px} .zyls-eg{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px} .zyls-c{font-family:var(--serif);font-size:14px;line-height:1;padding:5px 8px;border-radius:8px; background:var(--brandSoft);border:1px solid var(--brand);color:var(--brand)} .zybg{display:grid;grid-template-columns:repeat(6,1fr);gap:5px} .zybcell{background:var(--card);border:1px solid var(--line);border-radius:9px; padding:6px 2px 5px;text-align:center;cursor:pointer;overflow:hidden} .zybcell:active{background:var(--goldSoft);border-color:var(--goldLine)} .zybz-c{font-family:var(--serif);font-size:16px;font-weight:700;line-height:1.15;color:var(--ink)} .zybz-n{font-size:8.5px;color:var(--ink3);margin-top:2px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .zygrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px} .zycell{background:var(--card);border:1px solid var(--line);border-radius:10px; padding:8px 2px 6px;text-align:center;cursor:pointer} .zycell:active{background:var(--goldSoft);border-color:var(--goldLine)} .zyc-c2{font-family:var(--serif);font-size:18px;font-weight:700;line-height:1.15;color:var(--ink)} .zyc-zf{font-size:9px;color:var(--gold);margin-top:3px;letter-spacing:.3px} .zyc-who{font-size:11.5px;color:var(--brand);letter-spacing:1px;margin:2px 0 6px} .zycard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card); padding:13px 13px 12px;margin-bottom:9px} .zyc-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:9px;padding-bottom:9px; border-bottom:1px solid var(--line)} .zyc-c{font-family:var(--serif);font-size:30px;font-weight:700;line-height:1;letter-spacing:2px;color:var(--ink)} .zyc-py{font-size:12.5px;color:var(--gold);letter-spacing:.5px} .zyc-tag{font-size:10.5px;color:var(--ink3);margin-left:auto} .zyc-row{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)} .zyc-row b{flex:0 0 62px;font-size:11.5px;font-weight:400;color:var(--faint);letter-spacing:.5px} .zyc-row span{flex:1;font-size:12.5px;color:var(--ink2);line-height:1.85} .zybz2{margin-top:9px;padding:10px 12px;border-radius:11px;background:var(--goldSoft); border:1px solid var(--goldLine)} .zybz2-t{font-family:var(--serif);font-size:13px;font-weight:700;letter-spacing:1px;color:var(--brand)} .zybz2-p{font-size:12px;color:var(--ink2);line-height:1.85;margin-top:5px} .zybz2-p b{display:block;margin-top:3px;color:var(--ink)} .zybz2-s{font-size:11.5px;color:var(--ink3);line-height:1.8;margin-top:5px} .zyc-u{margin-top:10px;padding:10px 12px;border-radius:11px;background:var(--brandSoft); border:1px solid var(--brand);font-family:var(--serif);font-size:13px; line-height:1.85;color:var(--brand);letter-spacing:.3px} .zyc-note{font-size:11.5px;color:var(--ink3);line-height:1.85;margin-top:9px} /* ============================================================ 二十四节气 + 生肖民俗（文化知识） 节气那页的交节日期是当场算的（QM.solarTermsOf），不是固定表。 ============================================================ */ .jqhd{display:flex;justify-content:space-between;align-items:baseline;gap:8px; flex-wrap:wrap;margin:0 0 6px} .jqhd span:first-child{font-size:12.5px;color:var(--brand)} .jqrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px; padding:10px 2px 9px;border-bottom:1px solid var(--line);cursor:pointer} .jqrow:active{background:var(--brandSoft)} .jqnm{display:flex;align-items:center;gap:7px;font-family:var(--serif); font-size:16px;font-weight:700;letter-spacing:2px;color:var(--ink)} .jqnm i{font-family:var(--sans);font-style:normal;font-size:9.5px;font-weight:400; letter-spacing:0;color:var(--gold);border:1px solid var(--goldLine); background:var(--goldSoft);border-radius:6px;padding:1px 5px} .jqdt{margin-left:auto;font-size:11.5px;color:var(--brand);letter-spacing:.5px;white-space:nowrap} .jqdt span{color:var(--ink3);font-size:10.5px;margin-left:4px} .jqjie{flex:0 0 100%;font-size:11.5px;color:var(--ink3);line-height:1.75} .zyc-c2s{font-size:26px;letter-spacing:2px} /* ============================================================ 演算帷幕：呼吸灯 + 步骤词（彪哥 2026-10-15） ------------------------------------------------------------ 为什么要有它：出名字太快，用户不珍惜；而且「排盘 → 定喜用 → 出池 → 配字 → 校验 → 定稿」这套动作本身就是价值，得让它看得见。 呼吸周期 3.2 秒（和缓的吸气—呼气），三处同时呼吸但相位错开： 光晕（scale+opacity）、声呐环（向外扩散两道）、印章（光在字上收放）。 最短停留时间在 app.js 的 LD_KINDS 里，改节奏不用动样式。 ============================================================ */ /* 背景：不是死黑，是「会呼吸的墨」。三层滤镜—— 底色墨绿黑 + 三个极暗的光斑（跟随呼吸灯但慢一半：9 秒一个周期， 明暗与缩放同时起伏，像灯芯在深潭底下一明一灭）+ 四角压暗的暗角。 神秘感来自「看不出光源在哪，但画面是活的」。 */ /* 底层墨色深浅由后台「帷幕底色深浅」控制（0 = 全透，100 = 全黑）， 默认 .86 —— 滤镜感而不是死黑，底下的页面能隐隐透出来。 */ /* ---- 演算帷幕：恢复原貌（墨玉青底 + 旧金），只让进度条带代码感 ---- 2026-10-24 主人明确：「我告诉你改进度条，告诉你改页面了吗？」 上一版把底色、光斑、印章、正文字体全换成黑蓝等宽 —— 那是我自作主张扩大范围。 这里把帷幕整体还原成宣纸墨玉青 + 旧金（与全站一致）， 改动的只有底下那根进度条：加宽、黑蓝、带流动的代码纹与扫描光。 代码感交给进度条自己承担，不再让整屏出戏。 */ .ld-a{--x:0} .loader{position:fixed;inset:0;z-index:90; /* 2026-10-26 主人：「这个颜色也没变」——演算进度条原来写死成黑蓝（10-24 定的）。 现在全站要统一跟皮肤走，所以抽成三个变量，每套皮肤各自给自己的一条。 默认值仍是原来那两个蓝，所以墨玉青下视觉 100% 不变。 */ --ldA:var(--gold); /* 进度条主色吃皮肤 --gold：后台换肤，进度条跟着换（原蓝 #2F8FE8，2026-10-27 主人两连问后落实） */ --ldA2:color-mix(in srgb, var(--gold) 55%, #FFF3D6); /* 高光 = 皮肤金混亮米 */ --ldA0:color-mix(in srgb, var(--gold) 30%, #1D1408); /* 尾端 = 皮肤金混暖墨 */ --ldMono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace; background:rgba(10,18,17,var(--veil-dim,.80)); display:flex;align-items:center;justify-content:center; opacity:0;visibility:hidden;transition:opacity .34s ease,visibility .34s} .loader.on{opacity:1;visibility:visible} /* 呼吸的光斑层：比印章呼吸（4.8s）慢一半，9 秒一个周期 */ .loader::before{content:'';position:absolute;inset:-18%;pointer-events:none; background: radial-gradient(ellipse 58% 46% at 50% 40%, rgba(34,58,53,.5), transparent 70%), radial-gradient(ellipse 42% 36% at 16% 82%, rgba(26,45,41,.42), transparent 72%), radial-gradient(ellipse 46% 40% at 86% 14%, rgba(30,49,44,.36), transparent 74%); animation:ldBreath 9s ease-in-out infinite} /* 暗角：四角压暗，把视线收进中央 */ .loader::after{content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 115% 95% at 50% 44%, transparent 52%, rgba(3,8,7,calc(var(--veil-dim,.80) * .9)) 100%)} .loader .ldbox{position:relative;z-index:1} @keyframes ldBreath{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}} /* 帷幕开着时锁住页面滚动，别让右侧露出滚动条穿帮 */ html.ld-lock,html.ld-lock body{overflow:hidden!important} .ldbox{text-align:center;padding:0 30px;max-width:440px;width:100%} .ldsealwrap{position:relative;width:118px;height:118px;margin:0 auto 26px; display:flex;align-items:center;justify-content:center} .ldglow{position:absolute;width:152px;height:152px;border-radius:50%; background:radial-gradient(circle,rgba(192,154,70,.5) 0%,rgba(192,154,70,0) 68%); animation:ldGlow 4.8s ease-in-out infinite} .ldring{position:absolute;width:100px;height:100px;border-radius:50%; border:1px solid rgba(192,154,70,.55);animation:ldRing 4.8s ease-out infinite} .ldring.d{animation-delay:2.4s} .ldseal{position:relative;width:62px;height:62px;border:1px solid var(--gold2); border-radius:11px;display:flex;align-items:center;justify-content:center; font-family:var(--serif);font-size:17px;line-height:1.06;letter-spacing:1px; color:#F4EDDD;animation:ldSeal 4.8s ease-in-out infinite} .ldstep{font-family:var(--serif);font-size:20px;letter-spacing:2px;color:#F4EDDD;line-height:1.45} .ldstep.in{animation:ldIn var(--ldInMs,.5s) ease both} /* 「本案」行：把客户这次的真实选取复述一遍 */ .ldcase{font-size:11.5px;color:#6F827C;letter-spacing:.4px;line-height:1.65; margin:0 auto 14px;max-width:330px;word-break:break-all} .ldsub{font-size:13px;color:#8FA39D;letter-spacing:.6px;margin-top:9px;line-height:1.7;min-height:22px} /* 构建日志已撤（主人没要，占了整块蓝黑面板）——留着选择器只为旧缓存页面不塌 */ .ldcode{display:none!important} /* ---- 进度条 v4：八卦为尺 · 百家姓为流 · 阴阳鱼为枢 ---- 2026-10-27 主人：「要八卦和百家姓元素阴阳鱼元素相结合，要有设计感，符合赐名堂风格」。 一根条上叠三层，自下而上： ① 卦尺：先天八卦八格（乾兑离震巽坎艮坤）刻在条子正上方，走过的由暗转亮 —— 当罗盘刻度用； ② 姓流：《百家姓》开篇字在条内横排，走过的由墨金转赤金 —— 姓是起名的第一个字； ③ 太极：阴阳鱼骑在笔锋上，随进度右移并自转 —— 起名之枢。 进度只认一个数：#ldDrive 上的 --p（0~1），裁切、鱼位、卦格全由它推； 颜色全取自皮肤变量（--gold / --gold2），后台换肤这一条跟着换，不再写死。 */ /* 条子做成一块「盘」：上沿一条 10px 的卦尺，下沿跑百家姓，鱼在两界之间走。 卦尺独占深底，不跟着进度变金 —— 否则金刻度压在金底上就看不见了。 */ .lddrive{position:relative;max-width:100%;margin:28px auto 0;--p:0} .ldbar{--gz:11px;--nz:26px;position:relative;height:calc(var(--gz) + var(--nz)); border-radius:2px;background:#140F08; border:1px solid color-mix(in srgb, var(--gold) 34%, transparent); box-shadow:inset 0 1px 4px rgba(0,0,0,.9),0 0 0 1px rgba(6,10,9,.55)} /* ① 卦尺：压在上沿的八格。实线为阳、断开为阴，走过一格亮一格 */ .ldgua{position:absolute;top:0;left:0;right:0;height:var(--gz);z-index:4; display:flex;align-items:center;padding:0 4px; border-bottom:1px solid color-mix(in srgb, var(--gold) 14%, transparent); background:linear-gradient(180deg,rgba(30,23,12,.65),rgba(20,15,8,0) 92%)} .ldgua span{flex:1;display:flex;flex-direction:column;align-items:center;gap:1.5px; color:color-mix(in srgb, var(--gold2) 40%, transparent); transition:color .55s ease} .ldgua span b{display:block;width:13px;height:1.2px;border-radius:1px; background:currentColor;transition:box-shadow .55s ease} .ldgua span b.br{background:linear-gradient(90deg,currentColor 0 4.3px,transparent 4.3px 8.7px,currentColor 8.7px 13px)} .ldgua span.on{color:var(--gold2)} .ldgua span.on b{box-shadow:0 0 6px color-mix(in srgb, var(--gold2) 60%, transparent)} .ldgua span.now{color:color-mix(in srgb, var(--gold2) 66%, transparent)} .ldgua span.now b{animation:ldGuaPulse 2.2s ease-in-out infinite} @keyframes ldGuaPulse{0%,100%{opacity:.4}50%{opacity:1}} /* 扫光：一道极淡暖光缓缓扫过姓流那一段 */ .ldbar::after{content:'';position:absolute;inset:var(--gz) 0 0 0;pointer-events:none; background:linear-gradient(90deg,transparent 38%,rgba(255,240,205,.09) 50%,transparent 62%); background-size:260% 100%;animation:ldSweep 6.4s linear infinite} @keyframes ldSweep{0%{background-position:200% 0}100%{background-position:-100% 0}} /* ② 姓流：两层同一段文本、同一套排版，只差颜色与裁切，所以逐字对齐 */ .ldname{position:absolute;inset:var(--gz) 0 0 0;z-index:1;display:flex;align-items:center;padding-left:11px; font-family:var(--serif);font-size:12px;letter-spacing:4.6px;line-height:1; color:color-mix(in srgb, var(--gold2) 38%, transparent); white-space:nowrap;overflow:hidden;pointer-events:none; -webkit-mask-image:linear-gradient(90deg,#000 0 88%,transparent 100%); mask-image:linear-gradient(90deg,#000 0 88%,transparent 100%)} .ldname.lit{color:var(--gold2);z-index:3; text-shadow:0 0 9px color-mix(in srgb, var(--gold2) 55%, transparent); clip-path:inset(0 calc(100% - var(--p,0) * 100%) 0 0); transition:clip-path .55s cubic-bezier(.3,.85,.3,1)} .ldbar i{position:absolute;inset:var(--gz) 0 0 0;z-index:2;display:block; clip-path:inset(0 calc(100% - var(--p,0) * 100%) 0 0); transition:clip-path .55s cubic-bezier(.3,.85,.3,1); background:linear-gradient(90deg, color-mix(in srgb, var(--gold) 24%, transparent), color-mix(in srgb, var(--gold2) 42%, transparent) 70%, color-mix(in srgb, var(--gold2) 54%, transparent))} /* ③ 太极：骑在笔锋上的阴阳鱼（自转 + 呼吸光晕） */ .ldfish{position:absolute;top:calc(100% - var(--nz) / 2);z-index:5;width:22px;height:22px; left:clamp(11px, calc(var(--p,0) * 100%), calc(100% - 11px)); transform:translate(-50%,-50%); transition:left .55s cubic-bezier(.3,.85,.3,1); color:var(--gold2);pointer-events:none} .ldfish::before{content:'';position:absolute;inset:-7px;border-radius:50%; background:radial-gradient(circle,color-mix(in srgb, var(--gold2) 48%, transparent) 0%,transparent 66%); opacity:.8;animation:ldFishGlow 4.2s ease-in-out infinite} .ldfish svg{position:relative;display:block;width:100%;height:100%; filter:drop-shadow(0 0 5px color-mix(in srgb, var(--gold2) 55%, transparent)); animation:ldFishSpin 7.2s linear infinite} @keyframes ldFishSpin{to{transform:rotate(360deg)}} @keyframes ldFishGlow{0%,100%{opacity:.4;transform:scale(.86)}50%{opacity:.95;transform:scale(1.08)}} .ldpct{font-size:12px;color:var(--gold2);letter-spacing:1.4px;margin-top:11px; display:flex;align-items:baseline;justify-content:center;gap:5px;font-variant-numeric:tabular-nums} .ldpct b{font-family:var(--ldMono);font-size:19px;font-weight:600; color:#F4EDDD;letter-spacing:0;text-shadow:0 0 10px color-mix(in srgb, var(--gold) 45%, transparent); min-width:52px;text-align:right;display:inline-block} .ldpct .u{font-size:11px;color:var(--gold2);opacity:.85} .ldpct .sep{color:rgba(192,154,70,.45);margin:0 2px} /* 小屏（<400px）：衬线 18 字会折行 —— 压到 16px 保住一行 */ @media (max-width:400px){ .ldbox{padding:0 20px} .ldstep{font-size:16px;letter-spacing:1px} .ldsub{font-size:12px} .ldbar,.lddrive{max-width:100%} .ldbar{--gz:10px;--nz:24px} .ldname{font-size:10.5px;letter-spacing:3.6px;padding-left:8px} .ldfish{width:20px;height:20px;left:clamp(10px, calc(var(--p,0) * 100%), calc(100% - 10px))} .ldgua{padding:0 3px} .ldgua span{flex:1;align-items:center} .ldgua span b{width:11px;height:1.1px} .ldgua span b.br{background:linear-gradient(90deg,currentColor 0 3.6px,transparent 3.6px 7.4px,currentColor 7.4px 11px)} } @keyframes ldGlow{0%,100%{transform:scale(.72);opacity:.3}50%{transform:scale(1.12);opacity:.95}} @keyframes ldRing{0%{transform:scale(.85);opacity:.6}72%,100%{transform:scale(1.6);opacity:0}} @keyframes ldSeal{0%,100%{box-shadow:0 0 4px rgba(192,154,70,.14)}50%{box-shadow:0 0 26px rgba(192,154,70,.62)}} @keyframes ldIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* 结果卡逐张浮入（配合演算帷幕，让名单「落」下来而不是啪一下全出） */ @keyframes cardIn{from{opacity:0;transform:translateY(11px)}to{opacity:1;transform:none}} /* 入场不做 fill both：动画结束后必须把 transform 还给元素自己， * 否则下面 .namecard:hover 的 translateY(-2px) 会被动画的最后一帧按死，鼠标移上去一点反应都没有。 */ #resultList .namecard{animation:cardIn .44s cubic-bezier(.2,.7,.3,1)} /* 页码行：第几批 · 本批几个 · 累计看过多少 + 排序开关 */ .pgline{display:flex;justify-content:space-between;align-items:baseline;gap:10px; flex-wrap:wrap;font-size:12px;color:var(--ink3);letter-spacing:.5px; padding:0 2px 2px} .pgline b{color:var(--brand);font-weight:600} .pgline a{color:var(--gold);text-decoration:none;font-size:12px;letter-spacing:.5px; border-bottom:1px solid var(--goldLine);padding-bottom:1px} @media (prefers-reduced-motion:reduce){ .ldglow,.ldring,.ldseal,.loader::before,#resultList .namecard, .ldfish svg,.ldfish::before,.ldbar::after,.ldgua span.now b{animation:none} } /* 落款：印章胀一下再收住（配合「构建完成 · 请过目」） */ .ldseal.seal{animation:ldSealEnd var(--sealMs,.82s) cubic-bezier(.2,.85,.3,1) both} @keyframes ldSealEnd{ 0%{transform:scale(1.26);box-shadow:0 0 40px color-mix(in srgb, var(--gold) 85%, transparent);border-color:var(--ldA2)} 60%{transform:scale(.97);box-shadow:0 0 18px color-mix(in srgb, var(--gold) 40%, transparent)} 100%{transform:scale(1);box-shadow:0 0 8px color-mix(in srgb, var(--gold) 20%, transparent)} } /* 桌面档帷幕放大：62px 印章在大屏上太小，撑起来 */ @media (min-width:900px){ .ldsealwrap{width:142px;height:142px;margin-bottom:30px} .ldglow{width:190px;height:190px} .ldring{width:122px;height:122px} .ldseal{width:80px;height:80px;font-size:21px;border-radius:12px} /* 标题走等宽 + 专业术语，一行 14~18 字，22px 刚好一行放得下不折行 */ .ldstep{font-size:21px;letter-spacing:.5px} .ldsub{font-size:12.5px;margin-top:10px} .ldcase{font-size:11.5px;max-width:440px} .ldcode{max-width:440px;height:132px;font-size:11px} .ldbar{max-width:100%;--gz:13px;--nz:31px} .lddrive{max-width:100%;margin-top:22px} .ldname{font-size:13px;letter-spacing:5.6px;padding-left:13px} .ldfish{width:26px;height:26px;left:clamp(13px, calc(var(--p,0) * 100%), calc(100% - 13px))} .ldgua{padding:0 5px} .ldgua span b{width:16px;height:1.4px;border-radius:1px} .ldgua span b.br{background:linear-gradient(90deg,currentColor 0 5.3px,transparent 5.3px 10.7px,currentColor 10.7px 16px)} } /* ==================== 五行缺口提示块（2026-10-22 新增） ==================== * 老板要求：五行那块要「用醒目的字提示五行缺点」。 * 所以它不是正文里一句话，而是名字列表上方一个独立色块： * 左边一道朱红竖线 + 淡赭底 + 加大加粗的标题。 * 配色沿用全站（宣纸 --paper / 墨玉青 --brand / 旧金 --gold），只把 --red 提出来做强调， * 这样它醒目，但不跳戏 —— 不会像那颗被撤掉的粉红心一样跟版面打架。 */ .wxgap{ position:relative;margin:0 0 12px;padding:15px 15px 13px; background:linear-gradient(178deg,#FDF7F3 0%,#FAEEE8 100%); border:1px solid #E9CBBD;border-left:4px solid var(--red); border-radius:var(--r-card); } .wxgap-t{font:600 19px/1.45 var(--serif);color:var(--red);letter-spacing:.8px;margin-bottom:7px} .wxgap-b{font:13.5px/1.85 var(--sans);color:var(--ink2)} .wxgap-b2{margin-top:3px;font-size:12.5px;color:var(--ink3)} .wxgap-y{margin-top:10px;padding-top:10px;border-top:1px dashed #E9CBBD;font:12.5px/1.75 var(--sans);color:var(--ink2)} .wxgap-y b{color:var(--gold);font-weight:600} .wxgap-go{ margin-top:12px;width:100%;padding:10px;border-radius:var(--r-btn); border:1px solid var(--red);background:rgba(var(--bg-rgb),.84);color:var(--red); font:600 13px/1 var(--sans);cursor:pointer;transition:background .18s,color .18s; } .wxgap-go:hover,.wxgap-go:active{background:var(--red);color:#fff} .wxgap-go i{font-style:normal;margin-left:4px} @media (max-width:430px){ .wxgap{padding:13px 13px 12px} .wxgap-t{font-size:17.5px;letter-spacing:.5px} .wxgap-b{font-size:13px;line-height:1.8} } /* ==================== 本批概况：分数参照系（2026-10-22 新增） ==================== * 一行报数：本批几个 / 最高 / 中位 / 最低。 * 目的不是好看，是让「92.5」这个数字有位置感 —— 没有参照系的分数不产生任何疑问， * 有了位置才会有人问「凭什么我那个不是第一」，这一问就是往下走的开始。 */ .bstat{ display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 14px; margin:0 0 10px;padding:8px 13px; background:rgba(var(--bg-rgb),.74);border:1px solid var(--line); border-radius:var(--r-pill);font:12px/1.5 var(--sans);color:var(--ink3); } .bstat .bs-i b{color:var(--ink2);font-weight:600} .bstat .bs-r{display:inline-flex;align-items:baseline;gap:3px} .bstat .bs-r i{font-style:normal;color:var(--ink3)} .bstat .bs-r b{font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums} .bstat .bs-r b.hi{color:var(--red)} /* ==================== 报告锁（2026-10-22 新增） ==================== * 这不是一个"提示"，是一个**广告位**：老板说「命理报告的文案就是命理报告的广告」。 * 所以它必须当场说清"花钱能知道什么、这些事你自己为什么看不出来"， * 而不是写"付费解锁查看更多"这种废话。 * 视觉上走旧金描边 + 宣纸底，跟全站一套，不做成红色警告条。 */ .rlock{margin:14px 0;padding:18px 16px;background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--goldLine);border-radius:var(--r-card)} .rlock-eyebrow{font:11px/1 var(--sans);letter-spacing:3px;color:var(--gold);margin-bottom:9px} .rlock-t{font:600 17px/1.5 var(--serif);color:var(--ink);margin-bottom:6px} .rlock-b{font:13px/1.8 var(--sans);color:var(--ink2);margin-bottom:13px} .rlock-list{display:flex;flex-direction:column;gap:10px;margin-bottom:16px} .rlock-list>div{padding-left:11px;border-left:2px solid var(--goldLine)} .rlock-list b{display:block;font:600 13px/1.6 var(--sans);color:var(--ink)} .rlock-list span{display:block;font:12px/1.65 var(--sans);color:var(--ink3)} .rlock-go,.rlock-all{width:100%;padding:12px;border-radius:var(--r-btn);cursor:pointer;font:600 14px/1 var(--sans);margin-bottom:8px} .rlock-go{background:var(--brand);color:#fff;border:1px solid var(--brand)} .rlock-all{background:transparent;color:var(--brand);border:1px solid var(--line3)} .rlock-note{font:11.5px/1.7 var(--sans);color:var(--ink3);text-align:center;margin-top:3px} /* ---------- 购买面板 ---------- */ .planpick{display:flex;gap:8px;margin-bottom:14px} .planpick .pp{flex:1;padding:10px 7px;border:1px solid var(--line3);border-radius:var(--r-btn);text-align:center;cursor:pointer;position:relative;background:var(--card)} .planpick .pp.on{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand);background:var(--brandSoft)} .planpick .pp input{position:absolute;opacity:0;pointer-events:none} .planpick .pp-n{display:block;font:600 12.5px/1.4 var(--sans);color:var(--ink)} .planpick .pp-p{display:block;font:600 17px/1.4 var(--serif);color:var(--gold);margin:2px 0} .planpick .pp-d{display:block;font:10.5px/1.4 var(--sans);color:var(--ink3)} .paybox{display:flex;gap:13px;align-items:flex-start;padding:13px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card)} .payqr{width:104px;flex:none;border:1px solid var(--line);border-radius:8px;background:#fff} .paytx{flex:1;min-width:0} .pay-step{font:12.5px/1.95 var(--sans);color:var(--ink2)} .pay-step b{display:inline-block;width:16px;height:16px;line-height:16px;text-align:center;border-radius:50%;background:var(--brand);color:#fff;font-size:11px;margin-right:5px;font-weight:600} .pay-step .pay-amt{display:inline;width:auto;height:auto;border-radius:0;background:none;color:var(--red);font-size:14px;margin:0} .pay-no{font:600 13px/1 var(--sans);color:var(--red);letter-spacing:1px;border-bottom:1px dashed var(--red);cursor:pointer} .payhelp{display:flex;gap:10px;align-items:center;margin-top:10px;padding:9px 11px;background:var(--brandSoft);border-radius:var(--r-pill);font:12px/1.6 var(--sans);color:var(--ink2)} .paywechat{width:62px;height:62px;object-fit:cover;border-radius:6px;flex:none} @media (max-width:430px){ .planpick .pp{padding:9px 5px} .planpick .pp-n{font-size:12px} .planpick .pp-p{font-size:15.5px} .planpick .pp-d{font-size:10px} .payqr{width:92px} .rlock-t{font-size:16px} } /* 报告锁 · 窄版（寓意 / 读音 两个 tab 用）： 完整广告只放第一个 tab，这里只要一句"这段也要解锁" + 一个按钮，不重复三遍。 */ .rlock-mini{padding:14px;margin:12px 0} .rlock-mini .rlock-t{font-size:15px;margin-bottom:4px} .rlock-mini .rlock-b{margin-bottom:11px;font-size:12.5px} .rlock-mini .rlock-go{margin-bottom:0} /* 五行缺口块里的数字：缺的那一行标红，一眼看得出是哪个是 0 */ .wxgap-b b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;padding:0 1px} .wxgap-b b.z{color:var(--red);font-size:1.12em} /* 八个字本身：宋体、比正文大一档、不加粗抢眼 —— 跟后面那组五行个数（黑体粗数字） 是两个东西，字形上就得分开，否则一串读下来全是数字。 */ .wxgap-b b.gz{font-family:var(--serif);font-weight:500;font-size:1.26em;letter-spacing:1px;padding:0 2px} /* 五行块内「长短 + 用神」合并成一块：原来两行分属两个 div， 各占一段 padding + 一道虚线，白白吃掉 70px，把名字挤到屏幕外。 */ .wxgap-y .wy-x{display:block;color:var(--ink3);font-size:12px;margin-bottom:3px} /* 分数参照系：数字与标签之间要有气口，贴在一起读起来像一坨 */ .bstat .bs-r i{margin-right:2px} .bstat .bs-r b{margin-left:1px} /* 准入线说明（2026-10-22）：这批候选里只留 90 分以上的几个。 * 放在分数条下面一行小字，灰底不抢眼 —— 它的作用是「先解释，免得少被读成弱」。 */ .bstat-pass{ margin:-4px 0 10px;padding:7px 13px; font:11.5px/1.65 var(--sans);color:var(--ink3); border-left:2px solid var(--goldLine);background:rgba(var(--bg-rgb),.5); border-radius:0 6px 6px 0; } .bstat-pass b{color:var(--ink2);font-weight:600} /* 名字旁的徽标（2026-10-22 替代分数与等级）： 有出处的标出处，没出处但用字现代的标「热字」，什么都没有就不标。 */ .nbadge{ display:inline-block;margin-left:7px;padding:1px 7px;border-radius:999px; font:11px/1.7 var(--sans);letter-spacing:.3px;vertical-align:2px; } .nbadge.poem{color:var(--gold);border:1px solid var(--goldLine);background:rgba(var(--bg-rgb),.7)} .nbadge.hot{color:var(--ink3);border:1px solid var(--line);background:rgba(var(--bg-rgb),.55)} /* ========================================================================== 付费墙（2026-10-24 主人定稿）：¥9.9 完整版 · ¥68 师傅亲荐 -------------------------------------------------------------------------- 刻意沿用 rlock 的「金线描边 + 宣纸底」，不加任何促销色块、不放大红字： 这一块是让人掏钱的地方，做得越像广告越没人点；做成一封信/一张账单的样子， 反倒有人认真读。全站只有主按钮用墨绿实底，价格只出现两次。 ========================================================================== */ body.app .paywall{ margin:16px 0 4px;padding:20px 18px 18px;position:relative; background:linear-gradient(180deg,var(--card),var(--card2)); border:1px solid var(--goldLine);border-radius:var(--r-card); } body.app .pw-eyebrow{ font:11px/1 var(--sans);letter-spacing:3px;color:var(--gold);margin-bottom:10px; } body.app .pw-t{ font:600 19px/1.45 var(--serif);color:var(--ink);letter-spacing:.5px;margin-bottom:12px; } body.app .pw-list{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:9px} body.app .pw-list li{ position:relative;padding-left:16px;font:12.5px/1.75 var(--sans);color:var(--ink2); } body.app .pw-list li::before{ content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;border-radius:50%; background:var(--gold);opacity:.75; } body.app .pw-list b{color:var(--ink);font-weight:600} body.app .pw-go{ display:block;width:100%;padding:13px 12px;border:0;border-radius:var(--r-btn);cursor:pointer; background:var(--pri);color:var(--card);font:600 14.5px/1 var(--sans);letter-spacing:.5px; -webkit-tap-highlight-color:transparent; } body.app .pw-go:active{opacity:.88} body.app .pw-alt{ margin-top:11px;padding:11px 12px;text-align:center;cursor:pointer; border:1px dashed var(--goldLine);border-radius:var(--r-btn); font:12.5px/1.5 var(--sans);color:var(--gold);background:rgba(var(--bg-rgb),.6); } body.app .pw-alt:active{background:var(--goldSoft)} body.app .pw-c{margin-top:11px;text-align:center;font:12px/1.6 var(--sans);color:var(--ink3)} body.app .pw-c a{color:var(--gold);border-bottom:1px dotted var(--goldLine);cursor:pointer} body.app .pw-n{margin-top:9px;text-align:center;font:11.5px/1.6 var(--sans);color:var(--ink3)} /* 两档选择卡：并排，选中那档描金、底色转暖 */ body.app .paytiers{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 16px} body.app .pt{ position:relative;padding:14px 10px 13px;text-align:center;cursor:pointer; border:1px solid var(--line);border-radius:12px;background:var(--card); transition:border-color .18s ease,background .18s ease; -webkit-tap-highlight-color:transparent; } body.app .pt.on{border-color:var(--gold);background:var(--goldSoft)} body.app .pt-n{font:12.5px/1.5 var(--sans);color:var(--ink2);letter-spacing:1px} body.app .pt.on .pt-n{color:var(--gold)} body.app .pt-p{font:600 23px/1.3 var(--serif);color:var(--ink);margin:3px 0 5px} body.app .pt.on .pt-p{color:var(--gold)} body.app .pt-d{font:11.5px/1.6 var(--sans);color:var(--ink3)} body.app .pt-hot{ position:absolute;top:-9px;right:9px;padding:2px 8px;border-radius:999px; background:var(--red);color:#fff;font:10.5px/1.5 var(--sans);letter-spacing:1px; } @media (max-width:360px){ body.app .paytiers{grid-template-columns:1fr} body.app .pt{display:flex;align-items:center;justify-content:space-between;text-align:left;padding:12px 14px} body.app .pt-p{margin:0} } /* 68 档付完之后那一屏：像一张回执 */ body.app .prodone{ margin-top:12px;padding:14px 15px;border:1px solid var(--line);border-radius:var(--r-card); background:var(--card); } body.app .pd-row{ display:flex;justify-content:space-between;align-items:center;gap:12px; padding:9px 0;border-bottom:1px dashed var(--line2);font:12.5px/1.5 var(--sans); } body.app .pd-row:last-child{border-bottom:0} body.app .pd-row span{color:var(--ink3)} body.app .pd-row b{color:var(--ink);font-weight:600;letter-spacing:.5px} /* 付款面板里的三步说明（2026-10-24） ---------------------------------------------------------------------- 新起一套 .pstep，**不复用 .pay-step**：旧的那套用 当圆形序号， 任何用 做强调的文字都会被压成 16px 的圈（第三行「传一张付款截图」就是这么消失的）。 .pstep 用 做序号， 才留给强调。 */ body.app .paybox-lg{padding:14px;gap:14px;align-items:center;background:var(--card)} body.app .paybox-lg .payqr{width:118px} body.app .paytx-lg{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px} body.app .pstep{display:flex;gap:8px;font:12.5px/1.6 var(--sans);color:var(--ink2)} body.app .pstep>i{ flex:none;width:17px;height:17px;margin-top:2px;border-radius:50%; background:var(--brand);color:#fff;font:600 11px/17px var(--sans); font-style:normal;text-align:center; } body.app .pstep b{font-weight:600;color:var(--ink)} body.app .pstep small{display:inline-block;margin-top:1px;color:var(--ink3);font-size:11.5px} body.app .pstep .pay-amt{ font:600 15px/1 var(--serif);color:var(--red);letter-spacing:.5px; } @media (max-width:400px){ body.app .paybox-lg{flex-direction:column;align-items:stretch;gap:12px} body.app .paybox-lg .payqr{width:132px;align-self:center} } /* 解锁卡要占满整行：结果列表是两列栅格，不写这行它只占左半格，右边空着像少了一块 */ body.app .paywall{grid-column:1/-1} /* ========================================================================== 付款蒙层（2026-10-24 晚 · 主人定稿） -------------------------------------------------------------------------- 名字算完了、卡也排好了，整页盖一层磨砂玻璃：看得见一片名字卡的轮廓， 读不出是哪个字。付款卡浮在雾里。付完雾散开（不用重新演算）。 blur 取 7px 是量过的：汉字在这套字号下，7px 之后完全不可读、但字的方块还在， 正是「朦朦胧胧知道有东西」。再大就成一团色块，再小就能猜出字。 顶栏不盖（top:50px）—— 得留条退路让人回去改条件，付不了钱至少别把人关在里面。 ========================================================================== */ body.app .payveil{ /* 2026-10-26 主人：「把这个核对的弹窗放在中间吧」。 原来是 bottom:0 + align-items:flex-end，卡片一直贴着屏幕下沿。 现在改成视口正中 —— 未付款时名字本来就全糊，卡片贴底只会压住内容， 居中反而让人一眼看见「正在核对 / 扫码付款」这件事本身。 整层仍 pointer-events:none，手指可以穿过空白点到下面的东西。 */ position:fixed;left:0;right:0;top:0;bottom:0;z-index:50; display:flex;align-items:center;justify-content:center; padding:14px 16px calc(14px + env(safe-area-inset-bottom)); background:transparent; pointer-events:none; transition:opacity .42s ease; } body.app .payveil .pv-card{pointer-events:auto} /* 关闭键（2026-10-31 主人：「付款弹窗加个关掉的按钮 X」） —— 原来这层雾没有出口，不付钱只能刷网页才走得掉。 热区 40×40（手指按得住），视觉上只是个淡淡的 ✕，不跟「我已付款」抢眼。 */ body.app .pv-x{ position:absolute;top:6px;right:6px;width:40px;height:40px; display:flex;align-items:center;justify-content:center; border:0;background:none;padding:0;cursor:pointer; /* 底色用米白小圆片压一下，✕ 才不会被宣纸纹理吃掉（第一版 var(--ink3) 在桌面上发灰看不清）。 */ border-radius:50%; font:400 21px/1 var(--sans);color:var(--ink2); -webkit-tap-highlight-color:transparent; } body.app .pv-x:hover{color:var(--ink);background:rgba(255,255,255,.75)} body.app .pv-x:active{opacity:.6} /* 收起付款卡之后，结果页顶部留一条回去的路（不能让人把付款入口关了再也找不到）。 已经付过钱的不出现这条 —— 他们走赐名码，见 revealNames。 */ body.app .pv-reopen{ /* sticky：客户关了付款卡通常是往下翻名字，条子得一直挂在他眼前才叫回头路。 */ position:sticky;top:8px;z-index:20; display:flex;align-items:center;justify-content:space-between;gap:10px; margin:0 0 12px;padding:10px 12px;border-radius:10px; background:#FBF4E4;border:1px solid rgba(176,145,74,.28); font:13px/1.5 var(--sans);color:var(--ink2);text-align:left; } body.app .pv-reopen button{ flex:none;border:0;border-radius:8px;background:var(--pri);color:var(--card); padding:8px 12px;font:600 12.5px/1 var(--sans);letter-spacing:.3px;cursor:pointer; } body.app .pv-reopen button:active{opacity:.85} body.app .payveil.off{opacity:0;pointer-events:none} body.app .pv-card{ position:relative; /* 给右上角那个 ✕ 定位（2026-10-31 主人要的关闭键） */ width:100%;max-width:352px;margin:0 auto; /* 不能写 margin:auto —— 在 flex 里它会连垂直方向一起吃掉，align-items:flex-end 就失效了 */ background:linear-gradient(180deg,var(--card) 0%,var(--card2) 100%); border:1px solid var(--goldLine);border-radius:16px; padding:14px 16px 12px;text-align:center; box-shadow:0 20px 56px rgba(40,30,12,.20); } body.app .pv-eyebrow{font:11px/1 var(--sans);letter-spacing:3.5px;color:var(--gold);margin-bottom:9px} body.app .pv-t{font:600 20px/1.4 var(--serif);color:var(--ink);letter-spacing:.5px} body.app .pv-sub{font:12px/1.75 var(--sans);color:var(--ink2);margin:8px auto 0;max-width:290px} body.app .pv-qrwrap{ display:flex;gap:12px;align-items:center;justify-content:center; margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:12px; background:rgba(255,255,255,.72); } body.app .pv-qr{ /* 2026-10-24：原来 104px 方形。现在用的是微信「保存收款码」的原图裁出来的二维码（382×382）， * 微信不收截图版，只认原图 —— 所以图不能自己画，只把显示尺寸放大到 152px， * 屏幕上够大，别人拿另一台手机才扫得动。 */ width:140px;height:140px;flex:none;object-fit:contain; border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer; } body.app .pv-qrside{text-align:left;min-width:0} body.app .pv-amt{font:600 26px/1.1 var(--serif);color:var(--red);letter-spacing:.5px} body.app .pv-amt i{font-style:normal;font-size:15px;margin-right:1px} body.app .pv-small{font:11px/1.5 var(--sans);color:var(--ink3);margin-top:2px} body.app .pv-no{ display:inline-block;margin-top:7px;padding-bottom:2px;cursor:pointer; font:600 12.5px/1 var(--sans);color:var(--red);letter-spacing:1px; border-bottom:1px dashed var(--red); } body.app .pv-amtip{margin:8px 0 0;font:11.5px/1.6 var(--sans);color:var(--ink3)} body.app .pv-go{ display:block;width:100%;margin-top:11px;padding:12px; border:0;border-radius:12px;background:var(--pri);color:var(--card); font:600 14.5px/1 var(--sans);letter-spacing:.5px;cursor:pointer; -webkit-tap-highlight-color:transparent; } body.app .pv-go:active{opacity:.88} body.app .pv-alt{margin-top:8px;font:12.5px/1.6 var(--sans);color:var(--gold);cursor:pointer} /* 付完会发生什么（2026-10-30 主人点名要保留的提醒动作）。 一行讲两件事：系统自动核对到账、核完给一条赐名码。 客户最怕的是「钱付了页面不动」和「被要求再付一次」，这两句都在这一行里堵住。 视觉上压在按钮下方，米白底 + 左金线：不抢按钮，但滚到这儿一定看得见。 */ body.app .pv-flow{ margin:9px 0 0;padding:8px 11px;border-radius:9px;text-align:left; background:#FBF4E4; border:1px solid rgba(176,145,74,.26); border-left:3px solid var(--gold); font:12px/1.8 var(--sans);color:var(--ink2);letter-spacing:.2px; } body.app .pv-flow b{color:var(--ink);font-weight:600} body.app .pv-n{margin-top:6px;font:11px/1.65 var(--sans);color:var(--ink3)} /* -------------------------------------------------------------------------- 付款卡 · 推演凭据（2026-10-31） -------------------------------------------------------------------------- 卡片里多了一块「四柱 / 喜忌 / 三道闸 / 试看一个真名」。内容从 4 行变成 10 行， 矮屏（横屏手机、小笔记本）必须能自己滚，否则付款按钮被顶出屏幕 = 直接掉单。 只糊字不糊卡的老规矩不变：滚动条也藏在卡内，页面本身不锁。 -------------------------------------------------------------------------- */ /* 卡片上下固定（二维码/按钮永远在屏幕上）。 ★ 2026-10-31 主人：「你还弄个下拉框，一堆东西塞在里边」—— 上一版把凭据塞进一个内部可滚的小框（pv-proof overflow-y:auto），在手机上就是 一个嵌在弹窗里的"下拉框"，要在一指宽的区域里扒拉才能看完，观感很差。 现在凭据只留 4 行真数，不再需要滚动：把滚动条彻底去掉，让内容自己撑开。 */ body.app .pv-card{ display:flex;flex-direction:column; max-height:calc(100vh - 34px); /* 内容瘦身到 900 高能整块放下；再矮的屏（768 笔记本、横屏手机）容许整卡轻滚， 但滚动条不画出来 —— 主人反感的是「弹窗里嵌一个下拉框」， 整卡在兜底情况下能滚、且看不出滚动条，是目前最不碍事的做法。 */ overflow-y:auto;overflow-x:hidden; scrollbar-width:none;-ms-overflow-style:none; } body.app .pv-card::-webkit-scrollbar{width:0;height:0;display:none} body.app .pv-proof{flex:0 0 auto;overflow:visible} body.app .pv-qrwrap,body.app .pv-go,body.app .pv-amtip{flex:none} body.app .pv-proof{ margin:9px 0 0;padding:9px 11px 10px;border-radius:11px;text-align:left; background:rgba(255,255,255,.66);border:1px solid var(--goldLine); } body.app .pp-row{display:flex;gap:8px;align-items:baseline;font:12px/1.8 var(--sans)} body.app .pp-k{flex:none;width:30px;color:var(--gold);letter-spacing:1px;font-size:11px} body.app .pp-v{color:var(--ink);letter-spacing:.3px;word-break:break-word;min-width:0} body.app .pp-sep{height:1px;background:var(--goldLine);margin:7px 0 2px} body.app .pp-f{position:relative;padding-left:38px;font:11.5px/1.72 var(--sans);color:var(--ink2);margin-top:6px} body.app .pp-f i{position:absolute;left:0;top:0;font-style:normal;color:var(--gold);font-size:11px;letter-spacing:1px} body.app .pp-f b{color:var(--ink);font-weight:600} body.app .pp-name{ margin-top:8px;padding:9px 10px;border-radius:9px;text-align:left; background:var(--goldSoft);border:1px solid var(--goldLine); } body.app .pn-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px} body.app .pn-top b{font:600 17px/1.2 var(--serif);color:var(--ink);letter-spacing:1.5px} body.app .pn-top span{flex:none;font:11px/1 var(--sans);color:var(--gold)} body.app .pn-why{margin-top:5px;font:12px/1.65 var(--sans);color:var(--ink)} body.app .pn-meta{margin-top:4px;font:11px/1.75 var(--sans);color:var(--ink3)} body.app .pn-tip{margin-top:5px;padding-top:5px;border-top:1px dashed var(--goldLine);font:11px/1.6 var(--sans);color:var(--ink3)} body.app .pp-note{margin-top:9px;font:10.5px/1.65 var(--sans);color:var(--ink3)} @media (max-height:600px){ /* 矮屏（横过来的手机、小笔记本）：卡片行高收一点，别把名字全挤没 */ body.app .payveil{padding:8px 12px calc(8px + env(safe-area-inset-bottom))} body.app .payveil .pv-card{padding:14px 14px 12px} } /* 雾在时不再锁死滚动。 2026-10-26：付款卡已改为视口居中，底下不再需要为它留 340px 的空洞， 只留一点余量，免得最后一张卡贴着屏幕边。 */ body.app.veiled #view-result{padding-bottom:48px} /* ========================================================================== 只糊字、不糊卡片（2026-10-24 晚，第三次改法，这次是对的） -------------------------------------------------------------------------- 前两版都是给整页盖一层 backdrop-filter:blur()。结果卡在物理上走不通： 名字卡之间的缝隙只有 8~12px，要糊掉"周润湖"这三个字必须 blur ≥10px， 而 10px 同时会把卡片的边缘和缝隙一起抹平 —— 剩下的就是一片白， 「一排排」根本出不来。要么字能认，要么看不到排布，二选一。 现在改成：**卡片（白底、描边、间距、收藏和对比按钮）全部保持清晰**， 只把卡片里的文字（名字、标签、说明、按钮字）单独 blur 7px。 于是「一排排名字卡清清楚楚地排着，每张卡上的字一个也读不出」—— 这正是主人要的那句「隐隐约约能感觉后边名字一排排都出来了，就是看不清某一个字」。 放大也救不回来：糊的是文字本身的位图，放大只是把糊的那一团放大。 ========================================================================== */ /* ★ 2026-10-31 主人实测：「我关闭弹窗雾罩也消散了，名字全暴露了」—— 这是真漏洞：原来模糊的判定挂在 body.veiled 上，而「关掉付款卡」正是要把 veiled 摘掉，于是一摘就全清楚，等于用一个免费关闭键换了一屏明文名字。 现在把两件事拆开： · body.veiled —— 只管雾罩与付款卡在不在（关掉就走） · body.ncLocked —— 只管名字锁不锁（没付款就一直在，跟弹窗开合无关） 锁挂在 ncLocked 上，关弹窗只撤雾，字照样糊。 */ body.ncLocked .namecard.nc-lock .nc-main > *{filter:blur(7px);opacity:.9} body.ncLocked .namecard.nc-lock .nc-side > *{filter:blur(6px);opacity:.55} /* 2026-11-02：锁着也要能点 —— 点一下就是解锁入口（弹付款卡）。 以前这里是 cursor:default + hover 不动，等于告诉用户「这块是死的」。 */ body.ncLocked .namecard.nc-lock{cursor:pointer} /* 免费那 10 个照常能点、能收藏、能对比 —— 不然「先看 10 个」等于没给 */ body.veiled .namecard:not(.nc-lock){cursor:pointer} /* 双保险：雾盖住之后，底下这些固定条即使被某些浏览器画在上面，也一律不接点击。 ★ 2026-10-25 22:22 主人：「这一堆按钮一个点不动」——原来这里把**整条导航**都禁了： 顶栏（返回 / 起名 / 工具箱）、底部 tab、筛选条、dock 全 `pointer-events:none`， 上雾之后页面等于死机，连退出和换条件都做不到。 现在只锁「生成条」一条（防止雾里重复点生成），导航与筛选照常可点： · 雾只糊名字卡上的字，不许把整个界面按死； · 想退出、想换筛选、想看帮助，都得能点 —— 这是可用性的底线。 */ body.veiled .actbar{pointer-events:none!important} /* ---------- 核销转圈（2026-10-24 19:17 主人）---------- * 原话：「正在核销提取码这几个字，前边或者后边弄一个转的东西，就证明现在在核销， * 然后后边有个提示，请耐心等待」。 * 用 currentColor 描边 —— 雾上是金色、提取码卡上是琥珀色，跟着文字走，不用另配色。 */ .spinner{ display:inline-block;width:11px;height:11px;margin:0 6px 0 0;border-radius:50%; border:1.6px solid currentColor;border-top-color:transparent;opacity:.85; vertical-align:-1px;animation:spinnerSpin .75s linear infinite; } .spinner.lg{width:14px;height:14px;border-width:2px;vertical-align:-2px} @keyframes spinnerSpin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion: reduce){ .spinner{animation:none;opacity:.6} } .pv-eyebrow .spinner{margin-right:7px} .cs-badge .spinner{margin-right:5px;vertical-align:-1px} /* ---------- 赐名码卡片（2026-10-24 主人定稿）---------- * 主人 20:58：「这个赐名码只能出现一次，而且特别醒目；付款之前不出现， * 只有点了我已付款、弹出这个对话框那块才出现。」 * 所以：① 只有这一张卡里能看到码，雾上、刷新后一律不显示； * ② 字号拉到 31px、加粗、双线金框，一眼就能抄。 */ .cs-badge{ display:inline-block;padding:3px 9px;border-radius:999px;margin-bottom:8px; font-size:11px;letter-spacing:1px;color:#2F6B4F;background:#E8F3EA;border:1px solid #C6E0CC; } .cs-badge.wait{color:#8A6A1E;background:#FAF3DF;border-color:#E8D7A8} .cs-code{ margin:16px 0 10px;padding:20px 8px;text-align:center; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:31px;font-weight:600;letter-spacing:4px;color:#1D3B33; background:linear-gradient(180deg,#FBF4E2,#F5EAD2); border:2px solid var(--gold);border-radius:12px; box-shadow:inset 0 0 0 1px rgba(154,119,41,.28); animation:csPulse 1.6s ease-in-out infinite; -webkit-user-select:all;user-select:all; } @keyframes csPulse{ 0%,100%{box-shadow:inset 0 0 0 1px rgba(154,119,41,.28),0 0 0 0 rgba(154,119,41,0)} 50%{box-shadow:inset 0 0 0 1px rgba(154,119,41,.28),0 0 0 7px rgba(154,119,41,.16)} } .cs-once{ text-align:center;margin:-2px 0 12px;font-size:12px;letter-spacing:.5px;color:#9A5B2A; } /* 找回申请：金额二选一（2026-10-24） */ .rc-amt{display:flex;gap:8px;margin-top:6px} .rc-amt button{ flex:1;padding:11px 8px;border-radius:10px;cursor:pointer;font-size:13px; border:1px solid var(--line);background:var(--card);color:var(--ink2); } .rc-amt button.on{border-color:var(--gold);background:var(--goldSoft);color:var(--ink);font-weight:600} /* 核销等不到：弹出的对话框内容（2026-10-25 主人定） * 「正常 10-15 秒就该核过，核不到就弹出来说未检测到，给个再核一次的按钮」 * 三次之后多一个转人工。样式沿用宣纸金线，不另起一套。 */ .pv-rt{margin-top:2px} .pv-rt-badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px; color:#8A6A1E;background:#FAF3DF;border:1px solid #E8D7A8;letter-spacing:.3px} .pv-rt-t{margin:10px 0 0;font-size:13px;line-height:1.9;color:var(--ink2)} .pv-rt-no{margin:12px 0 0;padding:10px 12px;border-radius:9px;cursor:pointer; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;letter-spacing:2px; color:var(--ink);background:var(--goldSoft);border:1px solid var(--goldLine); display:flex;align-items:center;justify-content:space-between} .pv-rt-no i{font-style:normal;font-size:11px;letter-spacing:0;color:var(--faint)} /* 暂停收款：二维码位置换成这块，客户根本扫不到（2026-10-24 21:4x） */ .pv-paused{ width:152px;min-height:152px;display:grid;place-items:center;text-align:center; font-size:13px;line-height:1.7;color:#8A3A2E;background:#FBF0EC; border:1px dashed #E0B9A6;border-radius:12px;padding:10px; } .pv-paused span{display:block;margin-top:6px;font-size:11.5px;color:#9A6A5A;line-height:1.6} /* 排队等付款位：同一档同时只放一个人付（2026-10-25） 腾讯绿偏一点点，跟「暂停」的警告红区分开 —— 这不是出问题，是正常等一会儿 */ .pv-queue{ width:152px;min-height:152px;display:flex;flex-direction:column; align-items:center;justify-content:center;text-align:center; background:var(--goldSoft);border:1px dashed var(--goldLine);border-radius:12px;padding:12px 8px; } .pv-qwait{display:flex;align-items:center;gap:5px;font-size:12px;letter-spacing:1px;color:var(--ink2)} .pv-qtxt{margin-top:9px;font-size:12px;line-height:1.7;color:var(--ink3)} .pv-qtxt b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;color:var(--ink);letter-spacing:0} .pv-qsub{margin-top:7px;font-size:10.5px;line-height:1.5;color:var(--faint)} .pv-qgo{ margin-top:10px;padding:7px 12px;border-radius:8px;cursor:pointer; border:1px solid var(--goldLine);background:#fff;color:var(--ink); font:12px/1.4 var(--sans);letter-spacing:.5px; } /* 68 档在弹层里排队时，二维码那块是整个 paybox 的高度，给它铺开一点 */ #payBody .pv-queue{width:100%;min-height:180px;box-sizing:border-box} /* 首页底部常驻的「码丢了」入口：不抢眼，但找得到 */ .lostline{text-align:center;margin:18px 0 8px;font-size:12px;color:var(--faint);line-height:1.8} .lostline a{color:var(--gold);text-decoration:underline} .cs-tip{font-size:13px;line-height:1.7;color:var(--ink2)} .cs-warn{ margin:10px 0 14px;padding:8px 10px;border-radius:8px; font-size:12.5px;color:#8A3A2E;background:#FBF0EC;border:1px solid #EFD4C9; } .cs-slow{margin:0 0 12px;font-size:12.5px;line-height:1.7;color:var(--ink2)} .cs-go{ width:100%;padding:13px;border-radius:10px;border:0;cursor:pointer; background:linear-gradient(150deg,var(--brand),var(--brandDeep));color:var(--gold2); font-size:15px;letter-spacing:.5px; } @media (prefers-reduced-motion: reduce){ .cs-code{animation:none} } /* ============================================================ * 名字体检 · 命盘（2026-10-25） * 主人要求：「命盘要把五行缺啥那个体现出来，专业的，大白话的， * 讲清楚，详细，周全」。所以这一块不是一行「喜用水」，是三层： * ① 四柱 + 五行各有几个（看得见的数） * ② 缺什么 → 而且「缺」≠「该补」（纠偏，这是显专业的地方） * ③ 日主强弱 → 喜用忌 → 名字补到没有（落到他的名字上） * 配色一律走五行本色，米白底上都能看清。 * ============================================================ */ .mp{ --wx-mu:#4A7A4E; --wx-huo:#B8402C; --wx-tu:#8C6A38; --wx-jin:#8E8442; --wx-shui:#3C6884; margin-top:14px; } .mp-h{display:flex;align-items:baseline;gap:8px;margin:0 0 10px;flex-wrap:wrap} .mp-h b{font-family:var(--serif);font-size:15px;letter-spacing:2px;color:var(--ink);font-weight:600;white-space:nowrap;flex:0 0 auto} .mp-h i{font-style:normal;font-size:11px;color:var(--faint);letter-spacing:.5px;line-height:1.5} .mp-tagnum{font-size:11px;color:var(--faint);letter-spacing:.5px} /* —— ① 四柱 —— */ .mp-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .mp-pil{ text-align:center;padding:8px 2px 7px;border-radius:9px; background:var(--card);border:1px solid var(--line); } .mp-pil.on{border-color:#C9A76A;background:#FFFBF0;box-shadow:0 1px 8px rgba(160,120,50,.10)} .mp-pil .pos{font-size:10px;color:var(--faint);letter-spacing:1px;margin-bottom:4px} .mp-pil .gz{font-family:var(--serif);font-size:19px;line-height:1.22;letter-spacing:1px} .mp-pil .gz span{display:block} .mp-pil .ss{font-size:9.5px;color:var(--faint);letter-spacing:.3px;margin-top:4px;line-height:1.3;white-space:nowrap} .mp-pil .dm{color:var(--gold);font-weight:600} .wx-mu{color:var(--wx-mu)} .wx-huo{color:var(--wx-huo)} .wx-tu{color:var(--wx-tu)} .wx-jin{color:var(--wx-jin)} .wx-shui{color:var(--wx-shui)} /* —— ② 五行五个数 —— */ .mp-wxs{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:9px} .mp-wx{ text-align:center;padding:7px 0 6px;border-radius:8px; background:var(--card);border:1px solid var(--line); } .mp-wx.empty{background:var(--warnSoft);border-color:var(--warnLine)} .mp-wx .nm{font-family:var(--serif);font-size:14px;letter-spacing:1px} .mp-wx .ct{font-size:15px;font-weight:600;line-height:1.2;margin-top:1px} .mp-wx .ct s{font-size:9px;font-weight:400;text-decoration:none;color:var(--faint);margin-left:1px} .mp-wx .lb{font-size:9px;color:var(--faint);letter-spacing:.3px} .mp-wxbar{margin-top:8px} .mp-wxbar .r{display:flex;align-items:center;gap:7px;padding:2.5px 0;font-size:11px} .mp-wxbar .r .k{width:13px;flex:0 0 13px;font-family:var(--serif);letter-spacing:0} .mp-wxbar .r .t{flex:1;height:6px;border-radius:3px;background:#EFE7D8;overflow:hidden} .mp-wxbar .r .t i{display:block;height:100%;border-radius:3px} .mp-wxbar .r .n{width:34px;text-align:right;color:var(--faint);font-size:10.5px;white-space:nowrap} /* —— ③ 缺 ≠ 补 的说明卡 —— */ .mp-void{ position:relative;margin-top:11px;padding:12px 13px 11px 15px;border-radius:10px; background:var(--card);border:1px solid var(--line); } .mp-void::before{ content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:3px; background:linear-gradient(var(--warn) 0%,var(--gold2) 100%); } .mp-void .vt{font-size:13.5px;font-weight:600;letter-spacing:.3px;line-height:1.5} .mp-void .vt em{font-style:normal;font-family:var(--serif);font-size:15px;letter-spacing:1px} /* 八字：标签窄、字大。八个字是这块的物证，得让人一眼看清是哪八个。 标签固定 58px 是为了跟下一行「各归五行」左对齐，八个字起点才一条线。 */ .mp-void .vt.mp-bz8{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px} .mp-void .vt.mp-bz8 .bzl{flex:0 0 58px;font-size:11px;font-weight:600;color:var(--faint);letter-spacing:.6px} .mp-void .vt.mp-bz8 em{font-size:17px;letter-spacing:0} .mp-void .vt.mp-bz8 em span{display:inline-block;margin-right:9px} .mp-void .vt.mp-bz8 em span:last-child{margin-right:0} /* 日柱两字着朱红：这是全文唯一一次把八个字完整摆出来，本人落在哪两个字上 必须当场指出来 —— 客户翻到下面 ② 四柱 才知道，就晚了。 四柱那块用卡片底纹 + gold 小标签标日主，是另一种层级，两者不打架。 */ .mp-void .vt.mp-bz8 em span.dm{color:var(--warn)} .mp-void .vt.mp-bz8 em.n{font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:.5px} .mp-void p{margin:7px 0 0;font-size:12.5px;line-height:1.85;color:var(--ink2)} .mp-void p b{color:var(--ink);font-weight:600} .mp-void .sep{height:1px;background:var(--line);margin:10px 0 0} .mp-void .verdict{margin-top:9px;font-size:12.5px;line-height:1.8} /* —— ④ 日主 / 喜忌 / 落名 三张窄表 —— */ .mp-row{ display:flex;gap:9px;padding:8px 0;font-size:12.5px;line-height:1.7; border-bottom:1px dashed var(--line); } .mp-row:last-child{border-bottom:0} .mp-row .k{flex:0 0 52px;color:var(--faint);font-size:11.5px;letter-spacing:.5px} .mp-row .v{flex:1;color:var(--ink)} .mp-row .v em{font-style:normal;font-family:var(--serif);font-weight:600;letter-spacing:1px} .mp-sub{font-size:11px;color:var(--faint);line-height:1.7;margin-top:6px} .mp-name{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:6px;margin-top:8px} .mp-nc{ text-align:center;padding:8px 2px 7px;border-radius:8px; background:var(--card);border:1px solid var(--line); } .mp-nc.hit{background:#F4FAF3;border-color:#BFD8BC} .mp-nc.miss{background:var(--warnSoft);border-color:var(--warnLine)} .mp-nc.bad{background:var(--warnSoft);border-color:var(--warnLine)} .mp-nc .c{font-family:var(--serif);font-size:20px;line-height:1.15;letter-spacing:1px} .mp-nc .w{font-size:10.5px;margin-top:3px;letter-spacing:.5px;font-weight:600} .mp-nc .w i{display:block;font-style:normal;font-size:8.5px;font-weight:400;color:var(--faint);letter-spacing:0;margin-top:1px} .mp-nc .r{font-size:9.5px;color:#8A6A34;margin-top:4px;padding-top:3px;border-top:1px dotted #E8DFCB;letter-spacing:.5px} .mp-nc .s{font-size:9.5px;color:var(--faint);margin-top:2px;letter-spacing:.3px} .mp-nc.hit .s{color:#4A7A4E;font-weight:600} .mp-nc.bad .s{color:var(--warn);font-weight:600} /* —— ⑤ 怎么补（偏旁 + 核过的字例） —— */ .mp-fill{padding:10px 0;border-top:1px dashed var(--line)} .mp-fill:first-child{border-top:0} .mp-fill .ft{display:flex;align-items:center;gap:7px;margin-bottom:5px} .mp-fill .ft b{font-family:var(--serif);font-size:14px;letter-spacing:1px} .mp-fill .ft .tag{ font-size:9.5px;padding:1.5px 6px;border-radius:99px;letter-spacing:.3px; background:#F3EDDF;color:#8A6A34;border:1px solid #E2D3B4; } .mp-fill .ft .tag.g2{background:#F6F3EA;color:#8C7A54;border-color:#E6DCC6} .mp-fill .ft .tag.no{background:#FBF0EC;color:#A8331F;border-color:#E8CFC4} .mp-fill .fp{font-size:11.5px;line-height:1.85;color:var(--ink2)} .mp-fill .fp.mut{color:var(--faint)} .mp-fill .fp .mono{font-family:var(--serif);letter-spacing:1.5px;color:var(--ink)} .mp-fill .fp .ex{font-family:var(--serif);letter-spacing:1.2px;word-spacing:3px;color:var(--ink);font-size:13px} /* 体检报告底部：去改名 主按钮 */ .mp-go{ display:block;width:100%;margin-top:14px;padding:14px;border-radius:11px;border:0;cursor:pointer; background:linear-gradient(150deg,var(--brand),var(--brandDeep));color:#E7CF9B; font-size:15px;letter-spacing:1px;font-family:var(--serif); } .mp-go:active{transform:translateY(1px)} .mp-go small{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:0;color:#9AB0A6;margin-top:3px} .mp-note{text-align:center;font-size:10.5px;color:var(--faint);line-height:1.7;margin:7px 0 0} .mp-fill .fp .kmini{ display:inline-block;min-width:15px;font-family:var(--serif);font-size:12.5px; color:var(--faint);letter-spacing:1px;margin-right:9px; } /* ---- 付款前的核对块（2026-10-26 主人要求：付款页要提示信息正确、虚拟不退换） ---- 放在付款面板里、二维码上方。为什么要有：名字按这份信息生成， 改一项就是另一批；客户付完才发现日期填错只能重来，先说清楚比事后解释省事。 */ .paycheck{ background:var(--goldSoft);border:1px solid var(--goldLine); border-radius:var(--r-card);padding:12px 13px;margin:12px 0 6px;text-align:left; } .paycheck .pc-t{font:600 11px/1 var(--sans);letter-spacing:1.6px;color:var(--gold)} .paycheck .pc-v{margin-top:7px;font-family:var(--serif);font-size:13.5px;line-height:1.8;color:var(--ink);letter-spacing:.3px} .paycheck .pc-w{margin-top:8px;font-size:11.5px;line-height:1.8;color:var(--ink3)} .paycheck .pc-w b{color:var(--warn);font-weight:600} /* 付款卡里的紧凑核对条（和 .paycheck 同一份内容，卡片窄所以压成两行） */ .pv-check{ margin:10px 0 2px;padding:9px 10px;border-radius:9px;text-align:left; background:var(--goldSoft);border:1px solid var(--goldLine); font:12px/1.7 var(--sans);color:var(--ink2);letter-spacing:.2px; } .pv-check b{color:var(--ink);font-weight:600} /* 2026-10-29：这里原来有一条窄的互推广告栏（.xpromo）。 主人当天看了实机说「一条栏干两件事不行」，改成直接复用页头那条金边卡 （.v3-checkrow，样式在 1777 行那一段），三页各挂一条指向下一个功能。 窄条整套样式随之删掉，不再有第二套广告条。 */ /* ==================== 「百里挑一」三处落地（2026-10-29 主人定） ==================== 主人原话：「一百个名字都是符合五行命理给他匹配的，好不好听自己挑， 挑出一个就叫百里挑一。这些东西不能憋在肚子里边儿，得用一种方法告诉顾客。」 分配：首页中版（替换那句三个功能的说明）／结果页短版（刚看到 100 个那一刻）／ 详情页中版（已经在认真挑，最有耐心）／页尾长版（滚到底的人才读）。 */ /* 首页那句里的重点：金色，但字号不变，不抢标题 */ .hero > p b{color:var(--gold);font-weight:600} /* 页尾长版（跟上面「正源」那块同为 .card，观感统一） */ .changban{ /* 2026-10-29 22:4x 主人：上面那张「我们的依据」1112 宽，这张只有 760， 左边缩进 176、右边缩 176，一大一小摆在同一条竖线上，看着就是没对齐。 现在两张同宽同边（都撑满版心、内边距都用 14，正文左边缘都在 98）， 一张画布到底，不再一宽一窄。 */ max-width:none;margin:44px 0 0;padding:20px 14px 18px; } .changban h2{ font-family:var(--serif);font-size:17px;font-weight:600; letter-spacing:2.4px;color:var(--ink);margin:0 0 14px; } .changban p{font-size:15.5px;line-height:2.02;color:var(--ink2);margin:0 0 12px} .changban p:last-child{margin-bottom:0} .changban b{color:var(--gold);font-weight:600} /* 详情页中版：金底一条，压在「对比」按钮上方，不挡操作 */ .baili-detail{ margin-top:16px;padding:13px 16px 12px; background:var(--goldSoft);border:1px solid var(--goldLine);border-radius:12px; font-size:12.5px;line-height:1.95;color:var(--ink2); } .baili-detail b{color:var(--gold);font-weight:600} /* 结果页顶部短版：他刚看到那一百个名字的一瞬间，只放得下一句 */ .baili-top{ margin:0 0 12px;padding:10px 14px; background:var(--goldSoft);border:1px solid var(--goldLine);border-radius:10px; font-size:12.5px;line-height:1.75;color:var(--ink2); } .baili-top b{color:var(--gold);font-weight:600} @media (max-width:640px){ .changban{margin-top:30px;padding:18px 14px 16px} .changban h2{font-size:15.5px;letter-spacing:1.6px} /* 手机上两个标题也必须一个大小，否则跟桌面上一样一眼看出「头一大一小」 */ body.home .zhengyuan > h2{font-size:15.5px;letter-spacing:1.6px} .changban p{font-size:14.5px;line-height:1.95} .baili-detail{font-size:12px} } /* ==================== 深色顶栏（2026-10-29 23:2x 主人） ==================== 主人：「那顶栏就跟咱们那个按钮的颜色弄成一样吧。你觉得会不会好？」 —— 主按钮用的是 --brand（七套主题各自最深的一档），顶栏跟着它走： 一条深色的带子压在纸上，像卷轴的木轴，比浅色顶栏更压得住。 ★ 所有文字必须翻成浅色：品牌字、官网按钮、返回、右上角 ···、底部小导航。 ★ 深色底下不再需要毛玻璃，背景直接给实色，省一层合成。 */ body.app .appbar{ background:var(--brand); border-bottom-color:transparent; -webkit-backdrop-filter:none;backdrop-filter:none; } body.app .appbar .brand{color:#fff} body.app .appbar .brand-sub{color:rgba(255,255,255,.68)} body.app .appbar .seal{ background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45);color:#fff; } body.app .appbar .homebtn{ background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.42);color:#fff; } body.app .appbar .homebtn:hover{background:rgba(255,255,255,.2)} body.app .appbar .backbtn{color:rgba(255,255,255,.86)} body.app .appbar .iconbtn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);color:#fff} body.app .appbar .tabbar.docked a{color:rgba(255,255,255,.76)} body.app .appbar .tabbar.docked a.on{background:rgba(255,255,255,.18);color:#fff} body.app .appbar .appbar-title{color:#fff} /* 官网同一条：不加这句，官网还是浅色，两处又不一致（今晚刚因为这个挨说）。 */ body.home .nav{ background:var(--brand); border-bottom:0; -webkit-backdrop-filter:none;backdrop-filter:none; } body.home .nav .brand{color:#fff} body.home .nav .brand-sub{color:rgba(255,255,255,.68)} body.home .nav .seal{ background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45);color:#fff; } body.home .nav .links a{color:rgba(255,255,255,.86)} body.home .nav .links a:hover{background:rgba(255,255,255,.14);color:#fff} body.home .nav .links a.on{background:rgba(255,255,255,.2);color:#fff} body.home .nav .links a.navref{ color:#F3D9A4;border-color:rgba(243,217,164,.55);background:transparent; } body.home .nav .links a.navref:hover{background:rgba(243,217,164,.16);color:#FBEDD2;border-color:rgba(243,217,164,.8)} /* ==================== 顶栏「价格表」四档弹层（2026-10-29 23:2x 主人） ==================== 位置：官网导航里，「赐名码登入」左边。 行为：鼠标一晃到按钮上就落下（不点）、手机上点一下开、点别处或按 Esc 关。 内容：竖着四行，每行「价钱 + 这是什么 + 这钱买到什么」，四档一次说清。 ★ 顶栏现在是深色（--brand），所以按钮文字走白色系；弹层回到纸色，跟正文一套。 */ .pricemenu{position:relative;display:flex;align-items:center;flex:none} .pricebtn{ display:inline-flex;align-items:center;gap:5px;cursor:pointer; padding:7px 11px;border-radius:9px;font-size:13px;line-height:1; background:transparent;border:1px solid rgba(255,255,255,.45);color:#fff; font-family:inherit;transition:background .16s ease,border-color .16s ease; } .pricebtn:hover,.pricemenu.open .pricebtn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.75)} .pricebtn i{font-style:normal;font-size:10px;opacity:.8;transform:translateY(-1px)} .pricedrop{ position:absolute;top:calc(100% + 10px);right:0;z-index:60; width:388px;max-width:min(92vw,388px); background:var(--card);border:1px solid var(--line);border-radius:16px; box-shadow:0 20px 54px rgba(30,26,18,.20),0 2px 8px rgba(30,26,18,.06); padding:12px 10px 10px; opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .16s ease,transform .16s ease,visibility .16s; pointer-events:none; } /* hover 展开：桌面；.open：手机点击；focus-within：键盘 tab */ .pricemenu:hover .pricedrop, .pricemenu.open .pricedrop, .pricemenu:focus-within .pricedrop{ opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto; } /* 鼠标从按钮移到面板中间那 10px 空隙时会误关，用一条透明桥接住 */ .pricemenu:hover .pricedrop::before, .pricedrop::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px} .pd-h{ display:flex;align-items:baseline;gap:8px;padding:2px 10px 10px; font-family:var(--serif);font-size:14px;font-weight:600;color:var(--ink);letter-spacing:1px; border-bottom:1px solid var(--line); } .pd-h span{font-family:var(--sans,inherit);font-size:11.5px;font-weight:400;color:var(--sub);letter-spacing:0} .pd-row{ display:grid;grid-template-columns:76px 1fr;gap:12px;align-items:start; padding:11px 10px;border-radius:10px;text-decoration:none;color:inherit; transition:background .14s ease; } .pd-row:hover{background:var(--goldSoft)} .pd-p{ font-family:var(--serif);font-size:22px;font-weight:700;color:var(--gold); line-height:1.15;letter-spacing:-.3px;white-space:nowrap; } .pd-p i{font-style:normal;font-size:12px;margin-right:1px;opacity:.85} .pd-x{font-size:12.5px;line-height:1.72;color:var(--sub)} .pd-x b{display:block;font-size:13.5px;color:var(--ink);font-weight:600;margin-bottom:2px;letter-spacing:.3px} .pd-f{ margin-top:6px;padding:9px 10px 2px;border-top:1px solid var(--line); font-size:11.5px;color:var(--faint); } @media (max-width:640px){ .pricebtn{padding:6px 9px;font-size:12.5px} .pricedrop{width:min(92vw,360px);right:auto;left:50%;transform:translate(-50%,-6px)} .pricemenu:hover .pricedrop, .pricemenu.open .pricedrop, .pricemenu:focus-within .pricedrop{transform:translate(-50%,0)} .pd-row{grid-template-columns:64px 1fr;gap:10px;padding:10px 8px} .pd-p{font-size:19px} } /* ⚠️ 弹层在 .nav .links 里面，而 .nav .links a 有 white-space:nowrap 和 7px 11px 内边距， 比 .pd-row 特异性高 —— 第一版实测量出来每行文字 514px，整行冲出面板右边缘。 这里用更高特异性把它压回来：允许换行、内边距与行高按弹层自己那套。 */ .nav .links .pricedrop a.pd-row{ display:grid;grid-template-columns:76px 1fr;gap:12px;align-items:start; padding:11px 10px;border-radius:10px;white-space:normal; font-size:inherit;color:inherit; } .nav .links .pricedrop a.pd-row:hover{background:var(--goldSoft);color:inherit} .nav .links .pricedrop .pd-x{display:block} @media (max-width:640px){ .nav .links .pricedrop a.pd-row{grid-template-columns:64px 1fr;gap:10px;padding:10px 8px} } /* ==================== 顶栏收窄 + 按钮去画布（2026-10-29 23:3x 主人） ==================== 主人：「顶栏感觉有点宽了，再窄一些；顶栏里边所有的功能按钮不要再有画布了…… 要不就把画布去掉吧。然后 Logo 可以加一个小杠杠，亮色的或者透明的都行， 细一点的，就知道那块是个单独出去的。」 —— 做三件事： ① 顶栏变矮：官网 54→46，应用 58→46；上下内边距一起收。 ② 顶栏里所有按钮（官网/价格表/赐名码登入/取名依据/··· ）去掉边框与底色，只留文字； 悬停改为提亮 + 细下划线，不再出方块。 ③ 品牌字右边加一道 1px 的细竖杠，把「logo」和「功能」隔开。 */ body.home .navrow{min-height:46px;padding-top:5px;padding-bottom:5px} body.home .nav .links a{ background:none;border:0;padding:6px 9px;border-radius:0; color:rgba(255,255,255,.88); } body.home .nav .links a:hover{ background:none;color:#fff;text-decoration:underline;text-underline-offset:4px; text-decoration-thickness:1px;text-decoration-color:rgba(255,255,255,.55); } body.home .nav .links a.navref, body.home .nav .links a.navref:hover{ border:0;background:none;color:#F3D9A4; } body.home .nav .brand::after{ content:"";display:inline-block;width:1px;height:14px;margin-left:12px; background:rgba(255,255,255,.32);vertical-align:middle; } body.home .pricebtn{border:0;background:none;padding:6px 9px;color:rgba(255,255,255,.88)} body.home .pricebtn:hover, body.home .pricemenu.open .pricebtn{background:none;border:0;color:#fff} body.app .appbar{padding-top:6px;padding-bottom:6px;min-height:46px} body.app .appbar .homebtn{ background:none;border:0;padding:4px 2px;color:rgba(255,255,255,.9); } body.app .appbar .homebtn:hover{background:none;color:#fff;text-decoration:underline;text-underline-offset:4px} body.app .appbar .iconbtn{background:none;border:0} body.app .appbar .backbtn{background:none} body.app .appbar .brand::after{ content:"";display:inline-block;width:1px;height:14px;margin-left:12px; background:rgba(255,255,255,.32);vertical-align:middle; } body.app .appbar .tabbar.docked a{background:none;border-radius:0} body.app .appbar .tabbar.docked a.on{background:none;color:#fff;box-shadow:inset 0 -2px 0 rgba(255,255,255,.85)} /* ==================== 顶栏再收一档（2026-10-29 23:4x 主人） ==================== 主人：「那个页头还是有点儿宽，再窄一些……先别做成别的了，你就给它再窄一点，有点宽。」 —— 只动高度，不动颜色、不加任何东西： 官网 46 → 38，应用 46 → 38；牌子字号 17 → 15，印章 27 → 22， 链接上下内边距 6 → 4，logo 右边那道竖杠 14 → 12。 */ body.home .navrow{min-height:38px;padding-top:3px;padding-bottom:3px} body.home .nav .brand{font-size:15px} body.home .nav .seal{width:22px;height:22px;font-size:12.5px;border-radius:5px} body.home .nav .links a{padding:4px 8px} body.home .nav .brand::after{height:12px;margin-left:10px} body.home .pricebtn{padding:4px 8px} body.app .appbar{padding-top:3px;padding-bottom:3px;min-height:39px} body.app .appbar .brand{font-size:15px} body.app .appbar .seal{width:22px;height:22px;font-size:12.5px;border-radius:5px} body.app .appbar .brand::after{height:12px;margin-left:10px} body.app .appbar .homebtn{font-size:12.5px} body.app .appbar .tabbar.docked a{font-size:12.5px;padding:2px 8px} /* ==================== 顶栏「曲面 + 玻璃」（2026-10-29 23:5x 主人） ==================== 主人：「手机不是有曲面屏吗，那个边儿是曲面的，我想给顶栏那个边也做成曲面的， 整个顶栏有那种玻璃的质感、有光泽。」 —— 做法： ① 曲面：底角收圆（0 0 16px 16px），像一块玻璃嵌在纸面上，边是弧过去的； ② 玻璃：底色仍是主题深色，但压一层从上到下的高光（顶部亮、中间透、底部微暗）， 再给内顶一道 1px 白线（玻璃厚度的反光）、底下落一道柔影（玻璃浮起来）； ③ 滚动时这层高光不跟着跑，所以不用背景固定，直接用 linear-gradient。 */ body.home .nav, body.app .appbar{ /* 2026-10-29 23:3x 主人（截图圈了左右两端）：「屏幕的两头那块不用出圆角，那块是直的」—— 原来做的 0 0 16px 16px 把底边两角切成圆的，左右两头看着像悬空的一块牌。 现在四角全直角：顶栏是一条从屏幕最左拉到最右的横带子，两头直接顶到边。 玻璃质感（高光 / 内顶反光 / 底沿亮线 / 柔影）全部保留，只去掉圆角。 */ border-radius:0; /* 2026-10-29 23:34 主人：「玻璃质感再加大点力度，让它整个这个都有玻璃质感， 不是光边角有，往中间延伸」—— 原来是「顶部亮→中间透→底部暗」一条纵向渐变，只有上下有东西，横向一整条是平的， 所以看着只有边角有点光。现在叠四层，横向也铺满： ① 斜向反光带：像玻璃面上扫过的一条光，从左 1/4 斜到右 3/4，中间亮、两头透； ② 顶部镜面高光：贴顶那道最亮（.36），往下 18% 迅速衰减，模拟玻璃上沿的反射； ③ 中部通透：40%~62% 加一点极淡的亮，让中间不是一块死色； ④ 底部压暗：往下渐暗，玻璃才有厚度（不压暗就会像一张平纸）。 */ background: /* ① 横向反光带（斜 114°）：整条从左扫到右，中间最亮， 解决「只有两头有光、中间是死色」的问题。 */ /* ★ 2026-10-29 23:44 主人：「这三段的颜色怎么不一样呢？」 实测：三个字的笔画亮度完全一样（240/239/238），但背后底色从左到右 是 104 → 94 → 85 —— 就是我这条反光带在右端衰减到 0，把右边压暗了。 同样的白字，压在越暗的底上看着越白，所以「取名依据」显得最亮、「价格表」发灰。 现在把两端都不归零、整体幅度从 0~.26 收到 .06~.15， 横向差从 19 降到 6 以内，三段看着就是一个色。 玻璃的光泽改由纵向那几层去撑（见下面 ②），不再靠横向的明暗差。 */ linear-gradient(114deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.15) 28%, rgba(255,255,255,.06) 52%, rgba(255,255,255,.13) 74%, rgba(255,255,255,.10) 100%), /* ② 纵向按像素分层（顶栏只有 38px 高，用百分比分不出层次）： 0-1px 上沿锐利反光（玻璃棱） 1-4px 余晖，迅速掉下去 4-14px 通透段（比底色略亮一点点，玻璃里透出来的光） 14-17px 内部一道极淡的反光脊（玻璃中层的那道亮） 17-26px 过渡 26-38px 下沿压暗，越往下越沉（玻璃的厚度） */ linear-gradient(180deg, rgba(255,255,255,.66) 0px, rgba(255,255,255,.34) 2px, rgba(255,255,255,.14) 5px, rgba(255,255,255,.06) 10px, rgba(255,255,255,.10) 15px, rgba(255,255,255,.03) 19px, rgba(0,0,0,.04) 26px, rgba(0,0,0,.14) 32px, rgba(0,0,0,.24) 38px), var(--brand); box-shadow: /* 内顶 1px 硬反光（玻璃上边缘） */ inset 0 1px 0 rgba(255,255,255,.78), /* 内顶往里 8px 的一层柔光，让上沿有厚度，不是一条白线 */ inset 0 9px 14px -7px rgba(255,255,255,.38), /* 内底压暗，玻璃下沿的厚度 */ inset 0 -2px 6px -2px rgba(0,0,0,.22), /* 外面落一道柔影，整条浮在纸上 */ 0 10px 26px rgba(28,22,14,.20), 0 2px 4px rgba(28,22,14,.10); border-bottom:0; } /* 底部那道细亮线（玻璃厚度）—— 原来两端渐隐，是为了顺着圆角收进去；现在两头是直角， 再渐隐就会在左右各空出一小截，看着像没拉到头。改成整条均匀贯通。 */ body.home .nav::after, body.app .appbar::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:rgba(255,255,255,.62); pointer-events:none;border-radius:0; } body.home .nav{overflow:visible} body.app .appbar{overflow:visible} /* 价格弹层贴在弧边下面，别被圆角裁掉 —— 这条是给不支持 :has 的浏览器兜底用的 */ .pricemenu{position:relative;z-index:2} @media (max-width:640px){ /* 手机同样直角，不再收 12px 圆角 */ body.home .nav,body.app .appbar{border-radius:0} } /* ==================== 顶栏右侧三段统一（2026-10-29 23:37 主人） ==================== 主人截图圈了「价格表 ▾ 赐名码登入 取名依据」，原话： 「这一小块儿你就用了几种字体，能不能用成一样儿，能不能大大方方地给它排好布局， 为什么挤的一堆儿，弄那么多字体干嘛呀？弄一种字体，然后大大方方地分成几个段。」 —— 实测原来三块各说各话： 价格表 15px / 白 .88 / 带 ▾ / 挤着 赐名码登入 14.5px / 白 .88 取名依据 14.5px / 金色 #F3D9A4 三样字号、两种颜色、段间只有 2px，所以看着像三种字体堆在一起。 现在统一：同一个字体（继承顶栏）、13px、字重 400、同一个白色 .9、同一个字距 .6， 段与段之间留 22px 空白 + 一条 1px 极淡竖线 —— 三段清清楚楚，谁也不抢谁。 ★ 写在文件最后，靠「后来者胜」压掉前面那些零散规则（navref 的金色也在其中）。 */ body.home .nav .links{gap:0;align-items:center} body.home .nav .links .pricemenu, body.home .nav .links .pricebtn, body.home .nav .links a, body.home .nav .links a.navref, body.home .nav .links a.navclaim{ font-family:inherit; font-size:13px; font-weight:400; letter-spacing:.6px; line-height:1; color:rgba(255,255,255,.9); background:none; /* ⚠️ 这里只能设「上下」，不能写 border:0 / padding:5px 0 —— 写成简写会把这几个元素的左右内边距和左边框一起清掉， 而 .navclaim / .navref 带类名的选择器特异性比下面的分段规则更高， 会把分段的 padding-left 和 border-left 顶回去（第一版就是这么失败的）。 */ border-top:0;border-right:0;border-bottom:0; border-radius:0; padding-top:5px;padding-bottom:5px; text-decoration:none; white-space:nowrap; } /* 分段：每一段前面留白 + 一条极淡的竖线（第一段不加，否则左边会多一条孤线） ＊选择器必须把 a.navref / a.navclaim 写出来：旧的 navref 规则是 `body.home .nav .links a.navref{border:0}` —— 它比我原来用的 `~ *` 特异性高， 会把「取名依据」左边那条竖线清掉（第一版就是这样：赐名码登入有线、取名依据没线）。 */ body.home .nav .links > .pricemenu ~ *, body.home .nav .links > .pricemenu ~ a, body.home .nav .links > .pricemenu ~ a.navclaim, body.home .nav .links > .pricemenu ~ a.navref, body.home .nav .links > .pricemenu ~ #navUser{ margin-left:22px; padding-left:22px; border-left:1px solid rgba(255,255,255,.18); } /* 悬停：三段一个反应 —— 提亮 + 细下划线，不再各自变色 */ body.home .nav .links .pricebtn:hover, body.home .nav .links a:hover, body.home .nav .links a.navref:hover, body.home .nav .links a.navclaim:hover{ background:none; border-top:0;border-right:0;border-bottom:0; color:#fff; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; text-decoration-color:rgba(255,255,255,.6); } /* 下拉三角已按主人要求去掉（2026-10-29 23:46），这里不留空规则。 功能还在：鼠标悬停展开、手机上点一下展开，靠的是 .pricemenu:hover / .open。 */ /* 手机：三段放不下 22px 的空档，收到 12px；「取名依据」在窄屏本来就没位置 */ @media (max-width:640px){ body.home .nav .links .pricemenu, body.home .nav .links .pricebtn, body.home .nav .links a, body.home .nav .links a.navref, body.home .nav .links a.navclaim{ font-size:12px;letter-spacing:.3px; } body.home .nav .links > .pricemenu ~ *, body.home .nav .links > .pricemenu ~ a, body.home .nav .links > .pricemenu ~ a.navclaim, body.home .nav .links > .pricemenu ~ a.navref, body.home .nav .links > .pricemenu ~ #navUser{ margin-left:12px;padding-left:12px; } body.home .nav .links a[href="/zhengyuan"]{display:none} } /* ==================== 「价格表」三字拉开（2026-10-29 23:51 主人） ==================== 主人：「把顶栏那个价目表那三个字，价跟目之间打一空格，目跟表中间也打空格， 让它看起来和那边那个四个字的宽度差不多，你感觉是不是加点空格跟那边一边长好看？」 —— 实测三块宽度：价格表 57 / 赐名码登入 99 / 取名依据 85。 三个字挤在一起，跟右边两个四字、五字的词组摆一排，明显短一截，像没排满。 试了 7 / 9 / 11 三档：7 还是短，11 字与字之间开始空得散，取 **9px** 最稳 （宽度 57→73，跟「取名依据」85 只差 12，视觉上齐了）。 ★ margin-right:-9px 是必须的：letter-spacing 会在最后一个字后面也留一份， 不减掉的话「价格表」右边会多出 9px 空档，跟后面那条竖线的间距就比别处宽。 手机上字号只有 12px，9px 字距会散开，单独收到 5px。 */ body.home .nav .links .pricebtn{ letter-spacing:9px; margin-right:-9px; } @media (max-width:640px){ body.home .nav .links .pricebtn{ letter-spacing:5px; margin-right:-5px; } } /* ==================== 首屏三行「同一个样子」（2026-10-29 23:58 主人） ==================== 主人第三次指出：「字体不一样，然后字的间距也不一样，宽的宽窄的窄」。 查过：三行的 font-family 求值完全一样，CDP 实测渲染的也都是 Noto Sans SC， 但样式是从 .credo-sub / .credo-sub span / .hero > p / .hero > p b 四条规则分别来的， 字号、字距、颜色、白晕各自继承——只要有一条没压住，看起来就是两种。 这次不再「分别对齐」，直接给它们同一个类 .hq，六项属性全部 !important 钉死： 同一个字体、同一个 15px、同一个 400、同一个字距 0、同一个颜色、都没有白晕。 第三句的 也一并在内 —— 主人要的是「一种字体」，那就一点差别都不留。 */ body.home .hq, body.home .hq span, body.home .hq b, body.home .hq i{ font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif !important; font-size:15px !important; font-weight:400 !important; font-style:normal !important; letter-spacing:0 !important; line-height:1.95 !important; text-shadow:none !important; color:var(--ink2) !important; background:none !important; -webkit-text-fill-color:currentColor !important; } body.home .hq{margin:0 auto;max-width:820px;text-align:center} /* 第一行里那两段之间：只留一道细竖线 + 一个字宽的空，不再 11+12 那么宽 */ body.home .hq span{ display:inline-block;margin-left:12px;padding-left:12px; border-left:1px solid var(--goldLine); } /* 第二行与第一行之间留一口气 */ body.home .credo + .hq{margin-top:20px} @media (max-width:640px){ body.home .hq,body.home .hq span,body.home .hq b,body.home .hq i{font-size:14px !important;line-height:1.9 !important} body.home .hq span{display:block;margin:6px 0 0;padding:0;border:0} } /* ==================== 全站色块统一「玻璃光泽」（2026-10-30 上午 主人） ==================== 主人：「把站内所有的带色块的，全部按照首页页头那个光泽感去做。」 页头那条是四层：斜向反光带 + 纵向逐像素高光 + 内顶 1px 硬反光 + 外落柔影。 色块比顶栏小得多，斜向反光带铺上去会花（按钮才 40px 高，一条斜光切过去像脏了）， 所以这里只取后三层，并按比例压扁： 0-16% 上沿最亮（玻璃棱） 16-48% 迅速掉下去（玻璃里透出来的光） 48-76% 中段通透 76-100% 底部压暗（玻璃的厚度） ★ 只写 background-image 和 box-shadow，绝不碰 background-color： 每块的颜色归它自己的规则，这里只管给它「厚度」。 ★ 凡是 hover 改底色的规则，必须写 background-color， 写 background 简写会把这一层高光整个重置掉（company 页三处、本文件 .cta .btn.ghost:hover 已改）。 ★ 写在文件最末尾，靠「后来者胜」压过前面那些平涂的 background。 */ .btn.primary, .btn.gold, .bigbtn, .genmini, .v3-checkrow .ar, .ub-go, .cta .btn.ghost:hover, .abtn.cur, .side a.on, .seg2 button.on, .chip.on, .fchip.on, .sncal button.on, .nav .links a.on, body.app .pv-go{ background-image:linear-gradient(180deg, rgba(255,255,255,.44) 0%, rgba(255,255,255,.20) 14%, rgba(255,255,255,.05) 48%, rgba(0,0,0,.06) 74%, rgba(0,0,0,.24) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.16), 0 3px 10px rgba(28,22,14,.13); } /* 小块（价格签、五行标签、客服卡头）：面积小，带阴影会脏，只留高光和一道内亮线 */ .plan .ptag, .line.m .tag, .line.f .tag, .qrcard.kefu .qrcard-h{ background-image:linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.12) 22%, rgba(255,255,255,.02) 55%, rgba(0,0,0,.15) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.12); } /* 窄屏（手机）把「不产生点击价值」的几行压短，把高度让给推演块： 二维码 152 → 118（微信原图，缩显示不改文件，别人另拿手机照样扫得到）， 副标题、流程说明各收一行。 */ @media (max-width:480px){ body.app .pv-card{max-height:calc(100vh - 26px)} body.app .pv-sub{font-size:11.5px;line-height:1.6;margin-top:6px} body.app .pv-qrwrap{margin-top:10px;padding:9px;gap:11px} body.app .pv-qr{width:118px;height:118px} body.app .pv-flow{font-size:11.5px;line-height:1.6;padding:8px 10px;margin-top:9px} body.app .pv-n{display:none} body.app .pp-name{margin-top:9px;padding:9px 10px} body.app .pn-meta{font-size:10.5px;line-height:1.5} body.app .pp-f{font-size:11px;line-height:1.6;padding-left:32px} } /* ---------- 城市选择器：按钮 + 自绘面板，A→Z 在列表右侧（2026-11-01） ---------- 原生