/* ============================================================ MuyuGPT · 商品详情页（product.html）目标：黑 / 炭黑 / 深灰 / 白为主，少量绿色强调；居中单栏；无右侧视频。作用域：仅，不影响首页 / Claude / FAQ 等其它页面。实现方式：统一 CSS 变量 + 覆盖“为视频让位”的偏移/缩窄规则，避免颜色与尺寸散落在多处。 ============================================================ */ body.pd-page{ /* —— 统一色板（黑白绿） —— */ --color-bg:#ffffff; --color-bg-soft:#f5f5f5; --color-surface:#ffffff; --color-text:#111111; --color-text-secondary:#666666; --color-border:#dddddd; --color-dark:#0d0d0d; --color-accent:#00a86b; --color-accent-hover:#008f5b; /* —— 覆盖站点原有变量：绿色收敛为单一强调绿；蓝紫底统一为黑白灰 —— */ --grass:#00a86b; --grass-lite:#00a86b; --grass-deep:#008f5b; --ink:#111111; --ink-soft:#555555; --muted:#888888; --card:#ffffff; --bg:#ffffff; --bg2:#f5f5f5; --border:#dddddd; --border-strong:#cccccc; /* —— 统一各板块容器宽度（导航 / 正文 / 页脚同宽、同居中） —— */ --maxw:1160px; background:var(--color-bg); color:var(--color-text); } /* 背景：蓝紫科技底图灰度化并大幅降低干扰，保留科技纹理但服从黑白绿 */ body.pd-page::before{ filter:grayscale(100%) brightness(1.2) contrast(.9); opacity:.06; } body.pd-page::after{ background:rgba(255,255,255,.86); } /* 右侧竖版视频在商品页由 site.js 直接不注入（真正删除，非隐藏） */ /* ============================================================ 一、整体居中单栏 ============================================================ */ body.pd-page main#productDetail{ display:block; } body.pd-page .detail-hero{ background:linear-gradient(180deg,#ffffff,#f6f6f6); padding:46px 22px 14px; text-align:left; } /* .wrap / .section / .nav-inner / .footer-in 均已 max-width:var(--maxw);margin:0 auto → 天然居中 */ /* ============================================================ 二、套餐卡片：移除为视频让位的偏移/缩窄，放大并对齐（覆盖 site.css 中 .pd-chatgpt / .pd-chatgpt-plus / .pd-chatgpt-pro 等偏移） ============================================================ */ body.pd-page .detail-tiers{ padding:12px 22px 74px !important; } body.pd-page .detail-tiers .tier-grid{ width:100% !important; max-width:1080px !important; margin:0 auto !important; /* 居中，取消 margin-left/right 偏移 */ transform:none !important; /* 取消 translateX 偏移 */ grid-template-columns:repeat(auto-fit,minmax(258px,1fr)) !important; /* 空间不足自动换行 */ gap:22px !important; justify-content:center !important; justify-items:stretch !important; } /* 卡片：等宽（1fr）、等高（拉伸对齐）、放大内边距 */ body.pd-page .detail-tiers .pcard{ padding:26px 22px !important; display:flex; flex-direction:column; background:var(--color-surface); border:1px solid var(--color-border); border-radius:16px; } body.pd-page .detail-tiers .pcard:hover{ border-color:var(--color-accent); box-shadow:0 20px 42px rgba(0,0,0,.12); } body.pd-page .detail-tiers .p-name{ min-height:56px !important; padding-top:8px !important; font-size:20px; color:var(--color-text); } body.pd-page .detail-tiers .p-desc{ color:var(--color-text-secondary); } body.pd-page .detail-tiers .p-price{ margin:12px 0 4px !important; } body.pd-page .detail-tiers .p-price .amt{ font-size:40px; color:var(--color-text) !important; } body.pd-page .detail-tiers .p-feat{ margin:14px 0 18px !important; gap:9px !important; } body.pd-page .detail-tiers .p-feat li{ font-size:13.5px !important; line-height:1.55; align-items:flex-start; color:var(--color-text-secondary); } body.pd-page .detail-tiers .p-buy{ margin-top:auto; font-size:15px; padding:13px; } /* ============================================================ 三、按钮：立即购买默认浅灰底深灰字细边（减轻黑色堆积），Hover 深灰底白字 ============================================================ */ body.pd-page .btn-fill{ background:#f4f4f4 !important; color:#222222 !important; border:1.5px solid #d5d5d5 !important; box-shadow:0 2px 8px rgba(0,0,0,.06) !important; } body.pd-page .btn-fill:hover,body.pd-page .btn-fill:focus{ background:var(--color-dark) !important; color:#fff !important; border-color:var(--color-dark) !important; transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.18) !important; } /* 绿色仅用于箭头 */ body.pd-page .btn-fill .arrow{ color:var(--color-accent) !important; } body.pd-page .btn-fill:hover .arrow{ color:#fff !important; } body.pd-page .btn{ background:#fff; color:var(--color-text); border:1.5px solid var(--color-border); } body.pd-page .btn:hover{ background:var(--color-dark); color:#fff; border-color:var(--color-dark); box-shadow:0 12px 26px rgba(0,0,0,.18); } /* ============================================================ 四、绿色仅用于强调：价格符号 / 勾选 / 眼标 / 小标签 / 徽标 ============================================================ */ /* 保留的小面积绿：仅 ¥ 符号与勾选图标 */ body.pd-page .p-price .cur{ color:var(--color-accent) !important; } body.pd-page .p-feat li::before{ color:var(--color-accent) !important; } /* 眼标 / 徽标 / 标签改中性黑白灰（去大面积绿） */ body.pd-page .eyebrow{ color:#6f6f6f !important; } body.pd-page .badges span{ color:#222222 !important; background:#f1f1f1 !important; border-color:#dcdcdc !important; } body.pd-page .p-badge{ background:var(--color-dark) !important; color:#fff !important; } body.pd-page .nav-link:hover, body.pd-page .nav-right a:hover, body.pd-page a:hover{ color:var(--color-accent-hover); } /* 移除导航中 ChatGPT 入口的紫色（#5840D9 / #8b7bee）→ 黑 + 灰，绿色悬停 */ body.pd-page .nav-chatgpt b{ color:var(--color-text) !important; } body.pd-page .nav-chatgpt small{ color:var(--color-text-secondary) !important; } body.pd-page .nav-chatgpt:hover b, body.pd-page .nav-chatgpt:hover small{ color:var(--color-accent-hover) !important; } /* ============================================================ 五、各板块统一：介绍区 / 服务保障 / 支持区 / 页脚 ============================================================ */ body.pd-page .detail-hero h1{ color:var(--color-text); } body.pd-page .detail-hero .sub{ color:var(--color-text-secondary); } body.pd-page .detail-promo .promo-intro{ color:var(--color-text-secondary); } body.pd-page .band{ background:var(--color-bg-soft) !important; border-block-color:var(--color-border) !important; } body.pd-page .sec-head h2{ color:var(--color-text); } body.pd-page .sec-head p{ color:var(--color-text-secondary); } body.pd-page .footer{ background:var(--color-bg-soft); border-top:1px solid var(--color-border); } /* ============================================================ 六、响应式：桌面自适应换行 → 平板两/三列 → 手机单列 ============================================================ */ @media (max-width:1024px){ body.pd-page .detail-tiers .tier-grid{ grid-template-columns:repeat(auto-fit,minmax(232px,1fr)) !important; gap:18px !important; } } @media (max-width:768px){ body.pd-page .detail-hero{ text-align:center; } body.pd-page .detail-hero .badges, body.pd-page .detail-hero .detail-cta{ justify-content:center; } body.pd-page .detail-tiers .tier-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:16px !important; } } @media (max-width:520px){ body.pd-page .detail-tiers .tier-grid{ grid-template-columns:1fr !important; } body.pd-page .detail-tiers .p-price .amt{ font-size:34px; } } /* 防溢出保险：小屏下任何板块都不产生横向滚动或裁切 */ body.pd-page{ overflow-x:hidden; } body.pd-page .detail-tiers .pcard, body.pd-page .detail-tiers .p-price, body.pd-page .detail-tiers .p-name, body.pd-page .detail-tiers .p-feat li{ min-width:0; } body.pd-page .eyebrow{ white-space:normal; overflow-wrap:anywhere; } body.pd-page .detail-hero h1{ overflow-wrap:anywhere; } body.pd-page .badges{ max-width:100%; } /* ============================================================ Gemini 品牌图重平衡：透明 Logo、去黑底与大黑框、缩小图区（小图与大图同源 images/gemini-logo.png，均 object-fit:contain） ============================================================ */ /* B. 标题旁小 Logo：去蓝色方块，横版透明、约 30px 高、与标题垂直居中 */ .pd-gemini .detail-hero .p-icon{ width:auto !important; height:auto !important; min-width:0 !important; background:none !important; border:none !important; padding:0 !important; border-radius:0 !important; display:inline-flex; align-items:center; } .pd-gemini .detail-hero .p-icon .hero-icon-img,.pd-gemini .detail-hero .p-icon img{ height:30px !important; max-height:30px !important; width:auto !important; max-width:160px !important; object-fit:contain !important; display:block; } /* ============================================================ Grok Hero 图标：去除容器边框 / 背景 / 圆角 / 阴影 / 内边距，裁切后的方形 logo 直接铺满约 56×56 容器，无双层框，与标题垂直居中。 ============================================================ */ .pd-grok .detail-hero .p-icon{ background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; padding:0 !important; } .pd-grok .detail-hero .p-icon .hero-icon-img,.pd-grok .detail-hero .p-icon img{ width:100% !important; height:100% !important; object-fit:contain !important; display:block; } /* D. 套餐卡片大图：缩小图区、透明底，让名称 / 说明 / 价格成为视觉重点 */ .pd-gemini .detail-tiers .pcard-hasimg .pcard-media{ flex:0 0 auto !important; width:190px !important; max-width:190px !important; background:none !important; border:none !important; padding:6px !important; } .pd-gemini .detail-tiers .pcard-hasimg .pcard-media img{ width:auto !important; height:auto !important; max-width:100% !important; max-height:64px !important; object-fit:contain !important; }