/*! base.css —— 由 scripts/build-css-bundles.py 自动拼接生成，请勿手改。 * 拼接顺序（2026-10-18 P1-A）： * 1) style.css sha256:2e0a387c00776a2f * 2) theme-darkgold.css sha256:f9e60c68324eacf4 * 3) fix-mobile-header.css sha256:22b9a402ba338cd5 * 4) theme-premium.css sha256:7dd643eabcf2f336 * 5) design-tokens.css sha256:0ff6b9421a0494c6 * 回滚：改 header 的 link 列表即可，源文件全部保留。 */ /* ==== 源文件：style.css ==== */ /* ========================================================================== HRW Hairunwei Tech - Industrial Design System (PHP 版, v1.1.0 同步) 科技精密 · 工业感 · 深色优先（与 Next.js 版 globals.css 保持类名/令牌一致）东莞市海润微电子科技有限公司官方网站 ========================================================================== */ /* ---------- Font Loading（2026-10-18 P1-A2：已移除 Google Fonts @import） ---------- 移除原因（实测见 outputs/方案A预演报告_20261018.md、字体专项审计_20261018.md）： · 该 @import 只声明 Inter 与 Noto Sans SC，共 439 条 @font-face； · 冷缓存下它的传输 124,404 B（约占首页总字节 25%）； · 全站没有任何规则把 Inter / Noto Sans SC 放在字体栈首位 → 从未渲染；实测首屏只下载 2 个 woff2（Space Grotesk 22,288 B + JetBrains Mono 21,832 B），移除前后一致； · Windows 11 + Edge 138 下 6 页几何回归 0 差异。注意： · header 里的 Google Fonts （Inter + Space Grotesk + JetBrains Mono）保留未动； · --font-display / --font-mono 等字体栈未改； · Apple 平台（PingFang SC）未验证；若日后要统一中文观感，应显式把目标字体写进字体栈首位。回滚：把下面这行原样加回（原文备份 backups/p1-a2-fontpreview-20261018/style.css.before）原行：@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&display=swap'); ------------------------------------------------------------------------- */ /* ========================================================================== HRW Hairunwei Tech — Industrial Design System (v1.1.0) 科技精密 · 工业感 · 深色优先东莞市海润微电子科技有限公司官方网站设计令牌与处理整体重构；类名保持向后兼容。 ========================================================================== */ /* ---------- Design Tokens ---------- */ :root { /* Brand — Electric Cyan scale（电光青单点主色，克制） */ --brand-50: #EAF0FF; --brand-100: #C7D8FF; --brand-200: #9DBAFF; --brand-300: #7FA8FF; --brand-400: #4A80FF; --brand-500: #1D5FFF; /* 电光青主色 */ --brand-600: #1749CC; /* hover */ --brand-700: #123A9E; --brand-800: #0E2C77; --brand-900: #0A1F52; /* Accent（琥珀仅作信号点缀，紫/品红重映射，避免 AI 紫渐变） */ --accent-cyan: #4A80FF; --accent-purple: #1D5FFF; --accent-magenta: #FF9F1C; --accent-gold: #C8A45D; /* Neutral Ink — 深色界面下作为「文本/边框」语义（值已翻转） */ --ink-900: #F4F6F9; /* 主文（近白） */ --ink-800: #E4E9F0; --ink-700: #CBD3DF; --ink-600: #AAB4C2; /* 次文 */ --ink-500: #8E99AA; --ink-400: #98A3B4; /* 弱文（提亮，小字可读 ≈5.5:1） */ --ink-300: #3C4761; --ink-200: rgba(255,255,255,0.16); /* 强调描边 */ --ink-100: rgba(255,255,255,0.08); /* 默认 1px 描边 */ --paper: #141F33; --white: #FFFFFF; /* Semantic */ --success: #2DD4A7; --warning: #FF9F1C; --danger: #FF5C7A; --info: #1D5FFF; /* Surfaces — 明度分层制造纵深，不靠阴影 */ --bg-page: #0B1220; /* 页面底 */ --bg-card: #141F33; /* 卡片/区块 */ --bg-soft: #1B2740; /* 凸起/输入 */ --bg-dark: #0A0F1C; --bg-section: #101A2C; /* 区域背景（区块 / 交替带） */ --bg-footer: #080D18; /* 页脚：略深于主背景用于收口 */ --primary-text: #7FA8FF; /* 深底上的可读蓝文字态 */ --line-card: rgba(255,255,255,0.10); --line-card-hi: rgba(255,255,255,0.22); --shadow-card: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 24px rgba(3,7,18,0.42); --shadow-card-hover: inset 0 1px 0 rgba(255,255,255,0.08), 0 18px 42px rgba(3,7,18,0.55); --space-28: 112px; /* Lines */ --line: rgba(255,255,255,0.09); --line-strong: rgba(255,255,255,0.18); /* Text roles */ --text-1: #F4F6F9; --text-2: #C3CCDA; --text-3: #9AA5B7; /* 弱文（提亮，小字可读 ≈5.5:1） */ /* Brand roles */ --primary: #1D5FFF; --primary-strong: #1749CC; --signal: #FF9F1C; /* Gradients — 克制：白→青 / 深青→青，避免紫 */ --grad-hero: linear-gradient(135deg, #0B1220 0%, #101A2C 55%, #16307A 130%); --grad-aurora: linear-gradient(135deg, #1D5FFF 0%, #123A8A 55%, #0B1220 100%); --grad-card: linear-gradient(180deg, #141F33 0%, #101A2C 100%); --grad-text: linear-gradient(135deg, #FFFFFF 0%, #9DBAFF 100%); /* Shadows — 深色界面下压低，主要靠描边/明度 */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.35); --shadow-sm: 0 2px 8px rgba(0,0,0,0.35); --shadow-md: 0 8px 24px rgba(0,0,0,0.40); --shadow-lg: 0 16px 40px rgba(0,0,0,0.45); --shadow-xl: 0 24px 60px rgba(0,0,0,0.50); --shadow-glow: 0 0 30px rgba(29,95,255,0.26); /* Spacing — 8px 基准 */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* Radii — 工业精密，偏小不圆 */ --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 14px; --r-2xl: 20px; --r-pill: 9999px; /* Type — 由 layout 的 Google Fonts 浏览器侧加载（拉丁/数字/mono 生效，CJK 回落系统字体） */ --font-sans: "Inter", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "SF Mono", Consolas, monospace; --font-display: "Space Grotesk", "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-lg: 18px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px; --fs-4xl: 36px; --fs-5xl: 48px; --fs-6xl: 64px; --fs-7xl: 80px; /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --t-fast: 150ms; --t-base: 250ms; --t-slow: 500ms; /* Layout */ --container: 1280px; --header-h: 72px; /* === 主题 token 补全（2026-09-18，值 = 原硬编码，视觉不变）=== */ --brand-350: #6E9BFF; --brand-deep-1: #123A8A; --brand-deep-2: #16307A; --brand-deep-3: #10265E; --bg-elev-1: #17233C; --bg-elev-2: #16223A; --bg-elev-3: #152142; --brand-500-rgb: 29,95,255; --brand-400-rgb: 74,128,255; --brand-200-rgb: 157,186,255; --success-rgb: 45,212,167; --warning-rgb: 255,159,28; --danger-rgb: 255,92,122; /* === 遮罩/状态文字 token（2026-09-18）=== */ --mask-1: 8,12,18; --mask-2: 10,15,28; --mask-3: 17,22,31; --mask-4: 5,8,16; --success-text: #7DE6C8; --danger-text: #FF9DB0; /* === 白色系语义 token（2026-09-18，深色值 = 原值）=== */ --tx-lead : rgba(255,255,255,0.82); --tx-body : rgba(255,255,255,0.78); --tx-sub : rgba(255,255,255,0.72); --tx-muted : rgba(255,255,255,0.70); --tx-foot : rgba(255,255,255,0.68); --tx-ph : rgba(255,255,255,0.55); --tx-faint : rgba(255,255,255,0.40); --tx-half : rgba(255,255,255,0.50); --sf-1 : rgba(255,255,255,0.03); --sf-2 : rgba(255,255,255,0.04); --sf-3 : rgba(255,255,255,0.05); --sf-4 : rgba(255,255,255,0.06); --grid-1 : rgba(255,255,255,0.045); --grid-2 : rgba(255,255,255,0.05); --line-img : rgba(255,255,255,0.25); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing:border-box; } * { margin:0; padding:0; } html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body { font-family:var(--font-sans); font-size:var(--fs-base); line-height:1.6; color:var(--ink-800); background:var(--bg-page); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img, svg, video { max-width:100%; height:auto; display:block; } a { color:inherit; text-decoration:none; } button { font-family:inherit; cursor:pointer; border:none; background:none; } input, textarea, select { font-family:inherit; font-size:inherit; } ul, ol { list-style:none; } ::selection { background:var(--brand-500); color:#FFFFFF; } /* ---------- Utility ---------- */ .container { width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--space-6); } .section { padding:var(--space-28) 0; position:relative; } .section-sm { padding:var(--space-16) 0; } /* 联系页 4 个区块密集排布，间距适当收紧（与 Next 版 globals.css 对齐） */ .contact-page .section { padding:var(--space-16) 0; } @media (max-width: 768px) { .contact-page .section { padding:40px 0; } } .section-eyebrow { display:inline-flex; align-items:center; gap:10px; padding:6px 14px; background:transparent; border:1px solid var(--line-strong); border-radius:var(--r-pill); font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:500; color:var(--primary-text); letter-spacing:0.14em; text-transform:uppercase; } .section-eyebrow::before { content:''; width:18px; height:2px; background:var(--primary); } .section-title { font-family:var(--font-display); font-size:clamp(28px, 4vw, var(--fs-5xl)); font-weight:700; line-height:1.18; color:var(--ink-900); margin:var(--space-5) 0 var(--space-5); letter-spacing:-0.025em; } .section-title .accent { background:var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .section-subtitle { font-size:var(--fs-lg); color:var(--text-2); max-width:720px; line-height:1.78; } .section-head { text-align:center; margin-bottom:var(--space-20); } .section-head .section-subtitle { margin:0 auto; } .text-grad { background:var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } /* 工业风新增工具类 */ .eyebrow-bar { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:500; color:var(--primary-text); letter-spacing:0.14em; text-transform:uppercase; } .eyebrow-bar::before { content:''; width:18px; height:2px; background:var(--primary); } .text-mono { font-family:var(--font-mono); } .tech-grid { background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:56px 56px; } .line-rule { height:1px; background:var(--line); border:0; margin:0; } .spec-readout { display:flex; flex-direction:column; gap:4px; } .spec-readout .num { font-family:var(--font-mono); font-size:var(--fs-3xl); font-weight:700; color:var(--primary-text); line-height:1; letter-spacing:-0.02em; } .spec-readout .label { font-family:var(--font-mono); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:0.12em; color:var(--text-3); } /* ---------- Buttons ---------- */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 24px; font-size:var(--fs-base); font-weight:500; border-radius:var(--r-md); transition:all var(--t-base) var(--ease); white-space:nowrap; border:1px solid transparent; position:relative; } .btn-primary { background:var(--brand-500); color:#FFFFFF; box-shadow:0 4px 14px rgba(var(--brand-500-rgb),0.28); box-shadow:0 4px 14px rgba(var(--brand-500-rgb),0.28); } .btn-primary:hover { background:var(--brand-600); transform:translateY(-2px); box-shadow:0 8px 24px rgba(var(--brand-500-rgb),0.38); } .btn-gradient { background:var(--brand-500); color:#FFFFFF; box-shadow:0 4px 14px rgba(var(--brand-500-rgb),0.28); box-shadow:0 4px 14px rgba(var(--brand-500-rgb),0.28); } .btn-gradient:hover { transform:translateY(-2px); background:var(--brand-600); box-shadow:0 12px 30px rgba(var(--brand-500-rgb),0.40); } .btn-outline { background:transparent; color:var(--text-1); border-color:var(--line-strong); } .btn-outline:hover { border-color:var(--primary); color:var(--primary-text); background:rgba(var(--brand-500-rgb),0.06); } .btn-ghost { color:var(--ink-600); } .btn-ghost:hover { color:var(--primary-text); background:var(--sf-2); } .btn-sm { padding:8px 16px; font-size:var(--fs-sm); } .btn-lg { padding:16px 32px; font-size:var(--fs-lg); } /* ---------- Header / Nav ---------- */ .header { position:fixed; top:0; left:0; right:0; height:var(--header-h); z-index:100; background:rgba(var(--mask-1),0.88); /* 2026-09-15：由 0.62 提到 0.88，不让背景透出来影响文字 */ backdrop-filter:blur(14px); /* 去掉 saturate(160%)：会把背后颜色饱和后糊到文字底下 */ -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); transition:all var(--t-base) var(--ease); } .header.scrolled { background:rgba(var(--mask-1),0.96); box-shadow:var(--shadow-sm); } .nav { display:flex; align-items:center; justify-content:space-between; height:100%; } .logo { display:flex; align-items:center; gap:12px; font-weight:700; font-size:var(--fs-xl); color:var(--ink-900); font-family:var(--font-display); letter-spacing:-0.02em; } .logo-mark { width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg, var(--bg-section), var(--brand-500)); display:grid; place-items:center; color:#FFFFFF; font-weight:800; font-size:14px; box-shadow:0 4px 12px rgba(var(--brand-500-rgb),0.30); position:relative; overflow:hidden; } .logo-mark::after { content:''; position:absolute; inset:0; background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%); animation:shimmer 3s ease-in-out infinite; } @keyframes shimmer { 0%, 100% { transform:translateX(-100%); } 50% { transform:translateX(100%); } } .logo-text { display:flex; flex-direction:column; line-height:1.1; } .logo-text .en { font-size:11px; font-weight:500; color:var(--text-3); letter-spacing:0.1em; } .nav-menu { display:flex; align-items:center; gap:8px; } .nav-link { position:relative; padding:8px 16px; font-size:var(--fs-base); font-weight:500; color:#D0D6E0; /* 2026-09-15 R2：高级灰，比正文亮一档让导航先被读到 */ border-radius:var(--r-md); transition:color var(--t-base) var(--ease); } .nav-link:hover { color:var(--primary-text); } .nav-link.active { color:var(--primary-text); } .nav-link.active::after { content:''; position:absolute; bottom:-4px; left:50%; transform:translateX(-50%); width:24px; height:2px; background:var(--primary); border-radius:2px; } .nav-actions { display:flex; align-items:center; gap:8px; } .nav-toggle { display:none; width:40px; height:40px; border-radius:8px; align-items:center; justify-content:center; } .nav-toggle span { display:block; width:20px; height:2px; background:var(--text-1); position:relative; transition:all var(--t-base) var(--ease); } .nav-toggle span::before, .nav-toggle span::after { content:''; position:absolute; left:0; right:0; height:2px; background:var(--text-1); transition:all var(--t-base) var(--ease); } .nav-toggle span::before { top:-6px; } .nav-toggle span::after { top:6px; } .nav-toggle.open span { background:transparent; } .nav-toggle.open span::before { transform:translateY(6px) rotate(45deg); } .nav-toggle.open span::after { transform:translateY(-6px) rotate(-45deg); } /* ---------- Hero ---------- */ .hero { position:relative; min-height:100vh; padding:calc(var(--header-h) + var(--space-20)) 0 var(--space-20); background:var(--bg-dark); color:white; overflow:hidden; display:flex; align-items:center; } .hero::before { content:''; position:absolute; inset:0; background:linear-gradient(100deg, rgba(var(--mask-2),0.80) 0%, rgba(var(--mask-2),0.38) 46%, rgba(var(--mask-2),0) 72%), radial-gradient(ellipse at 24% 30%, rgba(var(--brand-500-rgb),0.34) 0%, transparent 54%), radial-gradient(ellipse at 78% 66%, rgba(var(--brand-400-rgb),0.20) 0%, transparent 56%), radial-gradient(ellipse at 50% 108%, rgba(var(--brand-500-rgb),0.16) 0%, transparent 62%); } .hero::after { content:''; position:absolute; inset:0; background-image:linear-gradient(var(--grid-1) 1px, transparent 1px), linear-gradient(90deg, var(--grid-1) 1px, transparent 1px); background-size:60px 60px; mask-image:radial-gradient(ellipse at center, black 30%, transparent 80%); -webkit-mask-image:radial-gradient(ellipse at center, black 30%, transparent 80%); } .hero-content { position:relative; z-index:2; display:grid; grid-template-columns:1.1fr 0.9fr; gap:var(--space-16); align-items:center; } .hero-eyebrow { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; background:var(--sf-4); border:1px solid var(--line-strong); border-radius:var(--r-pill); font-family:var(--font-mono); font-size:var(--fs-sm); font-weight:500; color:var(--primary-text); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:var(--space-6); } .hero-eyebrow .dot { width:6px; height:6px; border-radius:50%; background:var(--primary); box-shadow:0 0 10px var(--primary); animation:pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity:1; } 50% { opacity:0.4; } } .hero h1 { font-family:var(--font-display); font-size:clamp(40px, 6vw, var(--fs-7xl)); font-weight:800; line-height:1.05; letter-spacing:-0.03em; margin-bottom:var(--space-6); } .hero h1 .grad { background:linear-gradient(135deg, #FFFFFF 0%, var(--brand-350) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .hero-lead { font-size:var(--fs-lg); color:var(--tx-lead); line-height:1.7; max-width:560px; margin-bottom:var(--space-8); } .hero-cta { display:flex; gap:12px; flex-wrap:wrap; } .hero-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-6); margin-top:var(--space-12); padding-top:var(--space-8); border-top:1px solid var(--line); } .hero-stat .num { font-family:var(--font-mono); font-size:var(--fs-3xl); font-weight:700; background:linear-gradient(135deg, #FFFFFF 0%, var(--brand-500) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:-0.02em; } .hero-stat .label { font-family:var(--font-mono); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:0.1em; color:var(--tx-sub); margin-top:4px; } /* Hero Visual */ .hero-visual { position:relative; height:540px; } .hv-orb { position:absolute; width:480px; height:480px; top:50%; left:50%; transform:translate(-50%, -50%); border-radius:50%; background:var(--grad-aurora); filter:blur(110px); /* 2026-09-15 R2：0.16 太弱页面显空；提到 0.28 恢复科技氛围，但保持静态不浮动 */ opacity:0.28; } @keyframes float { 0%, 100% { transform:translate(-50%, -50%) scale(1); } 50% { transform:translate(-50%, -55%) scale(1.05); } } .hv-card { position:absolute; background:var(--sf-3); backdrop-filter:blur(20px); border:1px solid var(--line-strong); border-radius:var(--r-lg); padding:var(--space-5); box-shadow:var(--shadow-xl); animation:floatY 8s ease-in-out infinite; } .hv-card.c1 { top:8%; left:5%; width:220px; animation-delay:0s; } .hv-card.c2 { top:25%; right:0; width:200px; animation-delay:1s; } .hv-card.c3 { bottom:20%; left:10%; width:240px; animation-delay:2s; } .hv-card.c4 { bottom:5%; right:8%; width:200px; animation-delay:3s; } @keyframes floatY { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-6px); } } .hv-card .ic { width:36px; height:36px; border-radius:8px; background:var(--brand-500); display:grid; place-items:center; margin-bottom:12px; color:#FFFFFF; font-size:18px; } .hv-card .title { font-weight:600; font-size:14px; color:var(--text-1); } .hv-card .desc { font-size:12px; color:var(--tx-sub); margin-top:4px; } .hv-card .metric { font-family:var(--font-mono); font-size:22px; font-weight:700; color:var(--primary-text); margin-top:8px; } /* ---------- Cards ---------- */ .card { background:var(--grad-card); border:1px solid var(--line-card); border-radius:var(--r-lg); padding:var(--space-6); box-shadow:var(--shadow-card); transition:border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease); position:relative; overflow:hidden; } .card:hover { transform:translateY(-2px); border-color:rgba(var(--brand-400-rgb),0.38); box-shadow:var(--shadow-card-hover); } .card-elevated { background:var(--grad-card); border:1px solid var(--line-card); border-radius:var(--r-xl); box-shadow:var(--shadow-card); transition:border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease); } .card-elevated:hover { transform:translateY(-2px); border-color:rgba(var(--brand-400-rgb),0.38); box-shadow:var(--shadow-card-hover); } /* ---------- Features / About ---------- */ .feature-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-6); } .feature-card { background:var(--grad-card); border:1px solid var(--line-card); border-radius:var(--r-lg); padding:var(--space-8) var(--space-6); text-align:left; box-shadow:var(--shadow-card); transition:border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease); position:relative; overflow:hidden; } .feature-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--primary); transform:scaleX(0); transform-origin:left; transition:transform var(--t-slow) var(--ease-out); } .feature-card:hover::before { transform:scaleX(1); } .feature-card:hover { transform:translateY(-2px); border-color:rgba(var(--brand-400-rgb),0.38); box-shadow:var(--shadow-card-hover); } .feature-icon { width:56px; height:56px; border-radius:var(--r-md); background:rgba(var(--brand-500-rgb),0.12); display:grid; place-items:center; margin-bottom:var(--space-5); color:var(--primary-text); position:relative; } .feature-icon svg { width:28px; height:28px; } .feature-card h3 { font-size:var(--fs-xl); font-weight:600; margin-bottom:var(--space-3); color:var(--ink-900); } .feature-card p { font-size:var(--fs-sm); color:var(--text-2); line-height:1.7; } /* ---------- About Split ---------- */ .about-split { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-16); align-items:center; } .about-image { position:relative; aspect-ratio:4/3; border-radius:var(--r-xl); overflow:hidden; background:linear-gradient(135deg, var(--bg-section), var(--bg-elev-1)); box-shadow:var(--shadow-xl); } .about-image::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg, transparent 0%, rgba(var(--mask-1),0.35) 100%); } .about-image-badge { position:absolute; bottom:24px; left:24px; z-index:2; background:rgba(var(--mask-3),0.92); backdrop-filter:blur(10px); border:1px solid var(--line-strong); border-radius:var(--r-md); padding:12px 16px; font-size:var(--fs-sm); color:var(--text-1); font-weight:500; display:flex; align-items:center; gap:10px; box-shadow:var(--shadow-md); } .about-image-badge .dot { width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 0 4px rgba(var(--success-rgb),0.2); } .about-features { margin-top:var(--space-8); display:flex; flex-direction:column; gap:var(--space-4); } .about-feature { display:flex; gap:16px; align-items:flex-start; } .about-feature .check { width:28px; height:28px; border-radius:50%; background:var(--primary); color:#FFFFFF; display:grid; place-items:center; flex-shrink:0; font-size:14px; font-weight:bold; } .about-feature h4 { font-size:var(--fs-base); font-weight:600; margin-bottom:4px; color:var(--ink-900); } .about-feature p { font-size:var(--fs-sm); color:var(--text-2); } /* ---------- Products Grid ---------- */ .products-tabs { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:var(--space-12); } .products-tab { padding:10px 20px; font-size:var(--fs-base); font-weight:500; color:var(--text-2); background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-pill); transition:all var(--t-base) var(--ease); } .products-tab:hover { color:var(--primary-text); border-color:var(--line-strong); } .products-tab.active { background:var(--brand-500); color:#FFFFFF; border-color:transparent; box-shadow:0 4px 14px rgba(var(--brand-500-rgb),0.30); } .products-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-6); } .product-card { background:var(--grad-card); border:1px solid var(--line-card); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card); transition:border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease); position:relative; display:flex; flex-direction:column; } .product-card:hover { transform:translateY(-3px); border-color:rgba(var(--brand-400-rgb),0.38); box-shadow:var(--shadow-card-hover); } .product-image { aspect-ratio:4/3; background:linear-gradient(135deg, var(--bg-section), var(--bg-elev-2)); position:relative; display:grid; place-items:center; overflow:hidden; } .product-image::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 30%, rgba(var(--brand-500-rgb),0.12) 0%, transparent 52%), radial-gradient(circle at 72% 72%, rgba(var(--brand-400-rgb),0.07) 0%, transparent 52%); } .product-image svg { position:relative; z-index:1; width:60%; height:auto; opacity:0.85; } .product-image .product-photo { position:relative; z-index:1; width:100%; height:100%; object-fit:cover; display:block; } .product-badge { position:absolute; top:12px; left:12px; background:var(--brand-500); color:#FFFFFF; font-size:11px; font-weight:600; padding:4px 10px; border-radius:var(--r-pill); z-index:2; letter-spacing:0.5px; text-transform:uppercase; } .product-body { padding:var(--space-6); flex:1; display:flex; flex-direction:column; } .product-cat { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--primary-text); font-weight:600; text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; } .product-name { font-size:var(--fs-lg); font-weight:600; color:var(--ink-900); margin-bottom:8px; line-height:1.3; } .product-desc { font-size:var(--fs-sm); color:var(--text-2); line-height:1.6; flex:1; margin-bottom:var(--space-4); } .product-foot { display:flex; justify-content:space-between; align-items:center; padding-top:var(--space-4); border-top:1px solid var(--line); } .product-model { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-2); background:var(--sf-3); padding:4px 8px; border-radius:4px; } .product-link { font-size:var(--fs-sm); color:var(--primary-text); font-weight:500; display:inline-flex; align-items:center; gap:4px; transition:gap var(--t-base) var(--ease); } .product-link:hover { gap:8px; } /* ---------- Stats Banner ---------- */ .stats-band { background:linear-gradient(135deg, var(--bg-section) 0%, var(--bg-elev-3) 100%); color:white; padding:var(--space-16) 0; position:relative; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .stats-band::before { content:''; position:absolute; inset:0; background-image:linear-gradient(var(--grid-2) 1px, transparent 1px), linear-gradient(90deg, var(--grid-2) 1px, transparent 1px); background-size:40px 40px; } .stats-band .container { position:relative; z-index:1; } .stats-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-8); text-align:center; } .stat-num { font-family:var(--font-mono); font-size:clamp(36px, 5vw, var(--fs-6xl)); font-weight:700; background:linear-gradient(180deg, #FFFFFF 0%, var(--brand-500) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:-0.02em; line-height:1; } .stat-num .suffix { font-size:0.6em; margin-left:4px; opacity:0.85; } .stat-label { font-family:var(--font-mono); font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:0.08em; color:var(--tx-muted); margin-top:8px; } /* ---------- News ---------- */ .news-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-6); } .news-card { background:var(--grad-card); border:1px solid var(--line-card); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card); transition:border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease); } .news-card:hover { transform:translateY(-3px); border-color:rgba(var(--brand-400-rgb),0.38); box-shadow:var(--shadow-card-hover); } .news-image { aspect-ratio:16/9; background:linear-gradient(135deg, var(--bg-elev-2) 0%, var(--bg-section) 100%); position:relative; overflow:hidden; } .news-image::before { content:''; position:absolute; inset:0; background:var(--grad-aurora); opacity:0.55; } .news-image::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(45deg, transparent, transparent 20px, var(--sf-2) 20px, var(--sf-2) 40px); } .news-date { position:absolute; top:16px; left:16px; background:rgba(var(--mask-1),0.9); border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:6px 10px; font-size:var(--fs-xs); font-weight:600; color:var(--text-1); z-index:2; font-family:var(--font-mono); } .news-body { padding:var(--space-6); } .news-tag { display:inline-block; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--primary-text); font-weight:600; padding:2px 10px; background:rgba(var(--brand-500-rgb),0.10); border-radius:var(--r-pill); margin-bottom:12px; letter-spacing:0.06em; } .news-title { font-size:var(--fs-lg); font-weight:600; color:var(--ink-900); line-height:1.4; margin-bottom:8px; } .news-excerpt { font-size:var(--fs-sm); color:var(--text-2); line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* ---------- Contact ---------- */ .contact-section { background:var(--bg-dark); color:white; position:relative; overflow:hidden; } .contact-section::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 82% 18%, rgba(var(--brand-500-rgb),0.20) 0%, transparent 54%), radial-gradient(ellipse at 16% 84%, rgba(var(--brand-400-rgb),0.10) 0%, transparent 54%); } .contact-section .container { position:relative; z-index:1; } .contact-section .section-title { color:white; } .contact-section .section-subtitle { color:var(--tx-muted); } .contact-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-12); } .contact-info { display:flex; flex-direction:column; gap:var(--space-6); } .contact-item { display:flex; gap:16px; align-items:flex-start; } .contact-icon { width:48px; height:48px; border-radius:var(--r-md); background:var(--sf-3); border:1px solid var(--line-strong); display:grid; place-items:center; flex-shrink:0; color:var(--primary-text); } .contact-item h4 { font-size:var(--fs-base); font-weight:600; margin-bottom:4px; color:white; } .contact-item p, .contact-item a { font-size:var(--fs-sm); color:var(--tx-body); line-height:1.6; } .contact-item a:hover { color:var(--primary-text); } /* 环境与设施画廊（独立 section，位于到访地图下方） */ .contact-gallery { padding-top:var(--space-8); } .contact-gallery .section-head { text-align:left; } .gallery-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-6); margin-top:var(--space-10); } .gallery-card { position:relative; margin:0; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line); aspect-ratio:4 / 3; background:var(--sf-1); box-shadow:var(--shadow-md); transition:transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease); } .gallery-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-xl); border-color:var(--primary); } .gallery-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.6s var(--ease); } .gallery-card:hover img { transform:scale(1.05); } .gallery-card .gallery-tag { position:absolute; left:16px; bottom:16px; display:inline-flex; align-items:center; gap:8px; padding:6px 14px; font-size:var(--fs-sm); color:#fff; background:rgba(var(--mask-1),0.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid var(--line-strong); border-radius:999px; } .gallery-card .gallery-tag::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--primary); box-shadow:0 0 8px var(--primary); } @media (max-width: 720px) { .gallery-grid { grid-template-columns:1fr; } } .contact-form { background:var(--sf-2); border:1px solid var(--line); border-radius:var(--r-xl); padding:var(--space-8); backdrop-filter:blur(20px); } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); } .form-group { margin-bottom:var(--space-4); } .form-label { display:block; font-size:var(--fs-sm); color:var(--tx-muted); margin-bottom:8px; font-weight:500; } .form-input, .form-textarea, .form-select { width:100%; padding:12px 16px; background:var(--sf-3); border:1px solid var(--line); border-radius:var(--r-md); color:white; font-size:var(--fs-base); transition:all var(--t-base) var(--ease); } .form-input:focus, .form-textarea:focus, .form-select:focus { outline:none; border-color:var(--primary); background:rgba(var(--brand-500-rgb),0.06); box-shadow:0 0 0 3px rgba(var(--brand-500-rgb),0.15); } .form-input::placeholder, .form-textarea::placeholder { color:var(--tx-ph); } .form-textarea { min-height:120px; resize:vertical; } .form-select option { background:var(--bg-soft); color:white; } /* ---------- Footer ---------- */ .footer { background:var(--bg-footer); color:var(--tx-muted); padding:var(--space-16) 0 var(--space-6); border-top:1px solid var(--line); } .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--space-12); margin-bottom:var(--space-12); } .footer .logo { color:white; margin-bottom:16px; } .footer p { font-size:var(--fs-sm); line-height:1.7; max-width:360px; color:var(--tx-sub); } .footer h5 { font-size:var(--fs-sm); color:white; font-weight:600; text-transform:uppercase; letter-spacing:1px; margin-bottom:var(--space-4); } .footer ul li { margin-bottom:8px; } .footer ul a { font-size:var(--fs-sm); color:var(--tx-sub); transition:color var(--t-base) var(--ease); } .footer ul a:hover { color:var(--primary-text); } .footer-bottom { padding-top:var(--space-6); border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; font-size:var(--fs-sm); color:var(--tx-foot); flex-wrap:wrap; gap:16px; } .footer-bottom .text-mono { color:var(--tx-faint); font-size:var(--fs-xs); } .socials { display:flex; gap:12px; } .social-icon { width:36px; height:36px; border-radius:8px; background:var(--sf-4); display:grid; place-items:center; color:var(--tx-muted); transition:all var(--t-base) var(--ease); } .social-icon:hover { background:var(--brand-500); color:#FFFFFF; transform:translateY(-2px); } /* ---------- Page Header (subpages) ---------- */ .page-hero { background:var(--bg-dark); color:white; padding:calc(var(--header-h) + var(--space-20)) 0 var(--space-20); text-align:center; position:relative; overflow:hidden; } .page-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 34%, rgba(var(--brand-500-rgb),0.26) 0%, transparent 62%), radial-gradient(ellipse at 18% 90%, rgba(var(--brand-400-rgb),0.10) 0%, transparent 60%); } .page-hero::after { content:''; position:absolute; inset:0; background-image:linear-gradient(var(--grid-1) 1px, transparent 1px), linear-gradient(90deg, var(--grid-1) 1px, transparent 1px); background-size:60px 60px; mask-image:radial-gradient(ellipse at center, black 30%, transparent 80%); -webkit-mask-image:radial-gradient(ellipse at center, black 30%, transparent 80%); } .page-hero .container { position:relative; z-index:1; } .page-hero h1 { font-family:var(--font-display); font-size:clamp(36px, 5vw, var(--fs-6xl)); font-weight:800; letter-spacing:-0.02em; margin-bottom:var(--space-4); } .page-hero p { font-size:var(--fs-lg); color:var(--tx-muted); max-width:720px; margin:0 auto; } .breadcrumb { display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-sm); color:var(--tx-half); margin-bottom:var(--space-6); } .breadcrumb a { color:var(--primary-text); } .breadcrumb span { opacity:0.4; } /* ---------- Reveal Animation ---------- */ .reveal { opacity:0; transform:translateY(30px); transition:opacity 800ms var(--ease-out), transform 800ms var(--ease-out); } .reveal.in { opacity:1; transform:none; } .reveal-delay-1 { transition-delay:100ms; } .reveal-delay-2 { transition-delay:200ms; } .reveal-delay-3 { transition-delay:300ms; } .reveal-delay-4 { transition-delay:400ms; } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .hero-content { grid-template-columns:1fr; } .hero-visual { display:none; } .feature-grid, .stats-grid { grid-template-columns:repeat(2, 1fr); } .products-grid, .news-grid { grid-template-columns:repeat(2, 1fr); } .about-split { grid-template-columns:1fr; } .footer-grid { grid-template-columns:1fr 1fr; } .contact-grid { grid-template-columns:1fr; } .gallery-grid { grid-template-columns:repeat(2, 1fr); } } @media (max-width: 720px) { .container { padding:0 var(--space-4); } .nav-menu { position:fixed; top:var(--header-h); left:0; right:0; bottom:0; background:rgba(var(--mask-1),0.98); backdrop-filter:blur(20px); flex-direction:column; padding:var(--space-4); gap:2px; border-bottom:1px solid var(--line); transform:translateY(-110%); transition:transform var(--t-base) var(--ease); align-items:stretch; z-index:99; overflow-y:auto; } .nav-menu.open { transform:translateY(0); } .nav-link { padding:14px 16px; text-align:left; font-size:16px; color:var(--text-1); } .nav-link.active::after { display:none; } .nav-link.active { background:rgba(var(--brand-500-rgb),0.10); border-radius:8px; } .nav-toggle { display:flex; } .section { padding:var(--space-12) 0; } .section-sm { padding:var(--space-8) 0; } .section-title { font-size:clamp(20px, 6vw, 28px) !important; } .section-subtitle { font-size:15px; } .feature-grid { grid-template-columns:1fr; gap:var(--space-4); } .stats-grid { grid-template-columns:repeat(2, 1fr); gap:var(--space-6); } .products-grid, .news-grid { grid-template-columns:1fr; gap:var(--space-4); } .footer-grid { grid-template-columns:1fr; gap:var(--space-8); } .form-row { grid-template-columns:1fr; } .hero-stats { grid-template-columns:1fr 1fr; } .logo-text .en { display:none; } .section-head { margin-bottom:var(--space-8); } /* 首页 Hero 区域 */ .hero { min-height:auto; padding:calc(var(--header-h) + var(--space-8)) 0 var(--space-8); } .hero h1 { font-size:clamp(28px, 8vw, 40px) !important; } .hero-lead { font-size:15px; } .hero-cta .btn-lg { padding:12px 20px; font-size:14px; } .hero-stat .num { font-size:var(--fs-2xl) !important; } /* 页头 */ .page-hero { padding:calc(var(--header-h) + var(--space-8)) 0 var(--space-10); } .page-hero h1 { font-size:clamp(22px, 6vw, 32px) !important; } .page-hero p { font-size:15px; } /* 按钮 */ .btn { white-space:normal; word-break:keep-all; } .btn-lg { padding:14px 24px; font-size:15px; } /* 产品卡片 */ .product-body { padding:var(--space-4); } .product-name { font-size:16px; } .product-desc { font-size:13px; } .product-cat { font-size:11px; } /* 新闻卡片 */ .news-body { padding:var(--space-4); } .news-title { font-size:16px; } .news-excerpt { font-size:13px; } /* 关于页 */ .about-features { margin-top:var(--space-4); gap:var(--space-3); } .about-feature h4 { font-size:15px; } .about-feature p { font-size:13px; } .about-split { gap:var(--space-8); } /* 联系页 */ .contact-section { padding:var(--space-12) 0; } .contact-form { padding:var(--space-5); } .contact-info { gap:var(--space-4); } .contact-item { gap:12px; } .contact-icon { width:40px; height:40px; } .contact-item h4 { font-size:14px; } .contact-item p { font-size:13px; } /* 画廊 */ .gallery-grid { grid-template-columns:1fr; gap:var(--space-4); } .gallery-card { aspect-ratio:4/3; } .gallery-card .gallery-tag { left:10px; bottom:10px; padding:4px 10px; font-size:12px; } /* 页脚 */ .footer { padding:var(--space-10) 0 var(--space-4); } .footer-bottom { flex-direction:column; text-align:center; gap:8px; font-size:12px; } /* OEM 区块 */ section[style*="--grad-hero"] { padding:40px 0 !important; } section[style*="--grad-hero"] h2 { font-size:clamp(20px, 5vw, 28px) !important; } section[style*="--grad-hero"] p { font-size:15px !important; } } @media (max-width: 480px) { .hero h1 { font-size:24px !important; } .hero-stats { grid-template-columns:1fr; gap:var(--space-4); text-align:center; } .hero-stat .num { font-size:var(--fs-xl) !important; } .hero-stat .label { font-size:12px; } .hero-cta { flex-direction:column; } .hero-cta .btn { width:100%; justify-content:center; } .stats-grid { grid-template-columns:1fr 1fr; gap:var(--space-4); } .stat-num { font-size:28px !important; } .stat-label { font-size:13px; } .products-tab { font-size:13px; padding:8px 14px; } .breadcrumb { font-size:12px; flex-wrap:wrap; } } /* ---------- Product Detail（方向 B：详情页参数表 + 询价） ---------- */ .product-card-link { display:flex; flex-direction:column; flex:1; } .spec-table { border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--bg-card); } .spec-table-row { display:grid; grid-template-columns:180px 1fr; border-bottom:1px solid var(--line); transition:background var(--t-fast) var(--ease); } .spec-table-row:last-child { border-bottom:none; } .spec-table-row:hover { background:rgba(var(--brand-500-rgb),0.04); } .spec-table-key { padding:14px 18px; font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--text-3); letter-spacing:0.06em; border-right:1px solid var(--line); background:var(--bg-soft); } .spec-table-value { padding:14px 18px; font-size:var(--fs-base); color:var(--ink-900); line-height:1.6; } @media (max-width: 720px) { .spec-table-row { grid-template-columns:110px 1fr; } .spec-table-key, .spec-table-value { padding:12px 14px; } } .form-msg { padding:12px 14px; border-radius:var(--r-md); font-size:var(--fs-sm); margin-bottom:16px; } .form-msg--ok { background:rgba(var(--success-rgb),0.12); color:#B8C2D0; border:1px solid rgba(var(--success-rgb),0.35); } .form-msg--err { background:rgba(var(--danger-rgb),0.12); color:var(--danger); border:1px solid rgba(var(--danger-rgb),0.35); } /* ---------- Reduced Motion（无障碍：尊重用户关闭动效偏好） ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; } .reveal { opacity:1 !important; transform:none !important; } .hv-orb, .hv-card, .hero-eyebrow .dot { animation:none !important; } } /* ---------- PHP 版特有：表单提示 ---------- */ .alert { padding:12px 16px; border-radius:var(--r-md); margin-bottom:16px; font-size:var(--fs-sm); } .alert-success { background:rgba(var(--success-rgb), 0.12); border:1px solid rgba(var(--success-rgb), 0.35); color:#B8C2D0; } .alert-error { background:rgba(var(--danger-rgb), 0.12); border:1px solid rgba(var(--danger-rgb), 0.35); color:var(--danger); } /* ---------- Product Detail（方向 B：详情页参数表 + 询价） ---------- */ .spec-table { border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--bg-card); } /* 产品详情页大图 */ .product-detail-grid { display:grid; grid-template-columns:1.2fr 0.8fr; gap:48px; align-items:start; } .product-detail-image { position:relative; width:100%; aspect-ratio:16 / 10; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg-card); } .product-detail-image-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; height:100%; color:var(--text-2); font-size:var(--fs-sm); } .product-detail-image-empty svg { color:var(--primary-text); opacity:0.7; } .product-detail-image-empty .text-mono { color:var(--primary-text); font-size:var(--fs-lg); font-weight:600; } .product-detail-image-empty span:last-child { color:var(--text-3); } /* 产品轮播（多图翻页） */ .product-gallery { width:100%; height:100%; } .product-gallery-stage { position:relative; width:100%; height:100%; border-radius:var(--r-lg); overflow:hidden; } .product-gallery-stage img { width:100%; height:100%; object-fit:cover; display:block; } .product-gallery-arrow { position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; border:1px solid var(--line-img); background:rgba(var(--mask-4),0.55); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all var(--t-fast) var(--ease); z-index:2; } .product-gallery-arrow:hover { background:var(--primary); border-color:var(--primary); color:rgb(var(--mask-4)); } .product-gallery-arrow.left { left:14px; } .product-gallery-arrow.right { right:14px; } .product-gallery-count { position:absolute; right:12px; bottom:12px; padding:2px 10px; border-radius:999px; background:rgba(var(--mask-4),0.6); color:var(--primary-text); font-size:12px; z-index:2; } .product-gallery-thumbs { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; } .product-gallery-thumb { width:64px; height:48px; padding:0; border:2px solid transparent; border-radius:6px; overflow:hidden; cursor:pointer; background:none; opacity:0.6; transition:all var(--t-fast) var(--ease); } .product-gallery-thumb img { width:100%; height:100%; object-fit:cover; display:block; } .product-gallery-thumb:hover { opacity:0.9; } .product-gallery-thumb.active { border-color:var(--primary); opacity:1; } @media (max-width: 900px) { .product-detail-grid { grid-template-columns:1fr; gap:32px; } } .spec-table-row { display:grid; grid-template-columns:180px 1fr; border-bottom:1px solid var(--line); transition:background var(--t-fast) var(--ease); } .spec-table-row:last-child { border-bottom:none; } .spec-table-row:hover { background:rgba(var(--brand-500-rgb),0.04); } .spec-table-key { padding:14px 18px; font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--text-3); letter-spacing:0.06em; border-right:1px solid var(--line); background:var(--bg-soft); } .spec-table-value { padding:14px 18px; font-size:var(--fs-base); color:var(--ink-900); line-height:1.6; } @media (max-width: 720px) { .spec-table-row { grid-template-columns:110px 1fr; } .spec-table-key, .spec-table-value { padding:12px 14px; } } /* ==== 源文件：theme-darkgold.css ==== */ /* ============================================================ theme-darkgold.css —— 主题：Dark Gold（深邃黑 + 高端暗金 + 金属质感） ------------------------------------------------------------ 项目：海润微（HAIRUNWEI TECH）官网＋音频工作室＋调音中心版本：v2 · 2026-09-18「暗金二次视觉精修」定位：Luxury Technology · HiFi · Premium Audio · Professional Hardware 【用法】由激活，两个作用域： · html[data-theme="darkgold"] 主网站（企业技术感） · html[data-theme="darkgold-studio"] 音频工作室 + 调音中心（专业控制台，更深一档） header.php 已接好：$__isStudio ? 'darkgold-studio' : 'darkgold' 【与上一版的关系 —— 一键切换】上一版（Theme Original 基线）： charcoal → html[data-theme="charcoal"] （theme-charcoal.css，未改动） studio → html[data-theme="studio"] （theme-studio.css，未改动）本版（Theme Dark Gold v2）： darkgold / darkgold-studio （本文件） ⭐ 回滚：python scripts/theme-switch.py charcoal （< 5 秒）【本文件只做配色 / 材质 / 渐变 / 阴影 / 边框 / 按钮视觉】 ✗ 不改 display/position/尺寸/间距/字号/圆角 ✗ 不改 PEQ 逻辑、曲线显示、设备连接逻辑、WebHID ✗ 卡片原有的 hover 上浮动画（translateY）与过渡时序一律保留【v2 精修要点（相对上一版）】 ① 黑保持深邃但建立明确三档层次（规格 §五）：主站页面 #0B0B0D → 卡片 #141417 → 悬停 #1B1A18 工作室页面 #08080A → 卡片 #111114 → 悬停 #17161A 每档亮度差约 9 阶 ⇒ 黑色区域有空间感，且不再无限加深。 ② 文字去冷灰、统一暖调（规格 §六）：主文 #E8E3D8（暖白，不再纯白）／次文 #9AA1A9（暖灰）／辅助 #7C828B ③ 边框由中性灰改为暗金（规格 §七）：普通 rgba(184,148,89,.15) → 悬停 rgba(184,148,89,.45)，似金属边缘反光，不大面积发光。 ④ 按钮三级区分（规格 §八）：一级金属渐变／二级暗金透明 12%／普通深灰黑 #19191C。 ⑤ 状态色金属化去荧光（规格 §九）：成功 #6FAF7A／警告 #C49A52／错误 #B85C55。 ⑥ 阴影改「软黑 + 极轻金属环境感」（规格 §十）：普通 rgba(0,0,0,.45)；高级卡片仅附加 rgba(184,148,89,.08)，不做电竞发光。 ⚠ 金色主值仍为 #B89459（暗香槟金）—— 靠"更深黑 + 金属渐变 + 暖调中性色"提升高级感，不靠提高饱和度（避免土豪金/亮黄/电竞金）。 ============================================================ */ /* ════════════════════════════════════════════════════════════════ 一、共用调色板（主站 + 工作室） ════════════════════════════════════════════════════════════════ */ html[data-theme="darkgold"], html[data-theme="darkgold-studio"] { /* ── 0. 对外语义别名层（规格 §十三指定命名；与下方实际 token 同源） ── */ --gold-primary: #B89459; /* 主金（规格 §四：禁止替换） */ --gold-hover: #CFB47F; /* 金 hover / 高亮 */ --gold-soft: rgba(184,148,89,0.12); /* 二级按钮底 / 金薄雾 */ --bg-primary: var(--bg-page); /* 页面底 */ --bg-hover: #1B1A18; /* 悬停底（规格 §五） */ --text-primary: var(--text-1); /* #E8E3D8 */ --text-secondary:var(--text-2); /* #9AA1A9 */ --text-muted: var(--text-3); /* #7C828B */ --border-color: var(--line); /* rgba(184,148,89,0.15) */ --border-hover: rgba(184,148,89,0.45); /* 规格 §七 hover */ /* ── 1. 金：暗金 / 金属香槟（--copper 金属铜金仅用于渐变收尾） ── */ --brand-50: #F7F1E4; --brand-100: #EEDFC4; --brand-200: #DFCBA2; --brand-300: #CFB47F; /* 高亮 */ --brand-350: #C6A872; --brand-400: #BFA067; --brand-500: #B89459; /* ★ 主强调（暗香槟金）—— 规格 §四保持不变 */ --brand-600: #9E7C43; --brand-700: #806333; --brand-800: #5A4522; --brand-900: #352812; --brand-200-rgb: 223,203,162; --brand-400-rgb: 191,160,103; --brand-500-rgb: 184,148,89; --brand-deep-1: #8B6C3C; --brand-deep-2: #5F4A27; --brand-deep-3: #3E3018; /* ── 2. 背景：三档黑（规格 §五）—— 页面 / 卡片 / 悬停，逐档抬升约 9 阶 ── */ --bg-page: #0B0B0D; /* 页面底（最深档） */ --bg-section: #101012; /* 区块交替带 */ --bg-card: #141417; /* 卡片（规格 §五） */ --bg-hover: #1B1A18; /* 悬停（规格 §五，微暖偏金） */ --bg-soft: #19191C; /* 凸起 / 输入框 / 普通按钮 */ --bg-dark: #060607; /* Hero / 页脚 / 深模块 */ --bg-footer: #08080A; --bg-elev-1: #141417; --bg-elev-2: #17171A; --bg-elev-3: #1B1A18; --paper: #17171A; /* ── 3. 遮罩（顶栏磨砂 / 移动菜单 / Hero 浮层 / 图片浮层）→ 暖黑 ── */ --mask-1: 14,14,16; --mask-2: 10,10,12; --mask-3: 20,20,23; --mask-4: 11,11,13; /* ── 4. 文字层级：暖白 / 暖灰 / 低辅助（规格 §六） ── */ --ink-900: #E8E3D8; /* ★ 主文（暖白，避免纯白） */ --ink-800: #D8D1C2; --ink-700: #BDB4A2; --ink-600: #9AA1A9; /* ★ 次文（暖灰，避免冷灰） */ --ink-500: #8C8272; --ink-400: #7C828B; /* ★ 辅助（低调） */ --ink-300: #3A362E; --ink-200: rgba(232,227,216,0.13); --ink-100: rgba(232,227,216,0.06); --text-1: #E8E3D8; --text-2: #9AA1A9; --text-3: #7C828B; --white: #FFFFFF; --tx-lead: #C4BCAC; --tx-body: #9AA1A9; --tx-sub: #9AA1A9; --tx-muted: #8C8272; --tx-foot: #7C828B; --tx-ph: #7C828B; --tx-faint: #6B655D; --tx-half: #8C8272; --sf-1: rgba(232,227,216,0.025); --sf-2: rgba(232,227,216,0.045); --sf-3: #141417; --sf-4: rgba(232,227,216,0.06); --grid-1: rgba(184,148,89,0.055); /* Hero 蓝图网格 → 暖金网 */ --grid-2: rgba(184,148,89,0.06); --line-img: rgba(232,227,216,0.20); /* ── 5. 强调色别名（全部指向暗金，杜绝科技蓝残留） ── */ --accent-cyan: #B89459; --accent-purple: #CFB47F; --accent-magenta: #9E7C43; --accent-gold: #B89459; --primary: #B89459; --primary-strong: #9E7C43; --primary-text: #B89459; --signal: #B89459; /* ── 6. 边框：暗金细边（规格 §七）—— 普通 15% / 悬停 45% ── */ --line: rgba(184,148,89,0.15); --line-strong: rgba(184,148,89,0.28); --line-card: rgba(184,148,89,0.15); --line-card-hi: rgba(184,148,89,0.45); --line-gold: rgba(184,148,89,0.15); /* ── 7. 阴影：软黑 + 极轻金属环境感（规格 §十）── 卡片顶部"受光"内阴影用暗金调，形成金属质感；只有高级卡片才附加 +8% 金环境光，不做大面积发光（避免电竞感）。 */ --shadow-card: inset 0 1px 0 rgba(211,180,124,0.07), 0 10px 26px rgba(0,0,0,0.45); --shadow-card-hover: inset 0 1px 0 rgba(211,180,124,0.14), 0 18px 40px rgba(0,0,0,0.50), 0 0 22px rgba(184,148,89,0.08); --shadow-metal: 0 0 0 1px rgba(184,148,89,0.08), 0 14px 34px rgba(0,0,0,0.45); --shadow-glow: 0 0 20px rgba(184,148,89,0.14); --shadow-xs: 0 1px 2px rgba(0,0,0,0.38); --shadow-sm: 0 2px 10px rgba(0,0,0,0.45); --shadow-md: 0 10px 28px rgba(0,0,0,0.45); --shadow-lg: 0 18px 46px rgba(0,0,0,0.50); --shadow-xl: 0 28px 68px rgba(0,0,0,0.55); /* ── 8. 状态色：金属化、去荧光（规格 §九） ── */ --success: #6FAF7A; --success-rgb: 111,175,122; --success-text: #8CC291; --warning: #C49A52; --warning-rgb: 196,154,82; --danger: #B85C55; --danger-rgb: 184,92,85; --danger-text: #C9756C; --info: #8C8272; /* ── 9. 渐变（金属金渐变是"高级感"的主要来源；一级按钮用三段金属渐变） ── */ --grad-gold: linear-gradient(180deg, #D3B47C 0%, #B89459 46%, #8B6C3C 100%); --grad-gold-hi: linear-gradient(180deg, #DEC08A 0%, #C2A066 46%, #97763F 100%); --grad-hairline: linear-gradient(90deg, transparent, rgba(184,148,89,0.45), transparent); --grad-hero: linear-gradient(135deg, #0B0B0D 0%, #101012 52%, #1E1810 130%); --grad-aurora: linear-gradient(135deg, #CFB47F 0%, #8B6C3C 52%, #0B0B0D 100%); --grad-card: linear-gradient(180deg, #17171A 0%, #141417 100%); /* 顶部受光 → 规格卡片色 */ --grad-text: linear-gradient(135deg, #EDE7DC 0%, #CFB47F 52%, #B89459 100%); } /* ════════════════════════════════════════════════════════════════ 二、工作室 / 调音中心专属：再深一档，更"专业控制台"（规格 §十一） ════════════════════════════════════════════════════════════════ */ html[data-theme="darkgold-studio"] { --bg-page: #08080A; --bg-section: #0D0D0F; --bg-card: #111114; --bg-hover: #17161A; --bg-soft: #16161A; --bg-dark: #050506; --bg-footer: #070709; --bg-elev-1: #111114; --bg-elev-2: #141417; --bg-elev-3: #17161A; --paper: #141417; --mask-1: 11,11,13; --mask-2: 8,8,10; --mask-3: 17,17,20; --mask-4: 8,8,10; --sf-3: #111114; --shadow-card: inset 0 1px 0 rgba(211,180,124,0.055), 0 10px 24px rgba(0,0,0,0.45); --shadow-card-hover: inset 0 1px 0 rgba(211,180,124,0.12), 0 18px 40px rgba(0,0,0,0.50), 0 0 22px rgba(184,148,89,0.08); --grad-card: linear-gradient(180deg, #141417 0%, #111114 100%); /* studio.css 自带 --fs-* 局部令牌（选择器为 :root，特异性低于本文件）⇒ 在此覆盖 */ --fs-bg-solid: #0D0D10; --fs-bg-panel: #111114; --fs-bg-panel-soft: rgba(28,28,32,0.52); --fs-grad-card: linear-gradient(180deg, #15151A 0%, #111114 100%); --fs-line: rgba(184,148,89,0.15); --fs-line-strong: rgba(184,148,89,0.28); --fs-gold: rgba(184,148,89,0.92); --fs-gold-line: rgba(184,148,89,0.28); --fs-gold-soft: rgba(184,148,89,0.06); --fs-shadow-card: inset 0 1px 0 rgba(211,180,124,0.06), 0 10px 24px rgba(0,0,0,0.45); --fs-shadow-card-h: inset 0 1px 0 rgba(211,180,124,0.12), 0 18px 40px rgba(0,0,0,0.50); } /* ════════════════════════════════════════════════════════════════ 三、规则级适配（仅覆盖"变量无法表达"的少量硬编码颜色） ════════════════════════════════════════════════════════════════ 只改 color / background / border-color / box-shadow，不动布局、尺寸、位置、字号、圆角、位移与动画时序。 ════════════════════════════════════════════════════════════════ */ /* ① 深色区块内文字：原 color:white → 一级主文 #E8E3D8（暖白） */ html[data-theme="darkgold"] .hero, html[data-theme="darkgold"] .stats-band, html[data-theme="darkgold"] .contact-section, html[data-theme="darkgold"] .page-hero, html[data-theme="darkgold-studio"] .hero, html[data-theme="darkgold-studio"] .stats-band, html[data-theme="darkgold-studio"] .contact-section, html[data-theme="darkgold-studio"] .page-hero { color: #E8E3D8; } html[data-theme="darkgold"] .contact-section .section-title, html[data-theme="darkgold"] .contact-item h4, html[data-theme="darkgold"] .footer .logo, html[data-theme="darkgold"] .footer h5, html[data-theme="darkgold"] .form-input, html[data-theme="darkgold"] .form-textarea, html[data-theme="darkgold"] .form-select, html[data-theme="darkgold"] .form-select option, html[data-theme="darkgold"] .gallery-card .gallery-tag, html[data-theme="darkgold"] .product-gallery-arrow, html[data-theme="darkgold-studio"] .contact-section .section-title, html[data-theme="darkgold-studio"] .contact-item h4, html[data-theme="darkgold-studio"] .footer .logo, html[data-theme="darkgold-studio"] .footer h5, html[data-theme="darkgold-studio"] .form-input, html[data-theme="darkgold-studio"] .form-textarea, html[data-theme="darkgold-studio"] .form-select, html[data-theme="darkgold-studio"] .form-select option, html[data-theme="darkgold-studio"] .gallery-card .gallery-tag, html[data-theme="darkgold-studio"] .product-gallery-arrow { color: #E8E3D8; } html[data-theme="darkgold"] .logo-text span, html[data-theme="darkgold"] .logo-mark, html[data-theme="darkgold-studio"] .logo-text span, html[data-theme="darkgold-studio"] .logo-mark { color: #E8E3D8; } /* ② 导航：.nav-link 原硬编码 #D0D6E0（冷灰蓝）→ 暖次文；hover/当前项走 --primary-text（暗金） */ html[data-theme="darkgold"] .nav-link, html[data-theme="darkgold-studio"] .nav-link { color: #9AA1A9; } /* ③ 金底上的文字：原 #FFFFFF → 页面底黑 #0B0B0D（金底 + 深字，对比更好，也更"高端"） */ html[data-theme="darkgold"] .btn-primary, html[data-theme="darkgold"] .btn-gradient, html[data-theme="darkgold"] .products-tab.active, html[data-theme="darkgold"] .product-badge, html[data-theme="darkgold"] .hv-card .ic, html[data-theme="darkgold"] .about-feature .check, html[data-theme="darkgold"] .social-icon:hover, html[data-theme="darkgold-studio"] .btn-primary, html[data-theme="darkgold-studio"] .btn-gradient, html[data-theme="darkgold-studio"] .products-tab.active, html[data-theme="darkgold-studio"] .product-badge, html[data-theme="darkgold-studio"] .hv-card .ic, html[data-theme="darkgold-studio"] .about-feature .check, html[data-theme="darkgold-studio"] .social-icon:hover { color: #0B0B0D; } html[data-theme="darkgold"] ::selection, html[data-theme="darkgold-studio"] ::selection { background: rgba(184,148,89,0.32); color: #E8E3D8; } /* ④ 渐变文字：原起点纯白 → #EDE7DC → #CFB47F → #B89459（金属金收尾） */ html[data-theme="darkgold"] .hero h1 .grad, html[data-theme="darkgold"] .hero-stat .num, html[data-theme="darkgold"] .stat-num, html[data-theme="darkgold"] .section-title .accent, html[data-theme="darkgold-studio"] .hero h1 .grad, html[data-theme="darkgold-studio"] .hero-stat .num, html[data-theme="darkgold-studio"] .stat-num, html[data-theme="darkgold-studio"] .section-title .accent { background-image: var(--grad-text); } /* ⑤ 表单成功提示文字：原硬编码 #B8C2D0（冷灰蓝）→ 暖次文 */ html[data-theme="darkgold"] .form-msg--ok, html[data-theme="darkgold-studio"] .form-msg--ok { color: #9AA1A9; } /* ⑥ 一级操作按钮（应用到设备 / 立即咨询 / 保存方案）：金属金渐变 + 顶部受光 + 软黑投影（规格 §八） ⚠ 不动 .btn 的尺寸/内边距/圆角，也不动 hover 的 translateY(-2px) 上浮动画。 */ html[data-theme="darkgold"] .btn-primary, html[data-theme="darkgold"] .btn-gradient, html[data-theme="darkgold-studio"] .btn-primary, html[data-theme="darkgold-studio"] .btn-gradient { background: var(--grad-gold); box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 6px 18px rgba(0,0,0,0.45); } html[data-theme="darkgold"] .btn-primary:hover, html[data-theme="darkgold"] .btn-gradient:hover, html[data-theme="darkgold-studio"] .btn-primary:hover, html[data-theme="darkgold-studio"] .btn-gradient:hover { background: var(--grad-gold-hi); box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), 0 12px 28px rgba(0,0,0,0.50), 0 0 20px rgba(184,148,89,0.10); } /* ⑦ 二级操作按钮（导入 / 导出 / 取消）：透明暗金 12% + 暗金细边（规格 §八） */ html[data-theme="darkgold"] .btn-outline, html[data-theme="darkgold-studio"] .btn-outline { background: rgba(184,148,89,0.12); border-color: rgba(184,148,89,0.22); color: #E8E3D8; } html[data-theme="darkgold"] .btn-outline:hover, html[data-theme="darkgold-studio"] .btn-outline:hover { background: rgba(184,148,89,0.18); border-color: rgba(184,148,89,0.45); color: #CFB47F; } /* ⑧ 普通按钮（次级操作 / 文字按钮）：深灰黑 #19191C（规格 §八 —— 不是所有按钮都金色） */ html[data-theme="darkgold"] .btn-ghost, html[data-theme="darkgold-studio"] .btn-ghost { background: #19191C; border-color: rgba(184,148,89,0.15); color: #9AA1A9; } html[data-theme="darkgold"] .btn-ghost:hover, html[data-theme="darkgold-studio"] .btn-ghost:hover { background: #1B1A18; border-color: rgba(184,148,89,0.45); color: #E8E3D8; } /* ⑨ 卡片 hover：暗金边缘光 + 阴影增强（规格 §七 §十）底影沿用主题的 --shadow-card-hover，只额外加 1px 金色光环；卡片原有的 translateY(-2/-3px) 上浮与过渡时序完全保留。 */ html[data-theme="darkgold"] .card:hover, html[data-theme="darkgold"] .card-elevated:hover, html[data-theme="darkgold"] .feature-card:hover, html[data-theme="darkgold"] .product-card:hover, html[data-theme="darkgold"] .news-card:hover, html[data-theme="darkgold-studio"] .card:hover, html[data-theme="darkgold-studio"] .card-elevated:hover, html[data-theme="darkgold-studio"] .feature-card:hover, html[data-theme="darkgold-studio"] .product-card:hover, html[data-theme="darkgold-studio"] .news-card:hover { border-color: rgba(184,148,89,0.45); box-shadow: var(--shadow-card-hover), 0 0 0 1px rgba(184,148,89,0.14); } /* ⑩ 高级卡片：只增加极轻的金属环境感（规格 §十 —— 不发光、不电竞） */ html[data-theme="darkgold"] .card-elevated, html[data-theme="darkgold-studio"] .card-elevated { box-shadow: var(--shadow-metal); } /* ⑪ 极细金装饰线：原用 --line（中性细线）→ 金属金细线 */ html[data-theme="darkgold"] .line-rule, html[data-theme="darkgold-studio"] .line-rule { background: var(--grad-hairline); } /* ⑫ 悬浮卡片（Hero 浮动卡）：顶部受光渐变 + 极细金边，强化"高级硬件"观感 */ html[data-theme="darkgold"] .hv-card, html[data-theme="darkgold-studio"] .hv-card { background: var(--grad-card); border-color: var(--line-gold); } /* ⑬ 表单控件层级（规格 §十一参数区域可读性）：暗金细边 + 聚焦时金色描边 */ html[data-theme="darkgold"] .form-input:focus, html[data-theme="darkgold"] .form-textarea:focus, html[data-theme="darkgold"] .form-select:focus, html[data-theme="darkgold-studio"] .form-input:focus, html[data-theme="darkgold-studio"] .form-textarea:focus, html[data-theme="darkgold-studio"] .form-select:focus { border-color: rgba(184,148,89,0.45); background: rgba(184,148,89,0.06); box-shadow: 0 0 0 3px rgba(184,148,89,0.12); } /* ⑭ 工作室：studio.css 中若干硬编码冷色（选择器级覆盖，不改 studio.css 本体，以保证 Theme Original 基线完全不受影响） · .fs-hero::after 白色光斑 → 极淡金属金光斑 · .fs-nav 深灰磨砂底 → 更深暖黑 · .fs-hint 旧金 → 新金属高亮 · .fs-tag / .fs-roadmap-chip 白 2% → 暗金薄雾 · .fs-shot 白色 4% 描边 → 金 8% 描边（高级卡片环境感） · .fs-feat.is-soon::before 白 22% → 暖白 22% */ html[data-theme="darkgold-studio"] .fs-hero::after { background: radial-gradient(ellipse at center, rgba(184,148,89,0.055) 0%, rgba(184,148,89,0) 70%); } html[data-theme="darkgold-studio"] .fs-nav { background: rgba(11,11,13,0.86); } html[data-theme="darkgold-studio"] .fs-hint { color: rgba(207,180,127,0.92); } html[data-theme="darkgold-studio"] .fs-tag, html[data-theme="darkgold-studio"] .fs-roadmap-chip { background: rgba(184,148,89,0.06); } html[data-theme="darkgold-studio"] .fs-shot { box-shadow: var(--shadow-xl), 0 0 0 1px rgba(184,148,89,0.08); } html[data-theme="darkgold-studio"] .fs-feat.is-soon::before { background-color: rgba(232,227,216,0.22); } /* ==== 源文件：fix-mobile-header.css ==== */ /* ============================================================ 移动端 Header 遮挡修复 · fix-mobile-header.css ──────────────────────────────────────────────────────────── 项目：海润微（HAIRUNWEI）创建：2026-09-20 ──────────────────────────────────────────────────────────── 【本文件只做一件事】修复 ≤720px 时 .nav-menu 半透明面板叠加在 Header 上、把 logo 与「免费咨询」按钮盖住的层叠 BUG。不新增功能、不改配色、不改任何其他布局。【BUG 根因】（详见 .workbuddy/memory/DIAGNOSIS-mobile-header-overlap-20260920.md） style.css 的 @media (max-width:720px) 把 .nav-menu 改为 position:fixed; top:72px; bottom:0; left:0; right:0 本意是「全屏下拉 + translateY(-110%) 收起」。但 .nav-menu 同时是 .nav（display:flex）的 flex item， position:fixed 后 height 仍被 flex 压成 33px，于是 translateY(-110%) = 110% × 33px = 仅上移 36.3px，菜单从 top:72 移到 top:36 —— 正好横亘在 Header(0–72px) 内。又因 .nav-menu 带 z-index:99 而 .logo/.nav-actions 均为 position:static + z-index:auto（无层叠上下文），面板盖住了 logo 与按钮。【修复策略 —— 不改 style.css，只做"补齐"】 ① 给 .nav-menu 一个确定高度，使 translateY(-110%) 计算正确，真正移出视口； ② 顺带收紧 Header 在超窄屏的排布（logo 文字隐藏、按钮内边距），让 320–430px 区间不出现挤压。全部规则限定在 max-width:720px 内，桌面端零影响。【回滚方式】从 header.php 删除对应的一行即可，本文件无任何副作用残留。本文件不覆盖任何主题令牌（--brand-* / --bg-* / --text-* 等）。 ============================================================ */ /* ════════════════════════════════════════════════════════════════ 一、≤720px：让 .nav-menu 真正收起，不再遮挡 Header ──────────────────────────────────────────────────────────────── style.css 已把它设为 fixed + top:72px + bottom:0，这里只补 height 与内层滚动，使 top/bottom 拉伸生效且 pct 位移计算正确。 ════════════════════════════════════════════════════════════════ */ @media (max-width: 720px) { /* 关键补丁：给菜单确定高度 - height: calc(100dvh - var(--header-h)) 使用动态视口高度，兼容移动端浏览器地址栏收起/展开导致的 vh 变化（dvh 不支持时回退到 vh，见下一条声明） - flex: 0 0 auto / align-self: stretch —— 解除 flex item 压缩 - max-height 兜底，防止极端情况下超出视口 */ .nav-menu { height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); flex: 0 0 auto; align-self: flex-start; max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); } /* 面板收起时（未加 .open）：彻底不参与命中测试与绘制，双保险杜绝"透明面板吃掉点击/盖住内容" */ .nav-menu:not(.open) { pointer-events: none; visibility: hidden; } .nav-menu.open { pointer-events: auto; visibility: visible; } /* 展开时 Header 本体层级抬升，保证 logo / 按钮始终可点可读 */ .header { z-index: 101; } .nav-menu { z-index: 100; } } /* ════════════════════════════════════════════════════════════════ 二、≤520px：极窄屏 Header 排布收敛 ──────────────────────────────────────────────────────────────── 390px 实测：logo 179px + nav-actions 138px = 317px，容器可用 358px ⇒ 尚有余量，但 320–430px 明显吃紧。这里只做"减负"，不改变任何元素的显隐语义。 2026-10-12 修订：原先此处 `.logo-text{display:none}` 把中文名「海润微」一并隐藏，移动端只剩 HRW 图形标，用户反馈"没显示中文公司名字"。改为**只隐藏英文副标**，中文名保留并略缩小。 ════════════════════════════════════════════════════════════════ */ @media (max-width: 520px) { /* 只隐藏英文副标 HAIRUNWEI TECH；中文名「海润微」保留 */ .logo-text .en { display: none; } /* 中文名在窄屏略微收紧，给右侧操作区让位 */ .logo-text { display: flex; } .logo-text > span:first-child { font-size: 15px; letter-spacing: 0.02em; white-space: nowrap; } .logo svg { width: 84px; height: 28px; } /* 收紧 logo 与按钮之间的间距 */ .logo { flex-shrink: 0; gap: 6px; } .nav-actions { flex-shrink: 0; gap: 4px; } /* 「免费咨询」按钮：减小内边距与字号，避免在 320px 换行 */ .nav-actions .btn { padding: 7px 12px; font-size: 13px; white-space: nowrap; } } /* ════════════════════════════════════════════════════════════════ 三、≤380px：超窄屏最后一道防线 ════════════════════════════════════════════════════════════════ */ @media (max-width: 380px) { .nav-actions .btn { padding: 7px 10px; font-size: 12px; } .nav-toggle { width: 38px; height: 38px; } /* 320–380px 极窄屏：中文名再小一档，确保不挤压 */ .logo-text > span:first-child { font-size: 14px; } .logo svg { width: 76px; height: 26px; } } /* ════════════════════════════════════════════════════════════════ 四、≤720px：菜单展开时的可读性与触摸目标 ──────────────────────────────────────────────────────────────── style.css 已给出 .nav-link 的 padding/font-size，这里不重复；仅补一条：面板内部超出时可滚动（style.css 已有 overflow-y:auto，但固定 height 后需要确保 flex 子项不被压扁）。 ════════════════════════════════════════════════════════════════ */ @media (max-width: 720px) { .nav-menu > .nav-link { flex: 0 0 auto; } } /* ════════════════════════════════════════════════════════════════ 五、移动端汉堡按钮可见性 ──────────────────────────────────────────────────────────────── 2026-09-22：细线贴边看不清 → 加了淡金底 + 2px 线。 2026-10-12 修订：用户反馈"3 横杠页不清晰"，实测根因是「浅色细线 + 半透明底」在深色 Header 上对比度不足，且 2px 线在 2x/3x 屏渲染时抗锯齿发虚。改为**实心金底 + 深色粗线条**（金底 #C9AF6C 与深色文字反差大），线条加粗到 2.5px、加长到 24px，并在金底上使用深色描边，这是移动端最稳妥的高对比方案，与「免费咨询」金按钮形成同一视觉组。 ════════════════════════════════════════════════════════════════ */ @media (max-width: 720px) { .nav-toggle { border: 1px solid #C9AF6C; background: #C9AF6C; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28); } .nav-toggle:active { background: #B89B58; border-color: #B89B58; } /* 线条：加粗加长，用深色（金底上反差最大） */ .nav-toggle span { width: 24px; height: 2.5px; background: #1A1A1A; border-radius: 1.5px; } .nav-toggle span::before, .nav-toggle span::after { height: 2.5px; background: #1A1A1A; border-radius: 1.5px; } /* 三条线间距略放大，视觉更清晰 */ .nav-toggle span::before { top: -7px; } .nav-toggle span::after { top: 7px; } /* 展开态（X 形）保持深色，位移量跟随新的 7px 间距 */ .nav-toggle.open span { background: transparent; } .nav-toggle.open span::before { transform: translateY(7px) rotate(45deg); } .nav-toggle.open span::after { transform: translateY(-7px) rotate(-45deg); } } /* ==== 源文件：theme-premium.css ==== */ /* ============================================================ theme-premium.css —— 质感升级层（2026-10-13 · UI 重设计） ------------------------------------------------------------ 定位：在 darkgold 配色之上的**纯视觉增量层**：噪点颗粒 / 顶部聚光 / 卡片金边 / 按钮扫光 / 滚动渐显 / 细节打磨 ✗ 不改任何文案、结构、布局尺寸、逻辑；内容零变化 ✗ 不改 darkgold 基础配色（金色主值 #B89459 不动）【回滚（< 5 秒）】header.php 里删掉 theme-premium.css 那一行即可（备份：backups/header.php.bak-20261013-1705）【依赖】data-theme="darkgold" / "darkgold-studio"（沿用基础配色 token） ============================================================ */ /* ── 0. 作用域：与 darkgold 家族完全一致 ─────────────────────── */ html[data-theme="darkgold"], html[data-theme="darkgold-studio"] { /* 全局选中 / 焦点（键盘可达性 + 品牌金） */ --hrw-grain-opacity: 0.045; } html[data-theme="darkgold"] ::selection, html[data-theme="darkgold-studio"] ::selection { background: rgba(184, 148, 89, 0.35); color: #F2EDE2; } html[data-theme="darkgold"] :focus-visible, html[data-theme="darkgold-studio"] :focus-visible { outline: 2px solid rgba(207, 180, 127, 0.65); outline-offset: 2px; } /* ── 1. 噪点颗粒层（消除深色 banding，哑光金属质感）────────── feTurbulence 内联 SVG，零图片请求；盖在最上层但不可交互。透明度 0.045：肉眼几乎不可见，但"黑"从此有材质。 */ html[data-theme="darkgold"], html[data-theme="darkgold-studio"] { position: relative; } html[data-theme="darkgold"] body::after, html[data-theme="darkgold-studio"] body::after { content: ""; position: fixed; inset: 0; z-index: 2000; pointer-events: none; opacity: var(--hrw-grain-opacity, 0.045); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; } /* ── 2. 顶部聚光柔光（影棚顶光，亮度远低于中灰）────────────── 只叠 background-image，不动背景色 token */ html[data-theme="darkgold"] body, html[data-theme="darkgold-studio"] body { background-image: radial-gradient(120% 60% at 50% 0%, rgba(226, 232, 240, 0.045) 0%, rgba(226, 232, 240, 0.012) 38%, transparent 62%); background-repeat: no-repeat; } /* ── 3. Hero：底部金色地平微光（区分首屏与其他区块）─────────── */ html[data-theme="darkgold"] .home-page .hero, html[data-theme="darkgold-studio"] .home-page .hero { background-image: radial-gradient(90% 90% at 50% 108%, rgba(184, 148, 89, 0.10) 0%, transparent 55%); } /* ── 4. 卡片体系：金边 + 顶部金属高光 + 悬停微升 ─────────────── 只加边框色/阴影/内高光；各卡原有 hover 位移与过渡时序保留 */ html[data-theme="darkgold"] .feature-card, html[data-theme="darkgold"] .product-card, html[data-theme="darkgold"] .card, html[data-theme="darkgold"] .card-elevated, html[data-theme="darkgold"] .news-card, html[data-theme="darkgold"] .gallery-card, html[data-theme="darkgold"] .hv-card, html[data-theme="darkgold"] .home-page .hm-cap-item, html[data-theme="darkgold"] .home-page .hm-flow-item, html[data-theme="darkgold-studio"] .feature-card, html[data-theme="darkgold-studio"] .product-card, html[data-theme="darkgold-studio"] .card, html[data-theme="darkgold-studio"] .card-elevated { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0%, rgba(255, 255, 255, 0) 42%); transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, background-color 0.25s ease; } html[data-theme="darkgold"] .feature-card:hover, html[data-theme="darkgold"] .product-card:hover, html[data-theme="darkgold"] .card:hover, html[data-theme="darkgold"] .card-elevated:hover, html[data-theme="darkgold"] .news-card:hover, html[data-theme="darkgold"] .gallery-card:hover, html[data-theme="darkgold"] .hv-card:hover, html[data-theme="darkgold"] .home-page .hm-cap-item:hover, html[data-theme="darkgold"] .home-page .hm-flow-item:hover, html[data-theme="darkgold-studio"] .feature-card:hover, html[data-theme="darkgold-studio"] .product-card:hover, html[data-theme="darkgold-studio"] .card:hover, html[data-theme="darkgold-studio"] .card-elevated:hover { border-color: rgba(207, 180, 127, 0.42); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(184, 148, 89, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.05); } /* ── 5. 按钮扫光（hover 时一道高光斜扫；伪元素实现，不动按钮底色）─ */ html[data-theme="darkgold"] .btn-primary, html[data-theme="darkgold"] .btn-gradient, html[data-theme="darkgold-studio"] .btn-primary, html[data-theme="darkgold-studio"] .btn-gradient { position: relative; overflow: hidden; } html[data-theme="darkgold"] .btn-primary::after, html[data-theme="darkgold"] .btn-gradient::after, html[data-theme="darkgold-studio"] .btn-primary::after, html[data-theme="darkgold-studio"] .btn-gradient::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: -70%; width: 45%; background: linear-gradient(110deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0) 100%); transform: skewX(-18deg); transition: left 0.6s ease; pointer-events: none; } html[data-theme="darkgold"] .btn-primary:hover::after, html[data-theme="darkgold"] .btn-gradient:hover::after, html[data-theme="darkgold-studio"] .btn-primary:hover::after, html[data-theme="darkgold-studio"] .btn-gradient:hover::after { left: 130%; } /* ── 6. 排版细节：眉题字距 / 标题金属渐变 / 数字等宽 ──────────── */ html[data-theme="darkgold"] .section-eyebrow, html[data-theme="darkgold"] .hero-eyebrow, html[data-theme="darkgold-studio"] .section-eyebrow { letter-spacing: 0.22em; } html[data-theme="darkgold"] .section-title, html[data-theme="darkgold"] .hero h1, html[data-theme="darkgold"] .page-hero h1, html[data-theme="darkgold-studio"] .section-title { background: linear-gradient(180deg, #F2EDE2 0%, #C9AE76 130%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } html[data-theme="darkgold"] .hero-stats .num, html[data-theme="darkgold"] .hero-stats .metric, html[data-theme="darkgold-studio"] .hero-stats .metric { font-variant-numeric: tabular-nums; } /* ── 7. 细节打磨：header 金色发丝线 / 滚动条 ─────────────────── */ html[data-theme="darkgold"] .header, html[data-theme="darkgold-studio"] .header { border-bottom-color: rgba(184, 148, 89, 0.16); } html[data-theme="darkgold"] ::-webkit-scrollbar, html[data-theme="darkgold-studio"] ::-webkit-scrollbar { width: 10px; background: #0D0D0F; } html[data-theme="darkgold"] ::-webkit-scrollbar-thumb, html[data-theme="darkgold-studio"] ::-webkit-scrollbar-thumb { background: rgba(184, 148, 89, 0.28); border-radius: 6px; border: 2px solid #0D0D0F; } html[data-theme="darkgold"] ::-webkit-scrollbar-thumb:hover, html[data-theme="darkgold-studio"] ::-webkit-scrollbar-thumb:hover { background: rgba(207, 180, 127, 0.45); } /* ── 8. 滚动渐显（原生 CSS scroll-driven，零 JS；不支持则自动跳过）─ */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { html[data-theme="darkgold"] .feature-card, html[data-theme="darkgold"] .product-card, html[data-theme="darkgold"] .home-page .hm-cap-item, html[data-theme="darkgold"] .home-page .hm-flow-item, html[data-theme="darkgold"] .news-card { animation: hrw-reveal-in linear both; animation-timeline: view(); animation-range: entry 0% entry 32%; } } } @keyframes hrw-reveal-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* ── 9. 无障碍：偏好减少动效 → 关掉一切环境动画 ─────────────── */ @media (prefers-reduced-motion: reduce) { html[data-theme="darkgold"] *, html[data-theme="darkgold-studio"] * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ════════════════════════════════════════════════════════════════ 10. 卡片动画升级包（2026-10-13 · 设计工作流 Step 3 · L2/L3/L5/L6）〔判读〕黑金体系内做"卡片活起来"：光随鼠标走、金光绕框、照片呼吸、入场错峰；全部 transform/opacity/background，零 layout 抖动〔增量层〕仅本文件追加段 + card-fx.js；内容/结构零改动〔回滚〕删除本段（§10）+ footer.php 的 card-fx.js 行 ════════════════════════════════════════════════════════════════ */ /* ── 10a. L2 聚光跟随：光晕画在卡片背景层，坐标由 card-fx.js 写入 ── .feature-card 的 ::before 已被金线占用 ⇒ 用 background-image 叠加，不碰任何伪元素；默认 50%/50% 居中微光（无 JS 时也自然） */ html[data-theme="darkgold"] .feature-card, html[data-theme="darkgold"] .product-card, html[data-theme="darkgold"] .card, html[data-theme="darkgold"] .card-elevated, html[data-theme="darkgold"] .news-card, html[data-theme="darkgold"] .pd-card, html[data-theme="darkgold"] .home-page .hm-cap-item, html[data-theme="darkgold"] .home-page .hm-flow-item, html[data-theme="darkgold"] .hv-card, html[data-theme="darkgold-studio"] .feature-card, html[data-theme="darkgold-studio"] .product-card, html[data-theme="darkgold-studio"] .card, html[data-theme="darkgold-studio"] .pd-card { background-image: radial-gradient(300px circle at var(--mx, 50%) var(--my, 40%), rgba(184, 148, 89, 0.10) 0%, rgba(184, 148, 89, 0.035) 45%, transparent 68%), linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0%, rgba(255, 255, 255, 0) 42%); transition: background-image 0.3s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, background-color 0.25s ease; } @media (pointer: fine) { html[data-theme="darkgold"] .feature-card:hover, html[data-theme="darkgold"] .product-card:hover, html[data-theme="darkgold"] .card:hover, html[data-theme="darkgold"] .card-elevated:hover, html[data-theme="darkgold"] .news-card:hover, html[data-theme="darkgold"] .pd-card:hover, html[data-theme="darkgold"] .home-page .hm-cap-item:hover, html[data-theme="darkgold"] .home-page .hm-flow-item:hover, html[data-theme="darkgold"] .hv-card:hover, html[data-theme="darkgold-studio"] .feature-card:hover, html[data-theme="darkgold-studio"] .product-card:hover, html[data-theme="darkgold-studio"] .pd-card:hover { background-image: radial-gradient(300px circle at var(--mx, 50%) var(--my, 40%), rgba(207, 180, 127, 0.13) 0%, rgba(184, 148, 89, 0.05) 45%, transparent 68%), linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 42%); } } /* ── 10b. L4 3D 微倾（photo 卡专用；card-fx.js 写 transform，此处给底） ── */ html[data-theme="darkgold"] .pd-card, html[data-theme="darkgold"] .hv-card, html[data-theme="darkgold-studio"] .pd-card { transform-style: preserve-3d; will-change: transform; } html[data-theme="darkgold"] .pd-card .pd-card-media img, html[data-theme="darkgold"] .hv-card img { transform: translateZ(18px); /* 照片浮起一层，微倾时有纵深 */ transition: transform 0.3s ease; } /* ── 10c. L5 内容揭示：照片呼吸 + 信息层上滑 ─────────────────── */ html[data-theme="darkgold"] .pd-card .pd-card-media img, html[data-theme="darkgold"] .product-card img { transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); } html[data-theme="darkgold"] .pd-card:hover .pd-card-media img, html[data-theme="darkgold"] .product-card:hover img { transform: scale(1.045) translateZ(18px); } html[data-theme="darkgold"] .pd-card .pd-card-foot, html[data-theme="darkgold"] .product-card .product-foot { transition: transform 0.35s ease, opacity 0.35s ease; } /* ── 10d. L3 金色流光边框（@property 渐进增强；不支持=静态金边） ── */ @property --hrw-angle { syntax: ''; initial-value: 0deg; inherits: false; } @supports (background: conic-gradient(from 0deg, red, blue)) { @media (prefers-reduced-motion: no-preference) { html[data-theme="darkgold"] .feature-card, html[data-theme="darkgold"] .product-card, html[data-theme="darkgold-studio"] .feature-card { position: relative; overflow: hidden; } /* 流光层：细环上跑一道金光，平时近乎不可见 */ html[data-theme="darkgold"] .feature-card::after, html[data-theme="darkgold"] .product-card::after, html[data-theme="darkgold-studio"] .feature-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--hrw-angle), transparent 0deg, rgba(207, 180, 127, 0.55) 40deg, transparent 90deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } html[data-theme="darkgold"] .feature-card:hover::after, html[data-theme="darkgold"] .product-card:hover::after, html[data-theme="darkgold-studio"] .feature-card:hover::after { opacity: 1; animation: hrw-border-beam 3.2s linear infinite; } } } @property --hrw-angle { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes hrw-border-beam { to { --hrw-angle: 360deg; } } /* ── 10e. L6 入场编排：同排卡片错峰 60ms（配合 main.js 的 .reveal/.in） ── 仅在 html.js（JS 可用标记，main.js 首行添加）下才隐藏初始态 ⇒ 无 JS / 爬虫 / JS 报错时内容完整可见，绝不藏内容 */ html.js[data-theme="darkgold"] .feature-card.reveal, html.js[data-theme="darkgold"] .product-card.reveal, html.js[data-theme="darkgold"] .news-card.reveal, html.js[data-theme="darkgold"] .home-page .hm-cap-item.reveal, html.js[data-theme="darkgold"] .home-page .hm-flow-item.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease, border-color 0.25s ease, box-shadow 0.25s ease; } html.js[data-theme="darkgold"] .feature-card.reveal.in, html.js[data-theme="darkgold"] .product-card.reveal.in, html.js[data-theme="darkgold"] .news-card.reveal.in, html.js[data-theme="darkgold"] .home-page .hm-cap-item.reveal.in, html.js[data-theme="darkgold"] .home-page .hm-flow-item.reveal.in { opacity: 1; transform: translateY(0); } html.js[data-theme="darkgold"] .feature-card.reveal.in:nth-child(2), html.js[data-theme="darkgold"] .product-card.reveal.in:nth-child(2), html.js[data-theme="darkgold"] .home-page .hm-cap-item.reveal.in:nth-child(2) { transition-delay: 0.06s; } html.js[data-theme="darkgold"] .feature-card.reveal.in:nth-child(3), html.js[data-theme="darkgold"] .product-card.reveal.in:nth-child(3), html.js[data-theme="darkgold"] .home-page .hm-cap-item.reveal.in:nth-child(3) { transition-delay: 0.12s; } html.js[data-theme="darkgold"] .feature-card.reveal.in:nth-child(4), html.js[data-theme="darkgold"] .product-card.reveal.in:nth-child(4), html.js[data-theme="darkgold"] .home-page .hm-cap-item.reveal.in:nth-child(4) { transition-delay: 0.18s; } html.js[data-theme="darkgold"] .feature-card.reveal.in:nth-child(n+5), html.js[data-theme="darkgold"] .product-card.reveal.in:nth-child(n+5), html.js[data-theme="darkgold"] .home-page .hm-cap-item.reveal.in:nth-child(n+5) { transition-delay: 0.24s; } /* 无 JS 兜底：card-fx 未加载/被禁时，聚光层保持居中静态微光（见 10a 默认值） */ /* ==== 源文件：design-tokens.css ==== */ /* ============================================================================ * design-tokens.css — 全站设计令牌层（任务书「阶段二：全站基础视觉」） * ---------------------------------------------------------------------------- * 建立时间：2026-10-17 * 依据：《黑金未来音频科技视觉升级执行总任务书》第三节「建立全站统一的设计系统」 * 与第十二节「动效规范」 * * ⚠ 本文件**只定义变量，不输出任何样式规则** —— 单独引入它不会改变任何页面的 * 外观。这是刻意的：阶段二只建立"统一语言"，具体页面什么时候改用这些令牌， * 由各阶段的页面改造决定（避免一次性全站换肤带来的不可控风险）。 * * ⭐ 回滚（< 5 秒）：删掉 header.php 里引入本文件的那一行即可。 * * 命名前缀统一 hrw-，与站点既有的 --brand-* / --text-* / --bg-* 并存不冲突， * 便于渐进替换。 * * 与任务书第三节的两处口径说明： * 1. 任务书「主品牌金 #D4B66D」—— 实际以用户 2026-10-16 的拍板为准： * 品牌金保持 #C9AF6C 不换，另加高光金 #D4B66D / 极少量高光 #F1DCA2 / 暗金 #8D7545。 * 理由是避免"换了一套品牌"。此处同时保留两套命名，避免歧义。 * 2. 任务书要求「成功及状态信息使用独立、易识别的语义颜色，不要全部染成金色」 * —— 见下方 --hrw-ok / --hrw-warn / --hrw-risk / --hrw-info。 * ========================================================================== */ :root { /* ── 背景层级（任务书第三节数值）────────────────────────────────── */ --hrw-bg: #090A0C; /* 页面主背景 */ --hrw-bg-2: #101216; /* 次级背景 / 区块交替带 */ --hrw-bg-card: #15181D; /* 卡片背景 */ --hrw-bg-soft: #1B1F26; /* 凸起 / 输入框 / 次级按钮 */ --hrw-bg-deep: #060709; /* 比主背景更深，用于沉浸区收口 */ /* ── 分隔线与描边 ────────────────────────────────────────────── */ --hrw-line: #2E2B24; /* 分隔线（任务书第三节） */ --hrw-line-soft: rgba(46, 43, 36, .55); /* 更弱的分隔 */ --hrw-line-gold: rgba(201, 175, 108, .22);/* 金色描边（克制使用） */ /* ── 品牌金族（用户 2026-10-16 拍板）─────────────────────────── */ --hrw-gold: #C9AF6C; /* ★ 品牌金，不换 */ --hrw-gold-hi: #D4B66D; /* 高光金 */ --hrw-gold-max: #F1DCA2; /* 极少量高光（金属反光） */ --hrw-gold-dim: #8D7545; /* 暗金（线路 / 次级强调） */ /* ── 文字层级（任务书第三节 + 四级排版）──────────────────────── */ --hrw-t1: #F2F2F0; /* 正文 / 标题主色 */ --hrw-t2: #A7A9AD; /* 次要文字 */ --hrw-t3: #8C857A; /* 说明 / 弱化（深色底上仍可读） */ --hrw-t4: #6E6961; /* 极弱（仅用于分隔性标注） */ /* ── 语义色（任务书明确要求独立，不要全染金）────────────────── */ --hrw-ok: #5BAE7F; --hrw-warn: #D98E4A; --hrw-risk: #C96A5A; --hrw-info: #6A93C9; /* ── 字体（任务书第三节：中文现代黑体栈 / 技术数字用等宽）────── */ --hrw-font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", -apple-system, sans-serif; --hrw-font-mono: Consolas, "SF Mono", ui-monospace, Menlo, monospace; /* 四级排版：标题 / 正文 / 参数 / 说明 —— 用 clamp 保证移动端不溢出，桌面端维持既有视觉尺度 */ --hrw-fs-display: clamp(30px, 5.2vw, 54px); /* 首屏主标题 */ --hrw-fs-h1: clamp(24px, 3.4vw, 34px); --hrw-fs-h2: clamp(20px, 2.6vw, 26px); --hrw-fs-h3: 17px; --hrw-fs-body: 14.5px; --hrw-fs-param: 13.5px; /* 参数值 */ --hrw-fs-note: 12.5px; /* 说明文字（不低于 12px，深底可读） */ --hrw-fs-micro: 11.5px; /* 标签 / 眉标，仅大写英文或短词 */ --hrw-lh-tight: 1.18; --hrw-lh-head: 1.35; --hrw-lh-body: 1.75; /* ── 间距标尺（8 的倍数，避免出现 6/7/9/11px 这类碎值）──────── */ --hrw-s1: 4px; --hrw-s2: 8px; --hrw-s3: 12px; --hrw-s4: 16px; --hrw-s5: 24px; --hrw-s6: 32px; --hrw-s7: 48px; --hrw-s8: 64px; --hrw-s9: 96px; --hrw-wrap: 1200px; /* 内容最大宽度（任务书：统一内容最大宽度） */ /* ── 圆角标尺（收成 4 档，替代原来的 11 档）────────────────── */ --hrw-r-sm: 6px; --hrw-r-md: 10px; --hrw-r-lg: 14px; --hrw-r-pill: 999px; /* ── 阴影（克制：只用两档，不做发光堆叠）────────────────────── */ --hrw-shadow-1: 0 10px 26px rgba(0, 0, 0, .38); --hrw-shadow-2: 0 18px 48px rgba(0, 0, 0, .52); /* ── 动效时长（任务书第十二节给出的参考区间）────────────────── */ --hrw-dur-btn: 160ms; /* 按钮反馈 120–200ms */ --hrw-dur-hover: 220ms; /* 卡片悬停 180–280ms */ --hrw-dur-in: 360ms; /* 内容淡入 250–450ms */ --hrw-ease-out: cubic-bezier(.2, .75, .2, 1); --hrw-ease-in: cubic-bezier(.66, 0, .84, .18); }