/* ============================================================ 全局样式表 style.css —— 中英双语工业企业站风格来源：Hohner Oil & Gas 官网（http://www.hohneroilgas.com）品牌识别：红 #FF0000 品牌条 + 蓝 #0000FF 导航 + 藏青 #000080 结构线字体：Arial（Hohner 原站统一用 Arial）修改配色只需改下面「设计变量」里的几个颜色值即可。 ============================================================ */ /* ---------- 1. 设计变量（改色开关都在这里） ---------- */ :root { /* Hohner 品牌三原色（与 hohneroilgas.com 完全一致） */ --red: #ff0000; /* 品牌红：品牌条背景、强调、CTA */ --red-dark: #cc0000; /* 红色 hover */ --navy: #000080; /* 藏青：标题、结构线、页脚 */ --navy-dark: #00005c; /* 页脚深底 */ --blue: #0000ff; /* 品牌蓝：导航条、链接、主按钮 */ --blue-dark: #0000cc; /* 蓝色 hover */ /* 中性色（背景、文字、边框） */ --bg: #f3f5f8; --surface: #ffffff; --surface-2: #eef1f6; --ink: #14181f; /* 正文主色（近黑，保证可读性） */ --muted: #5b6472; --border: #e1e6ee; --border-strong: #c9d2e0; /* 字体：Arial 优先（忠实于 Hohner 原站），中文回退到系统字体 */ --font-sans: Arial, "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif; /* 间距与尺寸 */ --maxw: 1160px; --radius: 10px; --radius-sm: 6px; --shadow: 0 6px 20px rgba(0, 0, 60, 0.08); --shadow-lg: 0 14px 40px rgba(0, 0, 60, 0.14); } /* ---------- 2. 基础重置 ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); color: var(--ink); background: var(--bg); line-height: 1.7; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; color: var(--navy); margin: 0 0 0.8rem; } h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); } h2 { font-size: clamp(1.4rem, 2.6vw, 2.1rem); } h3 { font-size: 1.2rem; } p { margin: 0 0 1rem; } a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; display: block; } ul { padding-left: 1.2rem; } /* ---------- 3. 双语切换的核心规则 ---------- 页面默认带 class="lang-zh"；点语言按钮后 JS 会切换成 class="lang-en"。规则：当前语言显示，另一种语言隐藏。 */ body.lang-zh [data-en] { display: none !important; } body.lang-en [data-zh] { display: none !important; } /* ---------- 4. 布局工具类 ---------- */ .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.2rem; } .section { padding: 4rem 0; } .section--tight { padding: 2.5rem 0; } .grid { display: grid; gap: 1.2rem; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .center { text-align: center; } .muted { color: var(--muted); } .lead { font-size: 1.12rem; color: var(--muted); } .eyebrow { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); margin: 0 0 0.5rem; } /* ---------- 5. 按钮 ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.3rem; border-radius: var(--radius-sm); font-weight: 700; font-size: 0.92rem; cursor: pointer; border: 1px solid transparent; transition: background 0.15s, transform 0.1s; font-family: var(--font-sans); } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn--primary { background: var(--blue); color: #fff; } .btn--primary:hover { background: var(--blue-dark); } .btn--accent { background: var(--red); color: #fff; } .btn--accent:hover { background: var(--red-dark); } .btn--ghost { background: transparent; color: var(--navy); border-color: var(--border-strong); } .btn--ghost:hover { background: var(--surface-2); } /* 导航条上的询价按钮：白底红字 */ .btn--quote { background: #fff; color: var(--red); font-weight: 700; } .btn--quote:hover { background: #ffecec; } /* ---------- 6. 卡片 ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow); } .card:hover { box-shadow: var(--shadow-lg); } /* 认证徽章（仿 Hohner 的 ATEX / CSA / IECEx / EAC 认证标） */ .badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); margin: 0 0.3rem 0.3rem 0; } .badge--cert { background: #eaf6ec; color: #1c7a34; border-color: #c4e6cb; } .badge--hazard { background: #fdecee; color: var(--red-dark); border-color: #f6c9ce; } /* 认证标条（仅用于首页，呼应 Hohner 的认证 logo 行；内容居中） */ .cert-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem; padding: 1.4rem 1.2rem; background: var(--surface); border-top: 2px solid var(--navy); border-bottom: 1px solid var(--border); } .cert-strip__label { font-weight: 700; color: var(--navy); font-size: 0.85rem; margin-right: 0.4rem; } .cert-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; padding: 0.35rem 0.7rem; border-radius: var(--radius-sm); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.04em; border: 2px solid; } .cert-badge--atex { color: var(--navy); border-color: var(--navy); background: #eef0ff; } .cert-badge--csa { color: var(--red); border-color: var(--red); background: #ffecec; } .cert-badge--iecex { color: var(--blue); border-color: var(--blue); background: #ececff; } .cert-badge--eac { color: var(--navy); border-color: var(--navy); background: #fff; } .cert-badge--gost { color: var(--red); border-color: var(--red); background: #fff; } /* ---------- 7. 顶部导航（仿 Hohner：红品牌条 + 蓝导航条两行） ---------- */ .site-header { position: sticky; top: 0; z-index: 50; } /* 第一行：红色品牌条 */ .brandbar { background: var(--red); } .brandbar__inner { display: flex; align-items: center; gap: 1rem; min-height: 56px; } .brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: #fff; } .brand:hover { text-decoration: none; } .brand__mark { width: 40px; height: 40px; display: grid; place-items: center; background: #fff; color: var(--red); font-weight: 900; border-radius: 8px; font-size: 1.15rem; } .brand__text { display: flex; flex-direction: column; line-height: 1.1; } .brand__text strong { color: #fff; font-size: 1.15rem; letter-spacing: 0.04em; } .brand__text small { color: rgba(255, 255, 255, 0.88); font-size: 0.72rem; } /* 语言切换按钮（放在红条右侧） */ .lang-toggle { margin-left: auto; border: 1.5px solid #fff; background: transparent; color: #fff; border-radius: var(--radius-sm); padding: 0.4rem 0.7rem; font-weight: 700; font-size: 0.82rem; cursor: pointer; font-family: var(--font-sans); } .lang-toggle:hover { background: rgba(255, 255, 255, 0.15); } /* 第二行：蓝色导航条 */ .navbar { background: var(--blue); } .navbar__inner { display: flex; align-items: center; gap: 0.2rem; min-height: 50px; } .nav { display: flex; align-items: stretch; gap: 0; margin-left: 0; } .nav__link { display: flex; align-items: center; padding: 0 1rem; min-height: 50px; color: #fff; font-weight: 600; font-size: 0.95rem; white-space: nowrap; } .nav__link:hover { background: rgba(255, 255, 255, 0.16); text-decoration: none; } .nav__link.active { background: var(--red); color: #fff; } .navbar .btn--quote { margin-left: auto; } /* 移动端菜单（纯 CSS 用

实现） */ .nav-mobile { display: none; } .nav-mobile > summary { width: 42px; height: 42px; display: grid; align-content: center; gap: 4px; padding: 0 9px; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: var(--radius-sm); list-style: none; margin-left: auto; } .nav-mobile > summary::-webkit-details-marker { display: none; } .nav-mobile > summary span { height: 2px; background: #fff; border-radius: 2px; } .nav-mobile__panel { position: absolute; left: 0; right: 0; top: 106px; background: var(--blue); box-shadow: var(--shadow); display: flex; flex-direction: column; padding: 0.4rem 1.2rem 1rem; } .nav-mobile__panel a { padding: 0.85rem 0.2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.2); color: #fff; font-weight: 600; } .nav-mobile__panel a.active { color: #fff; background: var(--red); padding-left: 0.6rem; } /* ---------- 8. 首屏 Hero ---------- */ .hero { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%); color: #fff; padding: 5rem 0; } .hero__inner { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 2rem; align-items: center; } .hero h1 { color: #fff; } .hero .lead { color: #d6ddf2; max-width: 52ch; } .hero .eyebrow { color: #ff6b75; } .hero__cta { display: flex; gap: 0.8rem; flex-wrap: wrap; } .hero .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.5); } .hero .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); } .hero__visual { display: grid; place-items: center; } .encoder-svg { width: 100%; max-width: 320px; } /* 产品/内页的紧凑型 Hero */ .hero--short { padding: 3rem 0; } /* 数据条 */ .stat-strip { background: var(--surface); border-bottom: 1px solid var(--border); } .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 1.6rem 1.2rem; } .stat { text-align: center; } .stat__value { display: block; font-size: 1.8rem; font-weight: 800; color: var(--navy); } .stat__label { font-size: 0.85rem; color: var(--muted); } /* 区块标题（带右侧按钮） */ .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap; } /* 分类卡 */ .cat-card { color: var(--ink); display: flex; flex-direction: column; } .cat-card:hover { text-decoration: none; transform: translateY(-3px); } .cat-card h3 { margin-bottom: 0.5rem; color: var(--navy); } .cat-card__link { margin-top: auto; color: var(--red); font-weight: 700; font-size: 0.9rem; } /* CTA 横幅 */ .cta-band { background: var(--surface-2); border-top: 3px solid var(--red); } .cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 2.5rem 1.2rem; flex-wrap: wrap; } .cta-band__title { margin: 0 0 0.4rem; color: var(--navy); } /* ---------- 9. 产品数据表 ---------- */ .product { border: 1px solid var(--border); border-left: 4px solid var(--red); border-radius: var(--radius); background: var(--surface); margin-bottom: 1rem; overflow: hidden; } .product > summary { cursor: pointer; padding: 1.1rem 1.4rem; display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; list-style: none; font-weight: 700; color: var(--navy); } .product > summary::-webkit-details-marker { display: none; } .product > summary:hover { background: var(--surface-2); } .product__series { font-size: 1.05rem; } .product__toggle { margin-left: auto; color: var(--muted); font-weight: 400; font-size: 0.85rem; } .product__body { padding: 0 1.4rem 1.4rem; } .spec-table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1rem; } .spec-table th, .spec-table td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--border); font-size: 0.92rem; } .spec-table th { color: var(--muted); font-weight: 600; width: 38%; } .doc-links a { margin-right: 1rem; font-weight: 600; } /* 产品类型下的「包含型号」占位徽章（类型 ≠ 单一 SKU） */ .models-placeholder { display: inline-block; margin: 0.2rem 0 0.4rem; padding: 0.35rem 0.7rem; background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); font-size: 0.82rem; color: var(--muted); } /* 分类锚点标题（仿 Hohner 的藏青分隔线） */ .cat-anchor { scroll-margin-top: 120px; padding-top: 1rem; border-top: 3px solid var(--navy); margin-top: 2.5rem; } .cat-anchor h2 { color: var(--navy); } /* 品牌区块标题（红条 + 品牌名） */ .brand-block__head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.2rem; } .brand-block__chip { background: var(--red); color: #fff; font-weight: 800; padding: 0.35rem 0.9rem; border-radius: var(--radius-sm); font-size: 1rem; } /* ---------- 10. 案例卡片 ---------- */ .case-card { display: flex; flex-direction: column; } .case-card__tag { align-self: flex-start; background: var(--navy); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 0.25rem 0.7rem; border-radius: 999px; margin-bottom: 0.8rem; } .case-card h3 { margin-bottom: 0.4rem; color: var(--navy); } .case-card__result { margin-top: auto; padding-top: 0.8rem; color: var(--red); font-weight: 700; } /* ---------- 11. 关于页 / 通用内容 ---------- */ .prose { max-width: 72ch; } .prose h2 { margin-top: 2rem; color: var(--navy); } /* ---------- 12. 联系表单 ---------- */ .form-grid { display: grid; gap: 1rem; max-width: 560px; } .form-grid label { font-weight: 600; font-size: 0.9rem; display: block; margin-bottom: 0.3rem; } .form-grid input, .form-grid textarea, .form-grid select { width: 100%; padding: 0.7rem 0.9rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-family: inherit; font-size: 0.95rem; background: var(--surface); } .form-grid input:focus, .form-grid textarea:focus, .form-grid select:focus { outline: 2px solid var(--blue); border-color: var(--blue); } .form-note { font-size: 0.85rem; color: var(--muted); } .contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2rem; } .contact-cards .card h3 { color: var(--navy); } /* ---------- 13. 页脚（藏青底，仿 Hohner 多实体呈现） ---------- */ .site-footer { background: var(--navy-dark); color: #c7d1e8; padding: 3rem 0 1.5rem; margin-top: 3rem; } .site-footer a { color: #c7d1e8; } .site-footer a:hover { color: #fff; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; } .footer-grid h4 { color: #fff; font-size: 1rem; margin-bottom: 0.8rem; } .footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); margin-top: 2rem; padding-top: 1.2rem; font-size: 0.82rem; color: #8fa0c4; } /* 多实体条（呼应 Hohner 英国/加拿大双实体） */ .entity-strip { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.12); margin-top: 1.8rem; padding-top: 1.2rem; font-size: 0.85rem; color: #9fb0d8; } /* ---------- 14. 响应式（手机/平板） ---------- */ @media (max-width: 900px) { .nav, .navbar .btn--quote { display: none; } .nav-mobile { display: block; } .hero__inner { grid-template-columns: 1fr; } .hero__visual { order: -1; } .grid-3 { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } .contact-cards { grid-template-columns: 1fr; } } @media (max-width: 600px) { .grid-2, .grid-3, .stat-grid { grid-template-columns: 1fr; } .section { padding: 2.5rem 0; } .cta-band__inner { flex-direction: column; align-items: flex-start; } .brand__text small { display: none; } } /* ---------- 15. 下载中心（downloads.html） ---------- */ /* 筛选栏：品牌维度 + 资源类型维度的 chip 按钮组 */ .dl-filter { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem 1.4rem; box-shadow: var(--shadow); margin-bottom: 2rem; } .dl-filter__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .dl-filter__row + .dl-filter__row { margin-top: 0.8rem; } .dl-filter__label { font-weight: 700; color: var(--navy); font-size: 0.85rem; margin-right: 0.4rem; min-width: 5.2em; } .dl-chip { border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--muted); border-radius: 999px; padding: 0.4rem 0.95rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; font-family: var(--font-sans); transition: background 0.15s, color 0.15s, border-color 0.15s; } .dl-chip:hover { border-color: var(--blue); color: var(--blue); } .dl-chip.active { background: var(--blue); border-color: var(--blue); color: #fff; } /* 下载分区标题 */ .dl-section-head { display: flex; align-items: center; gap: 0.8rem; margin: 2.2rem 0 1.1rem; } .dl-section-head__chip { background: var(--red); color: #fff; font-weight: 800; padding: 0.3rem 0.85rem; border-radius: var(--radius-sm); font-size: 0.95rem; } .dl-section-head h2 { margin: 0; color: var(--navy); } /* 品牌子标题 */ .dl-brand-title { display: flex; align-items: baseline; gap: 0.6rem; margin: 1.6rem 0 0.8rem; color: var(--navy); font-size: 1.05rem; font-weight: 800; } .dl-brand-title small { color: var(--muted); font-weight: 600; font-size: 0.82rem; } /* 下载条目网格 */ .dl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; } .dl-item { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--blue); border-radius: var(--radius); padding: 1.2rem 1.3rem; box-shadow: var(--shadow); } .dl-item:hover { box-shadow: var(--shadow-lg); } .dl-item__head { display: flex; align-items: flex-start; gap: 0.7rem; } .dl-item__icon { flex: none; width: 42px; height: 42px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 1.15rem; } .dl-item__title { margin: 0; font-size: 1.02rem; color: var(--navy); line-height: 1.3; } .dl-item__type { display: inline-block; margin-top: 0.25rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; color: var(--blue); background: #ececff; border: 1px solid #d5d5ff; border-radius: 999px; padding: 0.1rem 0.55rem; } .dl-item__desc { margin: 0.7rem 0 0.8rem; font-size: 0.88rem; color: var(--muted); } /* 元信息（大小/版本/日期/适用硬件） */ .dl-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; margin: 0 0 0.9rem; padding: 0.6rem 0.8rem; background: var(--surface-2); border-radius: var(--radius-sm); font-size: 0.78rem; color: var(--muted); } .dl-meta b { color: var(--ink); font-weight: 700; } .dl-item__foot { margin-top: auto; display: flex; align-items: center; gap: 0.8rem; } .dl-btn { padding: 0.55rem 1.15rem; font-size: 0.88rem; } .dl-btn__note { font-size: 0.76rem; color: var(--muted); } /* 筛选后无结果的空态 */ .dl-empty { display: none; text-align: center; padding: 2.5rem 1rem; color: var(--muted); border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface); } .dl-empty.show { display: block; } /* 占位提示条（顶部说明所有文件为占位） */ .dl-placeholder-banner { display: flex; gap: 0.7rem; align-items: flex-start; background: #fff8e6; border: 1px solid #f0dfae; border-left: 4px solid #e6b800; border-radius: var(--radius-sm); padding: 0.85rem 1.1rem; margin-bottom: 1.6rem; font-size: 0.86rem; color: #7a5c00; } @media (max-width: 760px) { .dl-grid { grid-template-columns: 1fr; } .dl-filter__label { min-width: auto; width: 100%; } }