/* ============================================================ 照见心灯 · 全站统一覆盖层 site-v3.css 用法：在每个页面的 里，所有现有样式表【之后】加一行： 不改任何模板结构、不改任何现有 CSS 文件，纯追加覆盖。 首页若已使用 home-v3.css，则首页【不需要】引入本文件。 ============================================================ */ /* ── 0. Web 字体（自托管，原来全站引用了 Noto 字体名但从未加载字体文件） ── */ @import url("/static/fonts.css"); /* ── 1. 色板统一：三套变量命名 → 同一组 v3 色值 ─────────────── tokens.css 的 --color-*、style.css 的裸变量、more 页的 --zj-*， 全部指向同一调色板，全站颜色自动收敛。 */ :root { /* v3 标准色 */ --v3-paper: #F6F3EC; --v3-paper-deep: #EFE9DF; --v3-surface: #FFFFFF; --v3-ink: #171310; --v3-ink-soft: #565049; --v3-ink-faint: #6E675E; --v3-verm: #9C3226; --v3-verm-deep: #7C241B; --v3-verm-tint: #F8EAE5; --v3-gold: #7D6538; --v3-gold-soft: #E4D7BF; --v3-line: rgba(23, 19, 16, 0.10); --v3-line-strong:rgba(23, 19, 16, 0.20); /* tokens.css 命名（base.css / pages/*.css 使用） */ --color-bg: var(--v3-paper); --color-surface: var(--v3-surface); --color-elevated: var(--v3-surface); --color-ink: var(--v3-ink); --color-ink-muted: var(--v3-ink-soft); --color-ink-faint: var(--v3-ink-faint); --color-accent: var(--v3-verm); --color-accent-soft: var(--v3-verm-tint); --color-gold: var(--v3-gold); --color-line: var(--v3-line); --color-panel: var(--v3-paper-deep); /* style.css 命名（内页组件使用） */ --bg: var(--v3-paper); --surface: var(--v3-surface); --surface-warm: var(--v3-paper-deep); --ink: var(--v3-ink); --ink-soft: var(--v3-ink-soft); --ink-faint: var(--v3-ink-faint); --line: var(--v3-line); --line-strong: var(--v3-line-strong); --accent: var(--v3-verm); --accent-deep: var(--v3-verm-deep); --accent-soft: var(--v3-verm-tint); --gold: var(--v3-gold); --gold-soft: var(--v3-gold-soft); /* more / 部分页面使用的 --zj-* 命名 */ --zj-paper: var(--v3-paper); --zj-paper-2: var(--v3-paper-deep); --zj-ink: var(--v3-ink); --zj-ink-soft: var(--v3-ink-soft); --zj-ink-faint: var(--v3-ink-faint); --zj-red: var(--v3-verm); --zj-red-deep: var(--v3-verm-deep); /* 字体栈补齐（web 字体已由上方 @import 加载） */ --font-display: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif; --font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", system-ui, sans-serif; } /* ── 2. 页头统一（与首页 v3 同款：纸色毛玻璃 + 墨黑 CTA） ────── */ .site-header.ds-v2 { background: rgba(246, 243, 236, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--v3-line); } .site-header.ds-v2 .brand-mark { width: 4px; height: 22px; background: var(--v3-verm); border-radius: 2px; } .site-header.ds-v2 .brand-word { font-weight: 700; letter-spacing: 0.06em; } /* 导航链接：下划线滑动 hover（原仅变色） */ .site-header.ds-v2 .primary-nav a { position: relative; padding: 8px 0; transition: color 0.15s ease; } .site-header.ds-v2 .primary-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; background: var(--v3-verm); transition: right 0.2s ease; } .site-header.ds-v2 .primary-nav a:hover::after { right: 0; } /* 页头 CTA：墨黑底、hover 变朱（与首页一致，原全站为朱底） */ .site-header.ds-v2 .btn-header-cta, body.pattern-clinical .site-header.ds-v2 .btn-header-cta { background: var(--v3-verm); color: #FFF8F0; border-radius: 999px; } .site-header.ds-v2 .btn-header-cta:hover, body.pattern-clinical .site-header.ds-v2 .btn-header-cta:hover { background: var(--v3-verm-deep); transform: translateY(-1px); } /* ── 3. 底部 Tabbar 统一（墨色 + 当前页朱红指示条） ─────────── */ @media (max-width: 720px) { body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); } .mobile-tabbar { background: rgba(23, 19, 16, 0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: none; } .mobile-tabbar a { position: relative; color: rgba(244, 238, 228, 0.62); font-weight: 600; } .mobile-tabbar a span { font-family: var(--font-display); color: rgba(244, 238, 228, 0.66); } .mobile-tabbar a.active, .mobile-tabbar a.active span { color: #FFF4E2; } .mobile-tabbar a.active::before { content: ""; position: absolute; top: 0; width: 18px; height: 3px; border-radius: 0 0 3px 3px; background: var(--v3-verm); } } /* ── 4. 页脚统一 ─────────────────────────────────────────── */ .site-footer { color: var(--v3-ink-faint); } .site-footer a:hover { color: var(--v3-verm); } /* ── 5. /q 问事库：36 个实心朱按钮降级为描边按钮 ────────────── 原页面一屏十几个实心红按钮，视觉噪音大、层级扁平。 改为描边款，hover 时填充，页面立刻安静，点击性不变。 */ .question-card__cta { background: transparent; color: var(--v3-verm); box-shadow: inset 0 0 0 1.5px rgba(156, 50, 38, 0.45); } .question-card__cta:hover { background: var(--v3-verm); color: #FFF8F0; box-shadow: inset 0 0 0 1.5px var(--v3-verm); } /* ── 6. 中文排印：内页标题沿用西文负字距习惯，中文会被挤压 ────── 全站标题统一为微正字距，仅限 h1-h3，正文不受影响。 */ h1, h2, h3 { letter-spacing: 0.01em !important; } /* ── 6.5 页头双竖条修复 ────────────────────────────────────── style.css 遗留 .brand-word::before 也是一根朱条，与 base.html 的 .brand-mark 叠加成双竖条，只保留 .brand-mark。 */ .site-header.ds-v2 .brand-word::before { content: none !important; box-shadow: none !important; } /* ── 6.6 /today 移动端按钮：等宽、不换行 ────────────────────── */ @media (max-width: 560px) { .today-ask-cta { width: 100% !important; min-height: 48px !important; white-space: nowrap; font-size: 15.5px; } } /* ── 6.7 内页 Hero 卡：去照片底改干净纸面、松开小字排版 ─────── /today /more /q /about 的 hero 原用褪色照片底，角落露边、顶部空荡。 */ .today-mobile-sheet, .more-hero, .more-hub-hero, .about-brand-hero, .q-hero { background: linear-gradient(135deg, #FFFFFF 0%, var(--v3-paper-deep) 135%) !important; border: 1px solid var(--v3-line) !important; box-shadow: 0 14px 34px rgba(23, 19, 16, 0.06) !important; backdrop-filter: none !important; } .more-hub-hero, .about-brand-hero { min-height: 0; align-items: flex-start; padding: clamp(24px, 5vw, 42px); } /* 页头小字松绑：原来字距过散、行距过挤 */ .today-modern .eyebrow, .more-surface .kicker, .q-library .eyebrow { letter-spacing: 0.10em; font-weight: 700; } .today-modern .today-date { margin-top: var(--s-2, 8px); line-height: 1.7; } .more-hub-hero h1, .about-brand-hero h1 { letter-spacing: 0.01em !important; line-height: 1.15; } /* ── 7. 可访问性补全（全站原来没有） ───────────────────────── */ :focus-visible { outline: 2px solid var(--v3-verm); outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ?? gaodao ritual P0 2026-07-18 ?? */ .ritual-loading__eta{margin:8px 0 0;font-size:13px;color:var(--v3-ink-faint)} .ritual-loading__cancel{margin-top:20px;background:transparent;border:0;color:var(--v3-ink-soft);font-size:14px;text-decoration:underline;cursor:pointer} .ritual-loading__actions{display:flex;flex-direction:column;gap:10px;margin-top:20px;width:100%;max-width:280px} .ritual-loading__actions .btn{width:100%;justify-content:center} .gaodao-example-chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px} .gaodao-example-chips button{border:1px solid var(--v3-line);background:var(--v3-surface);color:var(--v3-ink-soft);border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer;font-family:inherit} .gaodao-example-chips button:hover{border-color:var(--v3-verm);color:var(--v3-verm)} /* === emil-polish-20260718 === Emil Kowalski motion bar: strong ease-out, no transition:all, press feedback, hover gated, reduced-motion. */ :root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-inout: cubic-bezier(0.77, 0, 0.175, 1); --dur-press: 160ms; --dur-ui: 200ms; --dur-hover: 150ms; } /* Buttons: property-specific + press scale */ body.ds-v2 .btn, body.ds-v2 .btn-primary, body.ds-v2 .btn-outline, body.ds-v2 .btn-ghost, .site-header.ds-v2 .btn-header-cta, body.ds-v2 a.pc-btn--primary, body.ds-v2 .pc-btn { transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out), transform var(--dur-press) var(--ease-out); } body.ds-v2 .btn:active, body.ds-v2 .btn-primary:active, body.ds-v2 .btn-outline:active, .site-header.ds-v2 .btn-header-cta:active, body.ds-v2 a.pc-btn--primary:active, body.ds-v2 .pc-btn:active { transform: scale(0.97); } /* Chips / filters sitewide */ body.ds-v2 .chip, body.ds-v2 .chip-radio, body.ds-v2 .q-tabs button, body.ds-v2 .q-tabs-v2 button { transition: background-color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), transform 120ms var(--ease-out); } body.ds-v2 .chip:active, body.ds-v2 .chip-radio:active, body.ds-v2 .q-tabs button:active { transform: scale(0.97); } /* Example chips on gaodao */ .gaodao-example-chips button { transition: background-color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), transform 120ms var(--ease-out); } .gaodao-example-chips button:active { transform: scale(0.97); } /* Cards: only elevate on real hover devices; keep under 300ms */ body.ds-v2 .product-card, body.ds-v2 .pc-module, body.ds-v2 .question-card { transition: transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out); } @media (hover: hover) and (pointer: fine) { body.ds-v2 .product-card:hover, body.ds-v2 .pc-module:hover { transform: translateY(-2px); } body.ds-v2 .pc-module__art img { transition: transform 250ms var(--ease-out); } body.ds-v2 .pc-module:hover .pc-module__art img { transform: scale(1.025); } } @media (hover: none) { body.ds-v2 .product-card:hover, body.ds-v2 .pc-module:hover { transform: none; } } /* Accordion caret: transform only */ details summary { transition: color var(--dur-hover) var(--ease-out); } .pricing-compare-accordion summary::after, body.ds-v2 details summary::after { transition: transform 160ms var(--ease-out); } /* Focus rings without layout thrash */ body.ds-v2 :where(button, a.btn, .btn-header-cta, .chip-radio):focus-visible { outline: 2px solid rgba(156, 50, 38, 0.45); outline-offset: 2px; } /* Ritual overlay: enter from near-scale, not nowhere */ .ritual-loading:not([hidden]) .ritual-loading__sheet { animation: ritualSheetIn 220ms var(--ease-out) both; } @keyframes ritualSheetIn { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Tabbar: no bounce, crisp press */ .mobile-tabbar a { transition: color var(--dur-hover) var(--ease-out), opacity var(--dur-hover) var(--ease-out), transform 120ms var(--ease-out); } .mobile-tabbar a:active { transform: scale(0.96); } /* Kill lingering transition:all if any child reintroduces */ body.ds-v2 [style*="transition: all"], body.ds-v2 [style*="transition:all"] { /* no-op marker for audit */ } @media (prefers-reduced-motion: reduce) { body.ds-v2 *, body.ds-v2 *::before, body.ds-v2 *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } body.ds-v2 :where(.btn, .pc-btn, .btn-header-cta, .chip, .chip-radio, .product-card, .pc-module, .mobile-tabbar a):active { transform: none !important; } .ritual-loading:not([hidden]) .ritual-loading__sheet { animation: none !important; } } /* emil-bullet-nuclear */ html body.ds-v2 .pricing-tier ul li::before, html body.ds-v2 .pricing-tier li::before, html body.ds-v2 .pricing-compare .pricing-tier li::before, html body .pricing-tier li::before { content: "" !important; display: block !important; position: absolute !important; left: 2px !important; top: 0.72em !important; width: 6px !important; height: 6px !important; min-width: 6px !important; min-height: 6px !important; border-radius: 999px !important; background: #9C3226 !important; border: 0 !important; box-shadow: none !important; /* do NOT zero font-size — it collapses em-based top */ font-size: 12px !important; line-height: 1 !important; color: transparent !important; text-indent: -9999px !important; overflow: hidden !important; } html body.ds-v2 .pricing-tier ul { list-style: none !important; } html body.ds-v2 .pricing-tier li { list-style: none !important; position: relative !important; padding-left: 1.15rem !important; }