/* ==================================================== color.css - 站点配色变量表（电脑端 / 移动端通用） ---------------------------------------------------- 本文件只放「颜色」与「字号令牌」，不放间距 / 圆角 / 层级 / 字体族 （间距与圆角令牌在 headfoot.css 末尾「布局令牌」区）。 换站改色：只改 --color-primary 与 --color-secondary 两行即可。 调字号：只改文末「字号令牌」7 档（新增，黄站长定稿 「全部字号以 17 号为基础」，与配色同处统一管理）。 命名规则： --color-{角色} 品牌色 / 背景 / 边框 --font-color-{层级} 文字色 --color-series-{系列} 材料系列色（首页三色品牌专用） --white / --light-gray 中性色 --shadow-{层级} 阴影 同色只保留一个变量名，不再保留语义重复的别名。 第二轮整理（范围：新首页 + 头尾）： 1. 同色归并 9 组，53 → 17 个变量。其中 #FFFFFF 原有 5 个名字 （--white / --color-bg-primary / --font-color-inverse / --nav-color / --border-list）合并为 --white 一个； --primary / --nav-bg / --font-bold（同指主色）合并为 --color-primary。 引用处同步改名，共 16 处（headfoot.css 14 / index.css 5 / master.css 4，按变量计）。 2. 命名统一：文字色一律 --font-color-*（原 --font-bold 这类 「像字重实为颜色」的名字全部消除）。 3. 删除零引用变量 20 个（状态色 / 阴影三档 / 遮罩 / 交互态 / 历史别名 --dark-gray --gray-bg --font-hover --font-color-title 等）。 4. 本次范围＝电脑端新首页（含头尾 / master.css）。内页 inside.css 与 移动端 *_mob.css 仍为旧代码，未改造；它们引用的旧变量已不在本表， 改造时按文末「旧变量映射」补齐即可。 第三轮整理： --light-gray(#F5F7FA) 与 --color-bg-secondary(#F8F9FA) 仅差 3 个色阶、 肉眼不可辨，合并为一个。保留 --light-gray（与首页效果稿的 --bg 同值）， 退役 --color-bg-secondary；引用处同步改名 9 处（headfoot.css 7 / inside.css 2），视觉零变化（差异仅 3 阶，不可辨）。 变量数：17 -> 16。 giso 站（广东吉塑新材料）换配色 —— 三色品牌。 上一行为上游站的「深蓝 #14477E + 金 #D9A441」双色体系， 与本站定稿效果图《方案B-三色品牌》不一致。本次按定稿的最终值改写， 采取「只改值、不改名」的做法 —— 变量名一个都没动，所以引用这些变量的 headfoot.css / master.css / index.css / inside.css 全部无需改代码， 全站配色自动跟随（这正是本文件「换站改色只改两行」的设计意图）。 变量数：16 -> 20（新增 4 个：3 个材料系列色 + 1 个辅助绿） -> 59（首页 index.css 落地时再新增 39 个：模块底色 4 / 强调描边 3 / 深色表面 4 / 标签提示文字 3 / 半透明白字族 9 / 半透明主色族 4 / 半透明辅助色族 2 / 阴影色 6 —— 全部由 index.css 的机械转换脚本按 「定稿里实际用到的色值」自动登记，不是预先拍脑袋列的）。 色值来源：html/方案B-三色品牌-定稿.html。该文件里 :root 被客户确认顺序版 覆盖过 3 次，本表取的是**最后一层**（也是效果图上真实生效的那层）， 不是初版初稿的 #8CC018 绿 / #F09800 橙。 ==================================================== */ :root { /* ========== 品牌色 ========== */ --color-primary: #28A0E0; /* 主色：蓝（定稿最终值，初版 #28A0E0 未变） */ --color-primary-light: #EAF5FC; /* 主色浅底：淡蓝 */ --color-primary-dark: #1470B0; /* 主色深：深蓝，导航 hover / 系列二用色 */ --color-primary-transparent: rgba(40, 160, 224, 0.1); /* ========== 辅助色 ========== */ --color-secondary: #C8955A; /* 辅助色：暖橙（定稿把初版 #F09800 压暗成 muted 橙） */ --color-secondary-light: #D8B08A; --color-secondary-dark: #A6743F; /* ========== 材料系列色（三系列 = 三色品牌）========== */ /* 首页「三系列 × 十九大类」矩阵与三张系列详情卡按系列取色， 绿=通用材料 / 蓝=一般材料 / 橙褐=超高温工程材料。 */ --color-series-gen: #7E9B3C; /* 通用材料系列 */ --color-series-std: #1470B0; /* 工程塑料系列（与 --color-primary-dark 同值，角色不同故各留一名） */ --color-series-ht: #B98432; /* 超高温工程材料系列 */ /* ========== 辅助绿 ========== */ /* 三色渐变（--color-tri）的中段色，以及品牌色带的点缀色。 定稿把初版的高饱和绿 #8CC018 压成 #8FAE55 以免与蓝色抢主调。 */ --color-accent-green: #8FAE55; /* ========== 三色渐变 ========== */ /* 定稿的招牌色带：蓝 60% → 绿 20% → 橙 20%。用于服务卡顶边、应用领域卡顶边。 */ --color-tri: linear-gradient(90deg, #28A0E0 0%, #28A0E0 60%, #8FAE55 60%, #8FAE55 80%, #C8955A 80%, #C8955A 100%); /* ========== 中性色 ========== */ --white: #FFFFFF; /* 纯白：页面底 / 反白字 / 通用白 */ --light-gray: #F7FAFC; /* 浅底：次要背景 */ --color-border: #E6EDF3; /* 常规边框（比上游站的 #DEE2E6 更淡偏蓝） */ /* ========== 文字色 ========== */ /* 定稿的墨色体系：ink 用于标题与正文，gray 次要，grayL 辅助说明。 */ --font-color-title: #122B3E; /* 标题 / 加粗 */ --font-color: #122B3E; /* 正文（定稿 body 与标题同用 ink，不另造深浅层级） */ --font-color-normal: #5F7284; /* 次要文字 */ --font-color-light: #98A8B6; /* 辅助说明 */ --font-color-placeholder: #B8C4CE; /* 占位符 */ /* ========== 首页模块表面底色 ========== */ /* 定稿用「相邻模块底色交替」制造区块节奏：淡蓝 → 浅灰蓝 → 米 → 白。 这 4 个是「表面色」不是「品牌色」，故与主色分开登记。 */ --color-bg-info: #DCEAF7; /* 产品中心 / 行动引导：淡蓝 */ --color-bg-info-strong: #D3E4F3; /* 核心数据条：蓝（深一档） */ --color-bg-muted: #EEF1F4; /* 工程塑料系列 / 资质认证：浅灰蓝 */ --color-bg-warm: #FAF6EE; /* 应用领域 / 合作客户：米 */ /* ========== 强调描边 ========== */ --color-border-strong: #D7E5F0; /* 行动引导按钮描边 */ --color-border-accent: #C6DCEC; /* 资质卡 hover 描边 */ --color-border-light: #BBDDF2; /* 产品行 hover 描边 */ /* ========== 深色表面 / 渐变深端 ========== */ --color-footer-bg: #08192B; /* 页脚底色 */ --color-primary-darker: #0B3B62; /* 按钮 / 导航 hover 渐变的深端 */ --color-cta-dark: #0A2438; /* 行动引导深底（定稿 v4 起已被 background:none 覆盖，保留备查） */ --color-cta-dark-2: #0E3450; /* 同上，渐变另一端 */ /* ========== 标签 / 提示文字 ========== */ --color-tag-green: #5E7A28; /* 企业动态绿标签文字 */ --color-tag-orange: #96632A; /* 企业动态橙标签文字 */ --color-note: #9A6B1E; /* 「效果占位」提示文字 */ /* ========== 半透明 · 深底白字族 ========== */ /* 同一个白落在不同底色上需要不同透明度，逐档登记，避免样式里散落 rgba 字面量。 */ --color-white-a95: rgba(255, 255, 255, 0.95); --color-white-a92: rgba(255, 255, 255, 0.92); --color-white-a90: rgba(255, 255, 255, 0.90); --color-white-a60: rgba(255, 255, 255, 0.60); --color-white-a52: rgba(255, 255, 255, 0.52); --color-white-a50: rgba(255, 255, 255, 0.50); --color-white-a40: rgba(255, 255, 255, 0.40); --color-white-a38: rgba(255, 255, 255, 0.38); --color-white-a10: rgba(255, 255, 255, 0.10); /* ========== 半透明 · 主色族（标签底 / 光晕）========== */ --color-primary-a32: rgba(40, 160, 224, 0.32); --color-primary-a28: rgba(40, 160, 224, 0.28); --color-primary-a12: rgba(40, 160, 224, 0.12); --color-primary-a11: rgba(40, 160, 224, 0.11); /* ========== 半透明 · 辅助色族（系列卡图标底）========== */ --color-accent-green-a13: rgba(143, 174, 85, 0.13); --color-secondary-a13: rgba(200, 149, 90, 0.13); /* ========== 阴影色（定稿的投影是偏蓝墨色，不是纯黑）========== 本组只登记「颜色」；偏移与模糊半径留在 index.css 的 box-shadow 里， 与本文件「只放颜色、不放尺寸」的口径一致。 */ --shadow-ink-13: rgba(20, 40, 60, 0.13); --shadow-ink-12: rgba(20, 40, 60, 0.12); --shadow-ink-11: rgba(20, 40, 60, 0.11); --shadow-ink-10: rgba(20, 40, 60, 0.10); --shadow-primary-08: rgba(20, 112, 176, 0.08); --shadow-dot: rgba(0, 0, 0, 0.3); /* 轮播圆点 */ /* ========== 阴影 ========== */ /* 定稿的投影是偏蓝的深色投影（rgba(20,40,60,...)），不是纯黑投影。 */ --shadow: 0 10px 26px rgba(20, 40, 60, 0.10); /* ========== 字号令牌（新增，黄站长定稿） ========== 全站字号以 17px 为基础，收敛为 7 档，与配色同在本文件统一管理（换站/调级只改这里）。 命名按「层级」不按「位置」——任何元素按它的角色取档，不按它在哪里取档。 消费方式：font-size: var(--fs-xxx)；禁止再散写 px/rem 字面量（存量按批次逐步归拢）。 依据与换算规则见 seo4305-frontend-ui §22。 */ --fs-hero: 44px; /* 数据大数字（首页核心数据条） */ --fs-h1: 36px; /* 板块大标题（首页 h2 / CTA 大标题） */ --fs-h2: 24px; /* 内页详情页主标题 / 品牌名 */ --fs-h3: 18.5px; /* 卡片标题 / 板块小标题 */ --fs-body: 17px; /* 正文基准（全站基础字号，新闻/产品/栏目详情正文） */ --fs-small: 15px; /* 辅助说明（导航 / 卡片摘要 / 标签） */ --fs-tiny: 13px; /* 极小注脚（英文 kicker / 备案号 / 时间戳） */ /* ========== 行距令牌（新增，黄站长定稿） ========== unitless 比率，4 档，与字号令牌同处统一管理（调全站行距只改这里）。 收敛规则：1.3~1.45 → tight；1.5~1.7 → normal；1.75~2.1 → loose；1 → reset。 固定 px 行高（line-height:26px 这类「用行高垂直居中」的布局手法）不收编、继续写字面量。 消费方式：line-height: var(--lh-xxx)；标题紧凑值 1.1/1.2 属于刻意压紧，保留字面量。 */ --lh-reset: 1; /* 单行 / 图标 / 清除默认 */ --lh-tight: 1.35; /* 标题 / 按钮 / 紧凑卡片 */ --lh-normal: 1.6; /* 导航 / 列表 / 通用 UI 文本 */ --lh-loose: 1.85; /* 长正文（新闻/产品/栏目详情富文本） */ } /* ==================================================== 旧变量映射（内页 / 移动端旧代码仍引用，本次未改造） ---------------------------------------------------- 下方仅作对照，不定义变量。将来改造内页 / 移动端时， 把旧名按右侧新名替换即可，颜色值保持一致。 --nav-bg --font-bold --primary -> --color-primary --nav-hover --secondary -> --color-secondary --nav-color --border-list --font-color-inverse -> --white --font-normal --dark-gray -> --font-color --font-light --mid-gray -> --font-color-normal --font-span -> --font-color-light --gray-bg --color-bg-secondary -> --light-gray 以下 3 个色值本表没有，属旧代码专用，改造时再补（保留色值备查）： --border #dcdcdc 边框（移动端 11 处 + PC 内页 3 处） --border-bg #f5f5f5 浅灰底（仅移动端 9 处） --font-link #576B95 链接蓝（仅移动端 3 处） ==================================================== */