/* 九清国内站 · 产品详情页 /<产品>/ ⚠️ 铁律：本文件是产品详情页 CSS 的唯一副本。不要在页面正文、页脚 widget 或 Customizer 再放一份。 版本号由 joeqing-product.php 用 filemtime 生成，改完即时生效，不吃缓存。 ── 规格来源：tesla.cn/model3 实测（1440 视口，2026-08-27）── 首屏大标题 56px / 500 / 行高 64 居中 首屏按钮 200×40 / 圆角 4 / #3E6AE1 / 14px·500 区块大标题 48px / 500 / 行高 56 居中 区块正文 20px / 400 / 行高 28 / #5C5E62 居中，最宽约 1040 子标题/数字 34px / 500 / 行高 44 / #171A20 首屏高度 604（约等于一屏减页头） ⚠️ 特斯拉全站标题都是 **500 字重，不是粗体**。做联系页时我用 700 + 紧间距， 被站长连着打回两次，别再犯。改这个文件前先回 tesla.cn/model3 量一遍。 节奏：一屏一个卖点 —— 通栏大图 → 居中大标题 → 一句 20px 说明。整页很长（tesla 那页 8500px）。 */ .jqp{color:#393C41;font-size:16px;line-height:1.75} .jqp *{box-sizing:border-box} /* ── 页头：透明压在首屏大图上，滚动时随页面走掉 ────────────────────── 实测 tesla.cn/model3（2026-08-27）：页头容器 position:absolute、背景全透明， 压在首屏大图上；滚动时整个跟着页面走掉，不吸顶。站长 2026-08-27 要求对齐。 ⚠️ absolute 会让页头脱离文档流，所以首屏图会自动顶到最上面 —— 不需要再写负边距。 */ body.jqp-page #masthead{ position:absolute!important;top:0!important;left:0;right:0; background:transparent!important;z-index:99!important; } /* ⚠️ 这里**不要**再为管理栏加 32px。#masthead 是 absolute，定位参照的是 .hfeed.site（position:relative），而它本身已经从管理栏下面开始了。 再写 top:32 会让页头整体又往下掉 32px —— 2026-08-27 实测顶边跑到 64。 */ /* ⚠️ #masthead 本身是透明的，真正画白底的是里面的 .ast-primary-header-bar。 只把这一条透明化 —— 下拉面板 .jq-mega 的白底必须留着，展开时要能看清。 */ body.jqp-page #masthead .ast-primary-header-bar{background:transparent!important} /* 压在深色大图上，logo 和文字要反白。 ⚠️ :not(.ast-main-header-nav-open) 是必须的：手机菜单展开时面板是白底， 那时文字必须变回深色，否则白字白底看不见（首页那套也是这么防的）。 */ body.jqp-page:not(.ast-main-header-nav-open) #masthead .custom-logo{filter:brightness(0) invert(1)} body.jqp-page:not(.ast-main-header-nav-open) #masthead .main-header-menu>.menu-item>.menu-link, body.jqp-page:not(.ast-main-header-nav-open) #masthead .site-header-primary-section-right a{ color:#fff!important; } body.jqp-page:not(.ast-main-header-nav-open) #masthead .main-header-menu>.menu-item>.menu-link:hover{ background:rgba(255,255,255,.16)!important;color:#fff!important; } body.jqp-page:not(.ast-main-header-nav-open) #masthead .menu-toggle svg{fill:#fff!important;color:#fff!important} /* ── 下拉面板展开时：整条页头变白 ───────────────────────────────────── 实测 tesla.cn/model3（2026-08-27）：透明页头在鼠标悬停「车辆」、面板落下来的那一刻 **整条变白**，logo 和菜单文字同时转深色 —— 页头和下拉合成一整块连着的白，中间没有分界。 站长 2026-08-27 原话：「特斯拉就是导航栏与下拉同色」。 我们原来只让 .ast-primary-header-bar 一直透明，面板落下来时页头仍压着深色大图， 白色面板和深色页头硬接在一起，接缝非常明显。 ⚠️ 用 :has()：面板纯靠 CSS :hover 展开，DOM 上没有任何「已展开」的 class 可挂。 2026-08-27 实测本站 Chrome CSS.supports('selector(:has(a))') === true； 万一遇到不支持 :has() 的老浏览器，只是退回原来的透明页头，不会报错也不会错版。 */ @media(min-width:922px){ body.jqp-page #masthead:has(.main-header-menu>.menu-item-has-children:hover) .ast-primary-header-bar, body.jqp-page #masthead:has(.main-header-menu>.menu-item-has-children:focus-within) .ast-primary-header-bar{ background:#fff!important; } /* 页头变白之后，反白的 logo 和白色菜单字必须同时转回深色，否则白底白字 */ body.jqp-page #masthead:has(.main-header-menu>.menu-item-has-children:hover) .custom-logo, body.jqp-page #masthead:has(.main-header-menu>.menu-item-has-children:focus-within) .custom-logo{ filter:none!important; } body.jqp-page #masthead:has(.main-header-menu>.menu-item-has-children:hover) .main-header-menu>.menu-item>.menu-link, body.jqp-page #masthead:has(.main-header-menu>.menu-item-has-children:focus-within) .main-header-menu>.menu-item>.menu-link, body.jqp-page #masthead:has(.main-header-menu>.menu-item-has-children:hover) .jq-nav-right-link, body.jqp-page #masthead:has(.main-header-menu>.menu-item-has-children:focus-within) .jq-nav-right-link{ color:#171a20!important; } /* hover 药丸也要换回深色那一版：白底上叠 16% 的白等于什么都没有 */ body.jqp-page #masthead:has(.main-header-menu>.menu-item-has-children:hover) .main-header-menu>.menu-item>.menu-link:hover, body.jqp-page #masthead:has(.main-header-menu>.menu-item-has-children:hover) .main-header-menu>.menu-item-has-children:hover>.menu-link{ background:rgba(0,0,0,.05)!important; } } /* ⚠️ 面板里的文字**永远**是深色，跟页头反不反白无关。 上面那条 `.site-header-primary-section-right a{color:#fff}` 是按「页头右半区的链接」写的， 而 .jq-mega 面板正好挂在这个容器里面 —— 于是六个产品名和每张卡下面的「了解 / 定制」 全变成白底白字，在产品详情页上整块下拉面板只剩图、一个字都看不见（2026-08-27 实测）。 这几条按 header.css 的原色钉回去；和上面那条特指度相同，靠写在后面取胜，别往前挪。 ⚠️ 右列那两条必须写成 `a.jq-mega-side-link`：只写 .jq-mega-side-link 的话选择器里少一个 元素名，特指度比上面那条低一档，压不住，右列「应用案例 / 定制咨询」还是白底白字。 */ body.jqp-page #masthead .jq-mega .jq-mega-title, body.jqp-page #masthead .jq-mega .jq-mega-title a, body.jqp-page #masthead .jq-mega a.jq-mega-side-link{color:#171a20!important} body.jqp-page #masthead .jq-mega .jq-mega-actions a{color:#5C5E62!important} body.jqp-page #masthead .jq-mega .jq-mega-actions a:hover{color:#171a20!important} body.jqp-page #masthead .jq-mega a.jq-mega-side-link:hover{color:#3E6AE1!important} /* ⚠️ 首屏大图必须紧贴页头。Astra 默认在正文上方留了两段，加起来 84px 白条： ① .content-area 的 margin-top:60px ② 一个**完全空的**
，高 0 但带 margin-bottom:24px —— joeqing-page-title.php 关掉了标题文字，这个空壳还在。 站长 2026-08-27 反馈「顶部图到导航栏还有距离，滑动时会动」，就是这 84px。 ⚠️ 我一开始误判成"空白文本节点撑出行框"，给整条 wrapper 链加了 display:flex， 白折腾两轮 —— 真因是那个空 header 的下边距。别再往回加 flex。 空 header 的那条已挪到 footer.css 全站处理（每个页面都有这个空壳）。 */ .jqp-page .site-content .content-area{margin-top:0!important} /* 通栏：正文被 --jq-shell 限宽，通栏块要铺满整屏。 用 calc 负边距顶出容器（和 home.css / contact.css 同一套写法）。 */ .jqp-bleed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)} /* 居中的窄内容列。tesla 正文最宽约 1040 */ .jqp-mid{width:100%;max-width:1040px;margin-inline:auto;padding-inline:var(--jq-gutter,28px);text-align:center} /* ── 首屏 ─────────────────────────────────────────────────────────────── tesla：通栏大图 + 居中标题压在图上 + 一个按钮。 高度用 svh 不用 vh：手机上 vh 把地址栏算进去，滚动时地址栏一收一放高度就跳。 */ .jqp-hero{ position:relative;overflow:hidden;background:#171a20; /* ⚠️ 高度 = **85% 视口高**，不是满屏。 实测 tesla.cn/model3（2026-08-28，1440 视口）：首屏 605.2px / 视口 712px = 85.00%， 换个窗口尺寸再量还是 85.00% —— 它的首屏是**故意留一截**，让下面的内容露个头， 告诉访客"还能往下滚"。我们原来写的 100svh 铺满一整屏，站长 2026-08-28 指出不对。 用 svh 不用 vh：手机上 vh 把地址栏算进去，滚动时地址栏一收一放高度就跳。 上下加 clamp 只是兜底（超矮窗口别缩没了、超高屏别拉过头），常见笔记本高度下就是纯 85svh。 页头是 absolute 不占位，所以这里不用再减页头高度。 */ height:clamp(420px,85svh,900px); display:flex;align-items:center;justify-content:center; } /* ── 首屏轮播 ──────────────────────────────────────────────────────── tesla 首屏是 2 张图左右切换。切换用透明度交叉淡入，不用位移 —— 位移会让 object-fit:cover 的裁切边在动画里露出来。 ⚠️ 层级：图(0) < 暗角(1) < 文字/箭头/圆点(2,3)。暗角必须压在图上、文字下面。 */ .jqp-slide{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .5s ease} .jqp-slide.is-active{opacity:1} .jqp-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} /* 压一层暗角，保证白字在任何一张图上都读得清 */ .jqp-hero::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(to bottom,rgba(0,0,0,.42) 0%,rgba(0,0,0,.12) 46%,rgba(0,0,0,.42) 100%); } /* 左右箭头。tesla 实测：40×40 / 圆角 4 / 背景 rgba(255,255,255,.75) / 距左右边 48px / 垂直居中（y=303，首屏中线 302.6）。图标 24×24。 */ .jqp-hnav{ position:absolute;top:50%;transform:translateY(-50%);z-index:3; width:40px;height:40px;padding:0;border:0;border-radius:4px; background:rgba(255,255,255,.75);color:#171a20; display:flex;align-items:center;justify-content:center;cursor:pointer; box-shadow:none;appearance:none;-webkit-appearance:none; transition:background-color .2s ease; } .jqp-hnav:hover{background:#fff} /* ⚠️ 图标颜色必须钉死在**所有状态**上，而且要 !important。 Astra 给全站