/* ========================================================== 管店宝联系我们 - 增量自定义样式（custom.css） ------------------------------------------------------------ 工作方式：页面以原文件 + web.assets_frontend.min.css 为底， 本文件只放自己的增量样式，在 head 中最后加载（同权重时胜出）。 当前进度：导航已对齐拓客页规范（2026-09-20）， 其余分区（字体/颜色双色制/动效等）随后续批次补齐。 目录： ① 品牌色变量 —— 双色制令牌（2026-09-21 补，此前缺失导致 contact.css 取不到值） ② 顶栏与导航 —— 固定悬浮 / 移动端汉堡菜单 改样式须知： · web.assets_frontend.min.css 是 Odoo 引擎，不要手改；增量一律写本文件。 · 覆盖 web.assets_frontend.min.css 里带 !important 的规则时，本文件也要带 !important。 ========================================================== */ /* ========================================================== ① 品牌色变量（双色制） ------------------------------------------------------------ 2026-09-21 补：联系页重设计时新样式表 contact.css 使用了 var(--brand-text) / var(--brand-surface)，但本页此前从未定义过这两个 变量 → 整条 color 声明被浏览器丢弃，文字回退为黑色（实测： .contact-phone-link 计算色 rgb(33,37,41)，而应为主题橙）。 取值依据统一样式基准，与关于我们页一致： --brand-text var(--brand-800, #B34700) = 橙字压白/米白底（白底 5.50:1、米白底 4.93:1） --brand-surface var(--brand-700, #C25200) = 橙底配白字（4.67:1） 装饰用纯橙 var(--brand-500, #FF7C1C) 不在此列（对比度不足，禁用于正文文字）。 ========================================================== */ :root { --brand-text: var(--brand-800, #B34700); --brand-surface: var(--brand-700, #C25200); } /* 按钮：主题的 .btn-primary 用的是纯橙 var(--brand-500, #FF7C1C)，实测「橙字压白底 = 2.58:1」 严重不达标（曾实测收尾 CTA 按钮文字不可读）。改为品牌深橙。 本页无深橙底承载按钮的场景，故整套按钮统一走 --brand-text， 白色态由 :hover 用 --brand-surface 反相处理（见 contact.css）。 做法与关于我们页一致：改 --btn-color / --btn-border-color 两个消费型变量， 不动主题的 .btn-primary 规则本身。 */ .btn-primary { --btn-color: var(--brand-text) !important; --btn-border-color: var(--brand-text) !important; } .btn-outline-primary { --btn-color: var(--brand-text) !important; --btn-border-color: var(--brand-text) !important; } /* ========================================================== ① 顶栏与导航 ========================================================== */ /* -- 1.1 固定悬浮 ------------------------------------------------ 原文件 header 已带 o_header_fixed 类，但 web.assets_frontend.min.css 里对应规则 依赖 Odoo JS 补偿，本地不生效；这里纯 CSS 补齐（与拓客/收银页同款）。 left/right 必须同时为 0 才能撑满全宽，缺一会被内容宽度收缩。 */ header.o_header_fixed { position: fixed !important; left: 0; right: 0; z-index: 1030; } /* -- 1.2 移动端汉堡菜单（<992px，配合 js/mobile-nav.js）----------- Odoo JS 移除后 offcanvas 抽屉失效，换自研实现（与拓客/收银页同款交互）： 导航胶囊作为定位参照，菜单以下拉卡片浮层展示（避免撑破胶囊圆角）。 菜单项由 JS 从桌面 #top_menu 自动克隆——改菜单只改 HTML 里 #top_menu 一处。 */ .o_header_mobile { position: relative; } /* 汉堡按钮：三条橙色横线，点击后变叉 */ .mobile-nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: transparent; border: 0; border-radius: 50%; cursor: pointer; } .mobile-nav-toggle:hover { background: rgba(0, 0, 0, .05); } /* 键盘焦点环（2026-10-03 第 6 轮）：汉堡按钮落在浅底导航胶囊上 → 深橙轮廓 5.50:1 */ .mobile-nav-toggle:focus-visible { outline: 2px solid var(--brand-800, #B34700); outline-offset: 2px; } .mobile-nav-toggle-bar { display: block; width: 100%; height: 2px; border-radius: 2px; background: var(--o-color-2, var(--brand-500, #FF7C1C)); transition: transform .2s ease, opacity .2s ease; } .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle-bar:nth-child(2) { opacity: 0; } .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* 折叠菜单：默认收起；.open 时在胶囊下方弹出白色圆角卡片 */ .mobile-nav-menu { display: none; position: absolute; top: calc(100% + 8px); left: 8px; right: 8px; background: #FFFFFF; border-radius: 24px; box-shadow: 0 8px 24px rgba(0, 0, 0, .15); padding: 8px; margin: 0; z-index: 1040; } .mobile-nav-menu.open { display: flex; flex-direction: column; gap: 2px; } /* ---------- 手机菜单项（2026-10-01 定稿，7 份页面 CSS 同步） ---------- 基座 `.navbar-nav.nav-pills .nav-link`（特异性 0,3,0）会把本页左右内边距压成 1.5rem、圆角打成 10rem， 故本规则补足到 (0,4,0) 直接胜出，不再依赖 !important。 padding 维持 10px 16px：项高 = 10 + 10 + 继承行高 27px（header font-size 1.125rem × body line-height 1.5） ≈ 47px，本就过 44px 触摸门槛。本次改动实质 = 7 页左右内边距统一到 16px + 去掉 !important，高度不变。 */ .mobile-nav-menu.navbar-nav.nav-pills .nav-link { padding: 10px 16px; border-radius: 999px; text-align: center; } /* ---------- 商家管理中心入口（桌面导航最右端，2026-10-01 恢复） ---------- 规格沿用 2026-09-21 定稿：透明底 + 深橙字 + 1px 深橙描边，悬停变深橙底白字 （与价格卡 .btn-pricing 同一套双色制：深橙字压白 5.50:1、白字压深橙 4.67:1，均过 WCAG AA）。 三条成组：菜单先撑满整行，按钮才有空间右推——缺 flex-grow 时 ul 宽度自适应内容， margin-left:auto 没有可分配空间，按钮会紧贴「关于我们」而不靠右。 padding 带 !important：用于压过下方 `header #top_menu > li > .nav-link` 的同属性 !important(28px)。 */ #top_menu { flex-grow: 1; } #top_menu .nav-item-enter { margin-left: auto; } #top_menu .nav-item-enter .nav-link { padding: 6px 18px !important; color: var(--brand-800, #B34700); background: transparent; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--brand-800, #B34700); font-weight: 500; white-space: nowrap; } #top_menu .nav-item-enter .nav-link:hover { background: var(--brand-700, #C25200); color: #FFFFFF; } /* 手机菜单里的同名入口：白面板上保持同款描边，与站内导航项区分（该项是外链，新窗口跳商家后台）。 带 `#top_menu` 前缀的两条不会命中克隆项，故此处按 .mobile-nav-menu 作用域重写。 */ .mobile-nav-menu .nav-item-enter .nav-link { color: var(--brand-800, #B34700); box-shadow: inset 0 0 0 1px var(--brand-800, #B34700); } /* ---------- 字体本地化（图片本地化批次补齐） ---------- */ /* 源 CSS（_files/web.assets_frontend.min.css）的 @font-face 指向官网服务器绝对路径， 本地加载不到 → 图标全消失；这里用本地 fonts/ 副本声明同名家族（本文件后加载优先），图标恢复。 */ /* odoo_ui_icons 本地化（2026-09-21 联系页新增 FAQ 手风琴后补）： 主题的 accordion-button::after 展开箭头用 'odoo_ui_icons' 字体， 源 CSS 的 @font-face 指向服务器绝对路径 /web/static/... （file:// 下解析为 盘符根），本地不存在 → 实测 2 条 ERR_FILE_NOT_FOUND。 箭头是全页唯一消费者，用与上方 FontAwesome 相同的本地化手法： 声明同名家族指向本地副本（拓客页同款文件，6.2KB），请求归零。 */ @font-face { font-family: 'odoo_ui_icons'; src: url('../fonts/odoo_ui_icons.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: block; } @font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'); font-weight: normal; font-style: normal; font-display: block; } /* Poppins 本地化（源 CSS 无 Poppins @font-face，仅 Google @import——已删。 与其它五页同一份 woff2，保证全站字形一致） */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/poppins/poppins-latin-300-normal.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins/poppins-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins/poppins-latin-700-normal.woff2') format('woff2'); } /* ---------- 全站字体基准（2026-09-21 静态化批次） ---------- */ /* lead 导语 18px/27px，与其它五页一致；包在 ≥1200px 内，移动端保持主题流式缩放 */ @media (min-width: 1200px) { .lead { font-size: var(--fs-prose-lead, 18px); line-height: 27px; } } /* ---------- 导航选中态（2026-09-22 五页统一，用户拍板 A 方案） ---------- 原：主题橙底药丸+深灰字（5.99:1 达标但视觉拉胯：与品牌 logo 橙块相撞、 与头图「白色药丸+橙字」按钮语言打架、字重不加粗层级弱）。 改：白药丸+品牌深橙字+柔影，与头图主按钮同一套语言。 #top_menu 前缀确保不影响手机菜单（.mobile-nav-menu 内克隆项，白面板保留橙药丸） */ #top_menu .nav-link.active { background: #FFFFFF !important; color: var(--brand-800, #B34700) !important; font-weight: 600 !important; box-shadow: 0 2px 10px rgba(194, 82, 0, .28) !important; } /* ========================================================== ⑤ 站点动效 —— 板块进场淡入 + 头部滚动响应（配合 js/site-effects.js） 2026-09-22 第三十四批补齐：此前本页 js 目录无 site-effects.js， 三项站点动效（头部滚动/进场淡入/数字计数）全部缺失。 三条动效中只有本条需要样式：数字计数为纯 JS 改写文本节点，不含 CSS 规则。 .fx-reveal 由脚本动态添加——JS 不运行时该类不存在，页面完整可读，SEO 零风险。 ========================================================== */ /* 进场单元：初始隐藏下移 16px，滚入视口后过渡显现；错峰延迟由脚本注入 --fx-delay */ .fx-reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease var(--fx-delay, 0ms), transform .5s ease var(--fx-delay, 0ms); will-change: opacity, transform; } .fx-reveal.fx-in { opacity: 1; transform: none; will-change: auto; } /* 系统开启「减少动态效果」：直接可见、无过渡（脚本层面同样整体跳过，双保险） */ @media (prefers-reduced-motion: reduce) { .fx-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* 头部滚动响应样式：滚过 24px 后 JS 给 header 加 .is-scrolled */ header#top .navbar { transition: box-shadow .25s ease, padding .25s ease; } /* 滚动后：只微收高度，阴影保持不变（与未滚动完全一致） 2026-10-02 用户反馈：滚动后阴影由橙色光晕变成深棕（rgba(46,31,20,.18)），要求颜色一致 → 不再覆盖 box-shadow，基础态 #FF9C00 0 8px 16px 由 *-base.css 的 !important 规则提供。 ⚠️ 修正旧注释：本页手机导航同样命中 header nav.navbar（滚动前后的 .is-scrolled 选择器即 header#top… .navbar.o_header_mobile，证明它在 header 内），并非「无基础阴影」。 */ header#top.is-scrolled .navbar.navbar-expand-lg { padding-top: .55rem !important; padding-bottom: .55rem !important; } /* 打印兜底：.fx-reveal 的初始隐藏态（opacity:0）只由 JS 加 .fx-in 后解除。 打印不是「滚动查看」——没进过视口的板块仍是透明的， 这里在 print 媒体下直接还原成可见终态，与上方 prefers-reduced-motion 同一思路。 */ @media print { .fx-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* -- 页脚二维码窄屏溢出修复（2026-09-22） ----------------------------- 与收银页 4.5 节同源问题、同解法：二维码 img 的内联 max-width:260px 大于 992–1010px 区间所在列的内容宽（210px），撑破布局产生横向滚动条 （实测 992px 溢出 19px、1000px 溢出 15px；≤990px 容器随之变窄反而正常）。 只在 lg 区间用同权重 !important 覆盖那条内联声明 （作者 !important 优先于内联普通声明）。≥1200px 视口有富余，不加限制， 桌面渲染（260×128）与改前逐像素一致。 */ @media (min-width: 992px) and (max-width: 1199.98px) { footer img.o_we_custom_image[src*="qrcode"] { max-width: 100% !important; } } /* ============================================================ 顶部导航胶囊：内边距与间距（2026-10-01 定稿） ------------------------------------------------------------ 问题：logo 文字距胶囊左边缘仅 20px，恰为圆角半径（80px 高 / 2 = 40px） 的一半，文字的起点还在圆弧里；而末项距右边缘 44px —— 左右不对称， 读作「logo 贴边」。全站 5 项导航在 1140px 胶囊里仅占约 744px， 右侧空 400px+，间距预算充足。 改法：不动 .px-3 / .me-4 的全局定义（全站工具类，会影响其它元素）， 只在本页作用域内覆盖导航三处 —— 胶囊左右内边距 20px → 40px（992–1199px 随容器收窄为 32px） logo 与首项间距 30px → 40px 菜单项左右内边距 24px → 28px（项间净距 48 → 56px） 宽度预算（最紧的 992px / 容器 960px）：需 744px，余 152px，不溢出。 保留：@media (min-width:992px) and (max-width:1003.98px) 的 22px 项距压缩档 （历史为 7 项导航防溢出所设），因此新值从 ≥1004px 起生效。 手机端（<992px）：桌面胶囊带 d-none，本块全部不生效，移动端维持原样。 注意：这里给的是胶囊「内部」留白，胶囊本身仍与页面主体同宽同左边界， 不移动容器，否则会与下方正文栅格错位。 ============================================================ */ @media (min-width: 992px) { header nav.navbar.d-lg-block.px-3 { padding-left: 32px !important; padding-right: 32px !important; } header nav.navbar .navbar-brand.me-4 { margin-right: 40px !important; } } @media (min-width: 1200px) { header nav.navbar.d-lg-block.px-3 { padding-left: 40px !important; padding-right: 40px !important; } } @media (min-width: 1004px) { header #top_menu > li > .nav-link { padding-left: 28px !important; padding-right: 28px !important; } }