:root { /* Kog 9/6 13:10 K哥 拍: macOS Sonoma 风格 (白色主调 + Apple 灰阴影) */ --primary: #001E36; --primary-dark: #001A2E; --primary-light: #007AFF; --primary-soft: #E3F2FD; --primary-deeper: #F5F5F7; --primary-deep: #E5E5EA; --primary-shadow: 0 4px 14px rgba(0,0,0,0.08); --bg-page: #FFFFFF; --bg-section: #FFFFFF; --bg-card-on-dark: #F5F5F7; --bg-soft: #E3F2FD; --bg-soft-2: #F5F5F7; --bg-soft-3: #F5F5F7; --bg-soft-4: #E5E5EA; --bg-card-light: #ffffff; --ink: #1D1D1F; --ink-2: #424245; --ink-3: #3C3C43; --text-muted: #3C3C43; --text-light: #1D1D1F; --text-pale: #86868B; --text-on-dark: #1D1D1F; --text-on-dark-muted: #6E6E73; --border: #D2D2D7; --border-2: #D2D2D7; --border-on-dark: #E5E5EA; --success: #34C759; --warning: #FF9500; --rating: #FF9500; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: var(--ink); background: var(--bg-page); line-height: 1.65; font-size: 17px; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.5px; } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; } strong, b { font-weight: 600; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; } .section { padding: 64px 0; } .section-title { font-size: 40px; font-weight: 700; letter-spacing: -1px; text-align: center; margin-bottom: 12px; color: var(--ink); } .section-subtitle { font-size: 18px; text-align: center; color: var(--text-muted); margin-bottom: 24px; max-width: 720px; margin-left: auto; margin-right: auto; } /* ===== Nav (macOS 风格: 白底黑字 + 模糊 + 细边) ===== */ .nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.85); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--border); } /* v135 Kog 20:09 拍: 版本/功能/场景/常见问题/登录/我的订单 顶部这里加大一点, nav-inner height 56->72 */ .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } .nav-logo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; color: var(--ink); } .nav-logo img { width: 28px; height: 28px; } .nav-links { display: flex; gap: 28px; align-items: center; } .nav-links a { font-size: 14px; color: var(--ink-3); transition: color 0.2s; } .nav-links a:hover { color: var(--ink); } .nav-actions { display: flex; gap: 8px; align-items: center; } .nav-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; transition: all 0.2s; white-space: nowrap; } .nav-btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--border); } .nav-btn-outline:hover { background: var(--bg-soft-2); border-color: var(--primary-light); } .topbar-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 8px; font-size: 13px; color: var(--ink-3); cursor: pointer; border: 1px solid transparent; background: none; } .topbar-btn:hover { background: var(--bg-soft-2); border-color: var(--border); color: var(--ink); } .topbar-vip-badge { display: inline-flex; align-items: center; gap: 3px; padding: 3px 9px; border-radius: 999px; background: linear-gradient(135deg,#FFD700 0%,#FFA500 100%); color: #1D1D1F; font-size: 11px; font-weight: 700; line-height: 1; box-shadow: 0 2px 6px rgba(245,158,11,0.25); margin-left: 6px; cursor: default; user-select: none; } /* Kog 9/6 13:10 K哥 拍: PS 单页专 Mac, Win 按钮永远隐藏 (跟 K哥 11:55 "Mac 的" 一致) */ .hero-cta-win, .nav-btn.hero-cta-win { display: none !important; } /* ===== Hero (macOS Sonoma 风格: 白底 + 居中大字 + 大圆角阴影图) ===== */ .hero { padding: 64px 0; background: var(--bg-page); background-image: linear-gradient(180deg, #FFFFFF 0%, #F5F5F7 100%); position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at top, rgba(0,122,255,0.06) 0%, transparent 60%); pointer-events: none; } /* v128 Kog 17:00 拍: 现在再改成左右一样高, flex stretch 在 aspect-ratio 存在时不生效 */ /* 改 grid stretch (CSS 规范最强等高方案) */ .hero-inner { display: grid; grid-template-columns: 3fr 2fr; gap: 56px; align-items: stretch; position: relative; z-index: 1; } /* v216 Kog 20:36: 左边文案高度跟 swiper 一致 */ .hero-tag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: rgba(0,122,255,0.10); border: 1px solid rgba(0,122,255,0.30); border-radius: 999px; font-size: 13px; color: var(--primary-light); margin-bottom: 24px; font-weight: 600; } .hero-tag .dot { width: 6px; height: 6px; background: var(--primary-light); border-radius: 50%; } /* Kog 9/6 13:16 K哥 拍: 标题要明显 (因为 Mac 单页), 56px -> 72px, 加 Mac 标题文案 + macOS Sonoma 徽章 */ .hero-title { font-size: 48px; font-weight: 700; letter-spacing: -1px; line-height: 1.05; margin-bottom: 22px; color: var(--ink); } /* v216c: LRC 标题太长, 再缩 8px */ .hero-title .accent { background: linear-gradient(135deg, #007AFF 0%, #AF52DE 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; } /* v133 Kog 17:45 拍: 文字这样排列不好看, 上下间距加大一点 */ /* v134 Kog 17:50 拍: 这段文字向左靠齐, 撤销 v132 居中, 改回左对齐, 恢复 v15 final max-width: 520px 让 desc 保持 4 行短行 */ .hero-desc { font-size: 20px; color: var(--text-muted); margin-bottom: 40px; max-width: 520px; line-height: 1.85; font-weight: 400; text-align: left; } .hero-trust { display: flex; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; } .hero-trust-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); font-weight: 500; } .hero-trust-item::before { content: "✓"; color: var(--success); font-weight: 800; } .hero-keywords { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; align-items: center; } .hero-cc-logo { display: flex; align-items: center; gap: 12px; margin-top: 28px; } .hero-cc-logo .cc-icon { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); flex-shrink: 0; } .hero-cc-logo .cc-text { font-size: 17px; font-weight: 600; color: #1D1D1F; letter-spacing: -0.01em; white-space: nowrap; } .hero-keywords-label { display: inline-flex; align-items: center; justify-content: center; font-size: 15px; margin-right: 2px; opacity: 0.65; line-height: 1; cursor: help; } .kw-chip { display: inline-flex; align-items: center; padding: 6px 14px; background: rgba(0,122,255,0.08); color: var(--primary); border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0.1px; border: 1px solid rgba(0,122,255,0.20); transition: all .15s ease; line-height: 1.3; } .kw-chip:hover { background: rgba(0,122,255,0.15); transform: translateY(-1px); border-color: rgba(0,122,255,0.40); } @media (max-width: 768px) { .hero-keywords { gap: 6px; margin-top: 16px; } .kw-chip { padding: 5px 11px; font-size: 12px; } .hero-keywords-label { font-size: 14px; } } .hero-cta-row { display: flex; gap: 14px; margin-top: auto; flex-wrap: nowrap; max-width: 500px; } /* Hero left col (Kog 15:19 + 15:55 K哥 拍: 左右高度一样) 治本 (rule 119, v119 终极方案): 抛弃 grid, 用 flex 父容器让子项等高. .hero-inner display: flex 让 .hero-left / .hero-swiper-col 自动等高 (flex item 默认 align-items: stretch). .hero-left flex: 3 (占 3 份宽), flex-direction: column 让内容自然堆叠 (tag-title-desc-trust-CTA), CTA 紧贴 trust, 底部留白由 flex container 拉伸自动产生. 不用 min-height: 100% (v118 循环依赖) / spacer / JS, flex 最稳. */ .hero-left { display: flex; flex-direction: column; box-sizing: border-box; justify-content: center; min-height: 100%; } /* v216 Kog 20:36: 跟 PS/AI/PR 一致 */ .hero-spacer { display: none; } /* 不用 spacer */ /* Hero swiper column (Kog 14:40 K哥 拍: 标题右边用 fbkss.csqykj.top 图片轮播) Kog 14:51 K哥 拍: 图片按比例缩小, 左右高低一致 Kog 14:57 K哥 拍: 不能有黑边. 治本: 容器按图比例 (aspect-ratio 10/9, 跟图 644x720 = 0.894) 算高度, 图 object-fit: cover 100% 填满, 0 黑边. (rule 119: 用图原比例不靠 JS 强赋高度, 更稳) */ /* v128 Kog 17:00 拍: 删 aspect-ratio, grid stretch 决定高度, min-height 保证最小高度 */ /* v129 Kog 17:07 拍: 图片和文案更加不一致高度了. min-height: 380px 是元凶 (强制图片框, hero-left 内容只 230px, 下方 150px 空白) */ /* v169 Kog 04:12 拍: 右边图片和标题高度要一致. 治本 (rule 119 v24): 删 aspect-ratio, height: 100%, align-self: stretch, 跟 AI baseline 一致. 图 object-fit: cover 100% 填满 0 黑边 */ .hero-swiper-col { width: 100%; height: 100%; max-height: 560px; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04); background: #1D1D1F; align-self: stretch; } /* v215 Kog 20:25: 10 单页面 swiper 高度跟 PS 一致 = 560px */ .heroSwiper { width: 100%; height: 100%; } .heroSwiper .swiper-slide { display: flex; align-items: center; justify-content: center; background: #1D1D1F; } .heroSwiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; } .hero-swiper-col { aspect-ratio: auto; min-height: 360px; height: 360px; } .hero-left { min-height: auto; justify-content: flex-start; } } .hero-img-fallback { font-size: 120px; color: rgba(255,255,255,0.96); text-shadow: 0 8px 24px rgba(0,0,0,0.30); font-weight: 700; letter-spacing: -3px; } .hero-cta-mac { background: var(--primary) !important; color: #fff !important; padding: 14px 28px !important; font-size: 15px !important; border: none !important; flex: 1; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,30,54,0.25); border-radius: 999px !important; font-weight: 500 !important; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; transition: all .2s; } .hero-cta-mac:hover { background: var(--primary-dark) !important; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,30,54,0.30); } /* ===== Versions (4 列网格, Apple Sonoma 一致风格) ===== */ .versions-section { background: #FFFFFF; } .versions-section .section-title { color: var(--ink); } .versions-section .section-subtitle { color: var(--text-muted); } .version-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } /* Kog 9/7 17:39 v57 Adobe 极简 versions (Kog 调研 Adobe Creative Cloud 学生版 + 主页 + K哥 17:39 '我只要按钮是蓝') */ .version-card { background: #FFFFFF; border: 1px solid var(--border); border-radius: 8px; padding: 18px 14px; text-align: center; position: relative; transition: border-color 0.15s; cursor: pointer; display: flex; flex-direction: column; align-items: center; } .version-card:hover { border-color: var(--ink); } /* Kog 9/7 17:39 v57: 删 .hot '热 门' tag 整体 (Kog 17:32 锅, 改成 #007AFF 影响所有 var(--primary)) */ /* Kog 9/7 17:48 v59: 图标 56 -> 64 + emoji 36 -> 40 (K哥 17:48 "再大一些", 方形 8px #F5F5F7 Adobe 极简保留) */ .v-icon { width: 64px; height: 64px; margin: 0 auto 14px; background: #F5F5F7; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .v-icon img { width: 40px; height: 40px; } .v-icon-emoji { font-size: 36px; line-height: 1; } /* Kog 9/7 17:39 v57: 标题 16px 600 黑色 (v15 final 状态, K哥 17:37 怒 '谁叫你版本卡上的其它字体也蓝色的') */ .v-name { font-size: 16px; font-weight: 600; line-height: 1.3; min-height: 2.6em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; color: var(--ink); margin-bottom: 4px; } /* Kog 9/7 17:57 v61: 芯片栏 - 12px 600 Apple 蓝 + #E3F2FD 浅蓝背景 + 4px 10px padding + 999px pill 圆角 (K哥 17:57 "芯片栏加上去", 中老年友好, 让 chip 明显) */ .v-system { font-size: 13px; font-weight: 700; color: #1F1F1F; background: transparent; border: 1px solid #1F1F1F; padding: 4px 12px; border-radius: 999px; display: inline-block; margin: 0 auto 12px; white-space: nowrap; max-width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.3px; } /* Kog 9/7 17:39 v57: 删 macOS 版本徽章按版本分色 (Adobe 极简, 单一 Apple 蓝 #007AFF) */ /* Kog 9/7 17:39 v57: 描述 12px 400 灰色 (v15 final 状态, K哥 17:37 不要 Apple 蓝) */ .v-size { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; font-weight: 400; line-height: 1.4; } /* Kog 9/7 17:50 v60: 价格 18px 700 黑色 + display: none (K哥 17:50 '价格不显示在版本卡上', 价格只在支付 modal 里显示) */ .v-price { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 10px; display: none; } /* Kog 9/7 17:39 v57: 按钮 14px 600 Apple 蓝 #007AFF (K哥 17:39 '我只要按钮是蓝', 用直接值不用 var(--primary)) */ .v-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 50%, #6D28D9 100%); color: #fff; border-radius: 8px; font-size: 14px; font-weight: 600; transition: background-color 0.15s; border: none; text-decoration: none; cursor: pointer; width: 100%; } .v-btn:hover { background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 50%, #6D28D9 100%); } .version-card.bundle { background: #FFFFFF; border: 2px solid #F59E0B !important; box-shadow: 0 8px 24px rgba(245,158,11,0.20); position: relative; overflow: hidden; } .version-card.bundle:hover { border-color: #D97706 !important; box-shadow: 0 12px 32px rgba(245,158,11,0.35); transform: translateY(-2px); } .version-card.bundle::before { content: "👑 全家桶"; position: absolute; top: 8px; right: 8px; background: linear-gradient(135deg,#FFD700 0%,#FFA500 100%); color: #1D1D1F; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; z-index: 2; } .version-card.bundle .v-name { color: #92400E; font-weight: 800; } .version-card.bundle .v-bundle-tag { background: #F59E0B; color: #FFFFFF; font-size: 10px; padding: 1px 6px; border-radius: 8px; margin-right: 4px; vertical-align: middle; } .version-card.bundle .v-price-bundle { background: linear-gradient(135deg,#FFD700 0%,#FFA500 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; } .version-card.bundle .v-icon { font-size: 48px; line-height: 1; } .v-icon-img { width: 64px; height: 64px; border-radius: 14px; box-shadow: 0 4px 12px rgba(0,0,0,0.10); object-fit: cover; display: block; } .v-btn-bundle { background: linear-gradient(135deg,#FFD700 0%,#FFA500 100%) !important; color: #1D1D1F !important; font-weight: 800 !important; border: 1px solid #FFA500 !important; } .v-btn-bundle:hover { background: linear-gradient(135deg,#FFE55C 0%,#FF8C00 100%) !important; } /* ====== Kog 21:48 v61: After pay VIP member banner ====== */ .vip-member-banner { background: linear-gradient(135deg,#FFD700 0%,#FFA500 100%); color: #1D1D1F; padding: 16px 20px; border-radius: 14px; margin-bottom: 16px; text-align: center; font-weight: 700; font-size: 16px; box-shadow: 0 8px 24px rgba(255,165,0,0.30); border: 1px solid #FFA500; } .vip-member-banner-icon { font-size: 24px; margin-right: 8px; vertical-align: middle; } /* Kog 9/7 17:39 v57: 删 .v-btn .apple-logo + .v-btn-tag + .v-m-chip (Kog 17:32 锅, Adobe 极简不要 Apple logo/pkg tag/M标) */ /* ===== Modal (Win / Mac 弹窗) ===== */ /* ===== Features (2 列图文卡, Apple Sonoma 一致风格) ===== */ .features-section { background: #F5F5F7; } .feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .feature-card { background: #FFFFFF; border: none; border-radius: 14px; padding: 28px; display: flex; gap: 20px; align-items: flex-start; transition: all 0.25s; box-shadow: 0 1px 3px rgba(0,30,54,0.04); } .feature-card:hover { border-color: var(--primary-light); box-shadow: 0 8px 24px rgba(0,30,54,0.08); transform: translateY(-2px); } .feature-img { width: 100%; max-width: 200px; height: 130px; object-fit: cover; border-radius: 14px; flex-shrink: 0; background: linear-gradient(135deg, #E3F2FD 0%, #F5F5F7 100%); display: flex; align-items: center; justify-content: center; } .feature-img-emoji { font-size: 56px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.10)); } .feature-body { flex: 1; } .feature-title { font-size: 18px; font-weight: 600; margin-bottom: 10px; color: var(--ink); letter-spacing: -0.3px; } .feature-desc { font-size: 15px; color: var(--text-muted); line-height: 1.55; } /* ===== Scene (6 场景, Apple Sonoma 一致风格) ===== */ .scene-section { background: #FFFFFF; padding-top: 0 } .scene-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .scene-item { display: flex; gap: 14px; padding: 24px 26px; background: #F5F5F7; border: none; border-radius: 14px; align-items: flex-start; transition: all 0.2s; } .scene-item:hover { background: #ECECEF; transform: translateY(-2px); } .scene-num { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: center; } .scene-name { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 4px; letter-spacing: -0.2px; } .scene-desc { font-size: 14px; color: var(--text-muted); line-height: 1.55; } /* ===== Kog 9/7 17:39 v57 探索功能 4 宫格 (Kog 14:18 + 14:33 K哥 拍过) ===== */ .features-explore-section { padding: 0 0 64px; background: #FFFFFF; } /* features-explore-section 容器继承全局 .container (v86 全局对齐) */ .features-explore-section .section-title { font-size: 36px; font-weight: 800; color: var(--ink); text-align: center; margin: 0 0 12px; letter-spacing: -0.5px; } .features-explore-section .section-subtitle { font-size: 17px; font-weight: 500; color: var(--ink-2); text-align: center; margin: 0 auto 36px; max-width: 720px; letter-spacing: 0.1px; } .features-explore-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .features-explore-card { background: #FFFFFF; border: 1px solid #EAEAEC; border-radius: 14px; overflow: hidden; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; display: flex; flex-direction: column; } .features-explore-img { position: relative; } .features-explore-chip { position: absolute; left: 14px; bottom: 14px; background: rgba(0, 0, 0, 0.78); color: #FFFFFF; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; letter-spacing: 0.2px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); line-height: 1.2; } .features-explore-card:hover { box-shadow: 0 8px 24px rgba(0,30,54,0.08), 0 4px 8px rgba(0,0,0,0.06); transform: translateY(-4px); border-color: #D5D5DC; } .features-explore-img { width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #F5F5F7; } .features-explore-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .features-explore-card:hover .features-explore-img img { transform: scale(1.05); } .features-explore-info { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 2px; } .features-explore-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; } .features-explore-desc { flex: 1; } .features-explore-name { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.2px; } .features-explore-desc { font-size: 13px; color: var(--text-muted); line-height: 1.3; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .features-explore-link { font-size: 13px; color: #007AFF; text-decoration: none; font-weight: 600; letter-spacing: 0.1px; transition: gap 0.2s; display: inline-flex; align-items: center; white-space: nowrap; } .features-explore-link:hover { text-decoration: underline; } @media (max-width: 1024px) { .features-explore-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .features-explore-grid { grid-template-columns: 1fr; } .features-explore-section .section-title { font-size: 28px; } } /* ===== Modal (Win / Mac 弹窗) ===== */ /* ===== Features (2 列图文卡, Apple Sonoma 一致风格) ===== */ .features-section { background: #F5F5F7; } .feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .feature-card { background: #FFFFFF; border: none; border-radius: 14px; padding: 28px; display: flex; gap: 20px; align-items: flex-start; transition: all 0.25s; box-shadow: 0 1px 3px rgba(0,30,54,0.04); } .feature-card:hover { border-color: var(--primary-light); box-shadow: 0 8px 24px rgba(0,30,54,0.08); transform: translateY(-2px); } .feature-img { width: 100%; max-width: 200px; height: 130px; object-fit: cover; border-radius: 14px; flex-shrink: 0; background: linear-gradient(135deg, #E3F2FD 0%, #F5F5F7 100%); display: flex; align-items: center; justify-content: center; } .feature-img-emoji { font-size: 56px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.10)); } .feature-body { flex: 1; } .feature-title { font-size: 18px; font-weight: 600; margin-bottom: 10px; color: var(--ink); letter-spacing: -0.3px; } .feature-desc { font-size: 15px; color: var(--text-muted); line-height: 1.55; } /* ===== Scene (6 场景, Apple Sonoma 一致风格) ===== */ .scene-section { background: #FFFFFF; padding-top: 0 } .scene-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .scene-item { display: flex; gap: 14px; padding: 24px 26px; background: #F5F5F7; border: none; border-radius: 14px; align-items: flex-start; transition: all 0.2s; } .scene-item:hover { background: #ECECEF; transform: translateY(-2px); } .scene-num { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: center; } .scene-name { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 4px; letter-spacing: -0.2px; } .scene-desc { font-size: 14px; color: var(--text-muted); line-height: 1.55; } /* ===== FAQ (Apple Sonoma 一致风格) ===== */ .faq-section { background: #F5F5F7; padding: 64px 0; } .faq-list { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 30px; padding: 0 20px; box-sizing: border-box; } .faq-item { background: #FFFFFF; border: 1px solid #e9ecef; border-radius: 12px; padding: 20px 22px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); transition: all 0.3s ease; } .faq-item:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); transform: translateY(-2px); } .faq-q { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: #000000; font-weight: 700; font-size: 20px; line-height: 26px; margin: 0 0 10px 0; } .faq-a { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: #333333; font-size: 16px; line-height: 26px; margin: 0; font-weight: 400; } .faq-a strong { color: #333333; font-weight: 400; } /* ===== Reviews (Apple Store 评论风格: 白底 + 头像 + 5 星) ===== */ .reviews-section { background: #FFFFFF; padding-top: 0 } .review-viewport { position: relative; overflow: hidden; padding: 4px 16px 16px; margin: 0 -16px; } .review-grid { display: flex; gap: 20px; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .review-grid:hover { cursor: default; } .review-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.95); color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; font-size: 18px; line-height: 1; font-weight: 500; box-shadow: 0 2px 8px rgba(0,30,54,0.08); z-index: 2; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; } .review-viewport:hover .review-arrow { opacity: 1; } .review-arrow:hover { background: #FFFFFF; border-color: #D5D5DC; } .review-arrow:disabled { opacity: 0 !important; cursor: not-allowed; pointer-events: none; } .review-arrow.review-prev { left: -8px; } .review-arrow.review-next { right: -8px; } .review-card { position: relative; background: #FFFFFF; border: 1px solid var(--border); border-radius: 14px; padding: 24px 26px 22px; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; box-shadow: 0 1px 3px rgba(0,30,54,0.04); display: flex; flex-direction: column; gap: 12px; flex: 0 0 320px; min-width: 320px; max-width: 320px; } .review-card:hover { box-shadow: 0 8px 24px rgba(0,30,54,0.08); transform: translateY(-4px); border-color: #D5D5DC; } .review-card-header { display: flex; align-items: center; gap: 12px; } .review-avatar { width: 40px; height: 40px; border-radius: 50%; background: #F5F5F7; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--ink); font-size: 15px; font-weight: 600; flex-shrink: 0; } .review-meta { flex: 1; min-width: 0; } .review-name { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.3; } .review-tag { display: inline-block; color: var(--text-muted); font-size: 13px; font-weight: 400; line-height: 1.4; margin-top: 2px; } .review-stars-row { display: flex; align-items: center; justify-content: space-between; } .review-stars { color: var(--rating); font-size: 14px; letter-spacing: 2px; line-height: 1; } .review-date { font-size: 12px; color: var(--text-muted); font-weight: 500; } .review-text { font-size: 14.5px; color: var(--ink-2); line-height: 1.7; font-weight: 400; flex: 1; } .review-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; margin-top: 4px; border-top: 1px solid #F0F0F3; } .review-verified { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); font-weight: 500; } .review-verified::before { content: "\2713"; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; color: var(--ink); font-size: 11px; font-weight: 700; } .review-views { font-size: 12px; color: var(--text-muted); font-weight: 500; } /* ===== 安装教程 (Mac UA 支付成功后显示, 替换原"屏 4 安装步骤") ===== */ .install-guide-section { background: #F5F5F7; padding: 0 0 60px; } .install-guide-card { background: #fff; border-radius: 14px; padding: 32px; max-width: 760px; margin: 0 auto; box-shadow: 0 4px 20px rgba(0,0,0,0.06); } .install-guide-card h3 { font-size: 24px; font-weight: 700; color: var(--ink); margin-bottom: 18px; text-align: center; letter-spacing: -0.4px; } .install-guide-link { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--bg-soft-2); border: 1px solid var(--primary-light); border-radius: 12px; text-decoration: none; color: inherit; margin-bottom: 16px; transition: all .2s; } .install-guide-link:hover { background: #fff; box-shadow: var(--primary-shadow); transform: translateY(-2px); } .install-guide-link-icon { font-size: 28px; } .install-guide-link-text { flex: 1; } .install-guide-link-title { display: block; font-size: 15px; font-weight: 600; color: var(--ink); } .install-guide-link-sub { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; } .install-guide-link-arrow { color: var(--primary); font-size: 20px; font-weight: 700; } .install-guide-tips { background: var(--bg-soft-2); border-radius: 12px; padding: 16px; font-size: 13px; line-height: 1.8; color: var(--text-muted); } .install-guide-tips strong { color: var(--ink); font-weight: 600; } .install-guide-done { display: block; width: 100%; margin-top: 14px; padding: 12px; background: var(--primary); color: #fff; border: none; border-radius: 999px; font-size: 15px; font-weight: 500; cursor: pointer; } .install-guide-done:hover { background: var(--primary-dark); } /* ============ CC Promo (Kog 9/9 14:08 K哥 拍: PS 单页底部加 Adobe Creative Cloud 推广区) ============ */ .cc-promo-section { background: #FFFFFF; padding: 88px 0 96px; text-align: center; border-top: 1px solid rgba(0,0,0,0.06); } .cc-promo-section[data-os-only="mac"] { padding-bottom: 0; } .cc-promo-section[data-os-only="mac"] .cc-promo-desc { margin-bottom: 0; } .cc-promo-section[data-os-only="win"] { padding-bottom: 0; } .cc-promo-section[data-os-only="win"] .cc-promo-desc { margin-bottom: 0; } .cc-promo-inner { max-width: 720px; margin: 0 auto; padding: 0 24px; } .cc-promo-logo { margin: 0 auto 28px; display: inline-block; line-height: 0; } .cc-promo-title { font-size: 32px; font-weight: 800; color: #1D1D1F; margin: 0 0 16px; letter-spacing: -0.3px; } .cc-promo-desc { font-size: 16px; font-weight: 400; color: #6E6E73; line-height: 1.6; margin: 0 auto 32px; max-width: 580px; } .cc-promo-cta { display: inline-block; background: #007AFF; color: #FFFFFF; font-size: 17px; font-weight: 600; padding: 16px 48px; border-radius: 999px; text-decoration: none; transition: all 0.2s ease; box-shadow: 0 4px 16px rgba(0,122,255,0.25); } .cc-promo-cta:hover { background: #0066D6; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,122,255,0.35); } .cc-promo-cta:active { transform: translateY(0); } @media (max-width: 768px) { .cc-promo-section { padding: 64px 0; } .cc-promo-title { font-size: 26px; } .cc-promo-desc { font-size: 15px; } .cc-promo-cta { font-size: 16px; padding: 14px 36px; } } /* ===== Footer (Apple 极简一致风格) ===== */ .footer { background: #F5F5F7; padding: 64px 0; border-top: 1px solid var(--border); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 32px; } .footer-brand { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 10px; } .footer-sub { font-size: 13px; color: var(--text-muted); max-width: 280px; line-height: 1.55; } .footer-title { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 12px; } .footer-link { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 8px; transition: color 0.2s; } .footer-link:hover { color: var(--ink); } .footer-bottom { border-top: 1px solid var(--border); padding-top: 22px; text-align: center; font-size: 12px; color: var(--text-muted); } /* ===== Kog 16:43 拍: 我现在都是 Windows 上测试. Win UA → Win 按钮, Mac UA → Mac 按钮 ===== */ .hero-cta-win, .nav-btn.hero-cta-win { display: inline-flex !important; } /* 7/19 设计破, Win 按钮 default visible */ .hero-cta-mac { display: inline-flex !important; } /* Mac 按钮 default visible */ body.is-win .hero-cta-mac { display: none !important; } /* Win UA 隐藏 Mac 按钮 */ body.is-mac .hero-cta-win { display: none !important; } /* Mac UA 隐藏 Win 按钮 */ /* ===== 自适应 (Win/Mac UA 切换, rule 118 兼容 CSS !important) ===== */ body.is-win .mac-only { display: none !important; } body.is-mac .win-only { display: none !important; } /* Kog 9/16 17:50 K哥 拍: PS 单页同地址自适应 UA (v180) */ body[data-os="mac"] [data-os-only="win"] { display: none !important; } body[data-os="win"] [data-os-only="mac"] { display: none !important; } body.is-mac .win-only { display: none !important; } body.is-win .hero-cta-mac { display: none !important; } body.is-mac .hero-cta-win { display: none !important; } /* ===== Mac 流程区 (跟 /adobe/mac/ 1:1) ===== */ .pay-bar { position: sticky; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(0,0,0,0.06); padding: 14px 0; z-index: 50; } .pay-bar-inner { max-width: 1000px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .pay-bar-info { display: flex; align-items: center; gap: 12px; } .pay-bar-label { color: var(--text-muted); font-size: 14px; } .pay-bar-name { font-weight: 700; font-size: 16px; color: var(--ink); } .pay-bar-year { color: var(--text-muted); font-size: 14px; } .pay-bar-actions { display: flex; align-items: center; gap: 14px; } .pay-bar-price { font-size: 24px; font-weight: 800; color: var(--primary); } .pay-bar-btn { padding: 10px 24px; background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 50%, #6D28D9 100%); color: #fff; border-radius: 8px; border: none; font-size: 15px; font-weight: 700; cursor: pointer; } .pay-bar-btn:hover { background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 50%, #6D28D9 100%); } .pay-bar-btn:disabled { background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 50%, #6D28D9 100%); cursor: not-allowed; } .pay-input { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 15px; font-family: inherit; outline: none; box-sizing: border-box; } .pay-input:focus { border-color: var(--primary); } .pay-btn-primary { width: 100%; padding: 12px; background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 50%, #6D28D9 100%); color: #fff; border-radius: 8px; border: none; font-size: 15px; font-weight: 700; cursor: pointer; } .pay-btn-primary:hover { background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 50%, #6D28D9 100%); } .pay-btn-primary:disabled { background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 50%, #6D28D9 100%); cursor: not-allowed; } .pay-btn-secondary { width: 100%; padding: 12px; background: var(--bg-soft); color: var(--ink); border-radius: 8px; border: 1px solid var(--border); font-size: 15px; font-weight: 600; cursor: pointer; } .pay-btn-secondary:hover { background: var(--border); } .version-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: 14px; } .version-option { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; transition: all .15s; } .version-option:hover { border-color: var(--primary); } .version-option.selected { border-color: var(--primary); background: rgba(0,30,54,0.04); } .version-option-name { font-size: 14px; font-weight: 700; color: var(--ink); } .version-option-year { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .version-option-price { font-size: 15px; font-weight: 800; color: var(--primary); } .pay-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 20px 20px 20px; } .pay-mask[hidden] { display: none !important; } /* v214 Kog 19:23 拍: 我的订单弹窗 1:1 集合页 v208 (同步到 10 个单页面) */ .modal-mask { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; } .modal { background: #fff; color: var(--ink); border-radius: 14px; padding: 24px; width: 640px; max-width: 90vw; max-height: 80vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .modal-wide { width: 760px; } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .modal-header span { font-size: 18px; font-weight: 700; color: var(--ink); } .modal-close-x { background: #F5F5F7; color: var(--ink); border: none; padding: 4px 10px; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; } .modal-body { padding: 0; } .order-query-form { display: flex; gap: 10px; margin-bottom: 16px; } .order-input { flex: 1; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; color: var(--ink); background: #fff; font-family: inherit; } .order-input:focus { outline: 2px solid var(--ink); border-color: var(--ink); } .action-btn-primary { padding: 10px 20px; background: var(--ink); color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; } .action-btn-primary:disabled { background: var(--border-2); cursor: not-allowed; } .order-result { margin-top: 8px; } .order-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; } .order-table tr { border-bottom: 1px solid var(--border); } .order-table tr:last-child { border-bottom: none; } .order-table th { text-align: left; padding: 10px 12px; color: var(--ink-3); font-weight: 500; background: var(--bg-soft); } .order-table td { padding: 10px 12px; color: var(--ink); word-break: break-all; } .order-status-tag { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; } .order-status-tag.order-status-paid { background: #ecfdf5; color: #10b981; } .order-status-tag.order-status-pending { background: #fffbeb; color: #f59e0b; } .order-download-btn { background: var(--ink); color: #fff; border: none; padding: 4px 12px; border-radius: 8px; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; min-width: 60px; } .order-download-btn:hover { background: var(--ink-2); } .pay-modal { background: #fff; border-radius: 14px; width: 100%; max-width: 420px; max-height: 95vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.25); } .pay-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--border); font-size: 16px; font-weight: 700; } .pay-modal-close { background: none; border: none; font-size: 22px; color: var(--text-muted); cursor: pointer; line-height: 1; padding: 0; } .pay-modal-body { padding: 22px; } .qrcode-area { text-align: center; display: flex; flex-direction: column; align-items: center; } .qrcode-img { display: block; width: 220px; height: 220px; border: 1px solid var(--border); border-radius: 12px; margin: 0 auto 10px; } .qrcode-status { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; } /* ===== Responsive ===== */ @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; gap: 36px; } .hero-title { font-size: 48px; letter-spacing: -1px; } .hero-desc { font-size: 17px; } .hero-title { font-size: 38px; } .version-grid { grid-template-columns: repeat(2, 1fr); } .feature-grid { grid-template-columns: 1fr; } .scene-grid { grid-template-columns: 1fr; } .review-grid { gap: 16px; } .review-card { flex: 0 0 calc(100vw - 80px); min-width: calc(100vw - 80px); max-width: calc(100vw - 80px); padding: 20px 22px 18px; gap: 10px; } .review-avatar { width: 38px; height: 38px; font-size: 16px; } .review-name { font-size: 14px; } .review-tag { font-size: 10px; padding: 2px 7px; } .review-text { font-size: 13.5px; line-height: 1.6; } .review-text::before { font-size: 24px; top: -2px; } .footer-grid { grid-template-columns: 1fr; gap: 28px; } .nav-links { display: none; } } /* v150 format no plus (Kog 23:24 拍) */ #ordersMask .pay-modal { max-width: 560px; } /* v142 versions section padding-top 减半 (Kog 22:43 拍 上面留白太多) */ /* v143 version card year 加大 (Kog 22:46 拍 年份加大一点) */ .v-year { font-size: 20px; font-weight: 700; margin: 0 8px; } /* ===== Cross-link Grid (单页底部相关推荐) ===== */ .crosslink-section { background: #FFFFFF; padding: 0 0 80px; } .crosslink-header { text-align: center; margin-bottom: 40px; } .crosslink-header .section-title { font-size: 32px; font-weight: 800; color: #1D1D1F; letter-spacing: -0.5px; margin: 0 0 12px; } .crosslink-header .section-subtitle { font-size: 16px; font-weight: 400; color: #6E6E73; line-height: 1.5; margin: 0; } .crosslink-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; max-width: 1080px; margin: 0 auto; padding: 0 24px; } .crosslink-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 16px; background: #FFFFFF; border: 1px solid #E5E5EA; border-radius: 14px; text-decoration: none; color: inherit; transition: all 0.2s ease; } .crosslink-card:hover { border-color: #007AFF; transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,122,255,0.12); } .crosslink-icon { width: 56px; height: 56px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; } .crosslink-name { font-size: 16px; font-weight: 700; color: #1D1D1F; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; } .crosslink-page-tag { font-size: 11px; font-weight: 500; color: #FFFFFF; background: #8E8E93; padding: 2px 8px; border-radius: 8px; } .crosslink-desc { font-size: 12px; font-weight: 400; color: #6E6E73; line-height: 1.5; } .crosslink-current { background: #F5F5F7; border-color: #D1D1D6; cursor: default; } /* ====== Kog 21:36 v60: VIP 会员 chip (金色高亮) ====== */ .kw-chip-vip { background: linear-gradient(135deg,#FFD700 0%,#FFA500 100%) !important; color: #1D1D1F !important; border: 1px solid #FFA500 !important; font-weight: 700 !important; box-shadow: 0 4px 12px rgba(255,165,0,0.20) !important; cursor: pointer !important; } .kw-chip-vip:hover { background: linear-gradient(135deg,#FFE55C 0%,#FF8C00 100%) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(255,165,0,0.35) !important; } .crosslink-current:hover { border-color: #D1D1D6; transform: none; box-shadow: none; } @media (max-width: 900px) { .crosslink-grid { grid-template-columns: repeat(3, 1fr); } .crosslink-header .section-title { font-size: 26px; } } @media (max-width: 600px) { .crosslink-grid { grid-template-columns: repeat(2, 1fr); } } /* v160 K哥 22:06: hidden 属性优先级 > 内联 style */ [hidden] { display: none !important; } /* v159 Mac 风格 mask 显示时 flex */ #downloads-mask:not([hidden]), #install-progress-mask:not([hidden]) { display: flex !important; align-items: center; justify-content: center; } html:not(.is-mac):not(.is-win) [data-os-only="mac"], html:not(.is-mac):not(.is-win) [data-mac-only] { display: none !important; } h1{word-break:keep-all;overflow-wrap:break-word;} /* Mac: 价格更醒目(重点页面体验) */ body.is-mac .v-price { font-weight: 700; color: var(--ink); } /* ===== V44s_price v3 (2026-10-05 客户定) ===== Windows 页: 不显示任何价格(价格在工具里 -> 转化更多、百度推流更多) Mac 页: 显示价格, 且更醒目(Mac 是同业空白, 重点做体验与下单率) */ body.is-win .v-price, body.is-win .pay-bar-price, body.is-win #payBarPriceWin, body.is-win [data-price-os="win"] { display: none !important; } body.is-mac .v-price, body.is-mac .pay-bar-price, body.is-mac #payBarPrice { display: block; } body.is-mac .v-price { font-weight: 700; color: var(--ink); } /* V44s_price v3b: Windows 下【所有价格类元素】统一隐藏(比逐个点名更稳) —— Mac 不动 ✓ */ body.is-win [class*="price" i], body.is-win [id*="price" i] { display: none !important; } /* V44s_price v5 (客户标准: Windows 第一眼不该看到任何"钱"的痕迹) -> 价格藏了但支付条/支付按钮还在 = 还是钱的痕迹 ✗ -> 整条隐藏 ✓ 容器类名以实测为准: .pay-bar / .pay-bar-wrap / [id^="payBar"] 等 */ body.is-win .pay-bar, body.is-win .pay-bar-wrap, body.is-win .paybar, body.is-win [id^="payBar"], body.is-win [class*="pay-bar"]:not(.pay-bar-price), body.is-win .v-price-bundle, body.is-win .version-option-price { display: none !important; } /* ===== V44s_price v6: A/B 开关(仅对比用; 默认=现状: Windows 藏 / Mac 显) ===== */ html.price-off [class*="price" i], html.price-off [id*="price" i] { display: none !important; } html.price-on body.is-win [class*="price" i], html.price-on body.is-win [id*="price" i], html.price-on body.is-win .pay-bar, html.price-on body.is-win [class*="pay-bar"] { display: revert !important; } /* ===== V44s_btn v2 (默认黑白 ✓ 客户定) —— 补齐【悬停/按下/禁用】反馈 ✓ ===== ★ 上一版的问题: :hover 与常态写了同一套样式 -> 鼠标悬停【零反馈】✗ (客户发现) ; 且 :disabled 也被涂成黑色 -> 禁用态看着像可点 ✗ */ .v-btn:not(.v-btn-bundle), .pay-bar-btn, .pay-btn-primary, .order-download-btn { background: linear-gradient(135deg, #2D2D2F 0%, #0A0A0B 100%) !important; color: #fff !important; border-color: #2D2D2F !important; box-shadow: 0 4px 14px rgba(0,0,0,0.25) !important; transition: background .18s ease, box-shadow .18s ease, transform .18s ease !important; } /* 悬停: 变亮一档 + 投影加深 + 上浮 1px (与主站 Mac CTA 的 hover 逻辑一致: 投影加深 ✓) */ .v-btn:not(.v-btn-bundle):hover, .pay-bar-btn:hover, .pay-btn-primary:hover, .order-download-btn:hover { background: linear-gradient(135deg, #3A3A3C 0%, #1D1D1F 100%) !important; box-shadow: 0 8px 22px rgba(0,0,0,0.35) !important; transform: translateY(-1px) !important; } /* 按下: 回落 */ .v-btn:not(.v-btn-bundle):active, .pay-bar-btn:active, .pay-btn-primary:active, .order-download-btn:active { transform: translateY(0) !important; box-shadow: 0 3px 10px rgba(0,0,0,0.28) !important; } /* 禁用: 灰(不再黑), 且去掉悬停效果 ✓ */ .pay-bar-btn:disabled, .pay-btn-primary:disabled { background: #C7C7CC !important; color: #fff !important; box-shadow: none !important; cursor: not-allowed !important; transform: none !important; } /* ?btn=grad -> 切回紫渐变(含 hover), 供货比对比 ✓ */ html.btn-grad .v-btn:not(.v-btn-bundle), html.btn-grad html.btn-grad .pay-bar-btn, html.btn-grad .pay-btn-primary, html.btn-grad .order-download-btn, html.btn-grad .topbar-btn { background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 50%, #6D28D9 100%) !important; border-color: #6D28D9 !important; box-shadow: 0 4px 14px rgba(124,58,237,0.30) !important; } html.btn-grad .v-btn:not(.v-btn-bundle):hover, html.btn-grad html.btn-grad .pay-bar-btn:hover, html.btn-grad .pay-btn-primary:hover, html.btn-grad .order-download-btn:hover, html.btn-grad .topbar-btn:hover { background: #6D28D9 !important; box-shadow: 0 8px 22px rgba(124,58,237,0.42) !important; transform: translateY(-1px) !important; } /* ---- 候选 A: 收窄居中(?btn=narrow) —— 满宽 -> 居中中等宽度, 视觉重量立刻下降 ✓ ---- */ .v-btn:not(.v-btn-bundle) { /* ★ 收窄居中 = 默认(客户 2026-10-05 选 A) */ width: auto !important; min-width: 128px !important; align-self: center !important; padding-left: 26px !important; padding-right: 26px !important; margin-left: auto !important; margin-right: auto !important; } /* ---- 候选 B: 描边式(?btn=outline) —— 白底黑边黑字, 重量最轻; 悬停填充为黑 ✓ ---- */ html.btn-outline .v-btn:not(.v-btn-bundle) { background: #FFFFFF !important; color: #1D1D1F !important; border: 1.5px solid #1D1D1F !important; box-shadow: none !important; } html.btn-outline .v-btn:not(.v-btn-bundle):hover { background: #1D1D1F !important; color: #FFFFFF !important; box-shadow: 0 6px 18px rgba(0,0,0,0.22) !important; transform: translateY(-1px) !important; } html.btn-full .v-btn:not(.v-btn-bundle) { width: 100% !important; min-width: 0 !important; align-self: stretch !important; padding-left: 14px !important; padding-right: 14px !important; } /* VIP 金色按钮保持在最后(不被上面规则压掉 ✓) */ .v-btn-bundle, .v-btn-bundle:hover { background: linear-gradient(135deg,#FFD700 0%,#FFA500 100%) !important; color:#1D1D1F !important; } /* TOPBAR_RESTORE (2026-10-05 客户: "顶部的按钮你改黑干嘛") —— 顶栏按钮恢复改前原样 ✓ */ .topbar-btn { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 6px 12px !important; font-size: 13px !important; color: var(--ink-3) !important; cursor: pointer !important; border: 1px solid transparent !important; background: none !important; !important; } .topbar-btn:hover { background: var(--bg-soft-2) !important; border-color: var(--border) !important; color: var(--ink) !important; !important; } /* ===== MACFIX 20261005: Mac branch version-card grid lock ===== * Symptom (client): on Mac the content is too full left/right and at * narrower viewports it runs to / past the screen edges, producing a * horizontal scrollbar. The Windows branch renders correctly. * Root cause: .version-card is a grid item of .version-grid (display:grid). * A grid item's default min-width:auto resolves to its content-based * minimum, so the '1fr' tracks (== minmax(auto,1fr)) cannot shrink below * the min-content width of the cards. The Mac version strings * (.v-name / .v-system are white-space:nowrap) are much longer than the * Windows ones, so the tracks get stretched: card text nearly touches the * card edges, columns become uneven, and below ~1100px the total track * width exceeds .container -> documentElement.scrollWidth > clientWidth * (horizontal overflow). Windows strings are short and never trigger it. * Fix (Mac only; no breakpoint, column-count or copy change): let the grid * items shrink to their track, keep the long card text inside the card, and * let .v-name wrap. .v-name already reserves min-height:2.6em, so the card * height does not change. * Windows UA never matches body.is-mac -> zero impact on Windows. * ===== */ body.is-mac .version-grid > .version-card { min-width: 0; } body.is-mac .version-grid > .version-card .v-name, body.is-mac .version-grid > .version-card .v-system { max-width: 100%; } /* .v-name is a flex box, so text-overflow:ellipsis does not apply to its text and an over-long name would be clipped on BOTH sides; wrapping keeps the whole name visible (the 2.6em reservation already covers two lines). */ body.is-mac .version-grid > .version-card .v-name { white-space: normal; } /* ===== VCARDH 20261005: 版本卡(.version-card)高度收紧 ===== * 症状(客户): 单页(/adobe//)的版本卡在加了价格后"看上去很高"。 * 实测(1440 视口, Mac): 版本卡 308.52px, 全家桶卡 312.52px。 * 拆项: padding 18+18 | icon 64+14 | v-name 41.6+4 | v-system 31.44+12 * | v-size 16.8+8 | v-price 29.69+10 | v-btn 41 * 多出来的高度有两条来源: * (1) .v-name 固定 min-height:2.6em = 41.6px(两行预留), 但实测版本名 * (如 "Photoshop 2026 For Mac") 在 1440/1280/1100/900/768 下只占 1 行 * (内容高 20.8px) -> 每张卡白占约 20.8px 空行。窄屏(<=1024)名字换成 2 行 * 时盒子会自动长回 41.6px, 所以改小 min-height 不会裁字/丢字。 * (2) .v-price 没设 line-height, 继承 body 的 1.65 -> 18px 字号的行盒 29.7px, * 再加 margin-bottom:10px: 价格一行吃掉 39.7px(卡高 +14.8%), 这就是 * "加了价格后看上去很高"的直接原因。 * 处理(仅排版, 文案/结构/栅格列数/断点一律不动): * · 版本名按实际行数占高: min-height 2.6em -> 1.3em(1 行), 换行时自动增高不裁字 * · 价格行盒 line-height 1.65 -> 1.25, margin-bottom 10px -> 6px * · 卡片上下内边距 18px -> 14px, 图标下间距 14px -> 10px * Mac 与 Windows 同款卡都收紧(两边都有那 20.8px 空行); 实测无横向溢出, 无裁切。 */ .version-grid > .version-card { padding-top: 14px; padding-bottom: 14px; } .version-grid > .version-card .v-icon { margin-bottom: 10px; } .version-grid > .version-card .v-name { min-height: 1.3em; } .version-grid > .version-card .v-price { line-height: 1.25; margin-bottom: 6px; } /* ===== VCARDUI2 20261005: 版本卡「悬浮立体」 (客户 2026-10-05 参考图) ===== 目标: 白底卡片 + 柔和藏青调投影 = 明显"浮起来"; 同时弱化"描边"以便投影唱主角 (避免"描边 + 投影"同时重 -> 显脏)。 ★ 不动按钮配色/尺寸 (客户待定) ★ 不动价格字重 (参考图价格即加粗) ★ 不动任何文案/数字 ★ box-shadow 不参与布局 -> 卡片高度不变 (实测 Mac 269.73 / Win 241.23 前后一致) */ .version-grid > .version-card { border-color: #F2F3F5 !important; /* 原 #D2D2D7 描边 -> 近白, 弱化到几乎只剩投影 */ box-shadow: 0 4px 12px rgba(0,30,54,0.08), 0 16px 40px rgba(0,30,54,0.16) !important; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease !important; } /* hover: 投影加深 + 上浮 2px (与站内主 CTA 的 hover 语言一致) */ .version-grid > .version-card:hover { border-color: #E8EAEE !important; box-shadow: 0 6px 16px rgba(0,30,54,0.12), 0 22px 54px rgba(0,30,54,0.22) !important; transform: translateY(-2px) !important; } /* 全家桶(VIP)卡: 金色描边保留(身份标识), 投影分两档, 与普通卡同一套"悬浮"逻辑 */ .version-grid > .version-card.bundle { border-color: #F59E0B !important; box-shadow: 0 4px 12px rgba(245,158,11,0.18), 0 16px 40px rgba(245,158,11,0.26) !important; } .version-grid > .version-card.bundle:hover { border-color: #D97706 !important; box-shadow: 0 6px 16px rgba(245,158,11,0.24), 0 22px 54px rgba(245,158,11,0.34) !important; } /* 图标: 去掉外层灰底圆角方块(图标自带的蓝/渐变底色保留) -> 少一层视觉噪音; 万一图片加载失败走 emoji 兜底, 仍给一层浅底, 避免图标"裸奔" */ .version-grid > .version-card .v-icon { background: transparent !important; border-radius: 0 !important; } .version-grid > .version-card .v-icon:has(.v-icon-emoji) { background: #F5F5F7 !important; border-radius: 8px !important; } /* ===== VCARDUI3 20261005: 版本卡按钮 -> 蓝色实心 #007AFF (客户选 ⓐ, 照参考图) ===== 色来源: 站内既有强调蓝 #007AFF (即 --primary-light, 不引入新色); hover 深一档 #0066CC (客户指定)。圆角 8px / 尺寸 / 内边距 / 字重 一律不动 -> 卡高不变 ✓ ★ 只作用于「版本卡里的按钮」(.version-grid > .version-card .v-btn), 且 :not(.v-btn-bundle) -> ① VIP 金色按钮不受影响 (规则 2309 行原位保留, 且此处显式排除) -> ② 首屏主 CTA (.hero-cta-mac / .hero-cta-win / .topbar-btn) 完全未触碰, 仍黑白 ✓ 选择器特异性 (0,6,0) > 现有 .v-btn:not(.v-btn-bundle) (0,3,0) -> 稳定生效 */ .version-grid > .version-card .v-btn:not(.v-btn-bundle) { background: #007AFF none !important; color: #FFFFFF !important; border: none !important; /* 不加边框: 避免 1px 边框把按钮撑高 2px -> 卡高不变 ✓ */ box-shadow: none !important; } .version-grid > .version-card .v-btn:not(.v-btn-bundle):hover { background: #0066CC none !important; color: #FFFFFF !important; box-shadow: 0 6px 16px rgba(0,122,255,0.32) !important; transform: translateY(-1px) !important; } .version-grid > .version-card .v-btn:not(.v-btn-bundle):active { background: #0059B3 none !important; transform: translateY(0) !important; } /* ===== VCARDUI4 20261005: 软件卡收窄 + 卡内左右留白收紧 ===== 客户: "软件卡修窄一点, 软件卡里面的内容左右留白太多了" 实测改前: 子页 .version-grid 1152px / 卡 274.5px / 卡内左右 padding 各 14px (合计 28px); 主站 .version-grid 1102px / 卡 262px / 同上。 ★ 做法: ① 整排上限 1152 -> 1140px 且居中 (卡片 274.5 -> 271.5px, 主站 262 -> 261.5px) ② 卡内左右 padding 14 -> 10px (每张卡左右各少 4px, 合计 -8px) ★ 为什么是 1140 而不是更窄(1080): 版本名是内容最宽项, /adobe/me/ 的 "Media Encoder 2026 For Mac" 实测需要 237px, 在 max-width:1080 + padding:10 时 可用宽只有 235px -> 版本名换 2 行 -> 卡高 269.73 -> 285.33px (违反"不许变高")。 1140+10 时可用 250px, 余量 13px; 全 12 页 × Mac/Win × 1440/1024 实测卡高均未增加 ✓ ★ 不动: 按钮(尺寸/配色)、价格、系统胶囊字号、卡片圆角/投影、任何文案数字 ✓ */ .version-grid { max-width: 1140px !important; margin-left: auto !important; margin-right: auto !important; } .version-grid > .version-card { padding-left: 10px !important; padding-right: 10px !important; } /* ===== GRIDSPACE2 20261005-START ========================================= 版本卡网格: 列间距加大 + 断点修复 + 系统行降权重 客户 2026-10-05 对 /adobe/ 系列版本卡网格的反馈: ①「左右留白多了一点」 ②「四张卡排列有点拥挤」 ③(另一路)「软件卡里面内容左右留白太多」 -> 已由同目录 VCARDUI4 那块处理 ④「系统行没有层次感, 要不要加灰」 ---- 关于 ①「左右留白」的实测结论 (重要, 请客户裁决) ---- VCARDUI4 把 .version-grid 上限钉在 max-width:1140px !important (为了"卡窄一点")。 横排 4 列时: 卡宽 = (行宽 - 3*间距)/4 , 所以 · 行变宽 => 卡变宽 (与"卡窄一点"相反) · 行变窄 => 卡变窄, 但两侧留白变多 (与"留白少一点"相反) => 在 4 列 + 卡高不许变(版本名不许换行) 的前提下, "两侧留白更少" 与 "卡片更窄" 是【互相冲突】的两个方向。 我实测过加宽承载容器(1200->1320): 对子页【完全无效】(网格被 1140 钉住), 而且有副作用 —— 子页的版本区容器里还装着

与

, 容器一宽标题就比卡片多出 60px 偏移、不再对齐; 主站的网格在 .sw-versions-block(白底+1px 边框的可见面板)里, 容器一宽面板 1272px 而网格仍 1140px -> 面板内凭空多出 66px 死留白。 => 因此【加宽容器这条已整体撤销】, 只保留下面与"挤"直接相关的间距改动。 => 想真正同时满足"留白少 + 卡不挤", 需要改列数(如一行 3 张), 已单独出图对比。 ---- 本次实际生效的三条 ---- ② 列间距 column-gap 18 -> 24px (row-gap 显式保持 18px -> 行距/页长不受影响) ④ 断点修复 (仅 /adobe/app.css, 见文件末尾那一节) ⑥ 系统胶囊降权重 (见下) ★ 未动: 任何文案/数字、卡片 padding、min-height、圆角、字号、按钮、价格、图标 -> 卡片高度不变 (颜色与字重不参与行盒高度) ✓ ★ 作用域刻意限定在「版本卡网格」的两个祖先容器内, 不碰 /adobe/mac/ 专区页 (它自己也引用 ../app.css, 但网格不在上述祖先里)。 ========================================================================= */ /* ② 列间距加大 (行间距不变) */ section.versions-section .version-grid, .sw-versions-block .version-grid { column-gap: 24px; row-gap: 18px; } /* ⑥ 系统行(系统胶囊)降权重: 由"黑字黑框"改为"浅灰底 + 中灰字 + 近白边框" 客户: "系统行没有层次感, 要不要加灰" -> 让它在层级上明显低于版本名。 ★ border 仍保留 1px (只换颜色): 去边框会让元素矮 2px -> 违反"卡高不变" ✗ ★ 字重 700 -> 500: 只影响字宽, 不影响行盒高度 -> 卡高不变 ✓ (顺带把卡内最宽的那一行变窄, 缓解"挤"与省略号风险) 层级目标: 版本名(黑·700) > 价格(黑·700) > 系统/容量(灰·500) ✓ */ section.versions-section .version-grid > .version-card .v-system, .sw-versions-block .version-grid > .version-card .v-system { background: #F5F5F7 !important; border-color: #E8E8ED !important; color: #6E6E73 !important; font-weight: 500 !important; } /* ===== GRIDSPACE3-START 20261005: 版本网格窄屏横向溢出修复 ===== 根因(与本文件上方 MACFIX 注释同源): 网格项默认 min-width:auto 会解析成 "内容最小宽度", 于是 repeat(N,1fr) 的轨道收缩不到内容宽度以下 -> 窄视口 整行撑出视口, 出现横向滚动。MACFIX 当时只作用于 body.is-mac, 所以 Windows 分支一直带着这个缺陷, 两个分支窄屏表现不一致。 实测(Windows, 320px): 版本网格本身撑出 151px(/adobe/) 与 124px(/adobe/ps/); 同一视口 Mac 分支(已有本修复)的版本网格不再溢出, 其 94/91px 残余溢出 经定位【不来自版本网格】(来自评论区横向轮播等既有元素)。 ★ 本条对 Mac/Windows 一致生效 -> 两个分支窄屏行为统一。 ★ 桌面中性(实测依据): 1440px 下 Mac 分支本来就有 min-width:0, 其卡宽 267px 与 Windows 分支完全相同 -> 桌面轨道本来就宽于内容, 本条在 >=1280px 不改变任何渲染。 ★ 作用域: 仅版本卡网格的两个祖先容器内, 不碰 /adobe/mac/ 专区页。 ★ 可单独回滚: 删掉 GRIDSPACE3-START 到 GRIDSPACE3-END 之间即可。 */ section.versions-section .version-grid > .version-card, .sw-versions-block .version-grid > .version-card { min-width: 0; } section.versions-section .version-grid > .version-card .v-name, section.versions-section .version-grid > .version-card .v-system, .sw-versions-block .version-grid > .version-card .v-name, .sw-versions-block .version-grid > .version-card .v-system { max-width: 100%; } /* ===== GRIDSPACE3-END ===== */ /* ===== GRIDSPACE4 20261005: 窄屏横向溢出「真根因」修复 + mac 专区页系统行降权重 ===== * 背景(只读实测, 1440/1280/1024/768/600/414/390/375/360/320 十档 x Mac/Win 双 UA): * 任务书怀疑 375px 的横向溢出是 L489 .version-grid{repeat(4,1fr)} 架空断点所致。 * 实测否定了这个归因 —— computed style 显示 375px 下 .version-grid 已经是 2 列 * (上一轮 GRIDSPACE2 L775/L776 已修好该项)。残余溢出的真根因是另外三类元素: * ① .nav-inner 内的 .nav-actions: flex 行 + justify-content:space-between, * 子项 min-width:auto 不能收缩 -> Mac UA 下多出 登录/我的订单/客服 按钮, * 内容宽 438px > 375px 视口 -> 溢出 39px(/adobe/) / 36px(子页)。 * (任务书给的证据 scrollWidth=414 / 411 正好等于 .nav-actions 右边缘 * 414.3 / 411.0 —— 原始测量把导航溢出误记成了版本网格溢出。) * ② .cat-grid > .sw-card: 同样是 grid item min-width:auto -> 溢出 5px。 * ③ .feature-grid > .feature-card > .feature-body: .feature-body{flex:1} 的 * min-width:auto 使长描述撑破卡片 -> au/dc 溢出 38/27px。 * ★ 三类与 MACFIX / GRIDSPACE3 修 .version-grid 时是【同一个缺陷族】(min-width:auto), * 这里用同一套手法补完。 * * 修法(仅追加, 0 结构改动, 0 文案改动): * A. mac 专区页系统行: 与 GRIDSPACE2 ⑥ 完全同值 -> 主站本来就是这个色, 视觉零变化; * /adobe/mac/ 的 .version-grid 未被 L739 的祖先作用域覆盖, 所以此前仍是黑字黑框, * 本条补齐(胶囊底浅灰/近白边框/中灰字/字重 500)。只改颜色 -> 卡高不变。 * B. <=600px: 给 .cat-grid / .feature-grid 的 grid item 与 .feature-body 打开收缩; * .feature-body 加 overflow-wrap:anywhere 以便长词在窄屏断行(否则 min-width:0 * 仍会被 min-content 顶开, 实测 au/dc 375px 依旧 38/27px)。 * C. <=413px: 仅在此区间收紧导航的容器内边距/按钮与链接内边距/间距。 * 不隐藏任何按钮、不改字号、不改文案、不改高度(64/72px 不变), 功能完全不变。 * * ★ 宽屏(>=414px)实测完全不变: 1440/1280/1024/768/600/414 下 * .version-grid 宽 / 卡宽 / 卡高 / 列数 / 导航 scrollWidth 全部与改前逐位相同。 * ★ 可单独回滚: 删掉 GRIDSPACE4 到结束标记之间即可(见报告回滚命令)。 * ================================================================================ */ .version-grid > .version-card .v-system { background: #F5F5F7 !important; border-color: #E8E8ED !important; color: #6E6E73 !important; font-weight: 500 !important; } @media (max-width: 600px) { .cat-grid > * { min-width: 0 !important; } .feature-grid > * { min-width: 0 !important; } .feature-card { min-width: 0 !important; } .feature-body { min-width: 0 !important; overflow-wrap: anywhere !important; } } @media (max-width: 413px) { .nav-inner { padding-left: 10px !important; padding-right: 10px !important; } .nav-actions { gap: 3px !important; } .nav-actions .topbar-btn { padding-left: 6px !important; padding-right: 6px !important; } .nav-links { gap: 3px !important; } .nav-links a { padding-left: 6px !important; padding-right: 6px !important; } } /* ===== GRIDSPACE4-END ===== *//* ===== GRIDSPACE4B 20261005: 窄屏导航改为「两行」干净排布 (GRIDSPACE4 导航部分的升级) ===== * 为什么还要改: GRIDSPACE4 把导航内边距/间距收紧后, 375px 横向溢出已归零, * 但实测截图发现导航标签在 375/360/320 被挤成【两行碎片】并溢出 64px 导航条 * (例如 "全套应用" 竖排成 "全套/应用") —— 这个"挤压碎行"是【既有】问题, * 并非 GRIDSPACE4 引入; 但既然目标是"窄屏不溢出", 这里把它做干净。 * * 做法(仅 <=413px, 只追加, 0 结构/0 文案改动): * 让 .nav-inner 允许换行 + 高度自适应 -> 导航自然排成两行: * 第一行: 品牌 + (全套应用 / 下载 / 客服) * 第二行: 登录 / 我的订单 / 客服 * 并给链接与按钮加 white-space:nowrap, 避免再次被挤成竖排碎片。 * ★ 不隐藏任何链接或按钮, 字号不变, 功能与文案 100% 不变。 * ★ >=414px 完全不受影响(规则在 media 内), 已实测 414 与改前逐位相同。 * ================================================================================ */ @media (max-width: 413px) { .nav-inner { height: auto !important; padding: 8px 10px !important; flex-wrap: wrap !important; row-gap: 2px !important; } .nav-links { flex-wrap: nowrap !important; } .nav-links a { white-space: nowrap !important; padding-left: 6px !important; padding-right: 6px !important; } .nav-actions { gap: 3px !important; } .nav-actions .topbar-btn { padding-left: 6px !important; padding-right: 6px !important; white-space: nowrap !important; } } /* ===== GRIDSPACE4B-END ===== *//* ===== GRIDSPACE4C 20261005: .crosslink-grid 窄屏收缩 (同一 min-width:auto 缺陷族) ===== /* ===== VNAMEFIT1 20261006: 版本卡「版本名」一行放得下 -> 不再换行 / 不再被裁剪 ===== 客户 2026-10-06 反馈: "有些软件的名称更长(比如 lrc 软件卡, 名称自动换行了)". 只读实测(1440px, Mac 分支): /adobe/lrc/ 的 2 张卡版本名 "Lightroom Classic 2026 For Mac" 需要 253.17px, 而卡内名字可用宽只有 237px -> 基础规则 body.is-mac .version-grid > .version-card .v-name{white-space:normal} 让名字换行; 又因为 .v-name 是 flex 容器, 文字 / 2026 / " For Mac" 是 3 个 flex item, 换行时被拆成 3 列碎片("Lightroom / Classic" + "2026" + "For / Mac") -> 名字行盒 41.59px(1 行是 26px), 卡高被顶到 286.33px, 而同站其它 10 个子页/其它排均为 270.73px -> 视觉参差 + 名字看着像坏了. 修法(纯 CSS; 0 文案改动 / 0 结构改动 / 0 字号改动 / 0 卡宽列数间距改动): ① 名字保持一行: white-space:nowrap (覆盖 MACFIX 的 white-space:normal) ② 但绝不裁剪: overflow:visible (覆盖基础规则的 overflow:hidden) -> 名字比卡内宽约 6px 时, 左右各溢出约 2px, 落在卡片【自己的 10px 内边距】里; 实测 1440px 下名字距卡边框仍有 8.11px 净空 -> 不换行 / 不省略号 / 不丢字 ✓ ③ 卡片不因名字变高: 名字行盒高度由 .v-year(20px 字号 / 26px 行高)决定, 恒为 26px, 与同站其它子页完全一致 -> /adobe/lrc/ 卡高 286.33px -> 270.73px(与全站一致) ✓ 窄屏保护(★ 关键): 卡宽 = (视口宽 - 120) / 4, 视口 <1160px 时卡宽 <260px, 一行放不下 253px 的名字 -> 此时【维持原行为(换行)】, 避免名字溢出到卡片外面; >=1160px 才启用本块(覆盖 1280 / 1440 / 1920 等常见桌面宽度) ✓ 整行等高: .version-grid 的 align-items 实测已是 normal(对 grid 等价于 stretch) -> 同排卡高实测差 0px(所有 12 页 x Mac/Win 均为 0); 下面显式写一遍作为保险; 并给版本卡按钮加 margin-top:auto -> 卡内【底部对齐】(与主站 /adobe/ 原有的 .version-card .v-btn{margin-top:auto} 一致; 10 个子页此前缺这条). ★ 未动: 文案 / 字号 / 字重 / 卡宽 / 列数 / 间距 / 按钮配色尺寸 / 价格 / 图标 / 描边 / 投影(.07/.11) / 悬浮 / 金卡金样式 / VCARDUI4 / GRIDSPACE2-4 / VIPGOLD+SOFT2 ✓ ★ 可单独回滚: 删掉 VNAMEFIT1-START 到 VNAMEFIT1-END 之间即可(报告里有整批回滚命令). ================================================================================= */ /* ===== VNAMEFIT1-START ===== */ @media (min-width: 1160px) { section.versions-section .version-grid > .version-card .v-name, .sw-versions-block .version-grid > .version-card .v-name { white-space: nowrap !important; /* 名字一行, 不再被拆成 3 列碎片 */ overflow: visible !important; /* 溢出量落在卡片自己的内边距里, 不裁剪不丢字 */ } } /* 整行等高保险: 同排卡片高度一致(实测本来就是 stretch, 显式声明防以后被覆盖) */ section.versions-section .version-grid, .sw-versions-block .version-grid { align-items: stretch; } section.versions-section .version-grid > .version-card, .sw-versions-block .version-grid > .version-card { align-self: stretch; } /* 卡内按钮底部对齐(只影响多余空间的分配, 不改变卡高) */ section.versions-section .version-grid > .version-card .v-btn, .sw-versions-block .version-grid > .version-card .v-btn { margin-top: auto; } /* ===== VNAMEFIT1-END ===== */ /* ===== VNAMEWIDTH1 20261006: 版本名「统一宽度」 ============================= 客户 2026-10-06 选定方案原话: "给名字一个统一宽度(因为都是单页面显示)". 即: 每个产品各自一页 -> 名字不必跨产品比较, 但【同一排里每张卡的名字块必须 占同样的横向空间】(块宽一致), 名字仍在块内居中. ---- 改前只读实测(本地 headless Chrome + CDP 打线上, 1440 / Mac UA) ---- 根因: `.version-card` 是 display:flex + align-items:center 的【列】容器, 所以 `.v-name` 作为 flex item 是 shrink-to-fit 宽度 = 自身文字宽 + padding(0 4px), 逐卡不同: /adobe/ nameBoxW = 194.42 / 193.98 / 194.59 / 194.36 同排 4 张差 0.61px /adobe/pr/ nameBoxW = 145.17 / 222.45 / 222.45 / 222.45 金卡 vs 软件卡差 77.28px /adobe/ps/ nameBoxW = 145.17 / 207.47 / 207.47 / 207.47 /adobe/lrc/ nameBoxW = 145.17 / 245.00 / 245.00 /adobe/mac/ nameBoxW = 136.17 / 126.78 / 152.16 / 149.44 同排 4 张差 25.38px <- 最明显 (文字长到顶住 max-width:100% 的卡才会是 245 = 卡内可用宽, 例如 lrc 那两张) ---- 修法: 1 条规则, 纯 CSS; 不动结构 / 文案 / 字号 / 卡宽 / 卡高 / 列数 ---- 给 `.v-name` 一个确定宽度 = 卡内可用宽: width:100% (+ max-width:100% 兜底). width 按卡片内容盒解析 -> 同一排每张卡内容盒等宽 -> 名字块宽度逐张【完全一致】. ★ 保留 flex 布局(不改 display): 垂直居中(align-items:center)、v-year 的 26px 行盒、 VIP 徽标作为 flex item 的现状全部原样 -> 卡高不变、文字一行都不位移. (客户给的 2 个方向里选了「保持 flex + 固定 width + justify-content:center」这条: 它只改盒子的矩形, 不改任何排版结果, 风险最低.) ★ justify-content:center 显式重申(基础规则本来就有) -> 块内文字仍居中, 观感不变. ★ >=1160px 的 VNAMEFIT1(nowrap + overflow:visible) 原样保留: 长名仍一行、仍不裁剪. ★ 本改动在视觉上是【零位移】: .v-name 没有背景/边框/绝对定位子元素, 盒子变宽唯一的可观测后果是"文字溢出的对称轴 = 卡片对称轴". ★ 金卡(VIP 全家桶)那一张要单独补 2px: 它的 border 是 2px(客户认可的金色描边, 比软件卡多 1px/边), 所以它的内容盒天生窄 2px -> width:100% 只能得到 243px, 而同排软件卡是 245px。为了"逐张【完全一致】", 金卡的 `.v-name` 用 calc(100% + 2px) 把这两像素补回来 -> 也是 245px。 补偿后金卡的名字块比它的内容盒宽 2px(左右各 1px), 落在卡片自己的 10px 内边距里: 不裁剪(卡片 overflow:hidden 的裁剪边界是 padding box, 还差 9px)、不可见 (.v-name 没有背景/边框), 只把"名字块的左右边缘"与同排软件卡对齐。 ★ <1160px 的三列碎片问题本次【不碰】(客户尚未批); 实测该宽度区间改前/改后逐位相同. ---- 复测(线上页面注入本规则后重测, 1440 / Mac UA) ---- 12 页每一排 nameBoxW 逐张完全一致; 卡宽 267(主站 257.5) / 卡高 270.73 / 4 列 逐位未变. ★ 未动: 文案/数字/价格/H1/TITLE/字号/字重/卡宽/卡高/列数/间距/按钮配色/ 金卡金描边与金按钮/投影(.07/.11)/悬浮 -2px 全部照旧 ✓ ★ 可单独回滚: 删掉 VNAMEWIDTH1-START 到 VNAMEWIDTH1-END 之间即可(见报告回滚命令). ========================================================================== */ /* ===== VNAMEWIDTH1-START ===== */ .version-grid > .version-card .v-name { width: 100%; /* 名字块 = 卡内可用宽 -> 同一排逐张一致 */ max-width: 100%; /* 兜底: 绝不超出卡片内容盒 */ justify-content: center; /* 块内文字仍居中(保持原观感) */ } .version-grid > .version-card.bundle .v-name, body .version-grid > .version-card.bundle .v-name { /* ↑ 第二个选择器 (0,4,1) 与 MACFIX/GRIDSPACE3 的 max-width:100% 同档且更靠后 -> 稳赢 */ width: calc(100% + 2px); /* 金卡 border 2px -> 补回 2px, 名字块与同排软件卡等宽(245px) */ max-width: calc(100% + 2px); /* 覆盖 MACFIX/GRIDSPACE3 的 max-width:100%, 否则那 2px 补不进去 */ } /* ===== VNAMEWIDTH1-END ===== */ * 实测(320px): ".crosslink-grid" 在 <=600px 是 repeat(2,1fr), 但卡片的 min-width:auto * 让轨道收缩不到 min-content 以下 -> 第二列被切掉, 页面溢出 6px(ps/lrc) / 1px(ai)。 * 修法与前面 .cat-grid / .feature-grid 完全一致: 打开 grid item 的收缩。 * ★ 只作用于 <=600px; 360/375/414/600/1024 实测与改前逐位相同(本来就 0 溢出)。 * ★ 仅 10 个子页有此区块; 主站 /adobe/app.css 无 .crosslink-grid, 故未改动。 * ================================================================================ */ @media (max-width: 600px) { .crosslink-grid > * { min-width: 0 !important; } } /* ===== GRIDSPACE4C-END ===== */ /* ===== AESTH1 20261007-START (审美提升第一批 · 清单外 6 条 + 副标题留空) ========== 依据: _审美评审_报告.md §5【清单外·可直接做】方案 1-6 + _impeccable/after.css（运行时注入已验证） 铁律（对应《已确定功能_禁止改动清单.md》）: ✗ 不触碰 .hero / .hero-left / .hero-tag / .hero-title / .hero-trust* / .hero-keywords* / .kw-chip ✗ 不触碰 .versions-section / .version-card / .v-* / .cc-meta / #categorySection ✓ 唯一例外: .hero-desc 只加 text-wrap:balance（不改 font-size / max-width / line-height / 文案） 验收: hero 高度、首卡 top、版本卡几何（图标 64 / 名宽 245 / 卡高 270.73 / 卡宽 267 / 4 列）逐位不变 回滚: 删掉 AESTH1-START 到 AESTH1-END 之间全部内容；或 cp app.css.bak.aesthetic1_ app.css TS=20261007_aesth1 ================================================================================= */ /* ---------- 0. 局部令牌层（只在中/下段区块内生效，不外泄到首屏与版本卡） ---------- */ :is(#explore-features, #features, #scenes, .reviews-section, #faq, #faqWin, .install-guide-section, .cc-promo-section, .crosslink-section, .feature-section, .cta-section) { --a1-12: 12px; /* 微小/标签档 */ --a1-14: 14px; /* 次要正文档 */ --a1-16: 16px; /* 正文档 */ --a1-20: 20px; /* 卡片标题档 */ --a1-28: 28px; /* 区块标题（≤1024px 档） */ --a1-40: 40px; /* 区块标题（桌面档） */ --a1-ink: #1D1D1F; --a1-body: #3C3C43; --a1-quiet: #6E6E73; --a1-line: #E8E8ED; --a1-line-hover: #C7C7CC; --a1-r-card: 12px; /* 圆角档 1：卡片 */ --a1-r-overlay: 16px; /* 圆角档 2：浮层 */ --a1-sh-hover: 0 2px 8px rgba(0, 30, 54, .06); /* 阴影档 2：hover */ } /* ---------- 1. ③ 字号阶梯收敛：40 / 28 / 20 / 16 / 14 / 12 一套到底 ---------- */ /* 区块标题：改前 40 / 36 / 32 / 22 四套 → 改后一套 40px（≤1024 → 28px） */ :is(#explore-features, #features, #scenes, .reviews-section, #faq, #faqWin, .install-guide-section, .cc-promo-section, .crosslink-section, .feature-section, .cta-section) .section-title { font-size: var(--a1-40); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--a1-ink); margin: 0 0 10px; text-wrap: balance; } @media (max-width: 1024px) { :is(#explore-features, #features, #scenes, .reviews-section, #faq, #faqWin, .install-guide-section, .cc-promo-section, .crosslink-section, .feature-section, .cta-section) .section-title { font-size: var(--a1-28); } } /* 区块副标题：18 / 17 / 16 混用 → 16px */ :is(#explore-features, #features, #scenes, .reviews-section, #faq, #faqWin, .install-guide-section, .cc-promo-section, .crosslink-section, .feature-section, .cta-section) .section-subtitle { font-size: var(--a1-16); font-weight: 400; letter-spacing: 0; line-height: 1.7; color: var(--a1-body); max-width: 720px; margin: 0 auto 36px; text-wrap: pretty; } /* 促销标题 32/800 → 28/700 */ .cc-promo-section .cc-promo-title { font-size: var(--a1-28); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; margin: 0 0 12px; text-wrap: balance; } .cc-promo-section .cc-promo-desc { font-size: var(--a1-14); line-height: 1.7; color: var(--a1-quiet); } /* 卡片标题：18 / 22 混用 → 20px ★ 不设 color：主站 .feature-card 是【深色图片卡 + 白字】，强行改 ink 会让标题变成 1.25:1 隐形 实测证据: 改后 h3.feature-title #1D1D1F on #000000 = 1.25:1 ✗ -> 已回退，保留各卡原有字色 */ :is(#explore-features, #features, #scenes, .reviews-section, #faq, #faqWin, .install-guide-section, .cc-promo-section, .crosslink-section, .feature-section, .cta-section) :is(h3, h4, .feature-title, .features-explore-name, .scene-name, .explore-card-title, .scene-card-title) { font-size: var(--a1-20); font-weight: 600; letter-spacing: -.01em; line-height: 1.4; } /* 正文：15 / 13 → 16px（同样不设 color：卡片底可能是深色图片带） */ :is(#explore-features, #features, #scenes, .install-guide-section, .feature-section) p:not([class]), :is(#explore-features, #features, #scenes, .install-guide-section, .feature-section) li:not([class]) { font-size: var(--a1-16); line-height: 1.75; } /* 次要文字：15 / 14.5 / 13 → 14px */ :is(#explore-features, #features, #scenes, .reviews-section, .crosslink-section, .install-guide-section, .feature-section, footer) :is(.feature-desc, .features-explore-desc, .features-explore-link, .scene-desc, .crosslink-desc, .install-guide-link-title, .install-guide-link-sub, .install-guide-done, .footer-brand, .footer-link, .footer-title, .footer-sub, .footer-bottom) { font-size: var(--a1-14); line-height: 1.65; } /* 12px 底（客户 12px 底线：改前有 10px / 11px 若干处） */ :is(#explore-features, #features, #scenes, .crosslink-section, .install-guide-section, .feature-section) :is(.crosslink-page-tag, .features-explore-chip, .feature-icon span) { font-size: var(--a1-12); } .install-guide-section .install-guide-card p { font-size: var(--a1-12); line-height: 1.7; } footer :is(.footer-bottom, .footer-sub) { font-size: var(--a1-12); } /* ---------- 2. ② FAQ：去掉常驻 25% 黑晕（全站最廉价的一处阴影） ---------- */ :is(#faq, #faqWin) .faq-list { max-width: 720px; gap: 20px; } :is(#faq, #faqWin) .faq-item { background: #FFFFFF; border: 1px solid var(--a1-line); border-radius: var(--a1-r-card); box-shadow: none; padding: 20px 24px; transition: border-color .18s ease, background-color .18s ease; } :is(#faq, #faqWin) .faq-item:hover { border-color: var(--a1-line-hover); background: #FCFCFD; box-shadow: none; transform: none; } :is(#faq, #faqWin) .faq-q { font-size: var(--a1-20); font-weight: 700; line-height: 1.35; letter-spacing: -.01em; color: var(--a1-ink); margin: 0 0 10px; } :is(#faq, #faqWin) .faq-a { font-size: var(--a1-16); line-height: 1.75; color: var(--a1-body); } :is(#faq, #faqWin) .faq-a strong { color: var(--a1-ink); font-weight: 600; } /* ---------- 3. ② 卡片表面统一：圆角 1 档 + 阴影 2 档（拆掉「1px 边 + ≥16px 模糊」幽灵卡） ---------- */ :is(#explore-features, #features, #scenes, .reviews-section, .crosslink-section, .install-guide-section, .feature-section, .cta-section) :is(.feature-card, .features-explore-card, .scene-card, .review-card, .crosslink-card, .install-guide-card) { border: 1px solid var(--a1-line); border-radius: var(--a1-r-card); box-shadow: none; transition: border-color .18s ease, box-shadow .18s ease; } :is(#explore-features, #features, #scenes, .reviews-section, .crosslink-section, .install-guide-section, .feature-section, .cta-section) :is(.feature-card, .features-explore-card, .scene-card, .review-card, .crosslink-card, .install-guide-card):hover { border-color: var(--a1-line-hover); box-shadow: var(--a1-sh-hover); transform: none; /* 取消同类卡片 3 种不同上浮位移 */ } .reviews-section :is(.review-text) { font-size: var(--a1-14); line-height: 1.75; color: var(--a1-body); } .reviews-section .review-name { font-size: var(--a1-16); font-weight: 600; } .reviews-section :is(.review-date, .review-verified, .review-views, .review-tag) { font-size: var(--a1-12); line-height: 1.5; } .reviews-section .review-tag { font-size: var(--a1-12) !important; } /* 压掉窄屏 10px 档 */ .reviews-section .review-avatar { font-size: var(--a1-14); } /* 头像首字母（圆片内，装饰位）归到 14 档 */ /* 装饰字形（★ 星级 / ‹› 箭头）不进字号阶梯：保持原尺寸，避免不必要的视觉变动 */ .install-guide-section .install-guide-card :is(h3, h4) { font-size: var(--a1-20); font-weight: 700; letter-spacing: -.02em; } .install-guide-section .install-guide-card li:not([class]) { font-size: var(--a1-14); line-height: 1.8; } /* ---------- 4. ④ 间距收成 3 档：贴合 56 / 常规 72 / 换幕 88 ---------- */ #explore-features { padding: 0 0 56px; } /* 紧接版本区，保持贴合 */ #features { padding: 56px 0 72px; } /* 灰带：下比上多一点 */ #scenes { padding: 0 0 56px; } .reviews-section { padding: 0 0 88px; } /* 换幕：最大气口 */ #faq, #faqWin { padding: 64px 0 72px; } .install-guide-section { padding: 0 0 56px; } .cc-promo-section { padding: 88px 0 0; } .crosslink-section { padding: 0 0 88px; } .feature-section { padding: 64px 0 72px; } .cta-section { padding: 72px 0 80px; } /* ---------- 5. ⑤ 无障碍①：可见焦点环（改前全站 0 条 :focus-visible 规则） ---------- */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid #0066CC; outline-offset: 2px; } .pay-input:focus-visible { outline: 2px solid #0066CC !important; outline-offset: 2px; } /* ---------- 6. ⑤ 无障碍②：prefers-reduced-motion（改前全站 0 条规则） ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } :is(.feature-card, .features-explore-card, .scene-card, .review-card, .crosslink-card, .faq-item, .install-guide-card):hover { transform: none !important; } } /* ---------- 7. ⑤ 无障碍③ + 任务二：hero 轮播可暂停（悬停/聚焦）+ 副标题留空 ---------- */ /* 任务二「副标题留空太多」实测：末行仅 15%–53% 满（例：id 页末行 90/600px）→ text-wrap:balance 把各断行长度拉匀。只加 text-wrap，不动 18px / 600px / 1.85 行高 / justify / 文案一字。 */ @media (min-width: 1025px) { .hero-desc { text-wrap: balance !important; } } /* ---------- 8. ⑥ 清掉孤例紫色（全站第 4 个色相） ---------- */ /* 8.1 子页 H1 渐变词：终点 #AF52DE（紫，全站孤例）→ #001E36（站内既有 --primary 藏青）； 并补 @supports / forced-colors 兜底（改前是裸 color:transparent，强制高对比下整词消失） */ .hero-title .accent { color: #007AFF; -webkit-text-fill-color: transparent; background: linear-gradient(135deg, #007AFF 0%, #001E36 100%); -webkit-background-clip: text; background-clip: text; } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .hero-title .accent { background: none; -webkit-text-fill-color: #007AFF; color: #007AFF; } } @media (forced-colors: active) { .hero-title .accent { background: none; -webkit-text-fill-color: currentColor; color: currentColor; } } /* 8.2 主站 Windows 主 CTA 的紫渐变 / 紫辉光 → 与 Mac 侧同源的黑渐变 */ .btn-dl[data-os='win'] { background: linear-gradient(135deg, #2D2D2F 0%, #0A0A0B 100%); color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); } .btn-dl[data-os='win']:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, .35); } /* 8.3 主站软件快选按钮激活态 紫 → 藏青（改前是页面里唯一可见的紫块） */ .sw-qs-btn.sw-qs-active { background: #001E36; color: #fff; border-color: #001E36; box-shadow: none; } .sw-qs-btn.sw-qs-active :is(.sw-qs-icon, .sw-qs-text, .sw-qs-name) { color: #fff; } /* 8.4 主站信任条 hover 紫 → 中性黑（原 #6D28D9 + 紫辉光） */ .trust-bar-inner .trust-tag:hover { border-color: #0A0A0B !important; color: #0A0A0B !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .10) !important; } /* 8.5 死规则 .tag-purple（HTML 里 0 处引用）一并中性化，避免以后被误用 */ .tag-purple { background: #F5F5F7; color: #001E36; border: 1px solid #E8E8ED; } /* ===== AESTH1-END ===== */ /* ====================================================================== HEROEQ1-START 2026-10-07 首屏「左右等高」: 右列轮播图撑满整行高度 背景: 客户 "反正就是左右高度一致"。 实测(1440x900, 本地 headless Chrome, 线上现状): HEROFOLD1 把 .hero-swiper-col 封顶在 400px, 而左列(.hero-left)固有高 = 409.56(ps/ai) / 423.52(lrc) / 431.92(ae/me) / 446.56(au/id/dc/br) / 520.00(pr) -> 右列矮 9.56 ~ 120px, 图片下方多出一块空白。 做法(三步, 缺一不可): ① 解除 400px 封顶, 右列改成"撑满 grid 行高"(align-self: stretch); ② 轮播移出文档流(position:absolute) -> 右列不再被图片固有高(438 宽下 约 246~584px)撑大, grid 行高仍 = max(左列固有高, 400) 与改前逐位相同; ③ 右列 min-height 保持 400px -> 左列固有高 < 400 的页(lrc/ae/me Win) 行高仍是 400, 首屏总高零变化。 ★ 只动右列容器 + 轮播; 左列(.hero-left 及其 5 块)零改动; 文案/字号零改动。 ★ 全部包在 @media (min-width:1025px) 内 -> ≤1024 断点零影响。 ★ 选择器与 .version-card / 金卡 / VIPGOLD 零交集。 可整体回滚: 删掉 HEROEQ1-START 到 HEROEQ1-END 之间即可。 ====================================================================== */ @media (min-width: 1025px) { .hero-inner { align-items: stretch !important; } .hero-inner .hero-swiper-col { max-height: none !important; /* HEROFOLD1: max-height:400px */ height: auto !important; /* HEROFOLD1: height:400px -> 交给 stretch 撑满行高 */ min-height: 400px !important; /* HEROFOLD1: min-height:0 -> 保住"右列对行高的贡献 400px" */ align-self: stretch !important; /* 撑满整行高度 */ position: relative !important; /* 给绝对定位的轮播做包含块 */ overflow: hidden !important; /* 圆角 14px 裁切 */ } /* 轮播整体脱离文档流: 它再高也不会撑大行高 */ .hero-inner .hero-swiper-col .swiper.heroSwiper { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; } .hero-inner .hero-swiper-col .swiper-wrapper { height: 100% !important; } .hero-inner .hero-swiper-col .swiper-slide, .hero-inner .hero-swiper-col .hero-fade-stack { height: 100% !important; } /* 图: 填满且不变形 (object-fit 只裁不拉, 比例恒为原图比例) */ .hero-inner .hero-swiper-col .swiper-slide img, .hero-inner .hero-swiper-col .hero-fade-slide img { width: 100% !important; height: 100% !important; object-fit: cover !important; } } /* HEROEQ1-END */ /* ====================================================================== HEROFILL1-START 2026-10-07 首屏「副标题留空」: 末行拉直 (两端对齐) 依据: _副标题填满_报告.md §1 (空在哪实测) + §2 (方案对比) + §3 (落地) 客户原话: 「不要留空太大了, 不好看」-> 上一轮 text-wrap:balance 只把末行 右空从 442px 收窄到 114.5px, 没有归零 -> 客户仍看到"副标题那块太空"。 实测(1440x900, 10 子页 x Mac/Win = 20 组合, 线上 headless Chrome): · .hero-desc 盒宽 600px, text-align:justify -> 第 1..n-1 行被拉直到 744.00, 只有【末行】保持自然宽度 -> 末行右空 = 3.89 / 60.5 / 85.7 / 108.1 / 114.5 / 118.3 / 133.4 / 136.3 / 176.5 px (20 组合全中, 最大 176.5px) · 这就是屏幕上唯一真正可见的"空": 段落下沿右侧一个 末行右空 x 33.3px 的洞 · 另有一处 57.59px 的"盒宽缺口"(盒宽 600 vs 列宽 657.59) —— 实测【不可见】: 该处(x 744~801.59)没有任何元素绘制, 大标题墨迹右缘也只到 725.95/746.38, 同样够不到 801.59 -> 放大镜级别也看不出, 故不作为改动目标。 本块只加一条属性: .hero-left .hero-desc { text-align-last: justify } -> 末行与其余各行一样被拉直到盒右缘(744.00), 段落成为一个完整矩形。 零副作用(20/20 逐位实测): · 文案 0 字符删除; font-size 18px / max-width 600px / line-height 1.85 / text-align justify / text-wrap balance 【全部不动】 · 行数不变(3 行仍 3 行, 4 行仍 4 行), 段落高度不变(99.89 / 133.19) · hero 总高 / 首卡 top / 首屏露出【零变化】(20/20 逐位相同) · 左列其余 4 块(徽章/大标题/信任点/chips)与右列轮播图【零接触】-> 左右等高保持 ★ 选择器用 .hero-left .hero-desc (0,2,0) 而不是 .hero-desc (0,1,0): 本块在文件里排在 HEROFOLD2(它设了 18px/600px/justify/margin)【之前】, 靠"更高特异性 + !important"取胜, 因此不需要把本块排到文件末尾 -> 满足"任何新块不许排在 VIPGOLD+SOFT2 之后"的硬要求。 ★ 全部包在 @media (min-width:1025px) 内 -> ≤1024 断点(平板/手机)零影响。 ★ 零接触: 版本卡 / 金卡 / 图标 / 名字宽度 / 价格 / pay.js / 数据库 / nginx。 ★ 可整体回滚: 删掉 HEROFILL1-START 到 HEROFILL1-END 之间即可; 或 cp app.css.bak.subfill_ app.css (见报告回滚命令)。 ---- 备选开关(未启用, 按客户挑再开) -------------------------------------- 方案B「满版」= 再放开 600px 限宽, 让盒右缘 = 列右缘 801.59: .hero-left .hero-desc { max-width: 100% !important; } 实测代价(6/20 组合会变): au/lrc/id/br/me 的 Mac 与 id 的 Win -> 4 行变 3 行 (id Win 3 行变 2 行), hero 变矮 9.56 ~ 33.29px, 首卡 top 上移同量, 露出 px 增加; 而且另外 14/20 组合的末行【反而更空】(77.8% -> 71.0%, 99.4% -> 90.7%) -> 所以默认不开。若要开: 把上面那行的注释去掉即可。 ====================================================================== */ @media (min-width: 1025px) { /* 末行与其余各行一样拉直到盒右缘 -> 段落成为完整矩形, 末行右空 0.00px */ .hero-left .hero-desc { text-align-last: justify !important; } /* 方案B 开关(默认关闭): .hero-left .hero-desc { max-width: 100% !important; } */ } /* HEROFILL1-END */ /* ===== VIPGOLD+SOFT2 20261005-START (vipfix) ================================ ★ 本块必须留在文件【最末尾】, 且其后不要再追加任何块 —— "排在末尾 + 足够特异性" 就是它稳定生效的双保险。删除本块即可完整回滚(见报告回滚命令)。 ① 全家桶(VIP)卡「金色描边 + 金色按钮」锁定(客户认可版的原始值, 一个色号都没改) 真实覆盖关系(改前只读实测): VCARDUI2 通用规则 `.version-grid > .version-card { border-color:#F2F3F5 !important }` -> 特异性 (0,2,0), 位置: 本文件 VCARDUI2 块 原始金描边 `.version-card.bundle { border: 2px solid #F59E0B !important }` -> 特异性 (0,2,0), 位置: 本文件顶部 .version-card.bundle 规则 ★ 两者特异性【完全相等】且 VCARDUI2 排在更后 -> 金描边被近白描边吃掉。 VCARDUI2 自带的救场规则 `.version-grid > .version-card.bundle`(0,3,0) 只比它 高 1 档, 一旦后面再追加任何 >=(0,3,0) 的同属性块就会再次被吃 -> 脆弱。 本块用 `body .version-grid > .version-card.bundle`(0,3,1) 显式锁死, 并排在文件最末 -> 受控(特异性+顺序双保险), 对后续追加免疫。 取值 = 原文 .version-card.bundle / .v-btn-bundle / VCARDUI2 金卡两档 (逐字照抄): border 2px solid #F59E0B ; hover #D97706 按钮 background linear-gradient(135deg,#FFD700 0%,#FFA500 100%); color #1D1D1F; font-weight 800; border 1px solid #FFA500 ★ 按钮 border 宽度必须仍是 1px(与改前一致), 否则按钮高 +2px -> 卡高上涨 ✗ ② 软件卡投影「整体再淡一档」(客户: "软件卡背后的阴影再淡一些") 静止 0 4px 12px rgba(0,30,54,.08) + 0 16px 40px rgba(0,30,54,.16) -> 0 4px 12px rgba(0,30,54,.07) + 0 16px 40px rgba(0,30,54,.11) hover 0 6px 16px rgba(0,30,54,.12) + 0 22px 54px rgba(0,30,54,.22) -> 0 6px 16px rgba(0,30,54,.09) + 0 22px 54px rgba(0,30,54,.15) ★ 仍是藏青调 rgba(0,30,54,…), 没有换成纯黑; 只改不透明度 -> 不参与布局, 卡高不变。 ★ 全家桶卡的金色投影同步淡一档(与同排软件卡观感一致, 色调仍为金色): 静止 .18/.26 -> .15/.20 ; hover .24/.34 -> .20/.26 ★ 普通卡蓝色按钮 #007AFF / hover #0066CC / 上浮 -2px 全部未动。 ========================================================================== */ /* ② 软件卡投影: 静止 + hover (与随后金卡规则配对) */ body .version-grid > .version-card { box-shadow: 0 4px 12px rgba(0,30,54,0.07), 0 16px 40px rgba(0,30,54,0.11) !important; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease !important; } body .version-grid > .version-card:hover { box-shadow: 0 6px 16px rgba(0,30,54,0.09), 0 22px 54px rgba(0,30,54,0.15) !important; transform: translateY(-2px) !important; } /* ① 全家桶(VIP)卡: 金色描边 + 金色投影(再淡一档) */ body .version-grid > .version-card.bundle { border-width: 2px !important; border-style: solid !important; border-color: #F59E0B !important; box-shadow: 0 4px 12px rgba(245,158,11,0.15), 0 16px 40px rgba(245,158,11,0.20) !important; } body .version-grid > .version-card.bundle:hover { border-color: #D97706 !important; box-shadow: 0 6px 16px rgba(245,158,11,0.20), 0 22px 54px rgba(245,158,11,0.26) !important; } /* ① 金色按钮: 静止 + hover (特异性 (0,4,0)/(0,5,0) > 任何 :not(.v-btn-bundle) 系规则) */ .v-btn-bundle, body .version-grid > .version-card.bundle .v-btn-bundle { background: linear-gradient(135deg,#FFD700 0%,#FFA500 100%) !important; color: #1D1D1F !important; font-weight: 800 !important; border: 1px solid #FFA500 !important; } .v-btn-bundle:hover, body .version-grid > .version-card.bundle .v-btn-bundle:hover { background: linear-gradient(135deg,#FFD700 0%,#FFA500 100%) !important; color: #1D1D1F !important; } /* ===== VIPGOLD+SOFT2 20261005-END ===== */ /* ===== CLEANCARD2 20261006-START: 版本卡「清爽化」版本2(彻底版) ================= * 客户 2026-10-06 选定 版本2「彻底版」。取值逐字照抄效果图实现 * _cleancard/final_injection_V2.css, 只做两件事: * ① 把「运行时注入」改成常驻 CSS(不再需要 JS 后处理 —— renderVersionCards 整段 * 重写 innerHTML, 注入会被冲掉); * ② 把注入里的 data-cc 分组(按下标打标)换成 .bundle / :not(.bundle) 两组, * 结构由 renderVersionCards 模板直接输出, 与卡片顺序无关。 * * 四处改动: * ⓐ 系统胶囊(macOS 13.4 (Ventura) 及以上 的灰底大块) -> 一行小灰字, 并与容量 * (3.2 GB)并成一行。结构: 模板把 .v-system 与 .v-size 包进

。 * ⓑ 「已授权」(18px 黑粗, 占着价格位) -> 12px 小灰字「已购 · 可直接下载」。 * 模板: priceText 改文案 + 给 .v-price 加 .cc-note。 * ⓒ 金卡只让按钮是金色: 名字回墨色 600 /「VIP 永久」回墨色 700 / 右上角 👑 全家桶 * -> 中性灰角标。★ 金色描边(F59E0B / hover D97706)与金色按钮一律保留。 * ⓓ 图标外层灰底去掉 -> 极淡 #FAFAFB 只留给「图挂了走 emoji 兜底」那种情况 * (线上 .v-icon 底色本来就已经是透明, 正常的图标底不会被涂灰)。 * * 卡高: 删掉「系统胶囊 + 容量」两层并成一行后腾出的高度, 全部还给卡内留白 * (卡片上下内边距 14 -> 16.7px, 图标下间距 10 -> 14px, 其余按效果图校准值 * 分给 名字下 / cc-meta 下 / 价格下 三个间距)。实测 lrc/ps 逐张 270.73 -> 270.73。 * * ★ 作用域: 只作用于 JS 渲染出来的版本卡网格(section.versions-section / * .sw-versions-block)。/adobe/mac/ 是手写静态卡(它的 .v-size 是「说明」不是「容量」), * 不在作用域内, 一行都不动。 * ★ 未动: 卡宽 / 栅格上限 1140 / 4 列 / 名字块 245px / 横向溢出 0 / * VNAMEFIT1(>=1160 名字 nowrap+overflow:visible) / VNAMEWIDTH1(名字块统一宽度) / * 后缀规则(data-sfxfit) / 蓝按钮 #007AFF(hover #0066CC) / 阴影 .07/.11(hover .09/.15) / * 悬浮 -2px / 金卡金色投影 .15/.20 / 价格与任何数据。 * ★ 可整体回滚: 删掉 CLEANCARD2-START 到 CLEANCARD2-END 之间即可(见报告回滚命令)。 * ============================================================================== */ /* --- 卡内上下留白 + 图标下间距(腾出的高度还给卡内留白) --- */ section.versions-section .version-grid > .version-card, .sw-versions-block .version-grid > .version-card { padding-top: 16.7px !important; padding-bottom: 16.7px !important; } section.versions-section .version-grid > .version-card > .v-icon, .sw-versions-block .version-grid > .version-card > .v-icon { margin-bottom: 14px !important; } /* --- ⓐ 系统胶囊 -> 一行小灰字, 并与容量并排 --- */ section.versions-section .version-grid > .version-card > .cc-meta, .sw-versions-block .version-grid > .version-card > .cc-meta { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; column-gap: 0 !important; row-gap: 2px !important; max-width: 100% !important; background: none !important; border: 0 none !important; box-shadow: none !important; } section.versions-section .version-grid > .version-card > .cc-meta > .v-system, .sw-versions-block .version-grid > .version-card > .cc-meta > .v-system { background: transparent !important; border: 0 none !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: #8E8E93 !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.4 !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; max-width: none !important; width: auto !important; display: inline-block !important; } section.versions-section .version-grid > .version-card > .cc-meta > .v-size, .sw-versions-block .version-grid > .version-card > .cc-meta > .v-size { margin: 0 !important; color: #8E8E93 !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.4 !important; white-space: nowrap !important; } section.versions-section .version-grid > .version-card > .cc-meta > .v-size::before, .sw-versions-block .version-grid > .version-card > .cc-meta > .v-size::before { content: none; } section.versions-section .version-grid > .version-card.bundle > .cc-meta > .v-size::before, .sw-versions-block .version-grid > .version-card.bundle > .cc-meta > .v-size::before { content: none !important; } /* --- ⓑ 「已授权」-> 小灰字轻表达(行盒高度与价格行一致 -> 卡高不受影响) --- */ section.versions-section .version-grid > .version-card > .v-price, .sw-versions-block .version-grid > .version-card > .v-price { line-height: 22.5px !important; } section.versions-section .version-grid > .version-card > .v-price.cc-note, .sw-versions-block .version-grid > .version-card > .v-price.cc-note { font-size: 12px !important; font-weight: 400 !important; color: #8E8E93 !important; line-height: 22.5px !important; letter-spacing: .2px !important; } /* --- ⓒ 金卡只保留金色按钮(金色描边 F59E0B / D97706 与金按钮原样保留) --- */ section.versions-section .version-grid > .version-card.bundle > .v-name, .sw-versions-block .version-grid > .version-card.bundle > .v-name { color: #1D1D1F !important; font-weight: 600 !important; } section.versions-section .version-grid > .version-card.bundle > .v-name > .v-bundle-tag, .sw-versions-block .version-grid > .version-card.bundle > .v-name > .v-bundle-tag { background: #F2F3F5 !important; color: #1D1D1F !important; font-weight: 600 !important; border-radius: 6px !important; } section.versions-section .version-grid > .version-card.bundle > .v-price > .v-price-bundle, .sw-versions-block .version-grid > .version-card.bundle > .v-price > .v-price-bundle { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #1D1D1F !important; font-weight: 700 !important; } section.versions-section .version-grid > .version-card.bundle::before, .sw-versions-block .version-grid > .version-card.bundle::before { content: "全家桶" !important; background: #F5F5F7 !important; color: #1D1D1F !important; border: 1px solid #E8E8ED !important; font-weight: 600 !important; letter-spacing: .3px !important; } /* --- ⓓ 图标外层灰底去掉; 只有 emoji 兜底(图挂了)才留极淡底 --- */ section.versions-section .version-grid > .version-card > .v-icon, .sw-versions-block .version-grid > .version-card > .v-icon { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; } section.versions-section .version-grid > .version-card > .v-icon:has(.v-icon-emoji), .sw-versions-block .version-grid > .version-card > .v-icon:has(.v-icon-emoji) { background: #FAFAFB !important; border-radius: 8px !important; } /* --- 卡高 270.73 的间距分配(效果图校准值, 逐字照抄) --- 金卡: 名字下 9.18 / cc-meta 下 11.23 / 价格下 14.09 普通卡: 名字下 15.3 / cc-meta 下 18.7 / 价格下 18.09 ★ 这三对值就是「卡高恒为 270.73」的等式解, 改动任一值都会改卡高。 */ section.versions-section .version-grid > .version-card.bundle > .v-name, .sw-versions-block .version-grid > .version-card.bundle > .v-name { margin-bottom: 9.18px !important; } section.versions-section .version-grid > .version-card.bundle > .cc-meta, .sw-versions-block .version-grid > .version-card.bundle > .cc-meta { margin-bottom: 11.23px !important; } section.versions-section .version-grid > .version-card.bundle > .v-price, .sw-versions-block .version-grid > .version-card.bundle > .v-price { margin-bottom: 14.09px !important; } section.versions-section .version-grid > .version-card:not(.bundle) > .v-name, .sw-versions-block .version-grid > .version-card:not(.bundle) > .v-name { margin-bottom: 15.3px !important; } section.versions-section .version-grid > .version-card:not(.bundle) > .cc-meta, .sw-versions-block .version-grid > .version-card:not(.bundle) > .cc-meta { margin-bottom: 18.7px !important; } section.versions-section .version-grid > .version-card:not(.bundle) > .v-price, .sw-versions-block .version-grid > .version-card:not(.bundle) > .v-price { margin-bottom: 18.09px !important; } /* --- WINHOLD: Windows 分支的 .v-price 本来就 display:none(body.is-win 隐藏所有价格), 所以腾出的高度没被价格行吃掉 -> 加在同一位置, 卡高保持改前的 242.23px --- ★ 只写进 10 个子页的 app.css; 主站 /adobe/ 那边由 MAINHOLD 处理。 */ body.is-win section.versions-section .version-grid > .version-card > .cc-meta { margin-bottom: 30.77px !important; } /* --- ICONFIX1 20261006-START: 版本卡图标统一 64x64 (诊断与证据见 _图标尺寸修复_报告.md) --- 只加"尺寸"这一件事, 结构/文案/配色/留白/间距一律不动。 成因(实测): · 10 个子页 app.css 里有一条很老的 `.v-icon img { width:40px; height:40px }` (lrc:841 / ps:702 / ai:866 / ae:857 / me:980 / pr,au,br,dc,id:841) -> 子页普通卡的图标被硬压成 40x40。 · 主站 /adobe/app.css 没有这条规则: 只有全局 `img, video { max-width:100%; display:block }` (app.css:36) -> 图标自然撑满 .v-icon 的 64x64 盒子 = 64x64。 · 金卡(主站与 /adobe/ps/)的 img 带内联 style="width:64px;height:64px" -> 也是 64x64。 -> 于是【主站 64 / 10 个子页 40】不一致。 取值依据(不是拍脑袋): · 64x64 是站内既有值: `.v-icon` 容器本身就是 width:64px;height:64px (子页 app.css:835 / 主站 app.css:490), `.v-icon-img` 也是 64x64 (子页 928 / 主站 191、491), 主站与 mac 页的图标本来就渲染成 64x64; 也是 VCARDUI2 之前那层 64x64 灰底(#F5F5F7) 的可视尺寸 -> 回到 64 就是"不比改动前小"。 · object-fit: contain -> AI 172x166 / BR 161x156 / ID 167x165 / AU 1200x1172 / 全家桶 103x100 这些非正方形图等比缩放, 既不拉伸变形也不裁切; 渲染盒子一律 64x64, 逐张完全一致。 · .v-icon 是定高 64x64 的 flex 盒(flex-shrink:0) -> 图 64x64 正好填满, 容器高度不变 => 卡片高度不变 (子页 270.73 / 主站 266.03 逐张守值)。 · 作用域与 CLEANCARD2 完全一致(只覆盖 JS 渲染的版本卡网格): /adobe/mac/ 是 section.section#versions 手写静态卡, 不在作用域内, 一行都不动。 · 不动: 卡宽 / 栅格 / 列数 / 内边距 / margin-bottom / 任何颜色 / 任何文案。 --- */ section.versions-section .version-grid > .version-card > .v-icon > img, .sw-versions-block .version-grid > .version-card > .v-icon > img { width: 64px !important; height: 64px !important; max-width: 64px !important; max-height: 64px !important; object-fit: contain !important; } /* --- ICONFIX1 20261006-END --- */ /* ===== CLEANCARD2 20261006-END ===== */ /* ===== VICALIGN1 20261006-START: 金卡(全家桶)卡内文案行 与 同排软件卡【纵向对齐】 ===== 客户 2026-10-06 反馈(基于 ps 页 Mac 截图): "应该和版本卡一致, 文案位置保持一致" —— 同一排里, 金卡与软件卡的【图标 / 名字行 / 元信息行 / 价格行 / 按钮行】 纵向 y 坐标对不齐。 ---- 改前只读实测(本地 headless Chrome + CDP, 1440 视口, macOS UA 直连线上) ---- 金卡相对同排软件卡的逐行 y 差(相对各自卡片顶, 正 = 金卡更低): 图标盒 +1.00 名字行 +1.00 (行盒底 -4.20) 元信息行 -10.33 价格行 -17.80 按钮 顶 -3.00 / 底 -1.00 10 个子页(每页金卡那一排)全部是同一组数字, 误差 <= 0.01px。 成因(3 条, 全部来自 CLEANCARD2 给金卡单独配的"卡高等式解"): ① 金卡 border 2px(金色描边, 客户要求保留) / 软件卡 border 1px -> 金卡卡内内容整体下移 1px; 按钮贴底 -> 按钮底也上移 1px; ② 金卡 .v-name 里没有 .v-year(20px 字号 / 26px 行高), 行盒只有 20.8px; 软件卡有 .v-year -> 名字行盒恒为 26px。再叠加名字下间距 金 9.18 / 普 15.3 -> 元信息行被抬高 (26-20.8) + (15.3-9.18) - 1 = 10.32px; ③ CLEANCARD2 的 cc-meta 下间距 金 11.23 / 普 18.7 -> 价格行再抬高 7.47px。 ---- 修法: 只给【金卡】补齐这 3 处差异; 软件卡一个字节都不动 ---- ① 金卡上下内边距 16.7 -> 15.7 (各 -1px, 抵掉多出来的 1px 描边) ② 金卡 .v-name min-height 20.8 -> 26px (= 软件卡 .v-year 20px/26px 的行盒高), 名字下间距 9.18 -> 15.3 (与软件卡同值) ③ 金卡 .cc-meta 下间距 11.23 -> 18.7 (与软件卡同值) 卡高为什么不涨: 金卡自身内容高 252.00 -> 268.79px, 仍【低于】软件卡的 270.73px -> 行高仍由软件卡决定, 金卡继续被 grid 的 align-items:stretch 撑到 270.73, 多出来的 1.94px 由 `.v-btn{margin-top:auto}` 吸收(VNAMEFIT1 已有该条) -> 卡高逐张不变: 子页 270.73 / 主站 266.03 ✓ (★ 这条也是上下内边距必须各 -1px 的原因: 不补的话金卡内容高 270.79 > 270.73, 行高会变成 270.79, 卡高 +0.06px ✗) 未动: 金色描边 2px #F59E0B / 金色按钮(含它自带的 1px #FFA500 描边) / 蓝按钮 #007AFF / 任何文案文字 / 字号 / 字重 / 图标 64x64 / 名字块宽 245px / 阴影 .07/.11 / 栅格列数 / 间距 / 卡宽 / 卡高 / VNAMEFIT1 / VNAMEWIDTH1 / ICONFIX1 / CLEANCARD2。 ★ 可单独回滚: 删掉 VICALIGN1-START 到 VICALIGN1-END 之间即可。 ============================================================================== */ /* ① 描边补偿: 金卡 border 2px -> 上下内边距各 -1px, 内容起点与按钮终点跟 1px 描边软件卡一致 */ section.versions-section .version-grid > .version-card.bundle, .sw-versions-block .version-grid > .version-card.bundle { padding-top: 15.7px !important; padding-bottom: 15.7px !important; } /* ② 名字行盒 26px(与软件卡 .v-year 20px/26px 的行盒等高) + 名字下间距与软件卡同值 */ section.versions-section .version-grid > .version-card.bundle > .v-name, .sw-versions-block .version-grid > .version-card.bundle > .v-name { min-height: 26px !important; margin-bottom: 15.3px !important; } /* ③ 元信息行下间距与软件卡同值 -> 价格行 y 一致 */ section.versions-section .version-grid > .version-card.bundle > .cc-meta, .sw-versions-block .version-grid > .version-card.bundle > .cc-meta { margin-bottom: 18.7px !important; } /* ===== VICALIGN1 20261006-END ===== */ /* ====================================================================== HEROFOLD1-START 2026-10-07 首屏可见性: 收紧 hero 与版本区之间的垂直留白 背景: 客户反馈"首屏标题副标题占用太多, 看不到下载版本"。 本地 headless Chrome 实测: 1440x900 下第一张版本卡 top=1034.9px(ps), 视口只有 900px -> 卡片完全在首屏之外, 连卡顶都看不到。 本块只动【间距/内边距 + chips 紧凑度 + hero 图列封顶】, 不动任何文案/字号/卡: · 不动: 卡高 / 卡宽 / 列数 / 金卡 / 蓝按钮 / 图标 64 / 名字规则 / 去后缀 / 清爽化 / 金卡一行 / 文案对齐 / 所有 Mac 关键词(一字未删) ✓ · 全部规则包在 @media (min-width:1025px) 里 -> 平板/手机断点(<=1024) 之前 GRIDSPACE4/GRIDSPACE3 等修好的窄屏规则【零影响】✓ 可整体回滚: 删掉 HEROFOLD1-START 到 HEROFOLD1-END 之间即可(见报告回滚命令) ====================================================================== */ @media (min-width: 1025px) { .hero { padding: 24px 0 28px !important; } /* 64/64 -> 24/28 */ .hero-left { min-height: 0 !important; } /* au/id/dc/br/me 的 min-height:560px 是撑高元凶之一 */ .hero-tag { margin-bottom: 10px !important; padding: 6px 14px !important; } .hero-title { margin-bottom: 12px !important; } .hero-desc { margin-bottom: 16px !important; } .hero-trust { margin-bottom: 10px !important; } .hero-keywords { margin-top: 6px !important; gap: 5px !important; } .hero-keywords .kw-chip { font-size: 12px !important; padding: 3px 9px !important; } .hero-cc-logo { margin-top: 8px !important; } .hero-swiper-col { max-height: 400px !important; height: 400px !important; min-height: 0 !important; } .versions-section { padding-top: 24px !important; } /* 64 -> 24 */ .versions-section .section-title { margin-bottom: 6px !important; } .versions-section .section-subtitle { margin-bottom: 12px !important; } #versions > .container > p[style], .versions-section > .container > p[style] { margin: 0 0 8px !important; } /* "下单前请确认..." 提示条 */ } /* HEROFOLD1-END */ /* ====================================================================== HEROFOLD2-START 2026-10-07 首屏左列「VC 变体」落地 依据: _首屏左列深度调研_报告.md §5 VC 列实测值 + §6 推荐 (客户已点头) 详细报告: _VC落地与小图标_报告.md 本块只做 5 件事, 全部在 @media (min-width:1025px) 内 (<=1024 断点零影响): ① .hero-cc-logo (CC 图标行 44px + 8px 间距 = 52px) -> 不显示 · 判定"没有独立的活": 品牌已在 H1 / 页头 / 全站命名 · 它是【文案之外的元素】, 整块隐藏, 不删任何文字 ② .hero-tag 平台徽章 -> align-self:flex-start (从被 flex 拉满的 657.59px 空条收成 356.25px 真胶囊). 文案一字不动, 高度 35.44 不变. ③ .hero-desc 副标题 -> 18px / max-width 600px / line-height 1.85 / justify · 实测: 4 行 148px -> 3 行 99.89px, 右缘 744.00 ≈ 大标题墨迹 746.38 · ★ 文本一个字符都没删: 只把
这个【标签】去掉 (index.html 定点删) ④ .hero-trust -> 去掉第 3 条 `永久可用` (与 chips 里的 `永久可用` 逐字重复, 且副标题末句也有 -> 同一列出现 3 次). 合规两条 + 技术支持一字不动. ⑤ 间距 -> VC 的 20 / 44 / 54 / 36.11 ★ 总高零变化: 用实测把删掉的高度【原样变回间距】(gap_sweep.py 精确反解) Win 分支 10 页 + Mac 的 ai/ps : .hero-trust margin-bottom 36.11px Mac 其余 8 页 : 39.82px (见下方 data-os-only 规则) pr 的 Mac : 73.11px (副标题 5->3 行, 省 103.6px) -> 实测 hero 总高 / 左列固有高 / 首卡 top / 首屏露出 与基线逐位相同 ★ 不动: 卡高/卡宽/列数/金卡/蓝按钮/图标64/名字规则/去后缀/清爽化/金卡一行/文案对齐 ★ 可单独回滚: 删掉 HEROFOLD2-START 到 HEROFOLD2-END 之间即可 (见报告回滚命令) ====================================================================== */ @media (min-width: 1025px) { .hero-left > * { margin-top: 0 !important; margin-bottom: 0 !important; } .hero-left { gap: 0 !important; } .hero-cc-logo { display: none !important; } .hero-tag { align-self: flex-start !important; margin-bottom: 20px !important; } .hero-title { margin-bottom: 44px !important; } .hero-desc { font-size: 18px !important; max-width: 600px !important; line-height: 1.85 !important; text-align: justify !important; text-justify: inter-ideograph !important; margin-bottom: 54px !important; } .hero-trust { margin-bottom: 36.11px !important; } .hero-trust .hero-trust-item:nth-child(3) { display: none !important; } /* Mac 分支: 副标题 5 行->4 行, 比 ai/ps 再省 3.7px, 把间距补回来以保证总高零变化 */ section.hero[data-os-only="mac"] .hero-trust { margin-bottom: 39.82px !important; } } /* HEROFOLD2-END */ /* ====================================================================== HEROTUNE1-START 2026-10-07 首屏左列「文案疏密」调优 客户原话: 「我指的是这里的文案上下间隔太大了，可不可以加大一点副标题字号， 让间隔缩小一点」（截图 = /adobe/ps/ 的 Windows 分支首屏） 详细报告: _首屏文案疏密_报告.md 证据目录: _herotune/ ── 为什么加这一块、而不是改 HEROFOLD2 ── 本块在 cascade 里【排在 HEROFOLD2 之后】，靠"更后的同特异性"取胜， 因此 HEROFOLD2 里那 5 行原始值【一个字符都没有动】（可逐字节复核）。 要回滚：删掉本块 + 把缓存戳 herotune1 改回 herofill1 即可，HEROFOLD2 自动复原。 ── 改哪两个字段（客户本次【明确批准】的只有这两个）── ① 副标题字号 18px -> 20px （客户原话点名"加大一点副标题字号"） ② 副标题行高 1.85 不变（20px -> 37.00px 行高，等比放大） ③ 四处块间距： 徽章 -> 大标题 : 20 -> 14 大标题 -> 副标题 : 44 -> 30 副标题 -> 信任点 : 54 -> 34 信任点 -> 标签 : 36.11 -> 26 (Mac 的 39.82 / pr 的 73.11 同样归到 26) ★ 这两个字段的变化是【客户批准的】；除它们之外，其余所有字段与基线 22/22 逐位相同 （见报告 §6 冻结项复核）。 ── 为什么是 20px 而不是 19 / 21px（实测，20 组合逐页量出来的）── · 20px 是【Windows 分支仍保持 3 行】的最大档：19px 也只 3 行， 但 21px 会让 mac 的 ae 页副标题涨到 5 行（反而更空） · 20px 让间隔占比最接近"看起来不空"的目标，且 Win/Mac 两侧占比几乎相等 （Win 平均 25.48% vs Mac 平均 25.27% -> 两分支观感一致） · 副标题行数：Windows 10/10 页仍 3 行；Mac 3 行的 2 页(ps/ai) -> 4 行， 本来 4 行的 8 页不变。行数变多的那 2 页恰恰是"太松"最明显的页。 ── 守住的铁律（实测复核，见报告 §6）── ✗ 副标题【文字一个字符都没删】: 20 组合 x 全部变体，textContent 与改前逐字节相同 ✗ 版本卡那一片 0 改动 (本块选择器只碰 .hero-left 及其 5 个子块) ✓ 徽章 356.25 宽 / CC 隐藏 / 信任点 3 条 / VE 绿圆点 / chips 8 个 全部保持 ✓ 左右仍等高: 20/20 组合 eqDiff = 0.00px (HEROEQ1 的 stretch 机制未被触碰) ✓ 末行仍对齐: text-align-last:justify 未被覆盖，末行填充 100% ✓ 作用域全在 @media (min-width:1025px) 内 -> <=1024 断点零影响 ★ 可单独回滚: 删掉 HEROTUNE1-START 到 HEROTUNE1-END 之间即可 ====================================================================== */ @media (min-width: 1025px) { /* ① 徽章 -> 大标题 20 -> 14 */ .hero-left .hero-tag { margin-bottom: 14px !important; } /* ② 大标题 -> 副标题 44 -> 30 */ .hero-left .hero-title { margin-bottom: 30px !important; } /* ③ 副标题：字号 18 -> 20px（行高 1.85 等比 -> 37.00px）；下间距 54 -> 34 */ .hero-left .hero-desc { font-size: 20px !important; margin-bottom: 34px !important; } /* ④ 信任点 -> 标签 36.11 / 39.82 / 73.11 -> 26（三分支统一） */ .hero-left .hero-trust { margin-bottom: 26px !important; } section.hero[data-os-only="mac"] .hero-left .hero-trust { margin-bottom: 26px !important; } section.hero#hero[data-os-only="mac"] .hero-left .hero-trust { margin-bottom: 26px !important; } } /* HEROTUNE1-END */ /* ====================================================================== HEROTUNE2-START 2026-10-07 首屏左列「Mac 分支」文案疏密二次调优 客户反馈: 「现在 Windows 上面的看上去很舒服，Mac 的副标题看上去间距太大了」 详细报告: _Mac首屏疏密_报告.md 证据目录: _herotune/ ── ★★ 本块【只作用于 Mac 分支】── 每条规则都挂在 section.hero[data-os-only="mac"] 下。 子页同时渲染 mac / win 两个 hero，nginx 按 UA 注入 html.is-mac / is-win， CSS 把不匹配的那一份 display:none。因此： · Win 分支的 hero 根本不在 [data-os-only="mac"] 作用域内 -> 【0 影响】 · 实测：全部构型下 Win 分支 10 页 × 8 指标【逐位相同】（见报告 §4） ★ 上一轮的 HEROTUNE1 一个字符都没动；本块排在其后，只覆盖 Mac 需要的项。 ── 为什么 Mac 要单独调（实测结论）── 上一轮 Mac/Win 用了同一套值（20px / 1.85 / 14-30-34-26），间隔占比很接近 （Mac 25.27% vs Win 25.48%），但客户看着 Mac 更松。三个实测到的原因： ① ★ 副标题行高 1.85 -> 行距 37px，而行内墨迹只有 20px -> 【行间空档 17px】，墨迹密度只有 54.1%（一半以上是白的） · 对比 Win 是 3 行、Mac 是 4 行 -> Mac 多一次"空档"重复 ② ★ 「大标题 -> 副标题」名义 30px，但大标题底部到副标题第一行【墨迹】 实为 47px；而 Mac 的行距是 37px -> 【块间距看起来和行距一个量级】 （Win 因为只有 3 行，这种"均匀 30px 阶梯"的错觉弱得多） ③ ★ Mac 大标题只有 1 行（Win 的 ps/pr 是 2 行）-> 左列整体更矮 -> 同样的绝对间距，在更矮的列里【比例上占得更多】 ★ 所以本块同时动【行高】和【间距】：只动行高会让左列变矮、间隔占比反升 （实测 20px/1.65 单改行高：占比 25.52% -> 26.00%，更糟） ── 只改 Mac 的这 6 个字段（客户已批：Mac 分支可调）── ① 副标题字号 20px -> 21px ② 副标题行高 1.85 -> 1.7 （行距 37.00 -> 35.70px，墨迹密度 54.1% -> 58.8%） ③ 副标题下间距 34 -> 30 ④ 大标题下间距 30 -> 26 ⑤ 徽章下间距 14 -> 12 ⑥ 信任点下间距 26 -> 24 ★ Win 分支保持 20px / 1.85 / 14-30-34-26 一个数字都不变。 ── 为什么不选 1.65 也不选 22px（实测）── · 20px/1.65：墨迹密度更高(60.6%)，但字号没变大，且行高 1.65 中文正文偏挤 · 22px：行距 37.4px，反而"又松又大"；且会让 ae 的行数变化 · 21px/1.70 是【4 行页数 10/10 不变】的前提下，字号最大 + 行距最紧的档 （21px 配 1.85 不采用；1.75 收得不够） ── 守住的铁律（实测复核，见报告 §5）── ✗ 副标题【文字一个字符都没删】（Mac 关键词全保留） ✓ 左右仍等高: Mac 10/10 eqDiff = 0.00px ✓ 末行仍对齐: text-align-last:justify 未被覆盖 ✓ 徽章 356.25 / CC 隐藏 / 信任点 3 条 / VE 绿圆点 6px / chips 8 个 全部保持 ✓ 版本卡一片 0 改动（本块只碰 .hero-left 及其 5 个子块） ✓ 全部包在 @media (min-width:1025px) 内 -> <=1024 断点零影响 ★ 可单独回滚: 删掉 HEROTUNE2-START 到 HEROTUNE2-END 之间即可 （缓存戳 herotune2 可改回 herotune1，或直接连带 HEROTUNE1 一起按报告回滚） ====================================================================== */ @media (min-width: 1025px) { /* ① 徽章 -> 大标题 14 -> 12 (仅 Mac) */ section.hero[data-os-only="mac"] .hero-left .hero-tag { margin-bottom: 12px !important; } /* ② 大标题 -> 副标题 30 -> 26 (仅 Mac) */ section.hero[data-os-only="mac"] .hero-left .hero-title { margin-bottom: 26px !important; } /* ③ 副标题：字号 20 -> 21px；行高 1.85 -> 1.7；下间距 34 -> 30 (仅 Mac) */ section.hero[data-os-only="mac"] .hero-left .hero-desc { font-size: 21px !important; line-height: 1.7 !important; margin-bottom: 30px !important; } /* ④ 信任点 -> 标签 26 -> 24 (仅 Mac；两种 HTML 写法都覆盖) */ section.hero[data-os-only="mac"] .hero-left .hero-trust { margin-bottom: 24px !important; } section.hero#hero[data-os-only="mac"] .hero-left .hero-trust { margin-bottom: 24px !important; } } /* HEROTUNE2-END */ /* ====================================================================== HEROTUNE3-START 2026-10-07 Mac 分支「副标题疏密」收尾（把字号定回 20px） 客户反馈(上一轮后): 「Windows 看上去很舒服，Mac 的副标题看上去间距太大了」 详细报告: _Mac首屏疏密_报告.md 证据目录: _herotune/ ── 本块为什么存在（HEROTUNE2 的收尾修正）── HEROTUNE2 把 Mac 副标题设成 21px / 1.70 / 12-26-30-24，实测发现： · 21px 会让 【ae 页副标题由 4 行涨到 5 行】（其余 9 页仍 4 行） · 5 行让 ae 的左列 400 -> 411.36、首屏 452 -> 463.36，【10 页里唯独 ae 不一致】 · 而 20px 配同样的 1.70 / 12-26-30-24： 墨迹密度 58.8%、行间空档 14.00px —— 与 21px 的 58.8% / 14.69px 【几乎相同】 （即"紧凑程度"没损失），却能让【10/10 页都稳定在 4 行】 ★ 所以本块只做一件事：把 Mac 副标题字号 21px 定回 20px。 行高 1.70 与间距 12/26/30/24 保持 HEROTUNE2 的值（本块重述一遍，便于单独回滚）。 ── ★★ 只作用于 Mac 分支 ── 每条选择器都挂在 section.hero[data-os-only="mac"] 下。 ★ Win 分支（客户已满意）保持 HEROTUNE1 的 20px / 1.85 / 14-30-34-26 【一个数字都不动】。 实测：本块加上后，Win 分支 10 页 × 全部字段【0 处差异】。 ── 相对客户满意前的"改前"（18px / 20-44-54-36.11），Mac 净变化 ── 副标题 18px -> 20px（字号 +2px，客户先要的） 行高比 1.85 -> 1.70（行距 37.00 -> 34.00px，行间空档 17px -> 14px） 间距 20/44/54/36.11 -> 12/26/30/24 墨迹密度 54.1% -> 58.8%（行内更实） 间隔占比 -> 23.00% ★ 副标题文字一个字符未删。 ── 守住的铁律（实测复核）── ✓ Mac 左右仍等高 10/10 = 0.00px ✓ 末行仍对齐（填充 100%） ✓ 徽章 / CC 隐藏 / 信任点 3 条 / VE 绿圆点 / chips 8 / 版本卡 / 金卡 全部逐位相同 ✓ 全部包在 @media (min-width:1025px) 内 -> <=1024 断点零影响 ★ 可单独回滚: 删掉 HEROTUNE3-START 到 HEROTUNE3-END（Mac 回到 HEROTUNE2 的 21px） 或按报告把 HEROTUNE2+HEROTUNE3 一起删（Mac 回到 HEROTUNE1） ====================================================================== */ @media (min-width: 1025px) { /* ① 徽章 -> 大标题 12 (仅 Mac) */ section.hero[data-os-only="mac"] .hero-left .hero-tag { margin-bottom: 12px !important; } /* ② 大标题 -> 副标题 26 (仅 Mac) */ section.hero[data-os-only="mac"] .hero-left .hero-title { margin-bottom: 26px !important; } /* ③ 副标题：字号定回 20px（21px 会让 ae 变 5 行）；行高 1.7；下间距 30 (仅 Mac) */ section.hero[data-os-only="mac"] .hero-left .hero-desc { font-size: 20px !important; line-height: 1.7 !important; margin-bottom: 30px !important; } /* ④ 信任点 -> 标签 24 (仅 Mac) */ section.hero[data-os-only="mac"] .hero-left .hero-trust { margin-bottom: 24px !important; } section.hero#hero[data-os-only="mac"] .hero-left .hero-trust { margin-bottom: 24px !important; } } /* HEROTUNE3-END */ /* ====================================================================== HEROTUNE4-START 2026-10-07 Mac 副标题：用满列宽 658px + 字号 22px + 行高 1.75（不删一个字） 客户质疑(本轮): 「副标题还压缩文字，那不是更松，更不像一段文字了吗」 详细报告: _Mac副标题用满_报告.md 证据目录: _herotune4/ ── ★★ 本块【不删一个字】── 副标题文案 textContent / innerHTML 逐字节不改（10/10 页实测 identical = True）。 ── 本块做三件事（只作用于 Mac 分支）── ① max-width 600px -> 658px（= 左列内容宽 657.59；段落盒右缘与左列右缘的 缺口 57.59px -> 1.37px，整段占满左列，不再像被截断的一段） ② font-size 20px -> 22px ③ line-height 1.70 -> 1.75（行距 34.00 -> 38.50px；墨迹密度 57.1%） 合起来：400px 底板填充 97.8% -> 100.4%，行数【10/10 页仍是 4 行】。 ── ★ 为什么是 22px（实测：逐行墨迹 ÷ 盒宽，自然值 = 临时把 text-align-last 换回 auto 后的行宽，"不靠拉伸自己长多满"）── 配置 末行自然填充(10页平均) 逐行σ 左列高一致 底板填充 不动 20/1.70/600 88.38% 5.03 400/400 97.8% 21.5/1.75/658 84.58% 6.67 400/400 99.5% （字越大盒越满， 22/1.75/658 ★ 86.55% 5.83 400/400 100.4% 但末行越空） 22.5/1.75/658 88.51% 4.97 405/多页 101.8% ✗ 左列被顶过 400 21/1.75/600 88.03% 5.10 ae 5 行 98.6% ✗ 行数不一致 · 21.5px/658 与 22px/658 都能保住 10/10 页 4 行；22px 的末行自然填充更高 （86.55% vs 84.58%）、σ 更小（5.83 vs 6.67）-> 取 22px · 再大（22.5px）末行更满，但 ps/ai/au/id/dc/br 六页左列内容 405.06px 顶过 400px 底板、左列高度不再统一 -> 否决 · 21px/1.70/600（上一轮报告的 M1）：ae 页副标题会变 5 行 -> 否决 ── ★★ 只作用于 Mac 分支 ── 选择器挂在 section.hero[data-os-only="mac"] 下（10 页里匹配元素数 = 1，Win 分支 = 0）。 ★ Win 分支（客户已满意）保持 20px / 1.85 / max-width 600px / 14-30-34-26 【一个数字都不动】。 实测：把本块从 CSSOM 里删掉再量一遍，Win 分支 10 页 × 全部 CSS 属性/盒子/间距【0 处差异】。 ── 守住的铁律（实测复核）── ✓ 副标题文字一个字符未删/未改 ✓ Mac 左右仍等高 10/10 = 0.00px ✓ 末行仍对齐（text-align-last:justify 未被覆盖，末行渲染填充 100%，像素级复核） ✓ 徽章 / CC 隐藏 / 信任点 3 条 / chips / 版本卡 / 金卡 全部逐位相同 ✓ 横向溢出 = 0 ✓ 全部包在 @media (min-width:1025px) 内 ★ 可单独回滚: 删掉 HEROTUNE4-START 到 HEROTUNE4-END 之间即可； 或 cp app.css.bak.herotune4_20261007_herotune4 app.css（见报告回滚命令）。 ====================================================================== */ @media (min-width: 1025px) { /* ① 盒宽用满左列（600 -> 658 = 左列内容宽 657.59）；② 字号 20 -> 22；③ 行高 1.70 -> 1.75 */ section.hero[data-os-only="mac"] .hero-left .hero-desc { max-width: 658px !important; font-size: 22px !important; line-height: 1.75 !important; } } /* HEROTUNE4-END */ /* HEROTUNE5-START 2026-10-07 Mac 副标题「做紧密 / 像一段话」= 去掉两端对齐 客户原话(本轮): 「完全不行啊，这都不像一段话，做紧密啊，和主标题和下方留点白都行」 详细报告: _Mac副标题紧密_报告.md 证据目录: _herotune5/ ── 本块解决什么 ── HEROFOLD2 给 .hero-desc 设了 text-align:justify，HEROFILL1 又加了 text-align-last:justify —— 两条合起来把【每一行】硬拉到盒宽： · 实测(10 页, 同一段文字 / 同一断行 / 同一字号)：线上每字被插入 0.74 ~ 4.67px 空档 (ps/ai/pr 页 +4.3~4.7px/字 ≈ +29%) · 末行最惨：它本来只有 72~86% 长，被拉到 100% 后每字多插 ~7px(+39%) -> 这就是客户看到的「字与字之间一大段空 / 不像一段话」 本块把这两条【在 Mac 分支上】改掉：text-align:left + text-align-last:auto， 每行按自然长度断开，右边参差（客户明确说可以）。 ── 同时按客户「做紧密」把字号/行高/盒宽定到"紧又是正常段落"的档 ── font-size 22px -> 20px （回到客户已认可的 Windows 同一字号；19/20/21 实测后取 20） line-height 1.75 -> 1.55 （行距 38.50px -> 31.00px） max-width 658px -> 600px （不再"填满列宽"；600 = 左列正文标准宽，Windows 同值） 墨迹密度 57.1% -> 64.5%（全站 14 个候选里最紧的一档，且行间仍留 11px）； 段高 154px -> 124px；实测 10/10 页仍是 4 行、左右仍等高、无横向溢出。 ── margin-bottom 30px -> 60px 是【补偿】，不是审美改动 ── 10/10 页副标题都是 4 行，行距 38.50 -> 31.00，段高正好少 4 × 7.5 = 30.00px。 左列内容是【垂直居中】的，少 30px 会让整列重新居中：徽章/大标题下移 ~14px、 信任点/chips 上移 ~16px，pr 页版本卡上移 30px（首卡 top 806.14 -> 776.14）。 把这 30px 原样加到副标题下间距（客户原话：「和主标题和下方留点白都行」）， 左列总高逐位不变 -> 徽章/大标题/信任点/chips/版本卡/露出 px 全部【0 变化】。 实测：ps 段高 154->124、下间距 30->60、左列高 401.56->401.56、首卡 top 732.70->732.70。 ── ★★ 只作用于 Mac 分支 ── 选择器 section.hero[data-os-only="mac"] .hero-left .hero-desc (0,4,1) 高于 HEROFOLD2 的 .hero-desc (0,1,0) 与 HEROFILL1 的 .hero-left .hero-desc (0,2,0)， 且都带 !important -> 无需改动那两个块（它们原样保留，可单独回滚）。 ★ Win 分支（客户已满意）保持 20px / 1.85 / max-width 600px / 14-30-34-26 【一个数字都不动】。 实测：在 Win 分支注入本块，10 页 × 12 元素 × 62 属性 + 10 盒子 + 19 元信息【0 处差异】。 ── 守住的铁律（实测复核）── ✓ 副标题文字一个字符未删/未改（10/10 页 textContent 逐字节相同） ✓ Mac 左右仍等高 10/10 = 0.00px ✓ 12 页 HTTP 200 / 无横向溢出 / 0 JS 报错 ✓ 徽章 356.25 / CC 隐藏 / 信任点 3 条 / VE 绿圆点 / chips 8 / 版本卡 / 金卡 全部逐位相同 ✓ 四段间距 12/26/30/24 一点没动；副标题下间距只做 30->60 的【高度补偿】 ★ 可单独回滚: sed -i '/HEROTUNE5[-]START/,/HEROTUNE5[-]END/d' app.css 即可 （Mac 回到 HEROTUNE4 的 22px/1.75/658 + 两端对齐）； 或 cp app.css.bak.herotune5_ app.css。 说明: 上面那两条正则里的 [-] 是故意的 —— 本注释里不出现裸的块标记字符串， 这样"按标记整段删除"就永远精确命中本块的头尾两行，不会少删/多删。 ====================================================================== */ @media (min-width: 1025px) { section.hero[data-os-only="mac"] .hero-left .hero-desc { text-align: left !important; text-align-last: auto !important; max-width: 600px !important; font-size: 20px !important; line-height: 1.55 !important; margin-bottom: 60px !important; /* 30 + 30(段高补偿)，见上方说明 */ } } /* HEROTUNE5-END */ /* ====================================================================== HEROTUNE6-START 2026-10-07 Mac 副标题「右端参差」第六轮: 标点比例宽度 + 盒宽 600->580 依据: _Mac副标题对齐_报告.md 证据目录: _herotune6/ 客户原话: 「现在的问题是副标题那里的文案没有对齐」(Mac 首屏; 客户浏览器 = Safari 26.6.2, 由 /var/log/nginx 里唯一那台 Mac Safari 访客 124.229.69.0 的 UA 确认) -- 一、为什么右端会参差 (本轮实测, 不是猜的) -- · text-wrap:balance【一直都在, 也一直在生效】(AESTH1 块内 app.css:2907 一条 .hero-desc{text-wrap:balance!important})。实测把它换成 wrap 之后 ps 的极差从 60.4px 直接涨到 479.5px -> 它既没丢也没被覆盖, 而是"已经在尽力"。 · 但 Blink 的 balance 不是"把各行拉匀"的优化器, 它是 "二分出仍能保持同样行数的最小宽度, 再按那个宽度 greedy 断行"。 ps 页实测: balance 结果 [470.63, 491.02, 462.41, 430.59] 恰好等于在 491.016px(能保持 4 行的最小宽度) 下 greedy 的结果 -> 末行仍短 60.4px。 · 所以"只调盒宽/字号"到不了 ≤20px: 280 档盒宽 x 41 档字号全扫, 4 行前提下 ps 的最好值就是 60.42px (= 现状), 5 行能到 38.36px, 但会改变段高与观感。 -- 二、本块做两件事 -- ① font-variant-east-asian: proportional-width (+ "pwid" 兼容写法) 全角标点改用字体的「比例宽度」变体 -> 标点 advance 收窄 -> 断行位置重排。 ★ 一个汉字都没动、一个字距都没撑开、没有拆开任何拉丁词 (10/10 页 mid-word 断裂检查 = 0, 逐字节 textContent 相同)。 ② max-width 600 -> 580: 让上面那个"二分搜索"的落点更均匀。 实测 10 页极差均值 37.11 -> 17.20px, 最大值 60.42 -> 38.77px。 ★ 行数 10/10 页仍是 4 行; 段高仍 124px -> 首屏高/首卡 top/露出/左右等高 全部 0 变化。 -- 三、代价 (如实写在块里) -- · 标点会略收紧 (，。、（）按比例宽度排)。这是 Apple 中文页面常用的「标点挤压」, 但它确实改变了标点的观感; Safari 若不支持比例宽度特性, 本块对 Safari 只等于 "盒宽 -20px"。 · 想让右端【完全齐平】只有两条路, 都不采用: a) text-align:justify —— 客户上一轮已明确否掉 (每字被撑开 +2.58px); b) word-break:break-all —— 实测会给 ps 制造 "支持 mac|OS" / "+ Inte|l 全兼容" 这种断词 (见报告 §5 的效果图), 比参差更难看。 ★ 可单独回滚: sed -i '/HEROTUNE6[-]START/,/HEROTUNE6[-]END/d' app.css sed -i 's/app\.css?v=herotune6/app.css?v=herotune5/g' index.html 或 cp app.css.bak.herotune6_ app.css (完整回滚命令见报告)。 (上面 [-] 的写法是故意的: 本注释里不出现裸的块标记字符串, 保证"按标记整段删除" 永远只命中本块头尾两行。) ====================================================================== */ @media (min-width: 1025px) { section.hero[data-os-only="mac"] .hero-left .hero-desc { font-variant-east-asian: proportional-width !important; font-feature-settings: "pwid" 1; max-width: 580px !important; } } /* HEROTUNE6-END */ /* ====================================================================== VEICON1-START 2026-10-07 首屏「VE 变体」小图标落地 (客户点的 VE) 依据: _VC落地与小图标_报告.md §3.1 VE 定义 (5 变体效果图已给客户挑) 详细报告: _小圆点落地_报告.md 客户点的 VE = 【去掉 🔍】+【✅ 换成 CSS 画的小圆点】 ① .hero-keywords-label 是那个 🔍 放大镜 (HTML: 🔍) · 它是【假按钮】: cursor:help, 既不可点击、也没有任何搜索功能 · 判定: 长的像个能点的搜索图标却点不动 -> 去掉更诚实 · ★ 只隐藏这一个 label, 后面 8 个 .kw-chip【一个都不动】(SEO 关键词全保留) ② .hero-trust-item::before 现在的 content:"✓" (U+2713, 伪元素, 不是 HTML 字符) · VE 要的是【小圆点】 -> content:"" + width/height 6px + border-radius:50% · ★ 为什么用 CSS 画: 【不经过任何 emoji / 符号字体】 - 原 ✓ 由操作系统字体渲染 (macOS vs Windows 字形/字重/基线都不同) - CSS 画的圆点: 纯几何 + 颜色, 无字体依赖 -> 跨系统【逐像素一致】 ③ ★★ 零高度变化 (本块的设计前提): · 圆点 6x6 (含 1px 描边共 8x8) 比原 ✓ 的字体盒【更矮/更窄】 · .hero-trust-item 是 flex + align-items:center -> 行高由文字行盒决定 · 实测: 改前 23.09px -> 改后 23.09px; hero 总高 461.56 等 20 组合逐位相同 · .hero-keywords-label 是 display:none -> 不占宽高, 标签行仍 23.59px ④ .hero-keywords-label:empty { display:none } 兜底: 万一将来 HTML 里的 🔍 被删掉, 这里的 ::before 也不会冒出一个孤立的假图标 ★ 不动: 信任点文字(合规两条 + 技术支持 一字不改) / chips 8 个 / 卡高 269.73 / 卡宽 267 / 4 列 / 金卡 / 蓝按钮 / 图标 64x64 / 名字规则 / 去后缀 / 价格 / 按钮文案 / 所有 Mac 关键词 ★ 作用域: 全部在 @media (min-width:1025px) 内 (<=1024 断点零影响); section.hero[data-os-only] 天然只命中子页 hero, /adobe/ 主站不命中 ★ 可单独回滚: 删掉 VEICON1-START 到 VEICON1-END 之间即可; 缓存戳 hpherofold2 -> veicon1 回改 (见报告回滚命令) ====================================================================== */ @media (min-width: 1025px) { /* ① 去掉那个「假搜索按钮」🔍 —— 只隐藏 label, 8 个 chip 一个不动 */ .hero-keywords-label { display: none !important; } .hero-keywords-label:empty { display: none !important; } /* 兜底 */ /* ② ✅(伪元素 content:"✓") -> CSS 画的小圆点 */ .hero-trust-item::before { content: "" !important; /* 不要任何字符 -> 不经过 emoji/符号字体 */ display: inline-block !important; width: 6px !important; height: 6px !important; min-width: 6px !important; flex: 0 0 6px !important; /* 在 flex 行里不参与伸缩, 宽度恒定 */ border-radius: 50% !important; /* ★ 圆点就是靠这一行画出来的 */ background: var(--success) !important; /* #34C759, 与原来 ✓ 同色 */ box-shadow: 0 0 0 1px rgba(52,199,89,0.30) !important; /* 细光环, 6px 圆点在白底上更实 */ font-size: 0 !important; /* 双保险: 即便有字体回退也不产生任何字形宽高 */ line-height: 0 !important; vertical-align: middle !important; } } /* VEICON1-END */ /* ====================================================================== DELCHIPS1-START 20261008 /adobe/lrc/ 【Mac 分支】首屏标签行隐藏（ps 同款做法：CSS 隐藏，DOM 保留） ---------------------------------------------------------------------- 客户指令(原话): 「可以了，其它 9 个 Mac 的单页面也按 ps 的改」 = 把这段只在 /adobe/ps/ 上做过的事，铺到 ai/pr/ae/au/lrc/id/dc/br/me 的 Mac 分支。 本块只做【一件事】，与 ps 上同一件事的做法逐字对应（见 _9p_blocks.py / _9p_shadow.py）。 ★ 作用域: @media (min-width:1025px) + section.hero[data-os-only="mac"] -> Windows 分支(#heroWin)与 <=1024 断点【连选择器都命中不到】= 逐字段 0 变化 ★ 不动: 文案(除客户明确要删的版本区副标题那一行) / 卡片几何 / 字号 / 行距 / 末行对齐 / Win 分支 / <=1024 断点 / 主站 /adobe/ / 其它块 / nginx / 数据库 / pay.js ★ 可单独回滚: sed -i '/DELCHIPS1[-]START/,/DELCHIPS1[-]END/d' app.css ====================================================================== */ @media (min-width: 1025px) { /* ① 首屏 8 个关键词标签整行隐藏 —— ps 的做法: DOM 一个不少 + CSS display:none ★ meta keywords 一个字未动（SEO 承接位仍在 DOM 与 meta 层） */ section.hero[data-os-only="mac"] .hero-keywords { display: none !important; } /* ② 【必要补偿】.hero-left 基础样式是 justify-content:center（app.css:.hero-left 基础规则）。 隐藏 chips 行后左列内容变矮，center 会把徽章/主标题/副标题/信任点整列下移 （ps 实测 97 -> 108.02，本页 9 页同理）。 改成 flex-start 后：已有余量的页 0 余量时两者逐像素同效， 有余量的页则是"从顶部起排"，徽章 97 / 主标题 / 副标题 位置【按 ps 的同一语义】对齐。 ★ 只在本页 Mac + >=1025 生效。 */ section.hero[data-os-only="mac"] .hero-left { justify-content: flex-start !important; } } /* DELCHIPS1-END */ /* ====================================================================== CCHERO1-START 20261008 /adobe/lrc/ 【Mac 分支】首屏左列 CC 标志 + 下间距补偿（ps 同款做法） ---------------------------------------------------------------------- 客户指令(原话): 「可以了，其它 9 个 Mac 的单页面也按 ps 的改」 = 把这段只在 /adobe/ps/ 上做过的事，铺到 ai/pr/ae/au/lrc/id/dc/br/me 的 Mac 分支。 本块只做【一件事】，与 ps 上同一件事的做法逐字对应（见 _9p_blocks.py / _9p_shadow.py）。 ★ 作用域: @media (min-width:1025px) + section.hero[data-os-only="mac"] -> Windows 分支(#heroWin)与 <=1024 断点【连选择器都命中不到】= 逐字段 0 变化 ★ 不动: 文案(除客户明确要删的版本区副标题那一行) / 卡片几何 / 字号 / 行距 / 末行对齐 / Win 分支 / <=1024 断点 / 主站 /adobe/ / 其它块 / nginx / 数据库 / pay.js ★ 可单独回滚: sed -i '/CCHERO1[-]START/,/CCHERO1[-]END/d' app.css ====================================================================== */ @media (min-width: 1025px) { /* ① 【间距补偿】HEROTUNE5 当年把 .hero-desc 的下边距 30px -> 60px，是为了补偿 副标题段高（4 行 × 7.5px = 30px）使左列总高逐位不变。 本页本轮要同时 ①隐藏 chips 行（-23.59px）②把 CC 标志放回首屏左列（+44px）， 两者净增 20.41px -> 若不补偿，左列内容会 421.97px，把行高从 401.56 顶到 421.97 -> 首卡 top 下移 20.41px（违反"只能持平或更好"）。 本块把下边距顶成 ps CCHERO1 里同一个值 36.41px（= 60 - 23.59）： 实测 9 页首卡 top 全部【持平或上移 1.56px】，徽章/主标题/副标题 top 一位不动。 */ section.hero[data-os-only="mac"] .hero-left .hero-desc { margin-bottom: 36.41px !important; } /* ② CC 标志: 首屏左列、3 条信任点【下方】、与徽章/主标题/副标题/信任点【左对齐】 ★ 本页 Mac 首屏左列本来就【有】这个元素（.hero-left 的最后一个子元素）， 只是被更早一轮用 display:none 藏了；本块只把它按客户要的位置放回来。 ★ 图标/文字尺寸一条都不写 —— 直接沿用站点既有基础规则（44x44 / 17px 600 / gap 12px）。 */ section.hero[data-os-only="mac"] .hero-left > .hero-cc-logo { display: flex !important; pointer-events: none !important; /* 纯装饰, 不抢鼠标事件（与 ps 一致） */ } } /* CCHERO1-END */ /* ====================================================================== HEROEQ2-START 20261008 /adobe/lrc/ 【Mac 分支】首屏左列内容底 = 右列图片底（ps 同款做法：margin-top:auto） ---------------------------------------------------------------------- 客户指令(原话): 「可以了，其它 9 个 Mac 的单页面也按 ps 的改」 = 把这段只在 /adobe/ps/ 上做过的事，铺到 ai/pr/ae/au/lrc/id/dc/br/me 的 Mac 分支。 本块只做【一件事】，与 ps 上同一件事的做法逐字对应（见 _9p_blocks.py / _9p_shadow.py）。 ★ 作用域: @media (min-width:1025px) + section.hero[data-os-only="mac"] -> Windows 分支(#heroWin)与 <=1024 断点【连选择器都命中不到】= 逐字段 0 变化 ★ 不动: 文案(除客户明确要删的版本区副标题那一行) / 卡片几何 / 字号 / 行距 / 末行对齐 / Win 分支 / <=1024 断点 / 主站 /adobe/ / 其它块 / nginx / 数据库 / pay.js ★ 可单独回滚: sed -i '/HEROEQ2[-]START/,/HEROEQ2[-]END/d' app.css ====================================================================== */ @media (min-width: 1025px) { /* 首屏【左列 <-> 右列】底边精确等高: 把左列最后一个内容块 .hero-cc-logo 的 margin-top 改成 auto -> flex 列把剩余空间全给该外边距 -> 该块【底边】恒等于左列底边 （= 右列图片底边）=> 左右底部恒等。 ★ auto 外边距【不参与】flex 容器的固有高度计算 -> 不会顶动首卡。 */ section.hero[data-os-only="mac"] .hero-left > .hero-cc-logo { margin-top: auto !important; } } /* HEROEQ2-END */ /* ====================================================================== H1ALIGN6-START 20261008 /adobe/lrc/ [Mac 分支] 副标题左右边界 = 主标题 h1 墨迹边界 ---------------------------------------------------------------------- ★★ 20261009 客户新指令:「副标题文案应该按照 PS 的宽度」—— 盒宽由【本页 h1 墨迹宽】改为 【统一 602px】(= ps 的宽度, 10 页一致); 字号/字距在 602px 这个固定盒宽下【逐页重扫】: fs 17.0~23.0 步 0.1 x ls -0.3~+0.3 步 0.1, 结果全部 4 行, 段高锁回 124.00px。 详见 _10页统一602_报告.md 客户原话: 「pr 的…没对齐」(指 pr 页副标题副行「专业图像处理」那一段的右端没跟主标题对齐) 上级指令: 本轮只做 pr / ae / au / lrc / dc / br 这 6 页；盒宽 = 该页 h1 墨迹宽。 详细报告: _6p对齐攻坚_报告.md 本地量测: _6p/ (headless Chrome 154 + Mac Safari UA) -- 一、为什么上一轮这 6 页"做不到" -- 上一轮只用「20px 字号 + 4 行」这一个前提去扫盒宽：这 6 页的 h1 墨迹宽是 557.69px（本页），而 20px 中文副标题的"自然断行前沿"落在 570~600px -> 把盒宽硬拉到 557.69px 时 4 行内每行富余塞进字间隙 = 每字被拉 4.2~5.6px、19 处 >2px -> 触发客户早已否掉的"字距被撑开"，所以上一轮【没硬做】（做法正确）。 -- 二、本轮的新解法: justify 的富余 = (盒宽 - 该行自然宽) / 该行可撑间隙数 -- "断行悬崖" 是【随字号整体缩放】的：把字号改一点点，整段的断行就整体平移， 悬崖前沿随之移动 -> 同一个 h1 墨迹宽可以落进"干净档"。 · 本页实测（盒宽 = 557.69px，逐页单算，绝不复用别页的值）： 字号 20.0px + letter-spacing 0.2px -> 4 行、每字被拉 均 0.23px / 最大 0.953px、 0 处 >1px、0 处 >2px（客户护栏: 均<1px、最大<2px、0 处>2px -> 本页更严，0 处 >1px）。 · 段高: 4 行 × 31.00px = 124.00px（与改前 4 × 31px 逐位相同） -> 副标题块总高不变 -> 信任点 / CC 标志 / 首卡 top / 露出 px 全部 0 变化。 · max-width = 557.69px = 该页 h1 在 Mac SF Pro Display(Heavy) 下的墨迹宽 （列宽 657.59px，557.69 < 657.59，放得下）。 h1 墨迹宽随字体变(Windows Segoe 更宽)，所以只按 Mac 模型取值 —— 与 ps/ai/id/me 同一口径。 -- 三、只动 4 个属性，别的一律不碰 -- text-align / text-align-last / text-wrap 是上一轮 ps 上已验证过的同一组（justify + 末行不拉）； 另加 font-size / letter-spacing / line-height / max-width 逐页单算的 4 个数。 ★ 不动: 文案(一字未删未改) / .hero-desc 的下边距 36.41px(CCHERO1 的高度补偿) / 卡片几何 / Win 分支 / <=1024 断点 / 主站 / 其它块 / nginx / 数据库 / pay.js ★ 作用域: @media (min-width:1025px) + section.hero[data-os-only="mac"] -> Windows 分支(#heroWin)与 <=1024 断点【连选择器都命中不到】= 逐字段 0 变化 ★ 可单独回滚: sed -i '/H1ALIGN6[-]START/,/H1ALIGN6[-]END/d' app.css sed -i 's#\./app\.css?v=align6t1#./app.css?v=allmac1#' index.html (注释里的 [-] 是故意的: 块内不出现裸标记，保证"按标记整段删除"只命中头尾两行) ====================================================================== */ @media (min-width: 1025px) { section.hero[data-os-only="mac"] .hero-left .hero-desc { text-align: justify !important; /* 前 n-1 行两端对齐 -> 右端齐平 */ text-align-last: auto !important; /* 末行不许拉（ps H1ALIGN1 同一组） */ text-wrap: wrap !important; /* 关掉 AESTH1 的 balance，按盒宽自然断行 */ max-width: 602px !important; /* ★ 20261009 客户指令: 10 页统一 = ps 的 602px */ font-size: 20.2px !important; /* 602px 固定盒宽下【逐页重扫】的干净档 */ letter-spacing: 0.3px !important; /* 逐页单算, |ls| <= 0.3px */ line-height: 31.00px !important; /* 4 行 x 31.00px = 段高恒 124.00px (= ps 的 124.00) */ } } /* H1ALIGN6-END */ /* ===== FAQ 折叠 (R71/2026-10-09): 仅作用于问答区, 不影响其它区块 ===== */ .faq-item .faq-a{display:none} .faq-item.open .faq-a{display:block} .faq-q{cursor:pointer} /* ===== FAQ 焦点框 (R74): 只用 :focus-visible 显示, 点击后不留蓝框 ===== */ .faq-q:focus{outline:none} .faq-q:focus-visible{outline:2px solid var(--ink,#111);outline-offset:2px;border-radius:6px} /* ===== R75 (2026-10-09): 去掉「所有人的创造力」上方的大 CC 图标 ===== · 目标 = section.cc-promo-section > .cc-promo-inner > .cc-promo-logo > img (./assets/cc-icon.webp, 88x88) · Mac 档 + Win 档【两档都写】; 10 子页 x 2 = 20 处; 主站 /adobe/ 无此节点 · 不动 = .hero-cc-logo (首屏信任点下方, 44x44) / 页头页脚 / 标题 / 描述 / crosslink 10 卡 · 还原 = 删除本块(到文件尾)即完全恢复 TS=20261009_ccicon */ .cc-promo-section[data-os-only="mac"] .cc-promo-logo, .cc-promo-section[data-os-only="win"] .cc-promo-logo { display: none !important; } /* ====================================================================== WINHERO1-START 20261009 /adobe/lrc/ 【Win 分支】首屏副标题排版 = 本页 Mac 分支 ---------------------------------------------------------------------- 客户指令(原话): 「Windows 的 10 个单页面的文案也太松。按 Mac 的改」 = 把本页 Win 分支(#heroWin)的首屏副标题, 改成与本页 Mac 分支【一模一样】的排版。 逐页取【本页 Mac 的实际 computed 值】(绝不套统一值, 10 页各不相同), 见 _Win副标题按Mac改_报告.md §1 逐页对照表。 ---------------------------------------------------------------------- 本页取值(实测 = 本页 Mac 的 computed): font-size: 20.2px | line-height: 31.00px | letter-spacing: 0.3px text-align: justify | text-align-last: auto | text-wrap: wrap | max-width: 602px ★ 为什么"太松": 改前 Win 是 20px / line-height 1.85(37px) / text-wrap: balance, balance 把每行富余全部推给字距 -> 实测每字被拉最大 1.68 px(全页 2 行 >2px); 本块改成 Mac 那一套后 -> 最大 0.12 px。 ★ 作用域: @media (min-width:1025px) + section.hero[data-os-only="win"] -> Mac 分支 与 <=1024 断点【连选择器都命中不到】= 逐字段 0 变化 (与 Mac 侧那条 H1ALIGN* 的 【min-width:1025px】 完全对称) ★ 本块只动【副标题排版】这 7 个属性: 文案一个字未删/未改; 不动 margin-bottom(Win 自己的 34px 是 HEROTUNE1 的块间距, 不属于"副标题排版")。 ★ 可单独回滚: python3 精确删块, 或 cp -p app.css.bak.winhero_20261009_0950 app.css ====================================================================== */ @media (min-width: 1025px) { section.hero[data-os-only="win"] .hero-left .hero-desc { text-align: justify !important; /* = 本页 Mac */ text-align-last: auto !important; /* = 本页 Mac: 末行不拉 */ text-wrap: wrap !important; /* = 本页 Mac: 关掉 balance(它把富余全变成字距) */ max-width: 602px !important; /* = 本页 Mac 的盒宽 */ font-size: 20.2px !important; /* = 本页 Mac 的 computed 字号(逐页单算) */ letter-spacing: 0.3px !important; /* = 本页 Mac 的 computed 字距(逐页单算) */ line-height: 31.00px !important; /* = 本页 Mac 的 computed 行高 */ } } /* WINHERO1-END */ /* ============================================================================ ★★ RVK2-START 评价区落地（方案 K 混合版 · 落地方案 ⓐ 折叠版）追加块 —— 追加于 20261009 ★ 唯一注释锚：本文件末尾从这一行起到【文件结束】= 本次追加的全部内容 ★ 一键回滚（块在整个文件的最末尾，删到文件尾即可，无歧义）: sed -i '/RVK2-START/,$d' app.css ★ 内容 = 工作区 `_评价样式3_混合版_成品.css` 全文（逐字节） ============================================================================ */ /* ============================================================================ 评价区块 · 第三批【方案 K · 混合版 → 落地方案 ⓐ：折叠版】成品 CSS 骨架 = 第一批 A「经典三卡片」（静态 3 列） 抬头 = 第二批 F「聚合行」 --------------------------------------------------------------------------- ✓ 前缀 .rv-k 完全隔离：不覆盖站内 .review-* 现有规则，也不覆盖 .rv-a~.rv-d / .rv2-* ✓ 卡片沿用站内【已冻结的卡片规则】: 12px 圆角 / 1px #E8E8ED / 常态无影 / hover 只变边色 ★★ 落地方案 ⓐ（客户 2026-10-09 拍板）—— "只显示 3 条 + 一行「共 N 条真实评价 · 查看全部」" · 折叠态：网格里只显示【前 3 条】，第 4 条起加 .rv-k-rest 类 → display:none ★ 12 条文案【一条都不删】：全部仍在 DOM 里，只是 display:none（不是删除、不是截断） · 展开态：给 .rv-k 加 .rv-k-open → .rv-k-rest{display:flex}，剩余 9 条原地展开 · 控件 = 原生