/* ========================================================================== 量浩合规 · 双站 Design Tokens（CSS Variables） ========================================================================== 用法： - 官网 gstlh.com → 使用 [data-brand="D"] 包裹 或 在 - 个人站 zhaogong.com → 在 - 两站共享 spacing/radius/breakpoint（结构层） - 配色/字体/强调/辅助图形完全分流（语义层） ========================================================================== */ :root { /* ===== 共享结构层（两站相同） ===== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 18px; /* D 方印圆角 */ --radius-xl: 24px; --container-max: 1240px; --container-narrow: 880px; --font-body-line: 1.7; --font-heading-line: 1.25; --shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.10); --shadow-2: 0 4px 6px rgba(0,0,0,.07), 0 10px 15px rgba(0,0,0,.10); --shadow-3: 0 10px 25px rgba(0,0,0,.10), 0 20px 40px rgba(0,0,0,.15); } /* ========================================================================== D 方案 · 科技未来（官网 gstlh.com） ========================================================================== */ .brand-d, [data-brand="D"] { /* 配色 */ --c-bg: #1A1F2E; /* 深空灰 · 主背景 */ --c-bg-elev: #111625; /* 略深，用于卡片/分区 */ --c-bg-tint: #2A3142; /* 浅深空，边框/描边 */ --c-text: #E5E7EB; /* 浅灰 Light · 正文 */ --c-text-dim: #9AA3B2; /* 次级文字 */ --c-accent: #00D9C0; /* 电子青 Cyan · 主强调（70% 占比） */ --c-accent-2: #FFB800; /* 暖橙 Amber · 次强调/数据/CTA */ --c-line: rgba(0,217,192,.18); /* 字体（fallback 链） */ --font-cn: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif; --font-en: "Manrope", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --font-display: var(--font-en); /* 字号（v2 类型尺度：H1 32 / H2 24 / H3 18 / Body 14 / Cap 12） */ --fs-h1: 32px; --fs-h2: 24px; --fs-h3: 18px; --fs-body: 14px; --fs-small: 12px; /* 辅助图形语言 */ --decor-line-stroke: var(--c-accent); --decor-dot-fill: var(--c-accent); --decor-grid-gap: 16px; /* Logo 装饰 */ --logo-mark-radius: 18px; --logo-mark-border: 3px solid var(--c-accent); --logo-mark-bg: var(--c-bg); } /* ========================================================================== G 方案 · 科技未来（浅底变体 · 官网 gstlh.com 备选） 与 D 同视觉语言（电路 Mark / 电子青 / 暖橙 / 思源黑体 + Manrope）， 仅把背景整体提亮一档，去掉「发黑」感，更适合长文阅读与浅色环境投屏。 内容结构、Logo、字体、辅助图形与 D 完全一致，仅配色明暗不同。 ========================================================================== */ .brand-g, [data-brand="G"] { /* 配色（D 浅底版：页面底 / 深空灰 / 卡片 / 边框 各提亮一档） */ --c-bg: #1B2436; /* 页面底（原 #0A0E17）· 提亮 */ --c-bg-elev: #222C45; /* 深空灰（原 #1A1F2E）· 主背景 */ --c-bg-tint: #3E4E72; /* 边框/描边（原 #2A3142）· 提亮 */ --c-text: #E5E7EB; /* 浅灰 Light · 正文 */ --c-text-dim: #9AA3B2; /* 次级文字 */ --c-accent: #00D9C0; /* 电子青 Cyan · 主强调 */ --c-accent-2: #FFB800; /* 暖橙 Amber · 点缀/CTA */ --c-line: rgba(0,217,192,.18); /* 字体（与 D 一致） */ --font-cn: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif; --font-en: "Manrope", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --font-display: var(--font-en); /* 字号（与 D 一致：H1 32 / H2 24 / H3 18 / Body 14 / Cap 12） */ --fs-h1: 32px; --fs-h2: 24px; --fs-h3: 18px; --fs-body: 14px; --fs-small: 12px; /* 辅助图形语言（与 D 一致） */ --decor-line-stroke: var(--c-accent); --decor-dot-fill: var(--c-accent); --decor-grid-gap: 16px; /* Logo 装饰（与 D 一致） */ --logo-mark-radius: 18px; --logo-mark-border: 3px solid var(--c-accent); --logo-mark-bg: var(--c-bg); } /* ========================================================================== H 方案 · 白色浅色系（官网 gstlh.com 备选 · 以 G 为参考） 与 D/G 同视觉语言：电路 Mark / 电子青 / 暖橙 / 思源黑体 SC + Manrope 仅主色改为白色 #FFFFFF + 浅冷灰表面，去暗底；内容/Lo/字体/辅助图形全同 G 注意：G 原方案不改动；H 是独立浅色备选 ========================================================================== */ .brand-h, [data-brand="H"] { /* 配色 */ --c-bg: #FFFFFF; /* 纯白 White · 主背景 */ --c-bg-elev: #F4F8FB; /* 浅冷灰，卡片/分区表面 */ --c-bg-tint: #E4E9F0; /* 浅灰蓝，边框/描边 */ --c-text: #16202E; /* 深墨 Near-Black · 正文 */ --c-text-dim: #5A6B7B; /* 次级文字 */ --c-accent: #00D9C0; /* 电子青 Cyan · 填充/标签底（与 D 同） */ --c-accent-text:#0E8C7E; /* 电子青·文字态（白底上深一档保对比） */ --c-accent-2: #FFB800; /* 暖橙 Amber · 点缀/CTA（与 D 同） */ --c-amber-text:#D98E00; /* 暖橙·文字态（白底上深一档保对比） */ --c-line: rgba(22,32,46,.10); /* 字体（与 D 一致：思源黑体 SC + Manrope） */ --font-cn: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif; --font-en: "Manrope", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --font-display: var(--font-en); /* 字号（与 D 一致：H1 32 / H2 24 / H3 18 / Body 14 / Cap 12） */ --fs-h1: 32px; --fs-h2: 24px; --fs-h3: 18px; --fs-body: 14px; --fs-small: 12px; /* 辅助图形语言（与 D 一致） */ --decor-line-stroke: var(--c-accent); --decor-dot-fill: var(--c-accent); --decor-grid-gap: 16px; /* Logo 装饰（与 D 一致） */ --logo-mark-radius: 18px; --logo-mark-border: 3px solid var(--c-accent); --logo-mark-bg: var(--c-bg); } /* ========================================================================== E 方案 · 东方禅意（个人站 zhaogong.com） ========================================================================== */ .brand-e, [data-brand="E"] { /* 配色 */ --c-ink: #1A1A1A; /* 墨黑 Ink · 文字/印章主色（别名） */ --c-rice: #F5EFE0; /* 宣纸米白 Rice · 底色（别名） */ --c-bg: #F5EFE0; /* 宣纸米白 Paper · 主背景 */ --c-bg-elev: #FFFFFF; /* 纯白，用于卡片/分区 */ --c-bg-tint: #E4DCC8; /* 米褐，边框/描边 */ --c-text: #1A1A1A; /* 墨黑 Ink · 主文字 */ --c-text-dim: #7A7268; /* 灰褐 Warm Gray · 辅助文字 */ --c-accent: #C8342A; /* 朱砂 Vermilion · 唯一强调（10% 占比） */ --c-accent-2: #C8342A; /* 同色，E 站只有 1 个强调色 */ --c-line: rgba(0,0,0,.10); /* 字体 */ --font-cn: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif; --font-en: "EB Garamond", "Lora", "Georgia", "Times New Roman", serif; --font-display: var(--font-cn); /* 字号（v2 类型尺度：H1 34 / H2 22 / H3 16 / Body 13 / Cap 11） */ --fs-h1: 34px; --fs-h2: 22px; --fs-h3: 16px; --fs-body: 13px; --fs-small: 11px; /* 辅助图形语言 */ --decor-line-stroke: var(--c-accent); --decor-ink-color: #7A7268; --decor-seal-radius: 4px; --decor-grid-gap: 32px; /* E 留白更大 */ /* Logo 装饰 */ --logo-mark-radius: 16px; --logo-mark-border: 1.4px solid #F5EFE0; --logo-mark-bg: var(--c-accent); } /* ========================================================================== 排版与基础样式（两站共享，按品牌切换字体） ========================================================================== */ body { margin: 0; background: var(--c-bg); color: var(--c-text); font-family: var(--font-cn); font-size: var(--fs-body); line-height: var(--font-body-line); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--font-heading-line); margin: 0 0 var(--space-4); font-weight: 600; } h1 { font-size: var(--fs-h1); letter-spacing: -.01em; } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } p { margin: 0 0 var(--space-4); } a { color: var(--c-accent); text-decoration: none; border-bottom: 1px solid var(--c-line); transition: color .15s ease, border-color .15s ease; } a:hover { color: var(--c-accent-2); border-bottom-color: currentColor; } .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-5); } /* ===== 按钮 ===== */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 12px 22px; border-radius: var(--radius-sm); font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: all .15s ease; text-decoration: none; } .btn-primary { background: var(--c-accent); color: var(--c-bg); border-color: var(--c-accent); } .btn-primary:hover { background: var(--c-accent-2); color: var(--c-bg); border-color: var(--c-accent-2); transform: translateY(-1px); box-shadow: var(--shadow-2); } .btn-ghost { background: transparent; color: var(--c-text); border-color: var(--c-line); } .btn-ghost:hover { border-color: var(--c-accent); color: var(--c-accent); } /* ===== 卡片 ===== */ .card { background: var(--c-bg-elev); border: 1px solid var(--c-line); border-radius: var(--radius-md); padding: var(--space-5); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .card:hover { transform: translateY(-2px); border-color: var(--c-accent); box-shadow: var(--shadow-2); } /* ===== Tag/Badge ===== */ .tag { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 20px; background: rgba(0,217,192,.10); color: var(--c-accent); font-weight: 500; } .brand-e .tag { background: rgba(200,52,42,.08); color: var(--c-accent); } /* ===== 辅助图形：电路 / 印边 ===== */ .deco-circuit { position: absolute; inset: 0; pointer-events: none; opacity: .35; } .deco-circuit path { stroke: var(--c-accent); stroke-width: 1.5; fill: none; } .deco-circuit circle { fill: var(--c-accent); } .deco-seal-frame { border: 1.4px solid var(--c-accent); border-radius: 4px; position: relative; } .deco-seal-frame::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--c-line); border-radius: 2px; } /* ===== 辅助图形 02：朱砂点分隔（等距圆点 + 虚线） ===== */ .deco-dots { display: flex; align-items: center; gap: 8px; } .deco-dots .d { width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); flex: none; } .deco-dots .line { flex: 1; height: 1px; border-top: 1px dashed var(--c-line); } /* ===== 辅助图形 03：水墨一笔（单笔书法弧线，墨黑主、朱砂映） ===== */ .deco-ink-stroke { width: 100%; height: 60px; display: block; pointer-events: none; } .deco-ink-stroke path { fill: none; stroke: var(--c-ink, #1A1A1A); stroke-width: 3; stroke-linecap: round; opacity: .82; } .deco-ink-stroke path.accent { stroke: var(--c-accent); stroke-width: 1; opacity: .5; transform: translateY(6px); } /* ===== 辅助图形 04：回纹角饰（传统雷纹，用于证书/封皮四角） ===== */ .deco-meander { position: absolute; width: 28px; height: 28px; pointer-events: none; background: linear-gradient(var(--c-accent), var(--c-accent)) 0 0 / 28px 2px no-repeat, linear-gradient(var(--c-accent), var(--c-accent)) 0 0 / 2px 14px no-repeat, linear-gradient(var(--c-accent), var(--c-accent)) 14px 14px / 14px 2px no-repeat, linear-gradient(var(--c-accent), var(--c-accent)) 26px 14px / 2px 14px no-repeat; } /* ===== 英文永远 italic（E 方案字体铁律） ===== */ .en-i, .brand-e [lang="en"] { font-style: italic; } /* ===== 合规声明（两站强制带） ===== */ .legal-notice { font-size: 12px; color: var(--c-text-dim); line-height: 1.6; padding: var(--space-3) 0; border-top: 1px solid var(--c-line); } /* ===== 响应式断点（共享） ===== */ @media (max-width: 768px) { :root { --fs-h1: 32px; --fs-h2: 24px; } .brand-e { --fs-h1: 36px; --fs-h2: 26px; } }