/* ============================================================ HONGPAC · DESIGN SYSTEM ENHANCEMENT LAYER 独立文件 · 纯增强 · 不修改 style.css · 可整体回滚 字体统一 Inter · 视觉规范统一 (container 1200 / card 16px) 加载顺序：必须排在 style.css 之后（ 内紧跟其后挂载） ============================================================ */ /* ── 本地功能变量（仅 design-system.css 内部使用，无平行 token 系统）── */ :root { --measure:68ch; --tracking-tight:-0.02em; --tracking-snug:-0.014em; --tracking-body:-0.006em; --card-radius:16px; --layout-max:1200px; --layout-pad:clamp(20px,5vw,40px); --layout-gap-y:clamp(48px,7vw,80px); } /* ── STEP 2 · TYPOGRAPHY (统一 Inter · 层级 · 负字距 · 60–70ch) ── */ body { font-family:var(--font-sans); font-size:clamp(16px,1.05vw,17px); font-weight:400; line-height:1.7; letter-spacing:var(--tracking-body); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; font-feature-settings:"kern" 1,"liga" 1,"calt" 1; } h1,.h1 { font-family:var(--font-sans); font-weight:600; font-size:clamp(2.1rem,4.6vw,3.35rem); line-height:1.12; letter-spacing:var(--tracking-tight); } h2,.h2 { font-family:var(--font-sans); font-weight:600; font-size:clamp(1.65rem,3vw,2.45rem); line-height:1.2; letter-spacing:var(--tracking-snug); } h3,.h3 { font-family:var(--font-sans); font-weight:600; font-size:clamp(1.05rem,1.8vw,1.25rem); line-height:1.32; letter-spacing:-0.011em; } p { font-weight:400; line-height:1.7; letter-spacing:var(--tracking-body); max-width:min(var(--measure),100%); } .lead { font-weight:400; font-size:clamp(17px,1.5vw,19px); line-height:1.68; letter-spacing:-0.008em; max-width:min(64ch,100%); } .section-header p,.section-header .lead { margin-inline:auto; } /* ── STEP 3 · BUTTON SYSTEM (胶囊 · 品牌绿 · 描边 · hover 上浮) ── */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; min-width:150px; padding:14px 32px; font-family:var(--font-sans); font-size:14px; font-weight:600; letter-spacing:.015em; line-height:1.15; text-align:center; border:2px solid transparent; border-radius:100px; cursor:pointer; transition:background .25s var(--ease),border-color .25s var(--ease), color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease); } .btn:focus-visible { outline:2px solid var(--g500); outline-offset:3px; } .btn-primary { background:var(--g700); color:var(--white); border-color:var(--g700); } .btn-primary:hover { background:var(--g800); border-color:var(--g800); transform:translateY(-2px); box-shadow:var(--shadow-green); } .btn-secondary,.btn-outline { background:transparent; color:var(--g700); border-color:var(--g600); } .btn-secondary:hover,.btn-outline:hover { background:var(--g700); color:var(--white); border-color:var(--g700); transform:translateY(-2px); box-shadow:var(--shadow-green); } .btn:disabled,.btn[disabled] { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; } /* 尺寸修饰符：在基础 .btn 之后重申，恢复大/小按钮原有尺寸（与 style.css 一致） */ .btn-lg { min-height:56px; min-width:190px; padding:17px 40px; font-size:15px; } .btn-sm { min-height:40px; min-width:128px; padding:10px 22px; font-size:12px; } /* ── STEP 4 · CARD SYSTEM (白底 · 轻边框 · 16px 圆角 · hover 上浮) ── */ .card,.feature-card { background:var(--white); border:1px solid var(--gray200); border-radius:var(--card-radius); overflow:hidden; transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease); } .card:hover,.feature-card:hover,.product-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--g300); } .card>.card__img:first-child,.card>.card__img-wrap:first-child { border-top-left-radius:var(--card-radius); border-top-right-radius:var(--card-radius); } .card__img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; } .card__img-wrap { width:100%; overflow:hidden; } .card__img-wrap img,.card__img-wrap .img-placeholder { width:100%; height:100%; object-fit:cover; } .product-card { border-radius:var(--card-radius); overflow:hidden; } /* ── STEP 5 · SECTION & LAYOUT (仅尺寸数值 · 不改布局结构) ── */ .section { padding-block:var(--layout-gap-y); } .container { width:100%; max-width:var(--layout-max); margin-inline:auto; padding-inline:var(--layout-pad); } @media (max-width:480px){ :root{ --layout-pad:18px; --layout-gap-y:48px; } } /* ── V2 · VISUAL REFINEMENT (首页微优化 · 纯追加 · 无结构变更) ── */ /* 标题/正文断行更均衡（渐进增强，旧浏览器自动忽略，不改版面） */ h1,.h1,h2,.h2 { text-wrap:balance; } p,.lead { text-wrap:pretty; } /* 按钮微交互：更顺滑缓动曲线 + 轻微按压反馈（不改尺寸/位置） */ .btn { transition-timing-function:var(--ease-out); } .btn-primary:active,.btn-secondary:active,.btn-outline:active { transform:translateY(0); box-shadow:var(--shadow-sm); } /* 卡片悬停阴影过渡更柔和（仅微调时长，位移幅度不变） */ .card,.feature-card,.product-card { transition-duration:.28s; } /* 键盘焦点环：视觉一致 + 可访问性（仅描边，不占布局空间） */ a:focus-visible { outline:2px solid var(--g500); outline-offset:2px; border-radius:2px; } /* ── V2 · CONTINUOUS REFINEMENT (纯视觉 · 追加 · 无结构变更) ── */ /* 文本选区用品牌绿，细节质感一致 */ ::selection { background:var(--g100); color:var(--g800); } /* 标签 chip 悬停微交互（原本无 hover 态，补一致反馈） */ .tag { transition:background .2s var(--ease-out),border-color .2s var(--ease-out),color .2s var(--ease-out); } .tag:hover { background:var(--g100); border-color:var(--g300); color:var(--g800); } /* 产品卡箭头：悬停时加深为主色，呼应卡片上浮 */ .product-card:hover .card-arrow { color:var(--g700); } /* 表单控件聚焦一致性（页面有输入框则统一，无则无影响） */ input:focus-visible,textarea:focus-visible,select:focus-visible { outline:2px solid var(--g500); outline-offset:2px; } /* 可访问性：尊重系统"减少动态效果"，自动关闭位移/缩放/过渡 */ @media (prefers-reduced-motion:reduce){ .btn,.card,.feature-card,.product-card, .product-card .card__img-wrap img, .product-card .card__img-wrap .img-placeholder { transition:none !important; transform:none !important; } } /* ── v3 FINAL POLISH · 导航下拉 hover gap 修复（仅 hover 安全区，不改样式）── */ /* 触发项与菜单间有 8px 透明间隙，鼠标竖直下移时丢失 hover 致菜单提前关闭。 用透明伪元素桥接该间隙，使 trigger→submenu 的 hover 区域连续、不闪烁。 菜单关闭时 visibility:hidden 会一并禁用此伪元素，故不会误触发打开。 */ .dropdown-menu::before { content:""; position:absolute; left:0; right:0; top:-10px; height:12px; /* 全透明，仅作连续 hover 安全区，不绘制任何可见样式 */ } /* ── v3 FINAL POLISH · 下拉菜单跨页一致性硬锁定（隔离页面级/继承字号）── */ /* 强制固定下拉项文本与图标尺寸，使每页完全一致，不受 body/页面内联样式影响。 */ .dropdown-menu a { font-size:13px !important; /* 绝对字号，隔离继承 */ line-height:1.4; letter-spacing:normal; } .dropdown-menu a span:first-child { /* 仅图标(首个 span)：锁定字号；避免命中文字 span(如 contact 页) */ font-size:18px !important; line-height:1; flex:0 0 auto; } .dropdown-menu a span:not(:first-child) { /* 文字标签若被包成 span，强制回落到正文字号 */ font-size:13px !important; } .dropdown-menu a svg, .dropdown-menu a img { /* 矢量/位图图标：绝对尺寸，不随 font-size 缩放 */ width:18px !important; height:18px !important; flex:0 0 auto; transform:none; /* 中和图标自身被直接 transform 的情况 */ } .dropdown-menu { z-index:1000; } /* 层级锁定：菜单始终在页面内容之上，hover 区稳定 */ /* ============================================================ HONGPAC V5.5.1 · PREMIUM VISUAL SYSTEM UPGRADE CSS-only refinement: typography, spacing, shadow, motion. No HTML structure, content, module order, URL or logic changes. ============================================================ */ :root { --layout-gap-y: clamp(60px, 8.5vw, 100px); --card-radius: 18px; --premium-text: #1f2a23; --premium-muted: #5f6d62; --premium-border: rgba(28, 106, 58, .12); --shadow-soft: 0 1px 2px rgba(15, 40, 26, .05), 0 10px 30px rgba(15, 40, 26, .07); --shadow-ambient: 0 18px 55px rgba(15, 40, 26, .10), 0 2px 8px rgba(15, 40, 26, .04); --shadow-hover-premium: 0 24px 70px rgba(15, 40, 26, .14), 0 8px 22px rgba(15, 40, 26, .08); --motion-premium: cubic-bezier(.16, 1, .3, 1); } body { color: var(--premium-text); font-weight: 380; line-height: 1.72; letter-spacing: .002em; } h1, .h1 { font-weight: 560; line-height: 1.15; letter-spacing: .004em; } h2, .h2 { font-weight: 560; line-height: 1.22; letter-spacing: .002em; } h3, .h3 { font-weight: 580; line-height: 1.34; letter-spacing: 0; } p { color: var(--premium-muted); line-height: 1.72; letter-spacing: .001em; } .lead { color: var(--premium-muted); line-height: 1.72; letter-spacing: .001em; } .section { padding-block: var(--layout-gap-y); } .section-header { margin-bottom: clamp(48px, 6vw, 76px); } .hero { --hero-lift: clamp(8px, 1.4vw, 18px); } .hero-content { gap: clamp(44px, 6vw, 76px); } .hero-text h1 { font-weight: 560; line-height: 1.14; letter-spacing: .004em; } .hero-text .lead { line-height: 1.74; } .hero-buttons, .cta-buttons, .featured-btns { gap: 16px; } .stats-bar { padding-block: clamp(34px, 4.8vw, 54px); } .stats-bar-icon { opacity: .82; } .stats-bar-value { font-weight: 580; letter-spacing: -.012em; } .stats-bar-label { font-weight: 520; } .stats-bar-sub { opacity: .78; } .card, .feature-card, .product-card, .app-card, .form-card, .contact-info-card, .faq-sidebar-card { border-color: var(--premium-border); box-shadow: var(--shadow-soft); transition: transform .28s var(--motion-premium), box-shadow .28s var(--motion-premium), border-color .28s var(--motion-premium), background-color .28s var(--motion-premium); } .card__body { padding: clamp(24px, 2.4vw, 30px); } .product-card .card__body, .app-card-body { padding: clamp(24px, 2.4vw, 30px); } .feature-card { padding: clamp(30px, 3vw, 38px); } .app-card-header { padding: 26px 28px 10px; } .card:hover, .feature-card:hover, .product-card:hover, .app-card:hover, .form-card:hover, .contact-info-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover-premium); border-color: rgba(28, 106, 58, .2); } .card__img-wrap img, .card__img-wrap .img-placeholder, .product-card .card__img-wrap img, .product-card .card__img-wrap .img-placeholder, .app-card-media img, .hero-frame img { transition: transform .45s var(--motion-premium), opacity .28s ease-out; } .product-card:hover .card__img-wrap img, .product-card:hover .card__img-wrap .img-placeholder, .app-card:hover .app-card-media img { transform: scale(1.035); } .hero-frame:hover img { transform: scale(1.018); } .btn { font-weight: 570; letter-spacing: .018em; transition: background-color .24s var(--motion-premium), border-color .24s var(--motion-premium), color .24s var(--motion-premium), transform .24s var(--motion-premium), box-shadow .24s var(--motion-premium), opacity .24s var(--motion-premium); } .btn:hover { transform: translateY(-2px); } .btn-primary:hover, .btn-whatsapp:hover { box-shadow: var(--shadow-ambient); } .btn-outline:hover, .btn-secondary:hover, .btn-white:hover, .btn-ghost:hover { box-shadow: var(--shadow-soft); } .process-section, .final-cta { padding-block: clamp(76px, 9vw, 120px); } .process-step p, .app-card-body p, .feature-card p, .faq-body-inner, .footer-desc { line-height: 1.72; } .faq-item, .faq-list { border-color: rgba(28, 106, 58, .12); } .faq-btn { transition: color .22s var(--motion-premium), padding .22s var(--motion-premium); } .faq-btn:hover { color: var(--g700); } @media (max-width: 900px) { :root { --layout-gap-y: clamp(54px, 8vw, 78px); } .card:hover, .feature-card:hover, .product-card:hover, .app-card:hover { transform: translateY(-3px); } } @media (max-width: 640px) { :root { --layout-gap-y: 54px; } body { line-height: 1.68; } h1, .h1, .hero-text h1 { line-height: 1.18; letter-spacing: .002em; } .card__body, .product-card .card__body, .app-card-body { padding: 24px; } }