/* ========================================================================== 城市招商会客厅 · Design Tokens V1.0 City Investment Reception Hall — Design System 依据：《APP升级优化方案V2.0》《PRD V1.0》《APP功能分布图》 编制日期：2026-09-21 ========================================================================== */ /* 阻止英文站头部导航（英文标签比中文宽）在超宽内容时产生横向滚动条； overflow:clip 不创建滚动容器，sticky 导航与纵向滚动不受影响 */ html { overflow-x: clip; } /* 英文站导航栏内部内容（品牌+菜单+登录按钮）略宽于视口时， 裁切其超出 1440 的极少部分（约 6px），消除横向滚动条 */ .nav { overflow-x: clip; } :root { /* --------------------------------------------------------------------- COLOR · 品牌主色（取自双LOGO） 红来自「投资中国」印记 · 蓝来自「智新」印记 · 金为家族共享点缀色 --------------------------------------------------------------------- */ --c-red: #C8102E; /* 会客厅红 · 主行动色：主按钮/匹配度/AI入口 */ --c-red-vivid: #E60012; /* 印记红原色 · 「投资中国」印记底色上端（品牌强调） */ --c-red-dark: #A30D25; /* 深红 · 按压态/渐变末端 */ --c-red-light: #F4364C; /* 亮红 · 渐变起始 */ --c-red-bg: #FBE9EC; /* 红浅底 · 标签底/高亮块 */ --c-blue: #16375A; /* 政务蓝 · 导航/页头/标题/信任区块 */ --c-blue-mid: #1E4A73; /* 湾流蓝 · 渐变中间色/图表主阶 */ --c-blue-deep: #0C1F33; /* 深空蓝 · 页脚/首屏底部 */ --c-blue-light: #2C5F8F; /* 明蓝 · 图表次级 */ --c-blue-bg: #E8F0F8; /* 蓝浅底 · 标签底/信息块 */ --c-gold: #C9A96E; /* 鎏金 · 点缀：徽标/分隔/政府专区 */ --c-gold-emblem: #E5BF8F; /* 印记金原色 · 「投资中国」印记描边/刻字（品牌强调） */ --c-gold-bright: #E2C48C; /* 亮金 · 渐变中间 */ --c-gold-pale: #F0DCAE; /* 淡金 · 深底上的文字/图标 */ --c-gold-deep: #A8874F; /* 沉金 · 渐变末端 */ --c-gold-bg: #F7EBCB; /* 金浅底 · 荣誉块/提示底 */ /* --------------------------------------------------------------------- COLOR · 功能色 --------------------------------------------------------------------- */ --c-success: #2BA471; /* 已签约 / 已落地 / 在线 */ --c-warning: #E6A23C; /* 政策即将到期 / 信息过期预警 */ --c-error: #D03050; /* 审核驳回 / 校验失败 */ --c-info: #3477C8; /* 提示 / 链接 */ /* --------------------------------------------------------------------- COLOR · 中性色 --------------------------------------------------------------------- */ --c-text-1: #1A2233; /* 正文标题 */ --c-text-2: #4E5969; /* 正文次级 */ --c-text-3: #86909C; /* 辅助说明 / 占位 */ --c-text-4: #B0B6C0; /* 禁用文字 */ --c-line: #E5E6EB; /* 分割线 / 描边 */ --c-line-2: #F2F3F5; /* 更浅分割线 */ --c-bg: #F5F7FA; /* 页面底色 */ --c-card: #FFFFFF; /* 卡片底 */ --c-gray-bg: #FAFBFC; /* 表格斑马纹 */ /* --------------------------------------------------------------------- GRADIENT · 品牌渐变（仅用于 Hero / AI / 荣誉三处） --------------------------------------------------------------------- */ --g-skyline: linear-gradient(135deg, #1E4A73 0%, #16375A 55%, #0C1F33 100%); --g-vermilion: linear-gradient(135deg, #F4364C 0%, #C8102E 50%, #A30D25 100%); --g-gilt: linear-gradient(135deg, #F0DCAE 0%, #D4B47E 50%, #A8874F 100%); /* --------------------------------------------------------------------- TYPOGRAPHY · 字体族 --------------------------------------------------------------------- */ --font-ui: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", -apple-system, sans-serif; --font-serif: "Noto Serif SC", "Source Han Serif SC", SimSun, serif; --font-num: "DIN Alternate", "Barlow Condensed", "Roboto", sans-serif; --font-en: "Inter", "SF Pro Text", -apple-system, sans-serif; /* --------------------------------------------------------------------- TYPOGRAPHY · 字阶（官网 1440px 稿） --------------------------------------------------------------------- */ --fs-h1: 44px; --lh-h1: 60px; --fs-h2: 28px; --lh-h2: 40px; --fs-h3: 18px; --lh-h3: 26px; --fs-h4: 16px; --lh-h4: 24px; --fs-body: 15px; --lh-body: 26px; --fs-small: 13px; --lh-small: 20px; --fs-mini: 12px; --lh-mini: 18px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* --------------------------------------------------------------------- TYPOGRAPHY · 字阶（APP 375px 稿） --------------------------------------------------------------------- */ --app-fs-page: 22px; --app-lh-page: 30px; --app-fs-title: 16px; --app-lh-title: 22px; --app-fs-body: 14px; --app-lh-body: 22px; --app-fs-sub: 12px; --app-lh-sub: 18px; --app-fs-tag: 11px; --app-lh-tag: 16px; --app-fs-tab: 10px; --app-lh-tab: 14px; /* --------------------------------------------------------------------- SPACING · 间距（8pt 基准网格） --------------------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px; /* 官网分节纵向间距 */ /* --------------------------------------------------------------------- RADIUS · 圆角 --------------------------------------------------------------------- */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; /* 按钮 */ --r-lg: 12px; /* 卡片 */ --r-xl: 16px; --r-pill: 999px; /* 搜索框 / 标签 */ /* --------------------------------------------------------------------- SHADOW · 投影 --------------------------------------------------------------------- */ --sd-card: 0 2px 8px rgba(22, 55, 90, 0.06); --sd-hover: 0 8px 24px rgba(22, 55, 90, 0.12); --sd-modal: 0 16px 48px rgba(22, 55, 90, 0.18); --sd-ai: 0 6px 16px rgba(200, 16, 46, 0.35); /* --------------------------------------------------------------------- LAYOUT · 栅格 --------------------------------------------------------------------- */ --layout-max: 1200px; /* 官网内容区宽度 */ --layout-design: 1440px; /* 设计稿宽度 */ --grid-cols: 12; --grid-gutter: 24px; /* --------------------------------------------------------------------- MOTION · 动效 --------------------------------------------------------------------- */ --d-fast: 150ms; --d-base: 300ms; --d-slow: 500ms; --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* --------------------------------------------------------------------- Z-INDEX · 层级 --------------------------------------------------------------------- */ --z-base: 1; --z-sticky: 100; --z-nav: 500; --z-ai: 900; --z-modal: 1000; --z-toast: 1100; } /* ========================================================================== 色彩使用比例校验（60-30-10） 中性底 60% · 政务蓝 30% · 红 10% 整页红色面积 > 10% 即视为违规，评审时按截图取色校验。 鎏金占比 ≤ 5%，仅作点缀。 ========================================================================== */