/** Shopify CDN: Minification failed Line 675:0 Expected "}" to go with "{" **/ /* ============================================================================ SOFARY-STYLE TYPOGRAPHY SYSTEM FOR KIMI-LIGHTING.COM 紧凑排版系统 - 移动端优化版 使用方法： 1. 将此文件上传到你的网站 2. 在 HTML 中添加： 3. 确保此文件在其他 CSS 文件之后加载 ============================================================================ */ /* ============================================================================ 第一部分：重置和基础设置 ============================================================================ */ /* 全局重置：移除所有额外的字间距 */ * { letter-spacing: 0 !important; } /* 基础 HTML 设置 */ html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Body 基础样式 */ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: 400; line-height: 1.4; color: #333333; letter-spacing: 0; } /* ============================================================================ 第二部分：桌面端排版系统 ============================================================================ */ /* 标题系统 */ h1, .h1, .heading-1 { font-size: 32px; line-height: 1.2; font-weight: 600; letter-spacing: 0; margin-top: 0; margin-bottom: 16px; color: #000000; } h2, .h2, .heading-2 { font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: 0; margin-top: 0; margin-bottom: 12px; color: #000000; } h3, .h3, .heading-3 { font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: 0; margin-top: 0; margin-bottom: 10px; color: #333333; } h4, .h4, .heading-4 { font-size: 16px; line-height: 1.3; font-weight: 600; letter-spacing: 0; margin-top: 0; margin-bottom: 8px; color: #333333; } h5, .h5, .heading-5 { font-size: 14px; line-height: 1.3; font-weight: 600; letter-spacing: 0; margin-top: 0; margin-bottom: 6px; color: #333333; } h6, .h6, .heading-6 { font-size: 13px; line-height: 1.3; font-weight: 600; letter-spacing: 0; margin-top: 0; margin-bottom: 6px; color: #666666; } /* 正文文字 */ p, .body-text, .text-body { font-size: 14px; line-height: 1.4; letter-spacing: 0; margin-top: 0; margin-bottom: 12px; color: #333333; } /* 小字 */ .small-text, small, .text-small { font-size: 12px; line-height: 1.3; letter-spacing: 0; color: #666666; } /* 极小字 */ .tiny-text, .text-tiny { font-size: 11px; line-height: 1.3; letter-spacing: 0; color: #999999; } /* 链接 */ a { color: inherit; text-decoration: none; letter-spacing: 0; transition: color 0.2s ease; } a:hover { color: #000000; } /* 按钮 */ button, .button, .btn, input[type="submit"], input[type="button"] { font-size: 14px; font-weight: 500; letter-spacing: 0; line-height: 1.3; padding: 10px 20px; border-radius: 4px; border: none; cursor: pointer; transition: all 0.2s ease; } /* 导航 */ nav, nav a, .nav-link, .navigation a { font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 1.3; } /* 产品相关 */ .product-title, .product-name { font-size: 16px; font-weight: 500; letter-spacing: 0; line-height: 1.3; margin-bottom: 8px; color: #000000; } .product-description { font-size: 13px; line-height: 1.4; letter-spacing: 0; color: #666666; } .price, .product-price { font-size: 16px; font-weight: 600; letter-spacing: 0; line-height: 1.2; color: #000000; } .price-old, .price-compare { font-size: 14px; font-weight: 400; letter-spacing: 0; color: #999999; text-decoration: line-through; } /* ============================================================================ 第三部分：移动端排版系统（关键！） ============================================================================ */ @media (max-width: 768px) { /* 基础字号 */ html { font-size: 14px; } body { font-size: 13px; line-height: 1.4; } /* 标题系统 - 移动端 */ h1, .h1, .heading-1 { font-size: 24px; line-height: 1.2; margin-bottom: 12px; } h2, .h2, .heading-2 { font-size: 18px; line-height: 1.2; margin-bottom: 10px; } h3, .h3, .heading-3 { font-size: 16px; line-height: 1.2; margin-bottom: 8px; } h4, .h4, .heading-4 { font-size: 14px; line-height: 1.2; margin-bottom: 6px; } h5, .h5, .heading-5 { font-size: 13px; line-height: 1.2; margin-bottom: 6px; } h6, .h6, .heading-6 { font-size: 12px; line-height: 1.2; margin-bottom: 4px; } /* 正文 - 移动端 */ p, .body-text, .text-body { font-size: 13px; line-height: 1.4; margin-bottom: 10px; } /* 小字 - 移动端 */ .small-text, small, .text-small { font-size: 11px; line-height: 1.3; } /* 极小字 - 移动端 */ .tiny-text, .text-tiny { font-size: 10px; line-height: 1.3; } /* 按钮 - 移动端 */ button, .button, .btn, input[type="submit"], input[type="button"] { font-size: 13px; padding: 8px 16px; line-height: 1.3; } /* 导航 - 移动端 */ nav, nav a, .nav-link, .navigation a { font-size: 13px; line-height: 1.3; } /* 产品相关 - 移动端 */ .product-title, .product-name { font-size: 14px; line-height: 1.3; margin-bottom: 6px; } .product-description { font-size: 12px; line-height: 1.4; } .price, .product-price { font-size: 15px; line-height: 1.2; } .price-old, .price-compare { font-size: 13px; } } /* ============================================================================ 第四部分：间距系统优化 ============================================================================ */ /* 容器间距 */ .container, .content-wrapper, .main-content { padding-left: 15px; padding-right: 15px; } /* 区块间距 */ section, .section { margin-bottom: 40px; padding-top: 30px; padding-bottom: 30px; } /* 移动端间距调整 */ @media (max-width: 768px) { /* 容器 */ .container, .content-wrapper, .main-content { padding-left: 12px; padding-right: 12px; } /* 区块 */ section, .section { margin-bottom: 30px; padding-top: 20px; padding-bottom: 20px; } /* 卡片/产品项 */ .product-card, .item-card, .card { margin-bottom: 16px; padding: 12px; } /* 网格间距 */ .grid, .product-grid { gap: 12px; } /* 列表项 */ li { margin-bottom: 8px; } } /* ============================================================================ 第五部分：特殊元素优化 ============================================================================ */ /* 表单元素 */ input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], textarea, select { font-size: 14px; line-height: 1.4; letter-spacing: 0; padding: 8px 12px; } @media (max-width: 768px) { input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], textarea, select { font-size: 16px; /* 防止移动端自动缩放 */ padding: 8px 10px; } } /* 标签/徽章 */ .badge, .label, .tag { font-size: 11px; font-weight: 500; letter-spacing: 0; line-height: 1.2; padding: 4px 8px; border-radius: 3px; } @media (max-width: 768px) { .badge, .label, .tag { font-size: 10px; padding: 3px 6px; } } /* 面包屑导航 */ .breadcrumb, .breadcrumbs { font-size: 12px; line-height: 1.3; letter-spacing: 0; } @media (max-width: 768px) { .breadcrumb, .breadcrumbs { font-size: 11px; } } /* 评论/评分 */ .review-text, .rating-text { font-size: 13px; line-height: 1.4; letter-spacing: 0; } @media (max-width: 768px) { .review-text, .rating-text { font-size: 12px; } } /* ============================================================================ 第六部分：Shopify 特定元素（如果适用） ============================================================================ */ /* Shopify 产品卡片 */ .product-card__title, .card__heading { font-size: 16px; font-weight: 500; letter-spacing: 0; line-height: 1.3; } @media (max-width: 768px) { .product-card__title, .card__heading { font-size: 14px; } } /* Shopify 价格 */ .price__regular, .price__sale { font-size: 16px; font-weight: 600; letter-spacing: 0; } @media (max-width: 768px) { .price__regular, .price__sale { font-size: 15px; } } /* Shopify 按钮 */ .product-form__submit, .shopify-payment-button__button { font-size: 14px; font-weight: 500; letter-spacing: 0; padding: 10px 20px; } @media (max-width: 768px) { .product-form__submit, .shopify-payment-button__button { font-size: 13px; padding: 8px 16px; } } /* ============================================================================ 第七部分：颜色系统 ============================================================================ */ :root { --text-primary: #000000; --text-secondary: #333333; --text-tertiary: #666666; --text-light: #999999; --text-lighter: #cccccc; --text-white: #ffffff; } /* 文字颜色工具类 */ .text-primary { color: var(--text-primary) !important; } .text-secondary { color: var(--text-secondary) !important; } .text-tertiary { color: var(--text-tertiary) !important; } .text-light { color: var(--text-light) !important; } .text-lighter { color: var(--text-lighter) !important; } .text-white { color: var(--text-white) !important; } /* ============================================================================ 第八部分：字重工具类 ============================================================================ */ .font-weight-light { font-weight: 300 !important; } .font-weight-normal { font-weight: 400 !important; } .font-weight-medium { font-weight: 500 !important; } .font-weight-semibold { font-weight: 600 !important; } .font-weight-bold { font-weight: 700 !important; } /* ============================================================================ 第九部分：行高工具类 ============================================================================ */ .line-height-tight { line-height: 1.2 !important; } .line-height-normal { line-height: 1.4 !important; } .line-height-relaxed { line-height: 1.6 !important; } /* ============================================================================ 第十部分：补充优化 ============================================================================ */ /* 确保图片不影响布局 */ img { max-width: 100%; height: auto; display: block; } /* 列表样式 */ ul, ol { margin: 0 0 12px 0; padding-left: 20px; } li { margin-bottom: 6px; line-height: 1.4; } @media (max-width: 768px) { ul, ol { margin-bottom: 10px; padding-left: 16px; } li { margin-bottom: 4px; } } /* 表格 */ table { font-size: 14px; line-height: 1.4; } @media (max-width: 768px) { table { font-size: 12px; } } /* 代码块 */ code, pre { font-size: 13px; line-height: 1.4; letter-spacing: 0; } @media (max-width: 768px) { code, pre { font-size: 12px; } /* Kalles 3.2.0 终极强效修复：穿透所有嵌套层级 */ [id*="footer"] [class*="payment"], .nt_payment, .list-payment, .footer__payment-icons { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 12px !important; padding: 0 !important; margin: 20px auto !important; list-style: none !important; float: none !important; /* 防止浮动干扰 */ } /* 强制所有直接子元素横向排列，不准占据 100% 宽度 */ [id*="footer"] [class*="payment"] > *, .nt_payment > li, .list-payment > li { display: inline-flex !important; width: auto !important; max-width: none !important; margin: 0 !important; flex: 0 0 auto !important; } /* 针对图标图片本身的修复 */ .nt_payment img, .nt_payment svg, .payment-icon svg { height: 24px !important; width: auto !important; display: inline-block !important; margin: 0 !important; } /* ============================================================================ 使用说明： 1. 直接应用此 CSS 文件即可实现 Sofary 风格的紧凑排版 2. 所有尺寸已针对移动端优化 3. 使用 !important 确保优先级 4. 可根据实际情况微调数值 5. 建议先在测试环境验证效果 常见问题排查： - 如果样式未生效，检查 CSS 加载顺序 - 如果某些元素仍然松散，检查是否有内联样式覆盖 - 清除浏览器缓存后测试 调整建议： - 如果觉得太紧凑，可以将字号增加 1px - 如果移动端可读性不佳，可以调整行高至 1.5 - 根据品牌风格调整颜色变量 ============================================================================ */