/* ============================================================ 云卡商城 · 样式模块 07/11 —— 07-product.css ------------------------------------------------------------ 职责：商品详情、选项卡、富文本、步骤条/时间线、卡密与提示块 涵盖：§21 §22 §23 §24 §25 ⚠️ 加载顺序即层叠顺序，请勿调整 的先后。 本文件由 style.css 按分节边界切出，规则未做任何重排。 ============================================================ */ /* ============================================================ 21 · 商品详情 ============================================================ */ .goods-detail { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--sp-8); align-items: start; } .goods-hero { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); } .goods-hero .ph { font-size: var(--ico-2xl); line-height: 1; } .goods-hero img, .goods-hero img.cover-art { object-fit:contain;object-position:center; } .goods-hero > .brand-tile { width:70%;height:70%; } .goods-price-box { margin: var(--sp-4) 0; padding: var(--sp-4) var(--sp-5); border: 1px solid var(--gold-line); border-radius: var(--r-md); background: var(--gold-soft); } .goods-price-box .p { color: var(--gold); font-size: var(--fs-3xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; letter-spacing: -.5px; line-height: 1.2; } .goods-price-box .p .cur { font-size: var(--fs-lg); font-weight: var(--fw-semi); } .spec-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .spec { min-width: 92px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); text-align: center; cursor: pointer; transition: border-color var(--tr), background var(--tr); } .spec:hover { background: var(--surface-2); border-color: var(--brand-line); } .spec.on { background: var(--brand-soft); border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); } .spec.dis { opacity: .38; cursor: not-allowed; } .spec.dis:hover { background: var(--surface); border-color: var(--line-2); } .spec .n { color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-semi); } .spec .p { margin-top: 2px; color: var(--gold); font-size: var(--fs-xs); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; } .spec .s { margin-top: 1px; color: var(--text-3); font-size: var(--fs-2xs); } .qty { display: inline-flex; align-items: center; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--inset); } .qty button { width: 38px; height: var(--ctl-h); border: 0; background: var(--surface-2); color: var(--text-2); font-size: var(--fs-lg); line-height: 1; cursor: pointer; transition: background var(--tr), color var(--tr); } .qty button:hover { background: var(--surface-3); color: var(--text); } .qty input { width: 56px; height: var(--ctl-h); border: 0; border-right: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--inset); color: var(--text); font-variant-numeric: tabular-nums; text-align: center; outline: none; } .qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; } .qty input[type=number] { -moz-appearance: textfield; } .meta-list { display: grid; gap: var(--sp-2); } .meta-list .row { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-sm); } .meta-list .row .k { flex: none; width: 78px; color: var(--text-3); } .meta-list .row .v { flex: 1; min-width: 0; color: var(--text-2); word-break: break-word; } /* ============================================================ 22 · 选项卡 ============================================================ */ .tabs { display: flex; gap: var(--sp-1); overflow-x: auto; margin-bottom: var(--sp-4); border-bottom: 1px solid var(--line); } .tabs .tab { padding: var(--sp-3) var(--sp-4); margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--text-2); font-size: var(--fs-base); font-weight: var(--fw-semi); white-space: nowrap; cursor: pointer; transition: color var(--tr), border-color var(--tr); } .tabs .tab:hover { color: var(--text); } .tabs .tab.on { color: var(--text); border-bottom-color: var(--brand); } /* ============================================================ 23 · 富文本 ============================================================ */ .rich { color: var(--text-2); font-size: var(--fs-base); line-height: var(--lh-relaxed); } .rich h1, .rich h2, .rich h3 { margin: var(--sp-5) 0 var(--sp-2); color: var(--text); } .rich h2 { font-size: var(--fs-lg); } .rich h3 { font-size: var(--fs-md); } .rich p { margin: 0 0 var(--sp-3); } .rich ul, .rich ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); list-style: revert; } .rich li { margin-bottom: var(--sp-1h); } .rich strong { color: var(--text); font-weight: var(--fw-semi); } .rich img { margin: var(--sp-3) 0; border-radius: var(--r-md); } .rich table { width: 100%; margin: var(--sp-3) 0; font-size: var(--fs-sm); } .rich th, .rich td { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); text-align: left; } .rich th { background: var(--surface-2); color: var(--text); } .rich code { padding: 1px var(--sp-1h); border-radius: var(--r-xs); background: var(--surface-2); color: var(--brand-fg); font-family: var(--font-mono); font-size: var(--fs-xs); } .rich blockquote { margin: var(--sp-3) 0; padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--brand); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--surface-2); } /* ============================================================ 24 · 步骤条 / 时间线 ============================================================ */ .steps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); } .steps .st { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-3); font-size: var(--fs-sm); } .steps .st .n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line-2); border-radius: 50%; background: var(--surface-2); color: var(--text-3); font-size: var(--fs-xs); font-weight: var(--fw-bold); } .steps .st.on { color: var(--text-2); } .steps .st.on .n { background: var(--brand); border-color: var(--brand); color: var(--text-on); } .steps .sep { color: var(--line-strong); } .timeline { position: relative; padding-left: var(--sp-6); } .timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--line-2); } .timeline .tl { position: relative; padding-bottom: var(--sp-4); } .timeline .tl:last-child { padding-bottom: 0; } .timeline .tl::before { content: ""; position: absolute; left: -19px; top: 6px; width: 9px; height: 9px; border: 2px solid var(--line-2); border-radius: 50%; background: var(--surface-3); } .timeline .tl.on::before { background: var(--brand); border-color: var(--brand); } .timeline .tl .t { color: var(--text); font-size: var(--fs-base); font-weight: var(--fw-semi); } .timeline .tl .d { margin-top: 2px; color: var(--text-3); font-size: var(--fs-xs); line-height: var(--lh-normal); } .timeline .tl .d b { color: var(--text-2); } /* ============================================================ 25 · 卡密 / 提示块 ============================================================ */ .card-key { margin-bottom: var(--sp-2); padding: var(--sp-3) var(--sp-4); border: 1px dashed var(--gold-line); border-radius: var(--r-sm); background: var(--gold-soft); color: var(--gold); font-family: var(--font-mono); font-size: var(--fs-sm); word-break: break-all; } /* 复制成功后闪一下（见 pages/orders.js）。 只闪一次、不改布局：用颜色变化而不是位移/尺寸， 避免把用户的视线从"卡密内容"上引开。 */ .card-key.is-flash { animation: keyFlash 560ms var(--e-out); } @keyframes keyFlash { 0% { background: var(--gold-soft); border-color: var(--gold-line); } 25% { background: var(--ok-bg); border-color: var(--ok); } 100% { background: var(--gold-soft); border-color: var(--gold-line); } } .demo-tip { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--info-line); border-radius: var(--r-md); background: var(--info-bg); color: var(--info-fg); font-size: var(--fs-sm); line-height: var(--lh-relaxed); } .demo-tip b, .demo-tip strong { color: var(--tip-strong); } .demo-tip.danger { border-color: var(--danger-line); background: var(--danger-bg); color: var(--danger-fg); } .demo-tip.danger b, .demo-tip.danger strong { color: var(--tip-danger-strong); } .code-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px dashed var(--ok-line); border-radius: var(--r-md); background: var(--ok-bg); } .code-box .c { color: var(--ok-fg); font-size: var(--fs-xl); font-weight: var(--fw-black); font-variant-numeric: tabular-nums; letter-spacing: 4px; } .code-box .lbl { color: var(--text-3); font-size: var(--fs-xs); } .code-box .dim { font-size: var(--fs-xs); } .code-box .note { max-width: 160px; color: var(--text-3); font-size: var(--fs-2xs); text-align: right; } /* ============================================================ 订单进度卡片（.op-*） ------------------------------------------------------------ 手机版按设计稿实现；桌面版用**容器查询**而不是媒体查询 —— 同一张卡既会内嵌在订单页（主栏约 900px），也会放进弹窗（760px）， 用媒体查询判断视口宽度会得出错误结论（弹窗里视口很大但卡片只有 760）。 容器查询按卡片自身宽度决定，哪种场景都对；不支持的老浏览器 会忽略该规则、退回单栏，是安全的降级。 ============================================================ */ .op-card { container-type: inline-size; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; } /* ---- 顶部横幅 ---- */ .op-hero { position: relative; padding: var(--sp-5) var(--sp-5) var(--sp-6); background: linear-gradient(135deg, #f0f7ff 0%, #e3efff 52%, #d8e9ff 100%); } .op-card.is-action .op-hero { background: linear-gradient(135deg, #fff9ed 0%, #fef3d8 55%, #fdeac2 100%); } .op-card.is-dead .op-hero { background: linear-gradient(135deg, #f7f8fa 0%, #eef1f6 100%); } .op-hero-txt { position: relative; z-index: 1; padding-right: 96px; } .op-hero-t { color: #0b2a63; font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: -.4px; line-height: 1.25; } .op-card.is-action .op-hero-t { color: #713f12; } .op-card.is-dead .op-hero-t { color: var(--text-2); } .op-hero-s { margin-top: var(--sp-2); color: #3f5f9c; font-size: var(--fs-sm); line-height: var(--lh-normal); } .op-card.is-action .op-hero-s { color: #92610f; } .op-card.is-dead .op-hero-s { color: var(--text-3); } .op-rocket { position: absolute; right: var(--sp-3); bottom: 0; width: 104px; height: 92px; pointer-events: none; } .op-body { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); } /* ---- 步骤条：一条底部轨道 + 一条填充，避免 5 个节点各画各线导致错位 ---- */ .op-steps { position: relative; display: flex; padding-bottom: var(--sp-1); } .op-track { position: absolute; top: 11px; height: 2px; border-radius: 1px; background: var(--line-2); } .op-fill { display: block; height: 100%; border-radius: 1px; background: var(--brand); transition: width var(--tr); } .op-step { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); } .op-dot { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-full); border: 2px solid var(--surface); background: var(--surface-3); color: var(--text-3); font-size: var(--fs-2xs); font-weight: var(--fw-semi); } .op-dot svg { width: 12px; height: 12px; display: block; } .op-dot.done { background: var(--ok); color: var(--text-on); } .op-dot.cur { background: var(--brand); color: var(--text-on); } .op-lb { color: var(--text-3); font-size: var(--fs-2xs); line-height: 1.3; text-align: center; } .op-step.done .op-lb { color: var(--text-2); } .op-step.cur .op-lb { color: var(--text); font-weight: var(--fw-semi); } /* ---- 状态条（排队 / 充值中 / 已排到你） ---- */ .op-queue { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--gold-line); border-radius: var(--r-lg); background: var(--gold-bg); } .op-queue.is-processing { border-color: var(--brand-line); background: var(--brand-bg); } .op-queue.is-awaiting { border-color: var(--warn-line); background: var(--warn-bg); } .op-q-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-md); background: rgba(217, 119, 6, .14); color: var(--gold); } .op-queue.is-processing .op-q-ico { background: rgba(37, 99, 235, .12); color: var(--brand); } .op-queue.is-awaiting .op-q-ico { background: rgba(217, 119, 6, .16); color: var(--warn); } .op-q-ico svg { width: 19px; height: 19px; } .op-q-main { flex: 1; min-width: 0; } .op-q-t { color: #78350f; font-size: var(--fs-sm); font-weight: var(--fw-semi); } .op-queue.is-processing .op-q-t { color: #0b2a63; } .op-q-s { margin-top: 2px; color: var(--gold-fg); font-size: var(--fs-xs); line-height: var(--lh-normal); } .op-queue.is-processing .op-q-s { color: #3f5f9c; } .op-q-link { flex: none; padding: 5px var(--sp-3); border: 1px solid var(--gold-line); border-radius: var(--r-full); background: var(--surface); color: var(--gold-fg); font-size: var(--fs-xs); font-weight: var(--fw-medium); white-space: nowrap; cursor: pointer; transition: background var(--tr), border-color var(--tr); } .op-q-link:hover { background: var(--surface-2); border-color: var(--gold); } /* ---- 商品 ---- */ .op-goods-list { display: flex; flex-direction: column; gap: var(--sp-2); } .op-goods { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-lg); background: var(--surface-2); } .op-thumb { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-md); overflow: hidden; background: var(--surface-3); } .op-thumb .brand-tile { width: 48px; height: 48px; border-radius: var(--r-md); } .op-thumb-ph { font-size: var(--fs-xl); } .op-goods-main { flex: 1; min-width: 0; } .op-goods-t { color: var(--text); font-size: var(--fs-base); font-weight: var(--fw-semi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .op-goods-s { margin-top: 3px; color: var(--text-3); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .op-goods-p { flex: none; color: var(--gold-fg); font-size: var(--fs-lg); font-weight: var(--fw-bold); } /* ---- 待办块（客服在等你提供东西） ---- */ .op-task { padding: var(--sp-4); border: 1px solid #ddd9f8; border-radius: var(--r-lg); background: linear-gradient(180deg, #f4f3ff 0%, #faf9ff 100%); } .op-task-head { display: flex; gap: var(--sp-3); align-items: flex-start; } .op-task-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-md); background: #e4e1ff; color: #4f46e5; } .op-task-ico svg { width: 19px; height: 19px; } .op-task-t { color: var(--text); font-size: var(--fs-base); font-weight: var(--fw-semi); } .op-task-s { margin-top: 3px; color: var(--text-3); font-size: var(--fs-xs); line-height: var(--lh-normal); } .op-task-input { margin-top: var(--sp-4); } .op-task-btn { margin-top: var(--sp-3); } .op-task-note { margin-top: var(--sp-3); color: var(--text-3); font-size: var(--fs-xs); line-height: var(--lh-normal); } .op-task-help { margin-top: var(--sp-2); color: var(--text-3); font-size: var(--fs-xs); } .op-linkbtn { margin-left: 4px; padding: 0; border: 0; background: none; color: var(--brand); font-size: var(--fs-xs); text-decoration: underline; cursor: pointer; } /* ---- 底部 ---- */ .op-foot { display: flex; align-items: center; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--line); } .op-foot-no { margin-left: auto; color: var(--text-3); font-size: var(--fs-xs); } /* ---- 桌面：卡片自身够宽时改两栏 ---- */ @container (min-width: 620px) { .op-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4) var(--sp-5); align-items: start; } .op-steps, .op-queue, .op-foot { grid-column: 1 / -1; } .op-body.no-task .op-goods-list { grid-column: 1 / -1; } .op-hero { padding: var(--sp-5) var(--sp-6); } .op-hero-txt { padding-right: 120px; } .op-rocket { width: 128px; height: 113px; right: var(--sp-6); } } /* 商品行的「字段名 + 值」：拆成两个节点是为了 i18n（见 components.js 注释） */ .op-goods-k { color: var(--text-3); } .op-goods-v { color: var(--text-2); margin-left: 4px; } .op-goods-sep { margin: 0 6px; color: var(--line-strong); } /* 待办块的错误提示：就地显示在输入框下面（只弹 toast 的话， 用户在长页面里可能根本没看到输入框在哪） */ .op-task-err { margin-top: var(--sp-2); color: var(--danger-fg); font-size: var(--fs-xs); line-height: var(--lh-normal); } .op-task-err:empty { display: none; } .op-task-input.has-err { border-color: var(--danger); } .op-task-input.has-err:focus { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); } /* 客服单向通知（如「本单无需验证码」）。 用绿色表示"好消息且不用你动手"，用琥珀色会让人以为又出问题了 */ .op-notice { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--ok-line); border-radius: var(--r-lg); background: var(--ok-bg); } .op-notice-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-md); background: rgba(22, 163, 74, .14); color: var(--ok-fg); } .op-notice-ico svg { width: 19px; height: 19px; } .op-notice-main { flex: 1; min-width: 0; } .op-notice-t { color: #14532d; font-size: var(--fs-sm); font-weight: var(--fw-semi); } .op-notice-s { margin-top: 3px; color: var(--ok-fg); font-size: var(--fs-xs); line-height: var(--lh-normal); } @container (min-width: 620px) { .op-notice { grid-column: 1 / -1; } } /* 待办块底部的两个出口：请客服重发 / 直接联系客服 */ .op-acts { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); } .op-act { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: var(--sp-2); height: 40px; padding: 0 var(--sp-3); border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); color: var(--text-2); font-size: var(--fs-sm); cursor: pointer; transition: background var(--tr), border-color var(--tr), color var(--tr); } .op-act:hover:not(:disabled) { background: var(--surface-2); border-color: var(--line-strong); color: var(--text); } .op-act-ico { flex: none; display: grid; place-items: center; width: 18px; height: 18px; color: var(--text-3); } .op-act-ico svg { width: 17px; height: 17px; display: block; } .op-act:hover:not(:disabled) .op-act-ico { color: var(--brand); } .op-act-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 冷却中：置灰但保持可读，让用户知道"多久之后能用"而不是一个死按钮 */ .op-act.is-wait, .op-act:disabled { background: var(--surface-2); border-color: var(--line); color: var(--text-3); cursor: default; } .op-act.is-wait .op-act-ico { color: var(--text-3); } /* 安全提示：克制的一段说明，不用警示色 —— 它是安抚而不是报错 */ .op-safe { margin-top: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface-2); color: var(--text-3); font-size: var(--fs-xs); line-height: var(--lh-relaxed); } /* ============================================================ 专属商品页（.sp-*，pages/product.js 渲染） ------------------------------------------------------------ 专属商品（specialShop）的规格区：大类选项卡 + 套餐卡片网格。 选项卡用 radio + 纯 CSS 兄弟选择器切换（CSP 禁内联脚本， 连一行 JS 都不引入）。radio 是 .sp-shop 的直接子元素， 面板/页签靠 nth-of-type 对号 —— 静态样式支持 8 个大类， 足够覆盖「金币 / 门票 / 道具」再留扩展余量。 ⚠️ 与参考实现的差异化是刻意的：参考站是「图片主导的大瓷片」， 这里是「数字主导的金色小卡」—— 信息密度更高，也不容易撞脸。 手机端靠 auto-fill 网格自适应，不需要额外断点。 ============================================================ */ .sp-shop { position: relative; } .sp-shop > input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } /* ---- 大类选项卡 ---- */ .sp-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); } .sp-tab { display: inline-flex; align-items: center; gap: var(--sp-1h); padding: var(--sp-2) var(--sp-4); border: 1px solid var(--line-2); border-radius: var(--r-full); background: var(--surface); color: var(--text-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer; user-select: none; transition: background var(--tr), color var(--tr), border-color var(--tr); } .sp-tab:hover { background: var(--surface-2); color: var(--text); } .sp-tab .ico { font-size: var(--fs-base); line-height: 1; } .sp-tab .n { min-width: 18px; padding: 0 5px; border-radius: var(--r-full); background: var(--surface-3); color: var(--text-3); font-size: var(--fs-2xs); font-weight: var(--fw-bold); line-height: 18px; text-align: center; } /* 选中页签：金色（专属商品的标识色，与「立即购买」主按钮同系） */ .sp-shop > input:nth-of-type(1):checked ~ .sp-tabs > .sp-tab:nth-of-type(1), .sp-shop > input:nth-of-type(2):checked ~ .sp-tabs > .sp-tab:nth-of-type(2), .sp-shop > input:nth-of-type(3):checked ~ .sp-tabs > .sp-tab:nth-of-type(3), .sp-shop > input:nth-of-type(4):checked ~ .sp-tabs > .sp-tab:nth-of-type(4), .sp-shop > input:nth-of-type(5):checked ~ .sp-tabs > .sp-tab:nth-of-type(5), .sp-shop > input:nth-of-type(6):checked ~ .sp-tabs > .sp-tab:nth-of-type(6), .sp-shop > input:nth-of-type(7):checked ~ .sp-tabs > .sp-tab:nth-of-type(7), .sp-shop > input:nth-of-type(8):checked ~ .sp-tabs > .sp-tab:nth-of-type(8) { background: var(--gold-bg); border-color: var(--gold-line); color: var(--gold-fg); font-weight: var(--fw-semi); } .sp-shop > input:nth-of-type(1):checked ~ .sp-tabs > .sp-tab:nth-of-type(1) .n, .sp-shop > input:nth-of-type(2):checked ~ .sp-tabs > .sp-tab:nth-of-type(2) .n, .sp-shop > input:nth-of-type(3):checked ~ .sp-tabs > .sp-tab:nth-of-type(3) .n, .sp-shop > input:nth-of-type(4):checked ~ .sp-tabs > .sp-tab:nth-of-type(4) .n, .sp-shop > input:nth-of-type(5):checked ~ .sp-tabs > .sp-tab:nth-of-type(5) .n, .sp-shop > input:nth-of-type(6):checked ~ .sp-tabs > .sp-tab:nth-of-type(6) .n, .sp-shop > input:nth-of-type(7):checked ~ .sp-tabs > .sp-tab:nth-of-type(7) .n, .sp-shop > input:nth-of-type(8):checked ~ .sp-tabs > .sp-tab:nth-of-type(8) .n { background: var(--gold); color: var(--gold-on); } /* ---- 面板显隐（与页签同款 8 槽位对号） ---- */ .sp-panel { display: none; } .sp-shop > input:nth-of-type(1):checked ~ .sp-panels > .sp-panel:nth-child(1), .sp-shop > input:nth-of-type(2):checked ~ .sp-panels > .sp-panel:nth-child(2), .sp-shop > input:nth-of-type(3):checked ~ .sp-panels > .sp-panel:nth-child(3), .sp-shop > input:nth-of-type(4):checked ~ .sp-panels > .sp-panel:nth-child(4), .sp-shop > input:nth-of-type(5):checked ~ .sp-panels > .sp-panel:nth-child(5), .sp-shop > input:nth-of-type(6):checked ~ .sp-panels > .sp-panel:nth-child(6), .sp-shop > input:nth-of-type(7):checked ~ .sp-panels > .sp-panel:nth-child(7), .sp-shop > input:nth-of-type(8):checked ~ .sp-panels > .sp-panel:nth-child(8) { display: block; } .sp-hint { margin-bottom: var(--sp-2); } /* ---- 套餐卡片网格：货架式（图主导 · 严格等高） ---- ★★ 卡片等高的三条硬规矩（2026-10-02 重设计时全部踩过，改前务必读完）： 1. 不要用 min-height 撑高 —— 名称换行时会把它撑破， 「3 x 孵化器」和「宝可梦盒」就不一样高了。 正解：图区给**固定像素高**，信息区用 flex + 价格 margin-top:auto。 2. 图区不要用 aspect-ratio —— 它在 grid 行轨道被拉伸时会失效， 图会跟着行高一起爆掉（实测孵化器图从 199×200 变成 364×691）。 正解：height 写死。 3. 图区必须 overflow:hidden —— 图按 width:100% 铺满后可能比框高， 没有它就会盖住下面的名称与价格（改版时真的压住了「100 金币」）。 —— 出任何卡片网格的改版，先用 .audit/_measure-cards.js 量一遍等高性； 1~2px 的差肉眼看不出来，脚本一眼就能看出。 */ :root { --sp-shot-h: 118px; } .sp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: var(--sp-3); } .sp-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; text-align: left; /* 覆盖 .spec 的居中 —— 卡片内部自己排版 */ /* 卡片本身的圆角与描边由 .spec 提供；这里只补「顶部金色记号」—— 专属商品的识别色，与「立即购买」主按钮同系。 */ border-top: 2px solid var(--gold-line); } .sp-card:hover { background: var(--surface); border-color: var(--gold-line); border-top-color: var(--gold); } .sp-card.on, .sp-card.on:hover { background: var(--surface); border-color: var(--gold); border-top-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); } /* ★ 缺货态必须覆盖 .spec.dis 的 opacity:.38 —— 对整个卡片统一降透明， 「是哪一档缺货」就几乎看不见了。这里改成「压暗图 + 文字降级」， 保证名称与价格始终可读。 */ .sp-card.dis { opacity: 1; cursor: not-allowed; } .sp-card.dis:hover { background: var(--surface); border-color: var(--line-2); border-top-color: var(--gold-line); } /* 图区：固定高 + 暖底 + 底部分隔线。三段结构的第 1 段。 */ .sp-card .sp-shot { flex: none; /* ★★ 与 .bl-shot 同一个坑：grid 隐式行高是 auto → 高度不确定 → 子项 `max-height:100%` 解析失败 → 竖长图按固有比例撑到框外。 实测（--sp-shot-h:118px、框 186 宽）：图算出 178×178， 比框高 60px。overflow:hidden 剪掉了，所以**肉眼看不出**， 但 object-fit:contain 没生效 —— 实际是"裁掉"而不是"装下"， 图被切边。这正是卖家说的「图太大了」的真相之一。 正解：把行高钉死，100% 才有确定的参照。 */ display: grid; grid-template-columns: 100%; grid-template-rows: 100%; place-items: center; height: var(--sp-shot-h); padding: var(--sp-1h) var(--sp-1) var(--sp-2); overflow: hidden; background: linear-gradient(160deg, var(--gold-tile-a), var(--gold-tile-b)); border-bottom: 1px solid var(--line); /* 白底方图直接贴上来会显出一个白块 —— 用 multiply 让白底融进暖色底。 ★ 暗色下必须换成 lighten，见下方规则。 */ mix-blend-mode: multiply; } .sp-card.on .sp-shot { background: linear-gradient(160deg, var(--gold-tile-a-on), var(--gold-tile-b-on)); } .sp-card .sp-fig { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; pointer-events: none; } /* 无图时的占位：保持图区高度，卡片不至于塌成一条 */ .sp-card:not(.has-fig) .sp-shot::after { content: ""; width: 46px; height: 46px; border-radius: var(--r-md); border: 1px dashed var(--line-2); } /* 信息区：名称（锁两行）+ 价格（贴底）。三段结构的第 2 段。 */ .sp-card .sp-info { flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-3) var(--sp-3); } .sp-card .sp-name { /* ★ 固定两行高：这是「等高」的关键。用 height 而不是 min-height， 两行和一行占同样的位子，价格才会落在同一条基线上。 */ height: calc(var(--fs-base) * 1.38 * 2); overflow: hidden; color: var(--text); font-size: var(--fs-base); font-weight: var(--fw-semi); line-height: 1.38; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .sp-card .sp-name em { color: var(--gold-fg); font-style: normal; font-weight: var(--fw-black); } .sp-card .sp-price { margin-top: auto; display: flex; align-items: baseline; gap: 2px; color: var(--gold-fg); font-size: var(--fs-xl); font-weight: var(--fw-black); font-variant-numeric: tabular-nums; line-height: 1.1; } .sp-card .sp-price i { font-size: var(--fs-xs); font-style: normal; font-weight: var(--fw-semi); } .sp-card .sp-out { position: absolute; z-index: 1; top: 6px; right: 6px; padding: 0 5px; border-radius: var(--r-xs); background: var(--neutral-bg); color: var(--neutral-fg); font-size: var(--fs-2xs); } /* 缺货：图压暗，但价格与名称仍可读（用户要知道缺的是哪一档） */ .sp-card.dis .sp-shot { filter: grayscale(.55); opacity: .6; } .sp-card.dis .sp-name, .sp-card.dis .sp-price { color: var(--text-3); } /* ★ 暗色下必须关掉 multiply。 它的语义是「和下层底色相乘」—— 浅底上是「白底消失」，到了深底就变成 「整张图乘成黑色」。这正是暗色模式里图变黑的原因（浅色下完全看不出来， 只在暗色才暴露）。暗色改用 lighten：白底被提亮掉，图本体保持原色。 */ [data-theme="dark"] .sp-card .sp-shot { mix-blend-mode: lighten; background: var(--surface-2); } [data-theme="dark"] .sp-card .sp-fig { mix-blend-mode: lighten; } /* ============================================================ B 版「价目表」：横向紧凑行（2026-10-02 新增） ------------------------------------------------------------ 用在套餐数 ≥ 8 的大类（当前：道具 19 档）。判据与切换逻辑都在 product.js::specAreaForBucket，CSS 只负责长相。 ★ 为什么图小到 40px 还要留图： 图是「哪个是孵化器、哪个是入场券」最快的一眼识别物。 纯文字价目表能读，但扫读时要逐行读字；有缩略图可以先看形状。 ★ 与 A 版一样必须覆盖 .spec 的 text-align:center / .spec.dis 的 .38： 横行的对齐是「左图 + 左文 + 右价」，居中会把价格甩到中间来。 ============================================================ */ .bl-list { display: flex; flex-direction: column; gap: var(--sp-1h); } .bl-row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-3); min-width: 0; padding: var(--sp-2) var(--sp-3); text-align: left; /* 覆盖 .spec 的居中 */ border-color: var(--line); } .bl-row:hover { background: var(--surface-2); border-color: var(--gold-line); } .bl-row.on, .bl-row.on:hover { background: var(--surface); border-color: var(--gold); box-shadow: inset 3px 0 0 var(--gold); /* 左侧金条：比整框描金更省视觉噪音 */ } /* 缺货：覆盖 .spec.dis 的 opacity:.38（整行降透明会让缺货档的名字都读不清） */ .bl-row.dis { opacity: 1; cursor: not-allowed; } .bl-row.dis:hover { background: var(--surface); border-color: var(--line); } .bl-shot { /* ★★ 不能只写 display:grid + place-items:center。 坑：grid 的隐式行高是 auto —— 高度**不确定**，于是子项上的 `max-height:100%` 解析失败（百分比对不确定高度 = none）， 去掉了唯一能约束竖长图的边。 实测：孵化器图自然比 126×186 / 300×591，框 40×40 时 算出 offset 40×59 / 40×79 —— 图比框高 2 倍。 overflow:hidden 只把它**剪掉**（看起来"没坏事"）， 但 object-fit:contain 根本没生效，实际是"裁掉"不是"装下"， 而且改大字号/加边框时就会露出来。 正解：把行高钉死（grid-template-rows: 100%）， 让 100% 有确定的参照 —— 这才真装得下。 */ display: grid; grid-template-columns: 100%; grid-template-rows: 100%; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: var(--r-sm); background: linear-gradient(160deg, var(--gold-tile-a), var(--gold-tile-b)); mix-blend-mode: multiply; } .bl-fig { /* ★★ 三条一起写才管用，少一条就「图比框大」： · max-width/max-height:100% —— 约束**固有比例**下的最大边； · width/height:100% —— 撑满框（否则小图缩在角落里）； · object-fit:contain —— 不裁不拉。 只写 width/height 时，竖长图（孵化器那种）在 grid 的 place-items:center 下会拿到 max-content 网格区，算出 59×40 / 79×40 的盒子 —— 框是 40×40、图是 79 高。虽然 overflow:hidden 把它剪掉了， 但 getBoundingClientRect 量出来仍是 79（裁剪不影响几何）， 于是「有没有剪干净」就只能靠肉眼看。加了 max-* 才是真的装得下。 */ max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; pointer-events: none; } /* 无图占位：保持 40px 宽，名称列不至于左移（有图/无图必须同一起点） */ .bl-row:not(.has-fig) .bl-shot::after { content: ""; width: 16px; height: 16px; border-radius: var(--r-xs); border: 1px dashed var(--line-2); } .bl-row.on .bl-shot { background: linear-gradient(160deg, var(--gold-tile-a-on), var(--gold-tile-b-on)); } .bl-main { min-width: 0; } .bl-nm { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-semi); line-height: 1.35; } .bl-nm .qty { flex: none; display: inline-block; padding: 0 6px; border: 0; border-radius: var(--r-xs); background: var(--gold-soft, var(--brand-soft)); color: var(--gold-fg); font-size: var(--fs-2xs); font-weight: var(--fw-black); font-variant-numeric: tabular-nums; } /* ★ .qty 在 07-product.css 上方已有全局样式（步进器用），这里必须 用 .bl-nm .qty 两段选择器压过去，否则会继承到步进器的边框与内边距， 在行里长出一圈灰框。 */ .bl-out { flex: none; padding: 0 5px; border-radius: var(--r-xs); background: var(--neutral-bg); color: var(--neutral-fg); font-size: var(--fs-2xs); font-weight: var(--fw-normal); } .bl-price { display: flex; align-items: baseline; gap: 2px; color: var(--gold-fg); font-size: var(--fs-lg); font-weight: var(--fw-black); font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; } .bl-price i { font-size: var(--fs-2xs); font-style: normal; font-weight: var(--fw-semi); } .bl-pick { display: grid; place-items: center; min-width: 56px; padding: 0 var(--sp-2); height: 28px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); color: var(--text-2); font-size: var(--fs-2xs); font-weight: var(--fw-semi); white-space: nowrap; } .bl-row:hover .bl-pick { border-color: var(--gold-line); color: var(--text); } .bl-row.on .bl-pick { border-color: var(--gold); background: var(--gold); color: var(--gold-on, #fff); } .bl-row.dis .bl-shot { filter: grayscale(.55); opacity: .6; } .bl-row.dis .bl-nm, .bl-row.dis .bl-price { color: var(--text-3); } .bl-row.dis .bl-pick { border-color: var(--line); color: var(--text-3); } /* ------------------------------------------------------------ 多选态（2026-10-02）：道具 / 门票可一次勾选多款 ------------------------------------------------------------ 为什么不用「多选就换一套更大的样式」： 同一页里金币（单选）和道具（多选）是**同一个组件**， 两种观感会让用户以为进了不同的页面。这里只加**最小的语义增量**—— 一个方形勾选框（区别于单选的圆形语义），其余全部复用 .on 的金色态。 ★ 用纯 CSS 画勾选框，不加 DOM 节点： 加节点的代价是 bindProduct 要改、i18n 要多两个词条、 探针的锚点也要跟着变。伪元素是零成本的选择 —— 但代价是它**测不到**（没有 DOM），所以配套的探针只能校验 `data-multi` 属性与 .on 数量，勾选框本身靠截图核对。 这个取舍要写在这里，免得后来人以为"忘了测"。 */ .bl-list[data-multi] .bl-row::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; border: 1.5px solid var(--line-2); border-radius: var(--r-xs); background: var(--surface); transition: none; } /* 勾选后的框：金底 + 白勾（用两条边框拼出一个对勾，不引入字体图标） */ .bl-list[data-multi] .bl-row.on::before { border-color: var(--gold); background: var(--gold); } .bl-list[data-multi] .bl-row.on::after { content: ""; position: absolute; left: 11.5px; top: 50%; width: 6px; height: 3px; border-left: 1.5px solid var(--gold-on, #fff); border-bottom: 1.5px solid var(--gold-on, #fff); transform: translateY(-70%) rotate(-45deg); pointer-events: none; } /* 多选时整行左移出勾选框的位置（否则勾选框会压在图上） */ .bl-list[data-multi] .bl-row { padding-left: calc(var(--sp-3) + 20px); } /* 多选行被选中时，左侧金条让位给勾选框 —— 两条竖线挨在一起会显得脏 */ .bl-list[data-multi] .bl-row.on, .bl-list[data-multi] .bl-row.on:hover { box-shadow: none; } /* 缺货行不画勾选框（不能选，画了会引诱用户去点） */ .bl-list[data-multi] .bl-row.dis::before, .bl-list[data-multi] .bl-row.dis::after { display: none; } .bl-list[data-multi] .bl-row.dis { padding-left: var(--sp-3); } /* 多选 A 版（套餐 < 8 的兜底，目前用不到，但规则要成套 —— 否则将来卖家把一个多选大类砍到 7 档，勾选框会凭空消失） */ .sp-cards[data-multi] .sp-card::before { content: ""; position: absolute; left: 8px; top: 8px; width: 16px; height: 16px; border: 1.5px solid var(--line-2); border-radius: var(--r-xs); background: var(--surface); } .sp-cards[data-multi] .sp-card.on::before { border-color: var(--gold); background: var(--gold); } .sp-cards[data-multi] .sp-card.dis::before { display: none; } /* 暗色：金底勾选框配亮金底会看不清对勾 —— 换深金底 + 亮金字 （与 .bl-row.on .bl-pick 同一套结构差异，判据是"哪端是背景"要反过来） */ [data-theme="dark"] .bl-list[data-multi] .bl-row.on::before, [data-theme="dark"] .sp-cards[data-multi] .sp-card.on::before { background: var(--gold-soft, var(--brand-soft)); border-color: var(--gold); } [data-theme="dark"] .bl-list[data-multi] .bl-row.on::after { border-left-color: var(--gold-fg); border-bottom-color: var(--gold-fg); } /* 暗色：与 A 版同一套 multiply → lighten 的规矩（浅底上是「白底消失」， 深底上 multiply 会把整图乘黑）。 */ [data-theme="dark"] .bl-shot { mix-blend-mode: lighten; background: var(--surface-2); } [data-theme="dark"] .bl-fig { mix-blend-mode: lighten; } /* 暗色下 --gold 是亮金，拿它当 .bl-pick 底会配白字 → 对比度不足。 改用深金底 + 亮金字。 */ [data-theme="dark"] .bl-row.on .bl-pick { background: var(--gold-soft, var(--brand-soft)); border-color: var(--gold); color: var(--gold-fg); } /* 窄屏：价格列与「选择」列挤到一行会压缩名称 —— 40px 图 + 隐去「选择」按钮， 整行只做「点哪选哪」，省下 56px 给长名称。 */ @media (max-width: 640px) { .bl-row { grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--sp-2); } .bl-pick { display: none; } .bl-price { font-size: var(--fs-base); } } /* ============================================================ Pokémon GO 专属登录方式区（.pogo-*，2026-10-02 新增） ------------------------------------------------------------ 只在「商品级开关」rechargeUi === 'pogo' 时由 components.js 的 UI.pogoLoginForm 渲染出来（当前只有 p13）。**其它 14 个代充商品 走通用 UI.rechargeForm，标记里根本没有 .pogo-* 类名， 所以这一整块对它们零影响** —— 这是「只改一个商品」的实现方式： 靠类名隔离，不靠 if 分支堆在通用组件里。 ★ 颜色只用**局部私有变量** --pogo-*，不动任何全局令牌。 为什么不复用 --gold / --brand： · --gold 的语义是「金额」，--brand 的语义是「可交互」； 这里要的是「宝可梦」这个品牌风格，属于装饰性身份色。 拿语义令牌做装饰，将来调金额色会把这里一起改掉（MEMORY 十）。 · 亮/暗两套主题要换的是**结构**而不只是取值： 亮色下是「浅黄底 + 深褐字」，暗色下必须翻成 「深褐底 + 亮黄字」——「哪端是背景、哪端是文字」反过来了。 所以下面写了两条独立规则，不是一条改个色值。 · 宝可梦主色：黄 #f2c400 系、蓝 #2a6fd6 系（官方 logo 的蓝黄）。 对比度（亮色）：#7a5a06 on #fffdf3 = 7.4:1 ✓ 对比度（暗色）：#f5cd4d on #26210f = 10.1:1 ✓ ============================================================ */ .pogo-rf { --pogo-yellow: #f2c400; --pogo-yellow-soft: #fffbe6; --pogo-yellow-line: #f0d878; --pogo-ink: #4a3708; --pogo-ink-2: #7a6510; --pogo-blue: #2a6fd6; --pogo-blue-soft: #eaf2fe; /* 身份色做背景修饰：极淡的黄蓝双色斜向渐变，只用来"标出这是宝可梦区"， 不做装饰性动效。最淡端也保证深褐字达标。 */ background: linear-gradient(135deg, var(--pogo-yellow-soft) 0%, var(--surface-2) 46%, var(--pogo-blue-soft) 100%); border-color: var(--pogo-yellow-line); } /* 「你用哪种方式登录」这一行的间距：卡片网格与上方 label 之间要比 普通字段松一点 —— 三张卡是这一区的主角，太挤会显得像附属说明。 */ .pogo-way-field { margin-bottom: var(--sp-5); } .pogo-way-field > label { margin-bottom: var(--sp-3); display: block; } /* ---- 三张登录方式卡片 ---- */ .pogo-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); } .pogo-way { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--sp-1h); padding: var(--sp-4) var(--sp-2) var(--sp-3); border: 1px solid var(--pogo-yellow-line); border-radius: var(--r-md); background: var(--surface); color: var(--pogo-ink); text-align: center; cursor: pointer; user-select: none; transition: border-color var(--tr), background var(--tr), box-shadow var(--tr); } .pogo-way:hover { border-color: var(--pogo-yellow); background: var(--pogo-yellow-soft); } /* ★ radio 本体藏起来但**不能 display:none** —— 否则键盘 / 读屏点不到， 也收不到 focus 环。用「绝对定位 + 1px + opacity 0」保留焦点能力。 */ .pogo-way > input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } .pogo-way:focus-within { outline: none; box-shadow: var(--ring); } /* 选中态：黄底 + 深黄边 + 蓝勾。 */ .pogo-way:has(> input[type="radio"]:checked) { border-color: var(--pogo-yellow); background: var(--pogo-yellow-soft); box-shadow: inset 0 0 0 1px var(--pogo-yellow); } /* 图标：品牌 logo 是彩色 svg，直接放白底圆片里即可，不做 mix-blend （blend 是给"白底方图"融底用的，这里是矢量图标，融了反而掉色）。 */ .pogo-way .pw-ico { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-full); background: #ffffff; border: 1px solid var(--line); } .pogo-way .pw-ico img { width: 24px; height: 24px; object-fit: contain; display: block; } .pogo-way .pw-recommend { position: absolute; top: 7px; left: 7px; padding: 2px 7px; border-radius: var(--r-full); background: #dc2626; color: #fff; font-size: 11px; font-weight: 600; line-height: 1.5; } .pogo-way .pw-note { color: var(--pogo-ink-2); font-size: 12px; line-height: 1.5; } .pogo-way .pw-nm { color: var(--pogo-ink); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-tight); word-break: break-word; } /* 勾选角标：空时不画，选中时画个蓝圆 + 白勾（同多选行的做法， 但用蓝而不是金 —— 蓝是"确认"的动作色）。 */ .pogo-way .pw-ck { position: absolute; top: var(--sp-1h); right: var(--sp-1h); width: 16px; height: 16px; border-radius: var(--r-full); border: 1.5px solid var(--pogo-yellow-line); background: var(--surface); transition: background var(--tr), border-color var(--tr); } .pogo-way:has(> input[type="radio"]:checked) .pw-ck { border-color: var(--pogo-blue); background: var(--pogo-blue); } .pogo-way:has(> input[type="radio"]:checked) .pw-ck::after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; transform: rotate(45deg); } /* 方式说明（随登录方式变的那句话）—— 用蓝色左侧条做引用感， 和卡片的黄色区分开，读者一眼知道「这是在解释上面那张卡」。 */ .pogo-way-tip { margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--pogo-blue); border-radius: 0 var(--r-xs) var(--r-xs) 0; background: var(--pogo-blue-soft); color: var(--pogo-ink-2); font-size: var(--fs-xs); line-height: var(--lh-normal); } /* ---- 密码框 + 显示/隐藏按钮 ---- ★ 用绝对定位把按钮压在输入框右端内侧：这样不额外占一行， 也不需要给 input 加 padding-right 之外的结构改动。 input 必须留出按钮宽度，否则长密码会钻到按钮底下。 */ .pogo-pwd { position: relative; } .pogo-pwd > .input { padding-right: 44px; } .pogo-eye { position: absolute; top: 50%; right: var(--sp-2); transform: translateY(-50%); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: var(--r-sm); background: transparent; color: var(--text-3); font-size: var(--fs-md); line-height: 1; cursor: pointer; transition: background var(--tr), color var(--tr); } .pogo-eye:hover { background: var(--surface-3); color: var(--text-2); } .pogo-eye:focus-visible { outline: none; box-shadow: var(--ring); } /* 「正在显示密码」是个**状态**（不是装饰），给个持续可见的底色， 否则用户离开页面回来分不清是明文还是密文。 */ .pogo-eye.on { background: var(--pogo-yellow-soft); color: var(--pogo-ink); } /* 两枚 SVG 靠 .on 切换显隐（不用 emoji：emoji 字形/颜色跨系统不一致， 无 emoji 字体的环境会退化成方框）。颜色走 currentColor 跟随主题。 */ .pogo-eye svg { display: block; width: 18px; height: 18px; } .pogo-eye .pe-hide { display: none; } .pogo-eye.on .pe-show { display: none; } .pogo-eye.on .pe-hide { display: block; } /* ---- 暗色：翻结构，不是改取值 ---- 亮色是「浅黄底 + 深褐字」，暗色必须变成「深褐底 + 亮黄字」。 如果只把 --pogo-yellow-soft 调暗，--pogo-ink 还是深褐 → 深底深字看不见。 */ [data-theme="dark"] .pogo-rf { --pogo-yellow: #f5cd4d; --pogo-yellow-soft: #2e2610; --pogo-yellow-line: #5c4c14; --pogo-ink: #f0dc9a; --pogo-ink-2: #cbb877; --pogo-blue: #6aa2f0; --pogo-blue-soft: #17263c; background: linear-gradient(135deg, #221d0c 0%, var(--surface-2) 48%, #16233a 100%); border-color: var(--pogo-yellow-line); } [data-theme="dark"] .pogo-way { background: var(--surface); border-color: var(--pogo-yellow-line); color: var(--pogo-ink); } [data-theme="dark"] .pogo-way:hover { border-color: var(--pogo-yellow); background: var(--pogo-yellow-soft); } /* ★ 暗色下"--pogo-yellow-soft"是很深的褐（#2e2610）， 与未选中态（--surface #171c28）在亮度上已能区分， 但两者都"暗"，只看底色不够一眼认出。 所以选中态额外加一圈更亮的黄边 + 轻微内发光 —— 判据是"扫一眼就能指出选了哪张卡"，不是"技术上颜色不同"。 */ [data-theme="dark"] .pogo-way:has(> input[type="radio"]:checked) { border-color: var(--pogo-yellow); background: var(--pogo-yellow-soft); box-shadow: inset 0 0 0 1px var(--pogo-yellow), 0 0 0 3px rgba(245, 205, 77, .12); } /* 暗色下 logo 圆片要保持白底 —— logo 是给浅底设计的彩色矢量图， 压在深底上会糊成一团。 */ [data-theme="dark"] .pogo-way .pw-ico { background: #ffffff; border-color: transparent; } [data-theme="dark"] .pogo-way .pw-ck { background: var(--surface-2); border-color: var(--pogo-yellow-line); } [data-theme="dark"] .pogo-way:has(> input[type="radio"]:checked) .pw-ck { background: var(--pogo-blue); border-color: var(--pogo-blue); } [data-theme="dark"] .pogo-eye.on { background: var(--pogo-yellow-soft); color: var(--pogo-ink); } /* 窄屏：三张卡并排会让「训练家俱乐部」这种长名折成三行， 改成两列 —— 前两张一行，第三张单独占一行（grid 自动排布）。 */ @media (max-width: 640px) { .pogo-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pogo-way { padding: var(--sp-3) var(--sp-2); } .pogo-way .pw-ico { width: 34px; height: 34px; } .pogo-way .pw-ico img { width: 20px; height: 20px; } } /* ============================================================ Pokémon GO 专属**页面布局**（.pogo-page/.pogo-rail/.pogo-wiz/.pogo-dock） ------------------------------------------------------------ 2026-10-02 第二轮改版。只在 pageLayout==='pogo-wizard' 时由 pages/product.js 的 pogoPageHTML 输出（目前只有 p13）。 **其它 15 个商品页的 DOM 里根本没有这些类名**， 所以这一整块对它们零影响 —— 靠类名隔离，不靠 if 堆在通用样式里。 ---- 为什么要改（实测数据，不是"感觉拥挤"）---- 通用页是 `minmax(0,1.05fr) minmax(0,1fr)`，左右约 1:1。 p13 的内容量（3 大类 / 25 档 + 登录表单）配这个比例时实测： · 左栏 619×425 的主图框下面空着 1477px · 左栏总高 523px vs 右栏 1902px = 1 : 3.6 · 右栏只有 589px 宽，套餐卡只能排 3 列 → 越排越长 根因是**分栏比例按 1:1 分，内容高度差 3.6 倍**。 → B：左栏压到 232px 小图标栏，省下的 380px 全给右栏（→988px，排 4 列） → C：吸底价格条（position:fixed），滚到哪都能下单 → D：三步向导（radio + 纯 CSS 切步骤，JS 只负责"该不该拦"） ★ 断点用 1080 而不是 640：实测 1080px 时右栏已不足 760px， 4 列会退化成每列 170px 以下、长名称开始折行 —— 比手机宽的窗口 同样会出现"挤"，所以提前一档改成单列。 ============================================================ */ /* ---- 布局骨架：232px 图标栏 + 1fr 主区 ---- */ /* 局部私有令牌：向导的"当前步"高亮。 ★ 为什么局部定义而不是写进 01-tokens.css：这是 p13 这一页的装饰性 身份色，不是全站语义色（MEMORY 十：不要用语义令牌做装饰）。 定义在 .pogo-page 上而不是 :root —— 别的页面即使误用同名类 也拿不到值，不会出现"全站按钮突然变成宝可梦黄"。 ★ 默认值指向现有 --gold-* 系列：万一将来去掉这段定义， 向导会退回金色系而不是变成"没有颜色"。 */ .pogo-page { --pogo-wiz-bg: var(--gold-soft); --pogo-wiz-line: var(--gold-line); --pogo-wiz-dot: var(--gold); --pogo-wiz-done: var(--gold-soft); } .pogo-page { /* 与 .wrap 同宽，但**底部要给吸底条让位**。 不留的话，最后一行（"加入购物车"那一行）会被 fixed 元素盖住 —— 点它会点到吸底条上，表现为"点了没反应"（MEMORY 记过同类事故）。 */ padding-bottom: 0; } .pogo-page > .pogo-rail, .pogo-page > .pogo-main { min-width: 0; } .pogo-page { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: var(--sp-6); align-items: start; } /* 右栏比左栏长得多（实测 1:3.6），左栏内容滚上去之后下面是空的。 让它吸顶跟随：滚动时左栏一直贴着页头，空白就不再"看起来是没画完"。 ★ 只在宽屏生效 —— 单列布局下左栏在最上面，吸顶会把它钉住挡住内容。 ★ top 用 --header-h（页头是 sticky，直接用 0 会被页头盖住）。 */ @media (min-width: 1081px) { .pogo-rail { position: sticky; top: calc(var(--header-h) + var(--sp-4)); } } /* ★ 套餐卡片网格的列宽在 p13 这页单独收窄到 200px 起步。 为什么必须改：右栏变宽到 984px 后，通用页的 minmax(172px) 会算出 **5 列**，而金币只有 6 档 → 排成「5 个一行 + 15500 孤零零一行」， 截图上一眼就能看出"没排好"。200px 起步在 984px 下正好 4 列（4+2）， 在 760px 下 3 列，都不会出现"最后一个落单"的观感。 ★ 只作用于 .pogo-page 内部：通用商品页的 .sp-cards 不受影响 （别的商品压根没有专属套餐区，但改全局仍然是坏习惯）。 */ .pogo-page .sp-cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } /* ---- 左栏：232px 小图标 ---- */ /* ★ 图区给**固定高度**而不是 aspect-ratio： grid 行轨道被拉伸时 aspect-ratio 会跟着变形（上面 .bl-shot 的注释 已经踩过同一个坑：孵化器图从 199×200 变成 364×691）。 */ .pogo-thumb { display: grid; place-items: center; width: 100%; height: 210px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); } .pogo-thumb .ph { font-size: var(--ico-xl); line-height: 1; } .pogo-gal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-1h); margin-top: var(--sp-2); } /* 服务保障：三行紧凑条目，替代原来"占满左栏的大方框" */ .pogo-svc { display: flex; flex-direction: column; gap: var(--sp-1h); margin: var(--sp-3) 0 0; padding: 0; list-style: none; } .pogo-svc li { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-2); border-radius: var(--r-md); background: var(--surface-2); } .pogo-svc-i { flex: none; font-size: var(--fs-base); line-height: 1.3; } .pogo-svc-x { min-width: 0; } .pogo-svc-x b { display: block; color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-semi); line-height: 1.3; } .pogo-svc-x i { display: block; margin-top: 2px; color: var(--text-3); font-size: var(--fs-2xs); font-style: normal; line-height: 1.4; /* 售后时间可能较长，允许折行但限制在两行内，避免把左栏拉高 */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 参考信息（商品编号 / 分类 / 发货 / 库存） ★ 从右栏底部搬到这里：它是"参考信息"不是决策项， 放在决策区里会让人以为要先看完它才能下单。 */ .pogo-meta { display: grid; gap: var(--sp-1h); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--line); font-size: var(--fs-2xs); } .pogo-meta .k { color: var(--text-3); } .pogo-meta .v { color: var(--text-2); word-break: break-all; } /* ---- 三步向导 ---- */ .pogo-wiz { position: relative; margin-top: var(--sp-4); } .pogo-wiz > input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } /* 步骤条：三段等宽，当前步高亮（选中态是纯 CSS，与 .sp-shop 同一套路） */ .pw-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin: 0 0 var(--sp-4); padding: 0; list-style: none; } .pw-step-li { min-width: 0; } .pw-step { display: flex; align-items: center; gap: var(--sp-2); height: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); cursor: pointer; transition: background var(--tr), border-color var(--tr); } .pw-step:hover { background: var(--surface-2); } .pw-dot { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-full); background: var(--surface-3); color: var(--text-3); font-size: var(--fs-2xs); font-weight: var(--fw-bold); line-height: 1; } .pw-tx { min-width: 0; } .pw-tx b { display: block; color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-semi); line-height: 1.3; } .pw-tx i { display: block; margin-top: 1px; color: var(--text-3); font-size: var(--fs-2xs); font-style: normal; line-height: 1.35; } /* 当前步高亮：三槽位对号（与 .sp-shop 的 8 槽位同一写法）。 ⚠️ name 必须与 .sp-shop 的 spg 区分开 —— 同名 radio 会互斥， 两组页签会互相取消选中。 */ .pogo-wiz > input[data-pw-step="1"]:checked ~ .pw-steps > .pw-step-li:nth-child(1) .pw-step, .pogo-wiz > input[data-pw-step="2"]:checked ~ .pw-steps > .pw-step-li:nth-child(2) .pw-step, .pogo-wiz > input[data-pw-step="3"]:checked ~ .pw-steps > .pw-step-li:nth-child(3) .pw-step { border-color: var(--pogo-wiz-line, var(--gold-line)); background: var(--pogo-wiz-bg, var(--gold-soft)); } .pogo-wiz > input[data-pw-step="1"]:checked ~ .pw-steps > .pw-step-li:nth-child(1) .pw-dot, .pogo-wiz > input[data-pw-step="2"]:checked ~ .pw-steps > .pw-step-li:nth-child(2) .pw-dot, .pogo-wiz > input[data-pw-step="3"]:checked ~ .pw-steps > .pw-step-li:nth-child(3) .pw-dot { background: var(--pogo-wiz-dot, var(--gold)); color: var(--gold-on, #fff); } /* 已走过的步骤给个小圆点，让人知道"这步做过了" */ .pogo-wiz > input[data-pw-step="2"]:checked ~ .pw-steps > .pw-step-li:nth-child(1) .pw-dot, .pogo-wiz > input[data-pw-step="3"]:checked ~ .pw-steps > .pw-step-li:nth-child(1) .pw-dot, .pogo-wiz > input[data-pw-step="3"]:checked ~ .pw-steps > .pw-step-li:nth-child(2) .pw-dot { background: var(--pogo-wiz-done, var(--gold-soft)); color: var(--pogo-wiz-dot, var(--gold)); } /* 面板显隐 */ .pw-panel { display: none; } .pogo-wiz > input[data-pw-step="1"]:checked ~ .pw-panels > .pw-panel:nth-child(1), .pogo-wiz > input[data-pw-step="2"]:checked ~ .pw-panels > .pw-panel:nth-child(2), .pogo-wiz > input[data-pw-step="3"]:checked ~ .pw-panels > .pw-panel:nth-child(3) { display: block; } .pw-panel-hd { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); } .pw-panel-hd h3 { font-size: var(--fs-lg); font-weight: var(--fw-bold); } .pw-qty { margin-top: var(--sp-4); } /* 步骤导航按钮：靠右排，"下一步"在视觉上是主动作 */ .pw-nav { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-5); } /* ---- 第 ③ 步的只读确认清单 ---- */ .pw-review { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); padding: var(--sp-4); } .pw-rv-empty { padding: var(--sp-2) 0; } .pw-rv-sec { margin-bottom: var(--sp-2); color: var(--text-3); font-size: var(--fs-2xs); font-weight: var(--fw-semi); } .pw-rv-sec:not(:first-child) { margin-top: var(--sp-4); } .pw-rv-list { display: flex; flex-direction: column; gap: var(--sp-1h); margin: 0; padding: 0; list-style: none; } .pw-rv-list li { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-sm); } .pw-rv-list .nm { flex: 1; min-width: 0; color: var(--text); } /* 「×3」这种份数标签：与 .bl-nm .qty 同一套视觉语言（同一个"数量"概念 在两处出现，样式不统一会让人以为是两回事） */ .pw-rv-list .qt { flex: none; color: var(--text-3); font-variant-numeric: tabular-nums; } .pw-rv-list .pr { flex: none; color: var(--gold-fg); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; } /* 账号回显：与档位行区分开（它是"信息"不是"要买的东西"） */ .pw-rv-list .ec { flex: 1; min-width: 0; color: var(--text-2); word-break: break-all; } .pw-rv-list .ec.empty { color: var(--text-3); font-style: italic; } .pw-final { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--gold-line); border-radius: var(--r-md); background: var(--gold-soft); } .pw-final-row { display: flex; align-items: baseline; gap: var(--sp-3); width: 100%; } .pw-final-row .k { color: var(--text-2); font-size: var(--fs-sm); } .pw-final-row .v { margin-left: auto; color: var(--gold); font-size: var(--fs-xl); font-variant-numeric: tabular-nums; } .pw-final .dim { width: 100%; } /* ---- C：吸底价格条 ---- */ .pogo-dock-pad { height: 0; } .pogo-dock { position: fixed; left: 0; right: 0; bottom: 0; /* 必须在弹层(300)之下、页头(100)之上：吸底条被弹层盖住会让人 以为"弹层里点不到下面的按钮"，反过来盖住页头就挡了搜索。 */ z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-5); /* 顶边高光：吸底条与正文之间要有一条明确的界，否则内容"从底下冒出来" */ border-top: 1px solid var(--line-2); background: var(--surface); box-shadow: 0 -2px 12px rgba(15, 23, 42, .06); } .pogo-dock-l { flex: none; } .pogo-dock-lab { color: var(--text-3); font-size: var(--fs-2xs); line-height: 1.2; } .pogo-dock-price { color: var(--gold); font-size: var(--fs-2xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; line-height: 1.2; } .pogo-dock-price .cur { font-size: var(--fs-base); font-weight: var(--fw-semi); } .pogo-dock-m { flex: 1; min-width: 0; } .pogo-dock-m .dim { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pogo-dock-r { flex: none; display: flex; gap: var(--sp-2); } /* 本地存储不可用时会有一条常驻警告（.storage-warn，04-components.css） 也钉在视口底部，会和吸底条叠在一起（截图里能看到两条糊在一块）。 把它出现时把吸底条抬上去。 ★ 用 :has() 做**渐进增强**：不支持 :has() 的浏览器只是照旧重叠， 功能与下单流程完全不受影响 —— 不会出现"按钮点不到"。 ★ 不写死精确高度（警告条会随文字换行变高），宁可多留一点。 */ body:has(.storage-warn) .pogo-dock { bottom: 76px; } @media (max-width: 640px) { body:has(.storage-warn) .pogo-dock { bottom: 124px; } } /* 吸底条会盖住内容，所以正文末尾要留出等高的空白。 ★ 这个占位块必须在**页面里**（不是给 .pogo-page 加 padding）， 因为通用页的 .wrap 也有底部留白，混用会让两种页面的底部间距不一致。 */ @media (min-width: 1081px) { .pogo-page > .pogo-dock-pad { height: 72px; } } /* ---- 暗色 ---- 判据同 .pogo-rf 那一节：这里要换的是**结构**而不只是取值。 亮色下吸底条是"浅底 + 深字"，暗色下是"深底 + 亮字"； 金价在暗色下要换成亮金（--gold 本身已是亮金，配深底才对）。 */ [data-theme="dark"] .pogo-dock { background: var(--surface); border-top-color: var(--line-2); box-shadow: none; } [data-theme="dark"] .pogo-dock-price { color: var(--gold); } [data-theme="dark"] .pogo-svc li { background: var(--surface-2); } [data-theme="dark"] .pogo-review, [data-theme="dark"] .pw-review { background: var(--surface-2); border-color: var(--line); } [data-theme="dark"] .pw-step { background: var(--surface); } [data-theme="dark"] .pw-step:hover { background: var(--surface-2); } [data-theme="dark"] .pw-dot { background: var(--surface-3); color: var(--text-3); } /* ---- 窄屏：单列，吸底条变两行 ---- ★ 1080 这个断点比通用页的 960 提前一档：实测 1080px 时右栏 不足 760px，4 列会退化到每列 170px 以下、长名称开始折行。 */ @media (max-width: 1080px) { .pogo-page { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); } /* 单列时小图标横过来放在最上面，不再占一整列（否则 210px 高的 小图上方空着，下面才是第一步，又回到"大片无用空间"的老问题） */ .pogo-rail { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--sp-3); align-items: start; } .pogo-thumb { height: 120px; } .pogo-svc { margin-top: 0; } .pogo-gal { grid-column: 1 / -1; } .pogo-meta { grid-column: 1 / -1; } } @media (max-width: 640px) { .pogo-page > .pogo-dock-pad { height: 108px; } .pogo-dock { flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-3); } .pogo-dock-l { flex: none; } .pogo-dock-price { font-size: var(--fs-xl); } .pogo-dock-m { order: 3; flex: 1 0 100%; } .pogo-dock-r { flex: 1; } .pogo-dock-r .btn { flex: 1; } /* 步骤条在窄屏改成"只显示圆点 + 当前步名"，三段并排会把每格压到 90px， "选择档位"四个字都放不下（实测会折成两行并把整条撑高）。 */ .pw-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-1h); } .pw-step { justify-content: center; padding: var(--sp-2) var(--sp-1); } .pw-tx i { display: none; } .pw-tx b { font-size: var(--fs-2xs); } .pw-nav { flex-direction: column-reverse; } .pw-nav .btn { width: 100%; } } /* Pokémon GO 商品页改版：商品横幅 + 购买指南 + 下单工作区。 */ .pogo-hero { display:flex; align-items:center; gap:28px; padding:32px; margin-bottom:28px; border:1px solid var(--gold-line); border-radius:24px; background:radial-gradient(ellipse at 0% 0%,var(--gold-soft),transparent 65%),var(--surface); overflow:hidden; } .pogo-hero-art { flex:0 0 126px; height:126px; display:grid; place-items:center; padding:16px; border-radius:28px; background:var(--surface); border:1px solid var(--line-2); } .pogo-hero-art img { width:100%; height:100%; object-fit:contain; } .pogo-hero-art .ph { font-size:64px; } .pogo-hero-copy { min-width:0; flex:1; } .pogo-eyebrow { display:block; color:var(--gold); font-size:11px; font-weight:700; letter-spacing:2px; margin-bottom:10px; } .pogo-hero h1 { font-size:clamp(23px,2.4vw,34px); line-height:1.3; margin:0; letter-spacing:-.5px; } .pogo-hero-copy p { color:var(--text-2); font-size:14px; line-height:1.7; margin:10px 0 16px; } .pogo-hero-tags { display:flex; flex-wrap:wrap; gap:8px; } .pogo-hero-note { display:flex; flex-direction:column; gap:10px; padding-left:26px; border-left:1px solid var(--line-2); max-width:240px; } .pogo-hero-note b { font-size:15px; } .pogo-hero-note span { color:var(--text-3); font-size:12px; line-height:1.8; } .pogo-page { grid-template-columns:240px minmax(0,1fr); gap:24px; } .pogo-rail { padding:22px; background:var(--surface); border:1px solid var(--line-2); border-radius:20px; } .pogo-rail-heading > span { font-size:11px; color:var(--gold); font-weight:700; letter-spacing:2px; } .pogo-rail-heading h2 { font-size:18px; line-height:1.6; margin:8px 0; } .pogo-rail-heading p { font-size:12px; color:var(--text-3); line-height:1.7; } .pogo-svc { margin-top:20px; gap:16px; } .pogo-svc li { background:transparent; padding:0; } .pogo-meta { padding-top:20px; margin-top:22px; border-top:1px solid var(--line-2); font-size:11px; } .pogo-main > .pogo-wiz { margin-top:0; padding:24px; border:1px solid var(--line-2); border-radius:20px; background:var(--surface); } .pogo-page .pw-steps { gap:0; padding-bottom:22px; border-bottom:1px solid var(--line-2); margin-bottom:24px; } .pogo-page .pw-step { border-radius:12px; border-color:transparent; padding:14px 10px; } .pogo-page .pw-dot { width:30px; height:30px; font-size:13px; } .pogo-page .pw-tx i { margin-top:5px; } .pogo-page .pw-panel-hd { justify-content:space-between; margin-bottom:20px; } .pogo-page .sp-cards { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } .pogo-page .sp-card { border-radius:16px; box-shadow:none; transition:border-color .18s,transform .18s; } .pogo-page .sp-card:not(.dis):hover { transform:translateY(-3px); border-color:var(--gold); } .pogo-page .sp-card.on { outline:2px solid var(--gold); outline-offset:-2px; } .pogo-page .pw-qty { padding:18px 0 0; border-top:1px solid var(--line-2); } .pogo-page .pw-nav { padding-top:18px; border-top:1px solid var(--line-2); } .pogo-page .pogo-main > .card { border-radius:20px; overflow:hidden; } .pogo-dock { gap:24px; padding-top:14px; padding-bottom:14px; border-top:1px solid var(--gold-line); box-shadow:0 -8px 32px #00000008; } .pogo-dock-pad { height:100px; } .pogo-dock-r .btn { border-radius:12px; min-width:148px; } @media(max-width:1080px) { .pogo-hero-note { display:none; } .pogo-page { grid-template-columns:minmax(0,1fr); } .pogo-rail { display:grid; grid-template-columns:1fr 2fr; gap:20px; position:static; } .pogo-svc { margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .pogo-meta { grid-column:1 / -1; margin-top:0; } } @media(max-width:640px) { .pogo-hero { gap:16px; padding:20px 16px; border-radius:18px; margin-bottom:16px; } .pogo-hero-art { flex-basis:72px; height:72px; padding:8px; border-radius:18px; } .pogo-eyebrow { font-size:9px; letter-spacing:.7px; } .pogo-hero h1 { font-size:22px; } .pogo-hero-copy p { font-size:12px; margin:8px 0 12px; } .pogo-hero-tags { gap:5px; } .pogo-page { gap:16px; } .pogo-rail { display:block; padding:18px; } .pogo-rail-heading { display:none; } .pogo-svc { gap:8px; } .pogo-svc-i { display:none; } .pogo-svc-x b { font-size:12px; } .pogo-svc-x i { font-size:10px; } .pogo-meta { display:none; } .pogo-main > .pogo-wiz { padding:16px; border-radius:18px; } .pogo-page .pw-step { padding:10px 6px; flex-direction:column; align-items:center; text-align:center; gap:8px; } .pogo-page .pw-tx i { display:none; } .pogo-page .pw-tx b { font-size:12px; } .pogo-page .pw-steps { padding-bottom:16px; margin-bottom:18px; } .pogo-page .sp-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .pogo-page .pw-panel-hd h3 { font-size:17px; } .pogo-page .pw-nav .btn-primary { width:100%; } .pogo-dock { gap:8px 12px; } .pogo-dock-r .btn { min-width:0; padding-left:12px; padding-right:12px; font-size:12px; } .pogo-dock-pad { height:130px; } } .pogo-hero-art { overflow:hidden; } .pogo-hero-art > * { max-width:100%; max-height:100%; } /* 训练家补给站 UI：深蓝主视觉、青绿交互、右侧购买指南。 */ .pogo-store { --gold:#087f80; --gold-soft:#eaf8f5; --gold-line:#a7d9d2; --gold-on:#fff; } .pogo-store .pogo-hero { position:relative; min-height:230px; padding:36px 44px; gap:32px; border:0; border-radius:24px; background:radial-gradient(circle at 87% 30%,#22666d 0,transparent 38%),linear-gradient(115deg,#102b42,#122f49 65%,#174a57); box-shadow:0 16px 32px #102b4214; color:#fff; } .pogo-store .pogo-hero::after { content:''; position:absolute; right:-70px; top:-140px; width:430px; height:430px; border:44px solid #ffffff06; border-radius:50%; pointer-events:none; } .pogo-store .pogo-hero-copy { order:0; position:relative; z-index:1; } .pogo-store .pogo-eyebrow { color:#9de1d1; letter-spacing:2.4px; font-size:10px; } .pogo-store .pogo-hero h1 { font-size:36px; font-weight:800; color:white; margin-top:12px; } .pogo-store .pogo-hero-copy p { color:#c1d5de; margin:12px 0 22px; } .pogo-store .pogo-hero-tags .badge { color:#e4f5f3; background:#ffffff12; border-color:#ffffff28; padding:5px 10px; } .pogo-store .pogo-hero-tags .badge-gold { background:#f7d875; color:#263142; border-color:#f7d875; } .pogo-store .pogo-hero-art { order:2; position:relative; z-index:1; flex:0 0 170px; height:170px; padding:0; border:5px solid #ffffff25; border-radius:24px; transform:none; background:#ffffff12; box-shadow:0 10px 30px #0003; } .pogo-store .pogo-hero-art img { display:block; width:100%; height:100%; object-fit:cover; max-height:100%; } .pogo-store .pogo-hero-note { order:1; max-width:160px; border:0; padding:0 18px 0 0; position:relative; z-index:1; } .pogo-store .pogo-hero-note b { color:#f7d875; font-size:18px; line-height:1.65; } .pogo-store .pogo-hero-note span { color:#c1d5de; font-size:11px; } .pogo-store .pogo-page { grid-template-columns:minmax(0,1fr) 250px; gap:24px; } .pogo-store .pogo-main { grid-column:1; grid-row:1; } .pogo-store .pogo-rail { grid-column:2; grid-row:1; border-radius:20px; background:var(--surface); padding:24px; border-color:var(--line-2); } .pogo-store .pogo-rail-heading h2 { font-size:20px; } .pogo-store .pogo-svc { gap:24px; margin-top:28px; } .pogo-store .pogo-svc-i { display:grid; place-items:center; width:30px; height:30px; border-radius:10px; background:var(--gold-soft); font-size:16px; } .pogo-store .pogo-meta { grid-template-columns:80px minmax(0,1fr); gap:12px 4px; } .pogo-store .pogo-main > .pogo-wiz { padding:26px; border-radius:20px; box-shadow:0 4px 20px #182f4404; } .pogo-store .pw-steps { gap:10px; border:0; padding:0; margin-bottom:28px; } .pogo-store .pw-step { background:var(--surface-2); padding:15px 12px; border:1px solid var(--line-2); } .pogo-store .pw-tx i { font-size:10px; } .pogo-store .pw-panel-hd h3 { font-size:21px; } .pogo-store .sp-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:5px; gap:5px; background:var(--surface-2); border-radius:14px; margin:18px 0; } .pogo-store .sp-tab { justify-content:center; border-radius:10px; padding:12px 8px; border-color:transparent; } .pogo-store .sp-shop > input:checked ~ .sp-tabs .sp-tab { box-shadow:none; } .pogo-store .sp-cards { gap:16px; } .pogo-store .sp-card { border:1px solid var(--line-2); background:var(--surface); border-radius:16px; overflow:hidden; } .pogo-store .sp-card .sp-shot { height:136px; background:radial-gradient(circle at 50% 60%,#e8f5f2, #f3f7fa 75%); border-bottom:0; mix-blend-mode:normal; } .pogo-store .sp-card.on .sp-shot { background:radial-gradient(circle,#d8f3eb,#eaf8f5); } .pogo-store .sp-card .sp-info { padding:16px 18px; } .pogo-store .sp-card .sp-name { font-size:15px; } .pogo-store .sp-card .sp-name em { color:var(--text); } .pogo-store .sp-card .sp-price { font-size:23px; color:var(--gold); margin-top:6px; } .pogo-store .sp-card.on { border-color:var(--gold); outline:2px solid var(--gold); box-shadow:0 6px 18px #087f8010; } .pogo-store .bl-row { border-radius:12px; padding-top:14px; padding-bottom:14px; } .pogo-store .pw-nav .btn-primary { background:#087f80; border-color:#087f80; color:#fff; border-radius:12px; padding:12px 22px; } .pogo-store .pogo-dock { background:var(--surface); padding-left:max(24px,calc((100vw - 1240px)/2)); padding-right:max(24px,calc((100vw - 1240px)/2)); border-color:var(--line-2); box-shadow:0 -6px 30px #102b420c; } .pogo-store .pogo-dock-price { color:var(--gold); } .pogo-store .pogo-dock-r .btn-gold { background:#087f80; border-color:#087f80; color:white; } [data-theme="dark"] .pogo-store { --gold:#75d8c3; --gold-soft:#193b38; --gold-line:#32665f; } [data-theme="dark"] .pogo-store .sp-card .sp-shot { background:var(--surface-2); } [data-theme="dark"] .pogo-store .sp-card.on .sp-shot { background:var(--gold-soft); } @media(max-width:1080px) { .pogo-store .pogo-page { grid-template-columns:minmax(0,1fr); } .pogo-store .pogo-main { grid-column:1; grid-row:1; } .pogo-store .pogo-rail { grid-column:1; grid-row:2; display:block; position:static; } .pogo-store .pogo-svc { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); } .pogo-store .pogo-meta { display:none; } } @media(max-width:640px) { .pogo-store .pogo-hero { min-height:190px; padding:24px 20px; gap:12px; border-radius:18px; } .pogo-store .pogo-eyebrow { font-size:8px; letter-spacing:1px; } .pogo-store .pogo-hero h1 { font-size:25px; line-height:1.4; } .pogo-store .pogo-hero-copy p { font-size:11px; margin:10px 0 16px; } .pogo-store .pogo-hero-art { flex-basis:76px; height:76px; aspect-ratio:1; border-width:2px; border-radius:14px; } .pogo-store .pogo-hero-tags .badge { font-size:9px; padding:3px 5px; } .pogo-store .pogo-main > .pogo-wiz { padding:16px; } .pogo-store .pw-steps { gap:6px; margin-bottom:22px; } .pogo-store .pw-step { padding:12px 4px; } .pogo-store .pw-panel-hd h3 { font-size:19px; } .pogo-store .sp-tab { padding:10px 4px; gap:4px; font-size:11px; } .pogo-store .sp-tab .n { font-size:10px; } .pogo-store .sp-cards { gap:12px; } .pogo-store .sp-card .sp-shot { height:106px; } .pogo-store .sp-card .sp-info { padding:12px; } .pogo-store .sp-card .sp-price { font-size:21px; } .pogo-store .pogo-dock { padding-left:16px; padding-right:16px; } .pogo-store .pogo-svc { margin-top:0; gap:12px; } } .pogo-store .sp-shop > input:nth-of-type(1):checked ~ .sp-tabs > .sp-tab:nth-of-type(1) { background:var(--gold-soft); color:var(--gold); border-color:var(--gold-line); } .pogo-store .sp-shop > input:nth-of-type(2):checked ~ .sp-tabs > .sp-tab:nth-of-type(2) { background:var(--gold-soft); color:var(--gold); border-color:var(--gold-line); } .pogo-store .sp-shop > input:nth-of-type(3):checked ~ .sp-tabs > .sp-tab:nth-of-type(3) { background:var(--gold-soft); color:var(--gold); border-color:var(--gold-line); } .pogo-store .sp-shop > input:nth-of-type(4):checked ~ .sp-tabs > .sp-tab:nth-of-type(4) { background:var(--gold-soft); color:var(--gold); border-color:var(--gold-line); } .pogo-store .sp-shop > input:nth-of-type(5):checked ~ .sp-tabs > .sp-tab:nth-of-type(5) { background:var(--gold-soft); color:var(--gold); border-color:var(--gold-line); } .pogo-store .sp-shop > input:nth-of-type(6):checked ~ .sp-tabs > .sp-tab:nth-of-type(6) { background:var(--gold-soft); color:var(--gold); border-color:var(--gold-line); } .pogo-store .sp-shop > input:nth-of-type(7):checked ~ .sp-tabs > .sp-tab:nth-of-type(7) { background:var(--gold-soft); color:var(--gold); border-color:var(--gold-line); } .pogo-store .sp-shop > input:nth-of-type(8):checked ~ .sp-tabs > .sp-tab:nth-of-type(8) { background:var(--gold-soft); color:var(--gold); border-color:var(--gold-line); } .pogo-store .pogo-hero-art img { object-fit:contain; } @media(max-width:640px) { .pogo-store .sp-tab { white-space:nowrap; font-size:10px; gap:3px; } .pogo-store .sp-tab .ico { font-size:12px; } } /* 配色参考 https://store.pokemongo.com/zh-Hant（2026-10-02）。 页面结构不变；官网深青文字、薄荷背景、青绿购买按钮。 */ .pogo-store { --text:#0f4f5a; --text-2:#44696c; --text-3:#607e80; --surface:#fff; --surface-2:#f3faf8; --surface-3:#e8f5f0; --line:#dcebe6; --line-2:#d0e4df; --gold:#198496; --gold-fg:#198496; --gold-hover:#0f6574; --gold-soft:#e5f7ef; --gold-line:#9cdbca; --gold-on:#fff; --brand:#198496; --brand-hover:#126d7c; --brand-bg:#e5f7ef; --brand-line:#9cdbca; --brand-fg:#126d7c; --pogo-mint-gradient:linear-gradient(120deg,#e9f6df,#c9f2ed); --pogo-buy-gradient:linear-gradient(319.49deg,#07c4c4 1.87%,#96cf9c 109.19%); } body:has(.pogo-store) { background:#f5faf7; } .pogo-store .pogo-hero { background:linear-gradient(110deg,#eaf8ef,#d2f5f3); color:var(--text); box-shadow:0 8px 24px #0f4f5a08; border:1px solid #c9e9df; } .pogo-store .pogo-hero::after { border-color:#ffffff55; } .pogo-store .pogo-hero h1 { color:var(--text); } .pogo-store .pogo-eyebrow { color:#198496; } .pogo-store .pogo-hero-copy p, .pogo-store .pogo-hero-note span { color:var(--text-2); } .pogo-store .pogo-hero-note b { color:#956000; } .pogo-store .pogo-hero-art { transform:none; background:#fff; border-color:#ffffff; box-shadow:0 6px 20px #0f4f5a18; } .pogo-store .pogo-hero-tags .badge { color:#0f4f5a; background:#ffffffb3; border-color:#c4dfd4; } .pogo-store .pogo-hero-tags .badge-gold { background:#ffedb5; border-color:#f0d78f; color:#78500b; } .pogo-store .pogo-hero-tags .badge-green { color:#216a50; background:#e8f7ec; } .pogo-store .pogo-svc-i { background:#e5f7ef; } .pogo-store .sp-card .sp-shot { background:var(--pogo-mint-gradient); } .pogo-store .sp-card.on .sp-shot { background:linear-gradient(120deg,#d8efcf,#ade8e0); } .pogo-store .sp-card .sp-price, .pogo-store .pogo-dock-price { color:#0f4f5a; } .pogo-store .sp-card.on { border-color:#198496; outline-color:#198496; box-shadow:0 6px 18px #19849610; } .pogo-store .sp-cards[data-multi] .sp-card.on::before, .pogo-store .bl-list[data-multi] .bl-row.on::before { background:#198496; border-color:#198496; } .pogo-store .pw-nav .btn-primary, .pogo-store .pogo-dock-r .btn-gold { background:var(--pogo-buy-gradient); border-color:#5cc9b4; color:#0b424c; } .pogo-store .pw-nav .btn-primary:hover, .pogo-store .pogo-dock-r .btn-gold:hover { background:linear-gradient(319.49deg,#06b7b7,#82c794); } .pogo-store .pogo-dock-r .btn:not(.btn-gold) { color:#198496; border-color:#91cfc2; background:#fff; } .pogo-store .buy-notice { background:#fffbef; border-color:#efdfb1; } .pogo-store .bn-head { color:#886019; } [data-theme="dark"] body:has(.pogo-store) { background:#101e25; } [data-theme="dark"] .pogo-store { --text:#e2f3ee; --text-2:#b6d3cc; --text-3:#94b4ad; --surface:#182c33; --surface-2:#20363c; --surface-3:#29434a; --line:#304b50; --line-2:#37565b; --gold:#79d8c3; --gold-soft:#23443f; --gold-line:#46776b; --gold-fg:#79d8c3; } [data-theme="dark"] .pogo-store .pogo-hero { background:linear-gradient(110deg,#16333a,#214b4b); border-color:#37565b; } [data-theme="dark"] .pogo-store .pogo-hero::after { border-color:#ffffff06; } [data-theme="dark"] .pogo-store .pogo-eyebrow { color:#79d8c3; } [data-theme="dark"] .pogo-store .pogo-hero-note b { color:#edc46a; } [data-theme="dark"] .pogo-store .sp-card .sp-shot { background:linear-gradient(120deg,#29443b,#214849); } [data-theme="dark"] .pogo-store .sp-card.on .sp-shot { background:#2c5951; } [data-theme="dark"] .pogo-store .sp-card .sp-price, [data-theme="dark"] .pogo-store .pogo-dock-price { color:#8cdecb; } [data-theme="dark"] .pogo-store .pogo-dock-r .btn:not(.btn-gold) { color:#9ce4d5; background:#20363c; border-color:#46776b; } [data-theme="dark"] .pogo-store .buy-notice { background:#343426; border-color:#60583d; } [data-theme="dark"] .pogo-store .bn-head { color:#edc46a; } /* 商品购买区域：规格、数量与正文共用稳定的阅读节奏。 */ .goods-price-box { margin: var(--sp-5) 0; padding: var(--sp-5) var(--sp-6); } .spec { min-height: var(--ctl-h-lg); padding: var(--sp-3) var(--sp-4); } .spec .n { line-height: var(--lh-normal); overflow-wrap: anywhere; } .spec .p, .spec .s { margin-top: var(--sp-1); } .qty:focus-within { border-color: var(--brand); box-shadow: var(--ring); } .qty input:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; } .qty button:disabled { color: var(--text-3); cursor: not-allowed; } .meta-list .row { line-height: var(--lh-normal); } .tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; } .tabs .tab { flex: none; min-height: var(--ctl-h-lg); display: inline-flex; align-items: center; } .tabs .tab.on { color: var(--brand-fg); } .rich { overflow-wrap: anywhere; } .rich h1, .rich h2, .rich h3 { margin-top: var(--sp-6); margin-bottom: var(--sp-3); } .rich > :first-child { margin-top: 0; } .rich > :last-child { margin-bottom: 0; } .rich p { margin-bottom: var(--sp-4); } .rich a { color: var(--brand-fg); text-decoration: underline; text-underline-offset: .2em; } .rich table { display: block; max-width: 100%; overflow-x: auto; } /* Pokémon GO banner polish: preserve structure, dimensions and copy. */ .pogo-store .pogo-hero { --pogo-hero-a: #f0f8f2; --pogo-hero-b: #dcefeb; --pogo-hero-border: #cfe3db; --pogo-hero-title: #214f50; --pogo-hero-muted: #52706d; --pogo-hero-accent: #337b72; --pogo-hero-note: #776443; background: linear-gradient(112deg, var(--pogo-hero-a), var(--pogo-hero-b)); border-color: var(--pogo-hero-border); box-shadow: 0 8px 24px #183e3709; } .pogo-store .pogo-hero[data-pogo-tone="blue"] { --pogo-hero-a: #f2f6fb; --pogo-hero-b: #dceaf6; --pogo-hero-border: #ccdeed; --pogo-hero-title: #264963; --pogo-hero-muted: #556f84; --pogo-hero-accent: #3b739a; --pogo-hero-note: #526d8a; } .pogo-store .pogo-hero[data-pogo-tone="warm"] { --pogo-hero-a: #faf6e9; --pogo-hero-b: #e1eee3; --pogo-hero-border: #e2dec5; --pogo-hero-title: #3d584d; --pogo-hero-muted: #677463; --pogo-hero-accent: #477962; --pogo-hero-note: #82632c; } .pogo-store .pogo-hero h1 { color: var(--pogo-hero-title); } .pogo-store .pogo-hero-copy p, .pogo-store .pogo-hero-note span { color: var(--pogo-hero-muted); } .pogo-store .pogo-eyebrow { color: var(--pogo-hero-accent); } .pogo-store .pogo-hero-note b { color: var(--pogo-hero-note); } .pogo-store .pogo-hero-tags .badge { color: var(--pogo-hero-title); background: #ffffffa8; border-color: var(--pogo-hero-border); } .pogo-store .pogo-hero-tags .badge-gold { color: #795e24; background: #f8edcf; border-color: #e8d8af; } .pogo-store .pogo-hero-art { border-color: #ffffffd9; box-shadow: 0 8px 22px #244f4916; animation: pogo-banner-float 6s ease-in-out 2; } .pogo-store .pogo-hero::after { border-color: #ffffff46; animation: pogo-banner-orbit 12s ease-in-out 2; } @keyframes pogo-banner-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes pogo-banner-orbit { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-14px, 8px); } } @media (hover:hover) { .pogo-store .pogo-hero-art { transition: box-shadow 220ms ease; } .pogo-store .pogo-hero:hover .pogo-hero-art { box-shadow: 0 12px 28px #244f4928; } } [data-theme="dark"] .pogo-store .pogo-hero { --pogo-hero-a:#1a3438; --pogo-hero-b:#254c4a; --pogo-hero-border:#3a5a56; --pogo-hero-title:#e1f3ec; --pogo-hero-muted:#b8d1c9; --pogo-hero-accent:#91d3be; --pogo-hero-note:#dbcca7; background:linear-gradient(112deg,var(--pogo-hero-a),var(--pogo-hero-b)); border-color:var(--pogo-hero-border); } [data-theme="dark"] .pogo-store .pogo-hero[data-pogo-tone="blue"] { --pogo-hero-a:#1c3146; --pogo-hero-b:#29465d; --pogo-hero-border:#3c586f; --pogo-hero-title:#e2eff8; --pogo-hero-muted:#b9cedf; --pogo-hero-accent:#9bc7e6; --pogo-hero-note:#bcd3e7; } [data-theme="dark"] .pogo-store .pogo-hero[data-pogo-tone="warm"] { --pogo-hero-a:#343a30; --pogo-hero-b:#304a41; --pogo-hero-border:#535f4c; --pogo-hero-title:#edf1df; --pogo-hero-muted:#c6d0bc; --pogo-hero-accent:#b1d1ae; --pogo-hero-note:#e1ca97; } [data-theme="dark"] .pogo-store .pogo-eyebrow { color:var(--pogo-hero-accent); } [data-theme="dark"] .pogo-store .pogo-hero-note b { color:var(--pogo-hero-note); } [data-theme="dark"] .pogo-store .pogo-hero-tags .badge { background:#ffffff0b; } [data-theme="dark"] .pogo-store .pogo-hero-tags .badge-gold { color:#ebd59c; background:#564a29; border-color:#766439; } @media (prefers-reduced-motion:reduce) { .pogo-store .pogo-hero-art, .pogo-store .pogo-hero::after { animation:none; transition:none; } } /* Web Store reference: pale aqua, white glass and a continuous upward item field. Continuous decorative motion is explicitly requested for this banner only. */ .pogo-store .pogo-hero { --pogo-hero-title:#0e515b; --pogo-hero-muted:#426c73; --pogo-hero-accent:#147f76; --pogo-hero-note:#986713; isolation:isolate; background:linear-gradient(180deg,#d6f8f2 0%,#e7faf6 60%,#f8fdfa 100%); border-color:#fff; box-shadow:0 8px 24px #0c74600a; } .pogo-store .pogo-hero::before { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(95deg,#f4fdfbd9 0%,#f1fcf8b8 40%,#f4fdfa45 72%,#ffffff22 100%); backdrop-filter:blur(1.5px); } .pogo-store .pogo-hero::after { content:none; animation:none; } .pogo-store .pogo-hero-copy, .pogo-store .pogo-hero-note, .pogo-store .pogo-hero-art { z-index:2; } .pogo-store .pogo-hero-art { animation:none; border-color:#fff; box-shadow:0 8px 24px #126b6714; } .pogo-store .pogo-hero-tags .badge { background:#ffffffb3; border-color:#c7e6df; } .pogo-store .pogo-hero-tags .badge-gold { color:#866015; border-color:#ead7a9; background:#fff3d4; } .pogo-floats { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; user-select:none; } .pogo-float { --float-drift:20px; --float-alpha:.5; --float-turn:-12deg; --float-soft:0px; position:absolute; top:0; left:0; height:100%; width:110px; animation:pogo-item-rise 19s linear infinite; pointer-events:none; will-change:transform,opacity; } .pogo-float img { display:block; width:100%; height:auto; object-fit:contain; transform:rotate(var(--float-turn)); filter:blur(var(--float-soft)); } .pf-1 { left:-3%; width:125px; animation-duration:19s; animation-delay:-6s; --float-drift:25px; --float-alpha:.6; } .pf-2 { left:12%; width:125px; animation-duration:24s; animation-delay:-17s; --float-turn:18deg; --float-alpha:.38; --float-soft:1px; } .pf-3 { left:31%; width:85px; animation-duration:27s; animation-delay:-4s; --float-turn:-15deg; --float-alpha:.32; --float-soft:2px; } .pf-4 { left:48%; width:96px; animation-duration:21s; animation-delay:-14s; --float-drift:-20px; --float-turn:12deg; --float-alpha:.46; --float-soft:1px; } .pf-5 { left:62%; width:125px; animation-duration:25s; animation-delay:-8s; --float-turn:-22deg; --float-alpha:.5; } .pf-6 { left:75%; width:95px; animation-duration:29s; animation-delay:-23s; --float-drift:-25px; --float-turn:20deg; --float-alpha:.3; --float-soft:2px; } .pf-7 { left:87%; width:125px; animation-duration:22s; animation-delay:-3s; --float-drift:-18px; --float-turn:-18deg; --float-alpha:.45; --float-soft:1px; } .pf-8 { left:96%; width:100px; animation-duration:26s; animation-delay:-13s; --float-drift:-25px; --float-turn:25deg; --float-alpha:.55; } @keyframes pogo-item-rise { 0% { transform:translate3d(0,100%,0); opacity:0; } 12% { opacity:var(--float-alpha); } 82% { opacity:var(--float-alpha); } 100% { transform:translate3d(var(--float-drift),-150px,0); opacity:0; } } [data-theme="dark"] .pogo-store .pogo-hero { --pogo-hero-title:#e0f5ef; --pogo-hero-muted:#b5d3cb; --pogo-hero-accent:#86ddc5; --pogo-hero-note:#e6c681; background:linear-gradient(180deg,#17483f,#193a35); border-color:#3c675d; } [data-theme="dark"] .pogo-store .pogo-hero::before { background:linear-gradient(95deg,#173d37e6,#173d37a1 65%,#173d3740); } [data-theme="dark"] .pogo-store .pogo-hero-tags .badge { background:#203f39c9; border-color:#50786b; } [data-theme="dark"] .pogo-store .pogo-hero-tags .badge-gold { background:#504627; border-color:#796538; color:#ebd59c; } @media(max-width:640px) { .pogo-float { width:78px; } .pf-2, .pf-3, .pf-6 { display:none; } .pf-1 { left:-8%; } .pf-4 { left:30%; } .pf-5 { left:56%; } .pf-7 { left:78%; } .pf-8 { left:97%; } } /* Keep the explicitly requested continuous item field independent of global motion rules. */ /* Purchase selection: neutral outline, confirmation tick and one-shot feedback. */ .pogo-store .spec { --pick-edge:#667780; --pick-wash:var(--surface); --pick-halo:#45566112; } .pogo-store .sp-card { transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease,background-color .22s ease; } .pogo-store .sp-card:not(.dis):hover { border-color:#9aa9ad; transform:translateY(-2px); } .pogo-store .sp-card.on, .pogo-store .sp-card.on:hover { outline:none; border-color:var(--pick-edge); background:var(--pick-wash); box-shadow:0 5px 16px #263b4512; transform:translateY(-2px); animation:pogo-pick-confirm .48s cubic-bezier(.2,.75,.25,1) both; } .pogo-store .sp-card .sp-fig { transition:transform .38s cubic-bezier(.2,.75,.25,1); } .pogo-store .sp-card.on .sp-fig { transform:translateY(-3px) scale(1.045); } .pogo-store .sp-card.on .sp-shot { background:var(--pogo-mint-gradient); } .pogo-store .sp-card::before, .pogo-store .sp-cards[data-multi] .sp-card::before { content:""; position:absolute; z-index:2; left:auto; right:12px; top:12px; width:24px; height:24px; box-sizing:border-box; border-radius:50%; border:1.5px solid #b0babe; background:#ffffffcc; box-shadow:0 2px 5px #174b3e08; transition:background .2s,border-color .2s,box-shadow .2s; pointer-events:none; } .pogo-store .sp-card.on::before, .pogo-store .sp-cards[data-multi] .sp-card.on::before { background:var(--pick-edge);border-color:var(--pick-edge); box-shadow:0 0 0 4px #ffffffa6; animation:pogo-tick-pop .38s cubic-bezier(.18,.8,.3,1.3) both; } .pogo-store .sp-card.on::after { content:"";position:absolute;z-index:3;right:20px;top:18px; width:7px;height:11px;border:solid white;border-width:0 2px 2px 0; transform:rotate(45deg);pointer-events:none; animation:pogo-tick-reveal .28s ease-out both; } .pogo-store .sp-card.dis::before,.pogo-store .sp-card.dis::after { display:none; } .pogo-store .bl-row { transition:background .22s,border-color .22s,box-shadow .22s,transform .22s; } .pogo-store .bl-row.on, .pogo-store .bl-list[data-multi] .bl-row.on { background:var(--pick-wash);border-color:var(--pick-edge); box-shadow:inset 0 0 0 1px var(--pick-edge),0 3px 12px var(--pick-halo); animation:pogo-row-confirm .38s ease-out both; } .pogo-store .bl-row.on .bl-pick { background:var(--pick-edge);border-color:var(--pick-edge);color:white; } .pogo-store .bl-list[data-multi] .bl-row::before { border-radius:6px;transition:background .2s,border-color .2s; } .pogo-store .bl-list[data-multi] .bl-row.on::before { background:var(--pick-edge);border-color:var(--pick-edge); } .pogo-store .spec:focus-visible { outline:2px solid var(--pick-edge);outline-offset:4px; } [data-theme="dark"] .pogo-store .spec { --pick-edge:#aab8bf;--pick-wash:var(--surface);--pick-halo:#aab8bf16; } [data-theme="dark"] .pogo-store .sp-card.on .sp-shot { background:linear-gradient(120deg,#29443b,#214849); } [data-theme="dark"] .pogo-store .sp-card::before { background:#293438;border-color:#6f7c82; } [data-theme="dark"] .pogo-store .sp-card.on::before { background:#64757e;border-color:#aab8bf;box-shadow:0 0 0 4px #ffffff12; } [data-theme="dark"] .pogo-store .bl-row.on .bl-pick { color:#202b31; } @keyframes pogo-pick-confirm { 0% { transform:translateY(0) scale(.985); } 55% { transform:translateY(-4px) scale(1.008); } 100% { transform:translateY(-2px) scale(1); } } @keyframes pogo-tick-pop { 0% { transform:scale(.7); } 65% { transform:scale(1.12); } 100% { transform:scale(1); } } @keyframes pogo-tick-reveal { 0%,25% { opacity:0; } 100% { opacity:1; } } @keyframes pogo-row-confirm { 0% { transform:scale(.99); } 65% { transform:scale(1.003); } 100% { transform:scale(1); } } @media(prefers-reduced-motion:reduce) { .pogo-store .spec,.pogo-store .spec::before,.pogo-store .spec::after,.pogo-store .sp-card .sp-fig { animation:none!important;transition:none!important; } .pogo-store .sp-card.on,.pogo-store .sp-card:not(.dis):hover,.pogo-store .sp-card.on .sp-fig { transform:none; } } /* A single diagonal light pass on selection, clipped to the card. */ .pogo-store .pick-sheen { position:absolute;inset:0;z-index:4;overflow:hidden;border-radius:inherit;pointer-events:none; } .pogo-store .pick-sheen::after { content:"";position:absolute;inset:-50%;opacity:0; background:linear-gradient(45deg,transparent 42%,#ffffff12 45%,#ffffffb3 49%,#fffffff2 50%,#ffffff70 52%,transparent 58%); transform:translate(-75%,75%); } .pogo-store .spec.on .pick-sheen::after { animation:pogo-selection-sheen 1.3s cubic-bezier(.25,.45,.4,1) both; } @keyframes pogo-selection-sheen { 0% { transform:translate(-75%,75%);opacity:0; } 15% { opacity:1; } 80% { opacity:1; } 100% { transform:translate(75%,-75%);opacity:0; } } @media(prefers-reduced-motion:reduce) { .pogo-store .spec.on .pick-sheen::after { animation:none; } } /* Keep the original teal selection tick; the passing light remains white. */ .pogo-store .sp-card.on::before, .pogo-store .sp-cards[data-multi] .sp-card.on::before, .pogo-store .bl-list[data-multi] .bl-row.on::before { background:#159b89;border-color:#159b89; } .pogo-store .bl-row.on .bl-pick { background:#159b89;border-color:#159b89;color:white; } [data-theme="dark"] .pogo-store .sp-card.on::before, [data-theme="dark"] .pogo-store .sp-cards[data-multi] .sp-card.on::before, [data-theme="dark"] .pogo-store .bl-list[data-multi] .bl-row.on::before { background:#168c77;border-color:#66dcc3; } /* A compact recharge receipt: merchandise, game account, then checkout. */ .pogo-store .pw-panel[data-pw="3"] .pw-panel-hd { display:block;margin-bottom:20px; } .pogo-store .pw-panel[data-pw="3"] .pw-panel-hd h3 { font-size:22px;line-height:1.4;margin:0 0 6px;font-weight:700; } .pogo-store .pw-panel[data-pw="3"] .pw-panel-hd > span { display:block;font-size:14px;line-height:1.6;color:var(--text-2); } .pogo-store .pw-confirm-sheet { --confirm-accent:#116b67;--confirm-on:#fff;--confirm-link:var(--brand-fg);border:1px solid var(--line-2);border-radius:18px;background:var(--surface);overflow:hidden; } .pogo-store .pw-review { display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);margin:0;padding:0;border:0;border-radius:0;background:transparent;overflow:visible; } .pogo-store .pw-purchase-block,.pogo-store .pw-account-block { min-width:0;padding:22px 24px; } .pogo-store .pw-account-block { border-left:1px solid var(--line);background:var(--surface-2); } .pogo-store .pw-rv-sec { display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;color:var(--text); } .pogo-store .pw-rv-sec h4 { margin:0;font-size:16px;line-height:1.5;font-weight:650; } .pogo-store .pw-item-count { display:block;margin-top:3px;font-size:12px;line-height:1.5;color:var(--text-2); } .pogo-store .pw-review-edit { flex:none;min-height:44px;padding:6px 8px;border:0;border-radius:8px;background:transparent;color:var(--confirm-link);font-family:inherit;font-size:13px;font-weight:500;line-height:1.5;cursor:pointer; } .pogo-store .pw-review-edit:hover { background:var(--brand-bg); } .pogo-store .pw-review-edit:focus-visible { outline:2px solid var(--brand);outline-offset:2px; } .pogo-store .pw-review-columns,.pogo-store .pw-purchase-list li { display:grid;grid-template-columns:minmax(0,1fr) 38px 88px;gap:12px;align-items:center; } .pogo-store .pw-review-columns { padding-bottom:10px;border-bottom:1px solid var(--line);font-size:12px;line-height:1.5;color:var(--text-2); } .pogo-store .pw-review-columns span:nth-child(2),.pogo-store .pw-purchase-list .qt { text-align:center; } .pogo-store .pw-review-columns span:last-child,.pogo-store .pw-purchase-list .pr { text-align:right; } .pogo-store .pw-purchase-list { gap:0; } .pogo-store .pw-purchase-list li { padding:16px 0;font-size:14px;line-height:1.5; } .pogo-store .pw-purchase-list li + li { border-top:1px solid var(--line); } .pogo-store .pw-item-main { display:flex;align-items:center;gap:12px;min-width:0; } .pogo-store .pw-item-figure { display:flex;align-items:center;justify-content:center;flex:0 0 52px;width:52px;height:52px;border-radius:12px;background:var(--surface-2); } .pogo-store .pw-item-figure img { width:46px;height:46px;object-fit:contain; } .pogo-store .pw-item-figure .ui-ico { width:24px;height:24px; } .pogo-store .pw-item-copy { min-width:0; } .pogo-store .pw-purchase-list .nm { display:block;font-size:15px;font-weight:600;overflow-wrap:anywhere; } .pogo-store .pw-item-unit { display:block;margin-top:4px;font-size:12px;color:var(--text-2); } .pogo-store .pw-purchase-list .pr { font-size:16px;font-weight:650;color:var(--text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere; } .pogo-store .pw-provider { display:flex;align-items:center;gap:10px;padding:12px;margin-bottom:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface); } .pogo-store .pw-provider-logo { display:flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--line); } .pogo-store .pw-provider > div { min-width:0; } .pogo-store .pw-provider > div > span { display:block;font-size:12px;line-height:1.5;color:var(--text-2); } .pogo-store .pw-provider strong { display:block;margin-top:2px;font-size:14px;font-weight:600;line-height:1.5;overflow-wrap:anywhere; } .pogo-store .pw-account-list { margin:0; } .pogo-store .pw-account-field { display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:baseline;padding:8px 0;font-size:14px;line-height:1.6; } .pogo-store .pw-account-field dt { font-size:13px;color:var(--text-2); } .pogo-store .pw-account-field dd { min-width:0;margin:0;font-weight:500;color:var(--text);overflow-wrap:anywhere; } .pogo-store .pw-account-field .pw-value-empty { color:var(--text-2); } .pogo-store .pw-secret-note { display:inline-block;margin-left:8px;font-size:12px;font-weight:400;color:var(--text-2); } .pogo-store .pw-account-note { display:flex;align-items:center;gap:6px;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:12px;line-height:1.5;color:var(--text-2); } .pogo-store .pw-account-note .ui-ico { flex:none;width:14px;height:14px; } .pogo-store .pw-final { display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:24px;margin:0;padding:20px 24px;border:0;border-top:1px solid var(--line-2);border-radius:0;background:var(--surface); } .pogo-store .pw-final-row { flex:1;min-width:0;width:auto;flex-wrap:wrap;gap:8px 16px; } .pogo-store .pw-final-row .k { font-size:14px;font-weight:500; } .pogo-store .pw-final-row .v { max-width:100%;margin-left:0;font-size:32px;line-height:1.25;letter-spacing:-.6px;font-weight:700;color:var(--text);overflow-wrap:anywhere; } .pogo-store .pw-confirm-action { flex:none;text-align:center; } .pogo-store .pw-confirm-action .btn { min-width:200px;min-height:48px;padding:12px 24px;border-radius:12px;background:var(--confirm-accent);border-color:var(--confirm-accent);color:var(--confirm-on);font-size:15px;font-weight:600; } .pogo-store .pw-confirm-action .btn:hover { filter:brightness(.92); } .pogo-store #pw-final-tip { margin-top:6px;font-size:12px;line-height:1.5;color:var(--text-2); } [data-theme="dark"] .pogo-store .pw-confirm-sheet { --confirm-accent:#90ded0;--confirm-on:#123b38;--confirm-link:#90ded0; } @media(max-width:900px) { .pogo-store .pw-review { grid-template-columns:minmax(0,1fr); } .pogo-store .pw-account-block { border-left:0;border-top:1px solid var(--line); } } @media(max-width:640px) { .pogo-store .pw-panel[data-pw="3"] .pw-panel-hd h3 { font-size:20px; } .pogo-store .pw-confirm-sheet { border-radius:14px; } .pogo-store .pw-purchase-block,.pogo-store .pw-account-block { padding:16px; } .pogo-store .pw-rv-sec { margin-bottom:12px;gap:8px; } .pogo-store .pw-review-columns,.pogo-store .pw-purchase-list li { grid-template-columns:minmax(0,1fr) 30px 64px;gap:8px; } .pogo-store .pw-item-main { gap:8px; } .pogo-store .pw-item-figure { flex-basis:40px;width:40px;height:44px; } .pogo-store .pw-item-figure img { width:38px;height:38px; } .pogo-store .pw-purchase-list .nm { font-size:14px; } .pogo-store .pw-purchase-list .pr { font-size:14px; } .pogo-store .pw-final { display:block;padding:18px 16px; } .pogo-store .pw-final-row { width:100%;justify-content:flex-start;margin-bottom:16px; } .pogo-store .pw-final-row .v { font-size:28px; } .pogo-store .pw-confirm-action .btn { width:100%;min-width:0; } } /* User-provided artwork for Pokemon GO category tabs. */ /* Per-package quantity controls. Keep card height steady as selection changes. */ .pogo-store .pogo-card-qty { display:flex;align-items:center;justify-content:space-between;width:132px;max-width:calc(100% - 16px);height:44px;margin:0 auto 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);position:relative;z-index:2;cursor:default; } .pogo-store .pogo-card-qty[hidden] { display:flex;visibility:hidden;pointer-events:none; } .pogo-store .pogo-card-qty button { flex:0 0 44px;width:44px;height:44px;padding:0;border:0;border-radius:11px;background:transparent;color:var(--text);font:500 23px/1 system-ui;cursor:pointer;transition:background .16s; } .pogo-store .pogo-card-qty button:hover { background:var(--surface-2); } .pogo-store .pogo-card-qty button:disabled { opacity:.35;cursor:not-allowed; } .pogo-store .pogo-card-qty output { min-width:24px;text-align:center;font-size:14px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--text); } .pogo-store .pogo-card-qty button:focus-visible,.pogo-store .spec:focus-visible { outline:2px solid #168c77;outline-offset:3px; } .pogo-store .bl-row .pogo-card-qty { grid-column:4;grid-row:1;margin:0;max-width:none; } .pogo-store .bl-row .pogo-card-qty[hidden] { display:none; } .pogo-store .bl-row.on .bl-pick { display:none; } .pogo-store .pw-selection-hint { padding:18px 0 4px;line-height:1.7; } @media(max-width:640px) { .pogo-store .bl-row .pogo-card-qty { grid-column:2 / -1;grid-row:auto;justify-self:end; } } .pogo-store .sp-tab .pogo-category-art { display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:0 0 32px;overflow:hidden; } .pogo-store .pogo-category-img { display:block;width:32px;height:32px;object-fit:contain;max-width:none; } .pogo-store .pogo-category-coin { transform:translateY(-5px) scale(2.25); } @media(max-width:640px) { .pogo-store .sp-tab .pogo-category-art { width:24px;height:24px;flex-basis:24px; } .pogo-store .pogo-category-img { width:24px;height:24px; } .pogo-store .pogo-category-coin { transform:translateY(-4px) scale(2.25); } } /* Fresh rocket progress: scoped to manual recharge, preserving verification UI. */ .op-card.op-cloud { border-color: #e2eaf5; border-radius: 20px; } .op-card.op-cloud .op-hero { min-height: 112px; padding: 26px 28px; display: flex; align-items: center; overflow: hidden; background: linear-gradient(110deg, #f3f8ff 0%, #eaf3ff 62%, #e2efff 100%); } .op-card.op-cloud .op-hero-txt { padding-right: 180px; } .op-card.op-cloud .op-hero-t { color: #213858; font-family: "PingFang SC","Microsoft YaHei",system-ui,sans-serif; font-size: 22px; font-weight: 650; line-height: 1.4; letter-spacing: .01em; } .op-card.op-cloud .op-hero-s { margin-top: 7px; color: #627996; font-size: 13px; line-height: 1.6; } .op-cloud-art { position: absolute; width: 300px; height: auto; right: -6px; bottom: -5px; pointer-events: none; user-select: none; animation: op-cloud-float 5s ease-in-out infinite; } .op-card.op-cloud .op-steps { padding: 3px 0 6px; min-height: 76px; } .op-card.op-cloud .op-step { gap: 0; } .op-card.op-cloud .op-track { top: 17px; height: 3px; border-radius: 3px; background: #e8eef7; } .op-card.op-cloud .op-fill { height: 100%; position: relative; overflow: hidden; border-radius: inherit; background: linear-gradient(90deg,#73a9f7,#418afa); box-shadow: 0 1px 6px #83b4fa30; } .op-card.op-cloud .op-fill::after { content: ""; position: absolute; inset: 0; width: 30%; background: linear-gradient(90deg,transparent,#ffffffb0,transparent); animation: op-cloud-flow 4s ease-in-out infinite; } .op-card.op-cloud .op-dot { width: 30px; height: 30px; border: 3px solid var(--surface); background: #edf2f8; color: #8a9cb4; font: 600 12px/1 system-ui,sans-serif; } .op-card.op-cloud .op-dot.done { background: #21b77b; color: white; } .op-card.op-cloud .op-dot.cur { background: #438af3; color: white; box-shadow: 0 0 0 5px #e5efff, 0 0 0 9px #f5f9ff; } .op-card.op-cloud .op-lb { margin-top: 10px; font-size: 12px; line-height: 1.5; color: #8a98ac; } .op-card.op-cloud .op-step.done .op-lb { color: #526881; } .op-card.op-cloud .op-step.cur .op-lb { color: #3077d8; font-weight: 600; } .op-card.op-cloud .op-step-hint { display: block; margin-top: 3px; color: #8192aa; font-size: 10px; line-height: 1.4; text-align: center; } .op-card.op-cloud.is-complete .op-cloud-art, .op-card.op-cloud.is-dead .op-cloud-art { animation: none; } .op-card.op-cloud.is-complete .op-fill::after { display: none; } .op-card.op-cloud.is-dead .op-hero { background: #f3f5f8; } .op-card.op-cloud.is-dead .op-cloud-art { opacity: .4; filter: grayscale(1); } @keyframes op-cloud-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes op-cloud-flow { 0%,20% { transform: translateX(-120%); } 85%,100% { transform: translateX(450%); } } @container (max-width: 600px) { .op-card.op-cloud .op-hero { min-height: 102px; padding: 22px 20px; } .op-card.op-cloud .op-hero-txt { padding-right: 84px; } .op-card.op-cloud .op-hero-t { font-size: 18px; } .op-card.op-cloud .op-hero-s { font-size: 12px; max-width: 270px; } .op-cloud-art { width: 210px; right: -4px; bottom: -1px; opacity: .95; } .op-card.op-cloud .op-lb { font-size: 11px; } } @container (max-width: 390px) { .op-card.op-cloud .op-hero-txt { padding-right: 52px; } .op-card.op-cloud .op-hero-t { font-size: 16px; } .op-card.op-cloud .op-hero-s { max-width: 205px; } .op-cloud-art { width: 175px; right: -4px; } .op-card.op-cloud .op-dot { width: 26px; height: 26px; } .op-card.op-cloud .op-track { top: 15px; } .op-card.op-cloud .op-dot.cur { box-shadow: 0 0 0 3px #e5efff; } .op-card.op-cloud .op-lb { font-size: 10px; } .op-card.op-cloud .op-step-hint { font-size: 9px; } } html[data-theme="dark"] .op-card.op-cloud { border-color: #303d51; } html[data-theme="dark"] .op-card.op-cloud .op-hero { background: linear-gradient(110deg,#202d41,#273b58); } html[data-theme="dark"] .op-card.op-cloud .op-hero-t { color: #dfecff; } html[data-theme="dark"] .op-card.op-cloud .op-hero-s { color: #adbed4; } html[data-theme="dark"] .op-card.op-cloud .op-track { background: #344158; } html[data-theme="dark"] .op-card.op-cloud .op-dot:not(.done):not(.cur) { background: #344158; color: #b3c2d8; } html[data-theme="dark"] .op-card.op-cloud .op-dot.cur { box-shadow: 0 0 0 4px #314a70; } html[data-theme="dark"] .op-card.op-cloud .op-step.done .op-lb { color: #b9c8da; } html[data-theme="dark"] .op-card.op-cloud .op-step.cur .op-lb { color: #8fbcff; } @media (prefers-reduced-motion: reduce) { .op-card.op-cloud .op-cloud-art, .op-card.op-cloud .op-fill::after { animation: none; } .op-card.op-cloud .op-fill::after { display: none; } } /* 结算前的充值核对：电脑与手机均为居中弹窗；资料区独立滚动。 */ /* One payment control group stays in the summary on desktop and docks on mobile. */ #ck-methods{display:grid;grid-template-columns:repeat(var(--ck-columns,3),minmax(0,1fr));gap:8px} #ck-methods .spec{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-width:0;min-height:46px;margin:0;padding:9px 6px;border-radius:8px;text-align:center;font:inherit;box-sizing:border-box} #ck-methods .spec .n{flex:0 1 auto;min-width:0;line-height:20px;font-size:13px;overflow-wrap:anywhere} #ck-methods .spec:not(.on){background:var(--surface);border-color:var(--line);box-shadow:none} #ck-methods .spec.on{background:var(--brand-bg);border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)} #ck-methods .spec .s{margin:0;flex:none;font-size:12px;font-variant-numeric:tabular-nums;color:var(--text-2)} .ck-method-logo{display:flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px;color:var(--brand)} .ck-method-logo svg{display:block;width:20px;height:20px} .ck-method-logo-wechat{color:#07B75A} .ck-method-logo-alipay{color:#1677FF} #ck-methods .spec:focus-visible{outline:2px solid var(--brand);outline-offset:3px} #ck-methods .ck-method-check{display:none} .ck-payment-card .card-head{padding-top:12px;padding-bottom:12px} .ck-payment-card .card-body{padding-top:12px;padding-bottom:10px} .ck-payment-foot{display:flex;align-items:baseline;justify-content:space-between;gap:4px;flex-wrap:wrap} .ck-payment-note{margin:8px 0 0;color:var(--text-2);font-size:11px;line-height:1.6} .ck-wallet-available{margin:8px 0 0 0;margin-left:auto;color:var(--text-2);font-size:11px;line-height:1.6;white-space:nowrap;font-variant-numeric:tabular-nums} .ck-balance-feedback{margin:12px 0 0;color:var(--warn-fg);font-size:13px;line-height:1.6} .ck-payment-note[hidden],.ck-balance-feedback[hidden]{display:none} @media(max-width:360px){ #ck-methods{gap:6px} #ck-methods .spec{gap:4px;padding:9px 3px} #ck-methods .spec .n{font-size:12px} .ck-method-logo,.ck-method-logo svg{width:16px;height:16px} } .ck-paybar{min-width:0} @media(max-width:760px){ .checkout-page{padding-bottom:calc(128px + env(safe-area-inset-bottom))} .checkout-page .ck-paybar{position:fixed;inset:auto 0 0;z-index:110;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px max(16px,env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 24px #16243b0a} .ck-paybar .ck-pay-total{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:0;border:0;min-width:0;flex:1} .ck-pay-total>.muted{font-size:12px} .ck-paybar #ck-confirm-total{font-size:22px;line-height:1.25;overflow-wrap:anywhere} .ck-paybar #ck-confirm-total .fx-reference{font-size:11px;line-height:1.4;display:block} .ck-paybar #btn-submit-order{flex:0 1 56%;width:auto;min-height:48px;margin:0;padding:12px 18px;font-size:16px;border-radius:12px;white-space:normal;overflow-wrap:anywhere} #app:has(.checkout-page) .site-footer{padding-bottom:calc(130px + env(safe-area-inset-bottom))} body:has(.checkout-page) .support-fab.sf-widget{bottom:calc(130px + env(safe-area-inset-bottom))} } .overlay.checkout-review-overlay { padding: 24px; backdrop-filter: blur(3px); z-index: 1200; /* 高于站内新消息提醒（1100），保证核对内容完整可见。 */ } .modal.checkout-review { width: 100%; max-width: 560px; max-height: calc(100dvh - 48px); border-radius: 20px; background: var(--surface); } .ck-review-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; padding: 20px 24px 14px; border-bottom: 1px solid var(--line); } .ck-review-head h2 { margin: 0; color: var(--text); font-size: 22px; font-weight: 700; line-height: 1.4; } .ck-review-head .x { min-width: 44px; min-height: 44px; color: var(--text-2); } .checkout-review .ck-review-body { padding: 20px 24px 24px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .ck-review-note { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 20px; color: var(--warn-fg); font-size: 13px; line-height: 1.65; } .ck-review-note > span:first-child { display: flex; flex: none; padding-top: 2px; } .ck-review-item { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .ck-review-item + .ck-review-item { margin-top: 16px; } .ck-review-product { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); } .ck-review-cover { display: flex; align-items: center; justify-content: center; flex: none; width: 52px; height: 52px; overflow: hidden; border-radius: 10px; background: var(--surface); } .ck-review-cover > img { width: 100%; height: 100%; object-fit: contain; } .ck-review-cover > .brand-tile { width: 100%; height: 100%; } .ck-review-product-info { flex: 1; min-width: 0; } .ck-review-product-info h3 { margin: 0 0 5px; color: var(--text); font-size: 16px; line-height: 1.45; font-weight: 650; overflow-wrap: anywhere; } .ck-review-product-info p { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.5; } .ck-review-product-info p > span:first-child { min-width: 0; overflow-wrap: anywhere; } .ck-review-product-info p > span:last-child { flex: none; white-space: nowrap; } .ck-review-details { margin: 0; padding: 4px 16px; } .ck-review-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 13px 0; font-size: 14px; line-height: 1.65; } .ck-review-row + .ck-review-row { border-top: 1px solid var(--line); } .ck-review-row dt { color: var(--text-2); overflow-wrap: anywhere; } .ck-review-row dd { margin: 0; color: var(--text); font-weight: 550; overflow-wrap: anywhere; white-space: pre-wrap; } .ck-review-secret { letter-spacing: 3px; } .ck-review-hidden { margin-left: 10px; color: var(--text-3); font-size: 12px; font-weight: 400; white-space: nowrap; } .ck-review-no-fields { margin: 0; padding: 16px; color: var(--text-2); font-size: 13px; } .checkout-review .modal-foot { display: block; padding: 18px 24px 24px; background: var(--surface); border-top: 1px solid var(--line); } .ck-review-summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 16px; color: var(--text-2); font-size: 13px; } .ck-review-summary strong { color: var(--gold-fg); font-size: 22px; line-height: 1.2; font-weight: 700; overflow-wrap: anywhere; } .ck-review-payment { margin-left: auto; color: var(--text-2); } .ck-review-reference { flex-basis: 100%; color: var(--text-3); font-size: 12px; line-height: 1.5; } .ck-review-actions { display: grid; grid-template-columns: 1fr 1.45fr; gap: 12px; } .ck-review-actions .btn { width: 100%; min-width: 0; min-height: 48px; height: auto; padding: 12px; border-radius: 10px; font-size: 15px; line-height: 1.5; white-space: normal; } .ck-review-actions .btn-ghost { background: var(--surface); border-color: var(--line-2); color: var(--text-2); } .ck-review-actions .btn-ghost:hover { background: var(--surface-hover); color: var(--text); } .ck-review-actions .btn:active { filter: brightness(.96); } .checkout-review button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; } .ck-review-head h2:focus { outline: none; } @media (max-width: 600px) { .overlay.checkout-review-overlay { padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); place-items: center; } .modal.checkout-review { max-width: 100%; max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); border-radius: 20px; } .ck-review-head { padding: 16px 16px 12px; } .ck-review-head h2 { font-size: 20px; } .checkout-review .ck-review-body { padding: 16px; } .ck-review-note { margin-bottom: 16px; } .ck-review-product { padding: 14px; gap: 10px; } .ck-review-cover { width: 46px; height: 46px; border-radius: 8px; } .ck-review-product-info h3 { font-size: 15px; } .ck-review-details { padding-inline: 14px; } .ck-review-row { grid-template-columns: 80px minmax(0, 1fr); gap: 12px; padding-block: 12px; } .checkout-review .modal-foot { padding: 16px; } .ck-review-summary { margin-bottom: 14px; } .ck-review-actions { gap: 10px; } }