:root { --primary: #FA0F00; --primary-light: #007AFF; --primary-dark: #C80B00; --primary-soft: #FEF2F2; --primary-shadow: 0 4px 14px rgba(250,15,0,0.20); --text: #000000; --text-2: #0A0A0B; --text-light: #1A1A1A; --text-muted: #5A5A5A; --border: #E5E7EB; --border-2: #D1D5DB; --bg: #FFFFFF; --bg-soft: #F7F8FA; --bg-soft-2: #EEF1F5; --ink: #1D1D1F; --ink-2: #2D2D2F; --ink-3: #4A4A4A; --success: #10B981; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #000000; background: var(--bg); line-height: 1.65; font-size: 18px; font-weight: 500; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11", "ss01", "ss03"; } 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 { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* ============== Nav ============== */ .nav { background: rgba(255,255,255,0.92); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; } .nav-inner { display: flex; justify-content: space-between; align-items: center; height: 64px; } .nav-brand { display: inline-flex; align-items: center; } .nav-brand-text { display: flex; flex-direction: row; align-items: baseline; line-height: 1.1; white-space: nowrap; } .nav-brand-name { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; } .nav-brand-sub { font-size: 11px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.5px; margin-left: 4px; } .nav-links { display: flex; align-items: center; gap: 8px; } .nav-links a { color: var(--text); font-size: 16px; font-weight: 600; padding: 8px 14px; border-radius: 8px; transition: all .15s; } .nav-links a:hover { color: var(--text); background: var(--bg-soft); } .nav-cta { background: var(--primary); color: #FFFFFF !important; padding: 10px 20px; border-radius: 8px; font-size: 15px; font-weight: 600; box-shadow: 0 4px 12px rgba(250,15,0,0.25); transition: all .15s; } .nav-cta:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(250,15,0,0.30); } /* ============== Hero (v77 风格: 白底+描边按钮 56px) ============== */ .hero { padding: 80px 0 64px; } .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } /* v228 Kog 1:48 A3+D: Mac UA H1 + macOS button; Win UA keep original */ body.is-mac .hero h1 [data-mac-only] { display: inline; } body.is-win .hero h1 [data-mac-only] { display: none; } body.is-mac .hero h1 [data-win-only] { display: none; } body.is-win .hero h1 [data-win-only] { display: inline; } body.is-mac .hero .btn-dl[data-os-only="mac"] { display: inline-flex !important; } body.is-mac .hero .btn-dl[data-os-only="win"] { display: none !important; } .hero h1 { font-size: 38.4px; margin: 0 0 16px; font-weight: 800; letter-spacing: 0; line-height: 1.3; color: var(--text); } .hero h1 .accent { color: var(--primary); } .hero .sub { font-size: 17px; color: var(--ink-3); max-width: 640px; margin: 0 0 32px; line-height: 1.7; letter-spacing: 0.1px; } .btn-group-hero { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: flex-start; width: 100%; } /* 统一下载按钮 - 全页所有 Win/Mac 按钮共用 .btn-dl */ .btn-dl { position: relative; min-height: 44px; padding: 10px 24px; font-size: 14px; border-radius: 8px; cursor: pointer; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px; transition: all .2s; box-sizing: border-box; font-family: inherit; min-width: 180px; text-align: center !important; white-space: nowrap; flex-direction: row; margin: 0; line-height: 1 !important; vertical-align: middle; color: #FFFFFF !important; } .btn-dl::before { content: '' !important; width: 18px; height: 18px; background-position: center; background-repeat: no-repeat; background-size: contain; flex-shrink: 0; display: inline-block !important; } .btn-dl[data-os='win'] { background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 50%, #6D28D9 100%); color: #fff; border: none; box-shadow: 0 4px 14px rgba(124,58,237,0.30); font-weight: 600; } .btn-dl[data-os='win']:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(124,58,237,0.40); } .btn-dl[data-os='win']::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M3 5.5L10.5 4.5v7H3v-6zM11.5 4.3L21 3v9.5h-9.5V4.3zM3 12.5h7.5v7L3 18.5v-6zM11.5 12.5H21V21l-9.5-1.3v-7.2z'/%3E%3C/svg%3E"); } .btn-dl[data-os='mac'] { background: linear-gradient(135deg, #2D2D2F 0%, #0A0A0B 100%); color: #fff; border: none; box-shadow: 0 4px 14px rgba(0,0,0,0.25); font-weight: 600; } .btn-dl[data-os='mac']:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.35); } .btn-dl[data-os='mac']::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M16.4 12.7c0-2.3 1.9-3.4 2-3.4-1.1-1.6-2.8-1.8-3.4-1.8-1.4-.1-2.8.9-3.5.9-.7 0-1.9-.8-3.1-.8-1.6 0-3.1.9-3.9 2.4-1.7 2.9-.4 7.2 1.2 9.5.8 1.1 1.7 2.4 3 2.4 1.2 0 1.7-.8 3.1-.8 1.4 0 1.9.8 3.1.8 1.3 0 2.1-1.2 2.9-2.3.9-1.3 1.3-2.6 1.3-2.7-.1 0-2.7-1-2.7-4.2z'/%3E%3C/svg%3E"); } .btn-dl .btn-text { display: inline-flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px; line-height: 1 !important; text-align: center !important; vertical-align: middle; } .btn-dl .main { font-size: 14px; font-weight: 700; line-height: 1 !important; text-align: center !important; display: block !important; color: #FFFFFF !important; } .btn-dl .btn-sub { font-size: 11px; font-weight: 500; line-height: 1 !important; opacity: 1 !important; text-align: center !important; display: block !important; color: rgba(255,255,255,0.92) !important; } .hero-img img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.06); } .hero-os-support { color: var(--text-muted); font-size: 14px; margin-top: 16px; } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 32px; } .hero-text { text-align: center; } .hero h1 { font-size: 28.8px; } .hero .sub { margin-left: auto; margin-right: auto; } .btn-group-hero { justify-content: center; } .hero-img { max-width: 480px; margin: 0 auto; } } @media (max-width: 600px) { .btn-dl { width: 100%; } .btn-group-hero { width: 100%; } } /* ============== Trust Bar (5 项) ============== */ .trust-bar { background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 18px 0; } .trust-bar-inner { justify-content: center !important; } .trust-bar-inner .trust-tag { background: #FFFFFF !important; color: #1D1D1F !important; border: 1px solid #E5E7EB !important; font-weight: 500 !important; padding: 6px 12px !important; font-size: 13px !important; box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important; } .trust-bar-inner .trust-tag:hover { border-color: #6D28D9 !important; color: #6D28D9 !important; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(124,58,237,0.15) !important; } .trust-bar-inner .trust-tag svg { flex-shrink: 0; opacity: 0.65; } .trust-bar-inner .trust-tag:hover svg { opacity: 1; } .trust-bar-inner { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 16px; } .trust-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); } .trust-item .check { color: var(--success); font-weight: 800; font-size: 16px; } /* Tags (新设计, GitHub Topics 风格) */ .hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .trust-tag { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; transition: all .15s; letter-spacing: 0.1px; } .tag-green { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; } .tag-purple { background: #F5F3FF; color: #6D28D9; border: 1px solid #DDD6FE; } .tag-blue { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; } .tag-yellow { background: #FFFBEB; color: var(--ink); border: 1px solid #FDE68A; } .tag-red { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; } .trust-item strong { color: var(--text); font-weight: 700; } /* ============== Section 通用 ============== */ .section { padding: 64px 0; background: #fff; } .section.alt { background: var(--bg-soft); } .section-header { margin-bottom: 32px; padding-bottom: 16px; border-bottom: 1px solid #E5E7EB; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; } .section-title { font-size: 32px; color: var(--text); margin: 0; font-weight: 700; letter-spacing: -0.5px; } .section-subtitle { font-size: 15px; color: var(--text-muted); margin: 0; max-width: 480px; text-align: right; } /* ============== categorySection: 4 Tab + 10 sw 网格 ============== */ .cat-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 28px; flex-wrap: wrap; } .cat-tab { padding: 14px 22px; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; font-size: 16px; font-weight: 600; color: var(--text-light); transition: all .15s; } .cat-tab-name { line-height: 1.2; } .cat-tab-desc { font-size: 12px; font-weight: 400; color: var(--text-muted); margin-top: 3px; } .cat-tab:hover { color: var(--text); } .cat-tab.active { color: var(--text); border-bottom-color: var(--primary); } .cat-tab.active .cat-tab-desc { color: var(--text-light); } .cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } @media (max-width: 1024px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } } .sw-card { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: #fff; border: 1px solid var(--border); border-radius: 12px; transition: all .2s; cursor: pointer; } .sw-card:hover { border-color: var(--ink); box-shadow: 0 8px 24px rgba(0,0,0,0.06); transform: translateY(-2px); } .sw-card-icon { width: 44px; height: 44px; background: var(--bg-soft); border-radius: 8px; padding: 4px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .sw-card-icon img { width: 100%; height: 100%; object-fit: contain; } .sw-card-text { flex: 1; min-width: 0; } .sw-card-name { font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 2px; } .sw-card-hot { background: var(--primary); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; letter-spacing: 0.5px; margin-left: 4px; vertical-align: middle; } .sw-card-desc { font-size: 12px; color: var(--text-light); line-height: 1.4; margin: 0; } .sw-card-meta { font-size: 11px; color: var(--text-muted); display: none; } /* ============== swVersionsBlock (v77 核心) ============== */ .sw-versions-block { background: #fff; border: 1px solid var(--border); border-radius: 14px; margin-top: 24px; padding: 24px; } .sw-detail-head { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 20px; min-height: 48px; } .sw-detail-icon { width: 48px; height: 48px; background: var(--bg-soft); border-radius: 10px; padding: 4px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .sw-detail-icon img { width: 100%; height: 100%; object-fit: contain; } .sw-detail-titles { flex: 1; min-width: 0; } .sw-detail-name { font-size: 22px; font-weight: 800; color: var(--text); margin: 0; letter-spacing: -0.3px; } .sw-detail-subname { font-size: 13px; color: var(--text-light); margin: 2px 0 0; } .sw-quick-switch-wrap { margin-bottom: 20px; } .sw-quick-switch-label { font-size: 13px; color: var(--text-light); font-weight: 500; margin-bottom: 8px; } .sw-quick-switch { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } @media (max-width: 1024px) { .sw-quick-switch { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 600px) { .sw-quick-switch { grid-template-columns: repeat(2, 1fr); } } .sw-qs-btn { position: relative; display: flex; align-items: center; gap: 6px; background: #fff; color: var(--text); border: 1.5px solid var(--border); padding: 6px 10px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s; min-height: 44px; min-width: 88px; box-sizing: border-box; font-family: inherit; overflow: visible; } .sw-qs-btn:hover { border-color: var(--ink); transform: translateY(-1px); } .sw-qs-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: var(--bg-soft); border-radius: 4px; flex-shrink: 0; overflow: hidden; } .sw-qs-icon img { width: 100%; height: 100%; object-fit: contain; } .sw-qs-text { font-size: 10px; font-weight: 700; color: var(--text-light); } .sw-qs-name { font-size: 15px; font-weight: 500; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sw-qs-btn.sw-qs-active { background: linear-gradient(135deg, #A78BFA 0%, #6D28D9 100%); color: #fff; border-color: rgba(124,58,237,0.3); box-shadow: 0 4px 14px rgba(124,58,237,0.35), 0 1px 2px rgba(0,0,0,0.05); transform: translateY(-1px); } .sw-qs-btn.sw-qs-active .sw-qs-icon { background: rgba(255,255,255,0.18); } .sw-qs-btn.sw-qs-active .sw-qs-text { color: #fff; } .sw-qs-btn.sw-qs-active .sw-qs-name { color: #fff; } .sw-head-actions { display: flex; flex-direction: row; gap: 8px; flex-shrink: 0; } /* 版本卡 5 列 */ .version-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .version-tabs { display: flex; gap: 8px; margin: 0 0 16px 0; padding: 4px; background: #F5F5F7; border-radius: 10px; width: fit-content; } .version-tab { background: transparent; border: none; padding: 8px 18px; font-size: 14px; font-weight: 600; color: var(--text-light); cursor: pointer; border-radius: 8px; transition: all 0.2s ease; } .version-tab:hover { color: var(--ink-1); } .version-tab-active { background: #fff; color: var(--ink-1); box-shadow: 0 1px 3px rgba(0,0,0,0.08); } /* Kog 9/28 01:33: 全家桶 tab 占全家桶 tab 占家 全家 家 */ /* Kog 9/28 01:53: PS 单页面 v197c L2105-2117 1:1 盘拷家 */ .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: 4px; margin-right: 4px; vertical-align: middle; } .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; } /* tab bundle 仅展示全家桶 */ .version-grid[data-tab="bundle"] { display: block; padding: 20px; } .version-grid[data-tab="bundle"] .version-card:not(.bundle) { display: none !important; } @media (max-width: 1024px) { .version-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .version-grid { grid-template-columns: repeat(2, 1fr); } } .version-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: #fff; border: 1.5px solid var(--border); border-radius: 10px; transition: all .15s; cursor: pointer; position: relative; } .version-card:hover { border-color: var(--ink); box-shadow: 0 4px 12px rgba(0,0,0,0.06); transform: translateY(-2px); } .version-card.active { border-color: #6D28D9; background: linear-gradient(180deg, #F5F3FF 0%, #FFFFFF 100%); box-shadow: 0 4px 16px rgba(124,58,237,0.20); } .version-card-icon { display: none; } .version-card-info { display: flex; flex-direction: column; gap: 2px; } .version-card-name { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.35; letter-spacing: -0.2px; } .version-card-year { font-size: 12px; color: var(--text-muted); } .version-card-meta { font-size: 11px; color: var(--text-light); } .version-card-sizes { display: flex; flex-direction: column; gap: 3px; padding-top: 6px; border-top: 1px dashed var(--border); } .version-card-size { font-size: 12px; color: var(--text-2); } .size-os { display: inline-block; min-width: 28px; padding: 0 4px; background: var(--bg-soft); color: var(--text-light); font-size: 10px; font-weight: 600; border-radius: 3px; text-align: center; margin-right: 4px; } /* ============== featureShowcase ============== */ .feature-section { background: #fff; } .feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .feature-card { position: relative; border-radius: 12px; overflow: hidden; background: #000; aspect-ratio: 16/9; cursor: pointer; display: block; } .feature-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .feature-card:hover img { transform: scale(1.04); } .feature-icon { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 4px; border-radius: 999px; font-size: 11px; font-weight: 600; color: #fff; z-index: 2; } .feature-icon span { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 10px; font-weight: 800; } .feature-bottom { position: absolute; bottom: 0; left: 0; right: 0; padding: 50px 18px 18px; background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.5) 60%, transparent 100%); color: #fff; } .feature-title { font-size: 18px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.3px; } .feature-desc { font-size: 13px; color: rgba(255,255,255,0.85); margin: 0; line-height: 1.4; } /* ===== FAQ (PS Mac 单页 1:1, Kog 02:59, Apple Sonoma 一致风格) ===== */ .faq-section { background: #F5F5F7; padding: 64px 0; } .faq-section .section-title { text-align: center; } .faq-section .section-subtitle { text-align: center; margin: 12px auto 32px; max-width: 600px; } .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: 10px; 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; } .faq-a code { background: #F5F5F7; padding: 2px 6px; border-radius: 4px; font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace; font-size: 14px; color: #c7254e; } /* ============== compareSection ============== */ .compare-section { background: #fff; } .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1200px; margin: 0; } @media (max-width: 768px) { .compare-grid { grid-template-columns: 1fr; } } .compare-col { background: #fff; border-radius: 12px; padding: 24px; border: 1px solid var(--border); position: relative; } .compare-col-bad { background: var(--bg-soft); } .compare-col-good { border: 2px solid var(--primary); } .compare-col-good::before { content: '推荐'; position: absolute; top: -10px; right: 16px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 4px; } .compare-col-title { font-size: 18px; font-weight: 700; margin: 0 0 16px; color: var(--text-light); } .compare-col-good .compare-col-title { color: var(--text); } .step-desc { font-size: 14px; color: var(--text-2); margin: 4px 0 8px; } .step-time { font-size: 12px; color: var(--text-muted); margin: 0; } .compare-step { padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 15px; color: var(--text-2); } .compare-step:last-child { border-bottom: none; } .compare-col-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } .compare-col-tag { background: var(--bg-soft-2); color: var(--text-muted); font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 4px; letter-spacing: 0.5px; } .compare-col-tag-good { background: var(--primary); color: #fff; } .compare-step { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--border); } .step-num-bad, .step-num-good { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; margin-top: 2px; } .step-num-bad { background: var(--text-muted); } .step-num-good { background: var(--primary); } .step-content { flex: 1; min-width: 0; } .step-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 2px; } .step-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; } .compare-total { margin-top: 16px; padding: 14px 16px; border-radius: 8px; font-size: 15px; font-weight: 700; text-align: center; } .compare-total-bad { background: var(--bg-soft); color: var(--text-light); } .compare-total-good { background: var(--primary-soft); color: var(--primary); } .compare-total { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 16px; font-weight: 700; } .compare-col-bad .compare-total { color: var(--text-light); } .compare-col-good .compare-total { color: var(--primary); } /* compareTable (Adobe 简洁风) */ .compare-table { width: 100%; max-width: 920px; margin: 0 auto; border-collapse: collapse; } .compare-table thead th { padding: 14px 20px; font-size: 14px; font-weight: 700; color: var(--text); background: transparent; border-bottom: 2px solid var(--text); text-align: left; } .compare-table thead th:first-child { width: 14%; } .compare-table thead th:nth-child(2) { width: 43%; color: var(--text-light); } .compare-table thead th:nth-child(3) { width: 43%; color: var(--primary); } .compare-table tbody td { padding: 18px 20px; border-bottom: 1px solid var(--border); vertical-align: top; font-size: 15px; line-height: 1.55; color: var(--text-2); } .compare-table tbody td:first-child { color: var(--text); font-weight: 700; font-size: 15px; } .compare-table tbody td:nth-child(2) { color: var(--text-light); } .compare-table tbody td:nth-child(3) { color: var(--text); } .compare-table tbody td b { display: inline; font-weight: 700; color: inherit; } .compare-table tbody tr:last-child td { border-bottom: none; } .compare-table tbody tr:hover td { background: var(--bg-soft); transition: background 0.15s; } @media (max-width: 768px) { .compare-table thead th, .compare-table tbody td { padding: 12px 10px; font-size: 13px; } .compare-table tbody td { line-height: 1.5; } } /* ============== CTA ============== */ .cta-section { background: var(--bg-soft); text-align: center; } /* ============== Footer ============== */ .footer { background: var(--bg-soft); padding: 32px 0 20px; border-top: 1px solid var(--border); } .footer-inner { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 32px; margin-bottom: 20px; } .footer-brand-col { max-width: 320px; } .footer-brand { font-size: 18px; font-weight: 700; margin-bottom: 8px; display: flex; align-items: baseline; gap: 6px; } .footer-brand-sub { font-size: 12px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.5px; } .footer-tagline { font-size: 14px; color: var(--text-light); line-height: 1.6; } .footer-col h4 { font-size: 14px; font-weight: 600; margin-bottom: 10px; } .footer-col a { display: block; color: var(--text-light); font-size: 14px; margin-bottom: 5px; } .footer-col a:hover { color: var(--primary); } .footer-bottom { border-top: 1px solid var(--border); padding-top: 16px; font-size: 13px; color: var(--text-light); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; } @media (max-width: 600px) { .footer-inner { flex-direction: column; } .footer-bottom { flex-direction: column; text-align: center; } } /* ============== 版本卡 (SketchUp 同款: 白卡 + 圆角 + 星评分) ============== */ .sw-version-card { background: #fff; border: 1px solid #e5e5e5; border-radius: 14px; padding: 22px 18px; text-align: center; position: relative; transition: all 0.2s; } .sw-version-card:hover { border-color: #111; box-shadow: 0 8px 24px rgba(0,0,0,0.10); transform: translateY(-3px); } .sw-version-card.hot::before { content: "热 门"; position: absolute; top: -10px; left: 12px; background: #111; color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 6px; font-weight: 700; } .sw-version-icon { display: none; } .sw-version-name { font-size: 14px; font-weight: 800; 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: #111; margin-bottom: 2px; } .sw-version-name.multiline { white-space: normal; text-overflow: clip; line-height: 1.25; min-height: 2.6em; padding-top: 4px; padding-bottom: 4px; } .sw-version-tag { font-size: 13px; color: #6a6a6a; margin-bottom: 10px; } .sw-version-rating { display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 4px; } .sw-version-stars { color: #111; font-size: 14px; letter-spacing: 1px; } .sw-version-score { font-size: 13px; font-weight: 700; color: #111; } .sw-version-dlcount { font-size: 12px; color: #6a6a6a; margin-bottom: 12px; } .sw-version-card.active { border-color: #111; border-width: 2px; background: #fafafa; box-shadow: 0 4px 16px rgba(0,0,0,0.10); } /* 默认版本卡: 空心圆 + 不选中 */ .sw-version-card { min-width: 0; padding-right: 44px !important; } .sw-version-card::after { content: '○'; position: absolute; top: 14px; right: 16px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; color: #c8c8c8; } /* 选中: 实心圆 + 主题色 */ .sw-version-card.active::after { content: '●'; color: #111; } .sw-version-dlrow { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .sw-version-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; background: #2060b0; color: #fff; border-radius: 8px; font-size: 13px; font-weight: 700; transition: all 0.2s; border: none; text-decoration: none; cursor: pointer; } .sw-version-btn:hover { background: #1a4e98; } .sw-version-btn.mac { background: #1B3A6B; } .sw-version-btn.mac:hover { background: #112754; } .sw-version-btn.disabled { background: #C8D9EE; color: #888; cursor: not-allowed; pointer-events: none; } .sw-version-meta { font-size: 12px; color: #4A7AAA; margin-top: 12px; display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; } .sw-version-meta .check { color: #2060b0; font-weight: 800; } /* hero-keywords (v54 chip) */ .hero-keywords { display: flex; gap: 8px; margin-top: 24px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; } .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; } } /* ====== v203 C1 nav-actions / topbar-btn ====== */ .nav-actions { display: flex; gap: 8px; align-items: center; } .topbar-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2, #1D1D1F); cursor: pointer; border: 1px solid transparent; background: none; } .topbar-btn:hover { background: var(--bg-soft-2, #F5F5F7); border-color: var(--border, #E5E5EA); color: var(--ink, #1D1D1F); } .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; } /* ====== v203 C1 pay-modal (login/orders) ====== */ .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; } .pay-mask[hidden] { display: none !important; } [hidden] { display: none !important; } /* v211 Kog 17:35 拍: 支付弹窗卡片白底 (跟 v207 original baseline 1:1, 修"弹出的界面透明了") */ .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); } /* v208 跟 Mac 工具 v138g orders-mask 1:1 (mod 2026-09-28 17:00 Kog 拍) */ .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: 4px; 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: 10px; 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); } /* v137 v138g 12 卡片 */ .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-close:hover { background: #F5F5F7; color: #1D1D1F; } .pay-modal-body { padding: 22px; } .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; } .install-guide-card { background: #fff; border-radius: 18px; padding: 32px; max-width: 760px; margin: 0 auto; box-shadow: 0 4px 20px rgba(0,0,0,0.06); } .install-guide-section { background: #F5F5F7; padding: 0 0 60px; } .install-guide-done { display: block; width: 100%; margin-top: 14px; padding: 12px; background: #001E36; color: #fff; border: none; border-radius: 980px; font-size: 15px; font-weight: 500; cursor: pointer; } .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-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: #001E36; font-size: 20px; font-weight: 700; } .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: 10px; margin: 0 auto 10px; } .qrcode-status { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; } .pay-input:focus { border-color: #0071E3; } .pay-btn-primary { width: 100%; padding: 12px; background: #001E36; color: #fff; border-radius: 8px; border: none; font-size: 15px; font-weight: 700; cursor: pointer; } .pay-btn-primary:hover { background: #001A2E; } .pay-btn-primary:disabled { background: #C7C7CC; 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: #F5F5F7; } /* ====== v203 C1 自适应 (Mac UA 显示 login/orders, Win UA 隐藏) ====== */ body.is-win [data-os-only="mac"] { display: none !important; } body.is-mac [data-os-only="win"] { display: none !important; } /* ====== v203 C2 会员弹窗 (PS v197u 复用) ====== */ .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; } .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); } .version-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .version-card .v-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; } .version-card .v-icon-img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; box-shadow: 0 4px 12px rgba(0,0,0,0.10); } .version-card .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; } .version-card .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; } .version-card .v-size { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; font-weight: 400; line-height: 1.4; } .version-card .v-price { font-size: 16px; color: #1D1D1F; margin-bottom: 12px; font-weight: 700; } .version-card .v-btn { width: 100%; padding: 10px 12px; border-radius: 8px; background: #0071E3; color: #fff; border: none; font-size: 13px; font-weight: 600; cursor: pointer; margin-top: auto; } .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: 4px; 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-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; } /* ===== Reviews (PS 单页 v234, Kog 02:52) ===== */ .reviews-section { background: #FFFFFF; padding: 64px 0; } .reviews-section .section-title { text-align: center; } .reviews-section .section-subtitle { text-align: center; margin: 12px auto 32px; max-width: 600px; } .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: 16px; 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; } @media (max-width: 1024px) { .review-card { flex: 0 0 calc((100% - 40px) / 2); min-width: calc((100% - 40px) / 2); max-width: calc((100% - 40px) / 2); } } @media (max-width: 640px) { .review-card { flex: 0 0 calc(100vw - 80px); min-width: calc(100vw - 80px); max-width: calc(100vw - 80px); } } /* v234 Kog 02:52: FAQ 移到评论区下面, 背景色跟评论区区分 (评论区白底, FAQ 灰底) */ 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; } /* ===== 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/ 用同一套 .version-grid > .version-card 卡片(无 .v-price 元素, * 所以 .v-price 那条在主站是空操作)。实测(Mac 1440): 卡高 296.83px, * 其中 .v-name 固定 min-height:2.6em=41.6px(两行预留), 而版本名 * ("Photoshop 2026 For Mac") 只占 1 行(内容 20.8px) -> 白占 20.8px。 * 与 10 个子页保持一致: 版本名按实际行数占高 + 价格行收紧(空操作) + * 上下内边距 14px + 图标下间距 10px。文案/结构/列数不动。 */ .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; } /* ⑤ /adobe/ -> /adobe/mac/ 站内内链的样式 (中性, 不引入新色系) */ .gs-mac-link { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 14px; padding: 9px 14px; border-radius: 10px; background: #F5F5F7; border: 1px solid #E5E5EA; color: #007AFF; font-size: 13px; font-weight: 600; text-decoration: none; transition: background .15s, border-color .15s; } .gs-mac-link:hover { background: #EDEDF0; border-color: #D8D8DE; } .gs-mac-link-arrow { font-weight: 700; } /* ===== ④ 响应式断点修复 (仅 /adobe/app.css 需要) ===== 缺陷(真实存在且已复现): 本文件 L178 是 5 列基础规则, L202/L203 是断点 (repeat(3,1fr) 与 repeat(2,1fr)), 但 L489 又写了一条基础规则 repeat(4,1fr) —— 它在源码里【排在断点之后】, 且与断点同特异性 (0,1,0), 按层叠规则"后写的赢" -> L202/L203 被完全架空 -> 本页在任何视口恒为 4 列。 实测(375px, Windows): 整行溢出 480~512px, 出现横向滚动, 属真缺陷。 ★ 佐证: /adobe/mac/assets/mac.css 第 47~54 行早就记录了这个同一缺陷, 并在那边用【完全相同的断点值】(1024->3 列, 600->2 列) 做了页面级绕行。 本块只是把同样的意图正面补回 /adobe/app.css。 ★ 修法(最小改动, 不改结构, 不改本文件声明的列数意图): 在文件末尾按原意图重述断点 -> 4 列 / <=1024px 3 列 / <=600px 2 列。 ★ 其余 10 个子页不受此缺陷影响: 它们的 @media(max-width:900px) 排在各自 基础规则【之后】-> 断点本来就生效, 故不改动它们, 避免 901~1024px 的列数被无谓改变。 ★ 作用域写成 .sw-versions-block .version-grid (0,2,0), 比裸 .version-grid (0,1,0) 更具体 -> 稳定覆盖, 且【不波及 /adobe/mac/】。 */ @media (max-width: 1024px) { .sw-versions-block .version-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .sw-versions-block .version-grid { grid-template-columns: repeat(2, 1fr); } } /* ===== GRIDSPACE2 20261005-END ===== */ /* ===== 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 ===== */ /* ===== 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 ===== */ /* ===== 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; } /* ---------- 9. ① 主站字体：Inter 优先 → 系统字体优先（Inter 降为末位兜底，Google Fonts 引用已删） ---------- */ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Roboto, "Helvetica Neue", Arial, "Inter", sans-serif; } /* ===== 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,#FFE55C 0%,#FF8C00 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-wrap: wrap !important; align-items: baseline !important; justify-content: center !important; column-gap: 6px !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: "\00b7"; color: #C7C7CC; margin-right: 6px; } 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; } /* --- MAINHOLD: 主站 /adobe/ 的版本卡模板里没有 .v-price(价格行整行不存在), 腾出的高度按同一原则落在 .cc-meta 与按钮之间 -> 卡高保持改前的 266.03px --- ★ 只写进主站 /adobe/app.css; 子页各用各的 app.css, 不受影响。 */ .sw-versions-block .version-grid > .version-card:not(.bundle) > .cc-meta { margin-bottom: 38.78px !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 ===== */ /* ====================================================================== 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 */ /* ===== 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} /* ============================================================================ ★★ 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 条原地展开 · 控件 = 原生