/*!
Theme Name: 皇御贵金属 - 香港黄金投资平台
Theme URI: https://www.huangyu-gold.com
Author: HuangYu Gold
Author URI: https://www.huangyu-gold.com
Description: 皇御贵金属官方网站WordPress主题，香港黄金交易所AA类79号行员，13年安全运营，专注伦敦金/银电子交易、品牌官网、APP下载及内容营销，符合百度SEO规范。
Version: 1.0.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: huangyu-gold
Tags: 贵金属, 黄金交易, 响应式, 百度SEO, 自定义颜色
*/
/* ==================================================================
皇御贵金属 - 主样式表
配色：金色 / 深蓝 / 白色 - 体现贵金属行业高端品质
================================================================== */
/* ---------- 颜色变量 ---------- */
:root{
--hy-gold: #C9A063; /* 主金色 */
--hy-gold-light: #E5C77A; /* 浅金 */
--hy-gold-dark: #A87E3D; /* 深金 */
--hy-dark: #0E1A2B; /* 主深蓝 */
--hy-dark-2: #142a44; /* 次深蓝 */
--hy-text: #333333; /* 主文字 */
--hy-text-2: #666666; /* 次文字 */
--hy-text-3: #999999; /* 辅助文字 */
--hy-line: #E8E8E8; /* 分割线 */
--hy-bg: #F7F8FA; /* 背景灰 */
--hy-white: #FFFFFF;
--hy-red: #E63946; /* 强调红 */
--hy-green: #2A9D8F; /* 上涨绿 */
--hy-shadow: 0 8px 24px rgba(0,0,0,.08);
--hy-radius: 8px;
--hy-radius-lg: 16px;
--hy-trans: .25s ease;
--hy-container: 1200px;
--hy-header-h: 80px;
}
/* ---------- 基础重置 ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ font-size:14px; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
color:var(--hy-text);
line-height:1.7;
background:var(--hy-white);
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; height:auto; vertical-align:middle; border:0; }
a{ color:inherit; text-decoration:none; transition:color var(--hy-trans); }
a:hover{ color:var(--hy-gold); }
ul,ol{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; }
input,textarea,select{ font-family:inherit; outline:none; }
/* ---------- 通用工具 ---------- */
.hy-container{ width:100%; max-width:var(--hy-container); margin:0 auto; padding:0 20px; }
.hy-clearfix::after{ content:""; display:block; clear:both; }
.hy-text-gold{ color:var(--hy-gold); }
.hy-text-center{ text-align:center; }
.hy-mt-20{ margin-top:20px; } .hy-mt-40{ margin-top:40px; }
.hy-hidden{ display:none !important; }
.hy-ellipsis{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hy-line-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hy-line-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
/* ---------- 按钮 ---------- */
.hy-btn{
display:inline-flex; align-items:center; justify-content:center; gap:6px;
padding:12px 28px; font-size:15px; font-weight:500;
border-radius:30px; transition:all var(--hy-trans);
white-space:nowrap; line-height:1;
}
.hy-btn-primary{ background:linear-gradient(135deg,var(--hy-gold) 0%,var(--hy-gold-dark) 100%); color:#fff; box-shadow:0 4px 12px rgba(201,160,99,.35); }
.hy-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(201,160,99,.5); color:#fff; }
.hy-btn-outline{ background:transparent; color:var(--hy-gold); border:1.5px solid var(--hy-gold); }
.hy-btn-outline:hover{ background:var(--hy-gold); color:#fff; }
.hy-btn-dark{ background:var(--hy-dark); color:#fff; }
.hy-btn-dark:hover{ background:var(--hy-dark-2); color:var(--hy-gold); }
.hy-btn-lg{ padding:16px 40px; font-size:16px; }
.hy-btn-sm{ padding:8px 18px; font-size:13px; }
/* ---------- 顶部条 ---------- */
.hy-topbar{
background:var(--hy-dark); color:rgba(255,255,255,.7);
font-size:12px; padding:8px 0;
border-bottom:1px solid rgba(201,160,99,.15);
}
.hy-topbar .hy-container{ display:flex; justify-content:space-between; align-items:center; }
.hy-topbar a{ color:rgba(255,255,255,.85); }
.hy-topbar a:hover{ color:var(--hy-gold-light); }
.hy-topbar-info{ display:flex; gap:20px; align-items:center; }
.hy-topbar-info span{ display:inline-flex; align-items:center; gap:5px; }
.hy-topbar-info .dot{ color:var(--hy-green); }
/* ---------- 头部导航 ---------- */
.hy-header{
position:sticky; top:0; z-index:999;
background:rgba(255,255,255,.97);
backdrop-filter:blur(12px);
box-shadow:0 2px 12px rgba(0,0,0,.04);
height:var(--hy-header-h);
}
.hy-header .hy-container{ display:flex; align-items:center; justify-content:space-between; height:100%; }
.hy-logo{ display:flex; align-items:center; gap:10px; }
.hy-logo-icon{
width:44px; height:44px; border-radius:10px;
background:linear-gradient(135deg,var(--hy-gold) 0%,var(--hy-gold-dark) 100%);
display:flex; align-items:center; justify-content:center;
color:#fff; font-size:22px; font-weight:700;
box-shadow:0 4px 10px rgba(201,160,99,.35);
}
.hy-logo-text{ display:flex; flex-direction:column; line-height:1.2; }
.hy-logo-text .cn{ font-size:18px; font-weight:700; color:var(--hy-dark); }
.hy-logo-text .en{ font-size:11px; color:var(--hy-text-3); letter-spacing:1px; }
.hy-nav{ display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0; }
.hy-nav > li{ list-style:none; display:flex; align-items:center; }
.hy-nav > li > a{
display:block; padding:0 18px; height:var(--hy-header-h); line-height:var(--hy-header-h);
font-size:15px; font-weight:500; color:var(--hy-text);
position:relative; transition:color var(--hy-trans);
}
.hy-nav > li > a::after{
content:""; position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
width:0; height:2px; background:var(--hy-gold); transition:width var(--hy-trans);
}
.hy-nav > li > a:hover, .hy-nav > li.current-menu-item > a{ color:var(--hy-gold); }
.hy-nav > li > a:hover::after, .hy-nav > li.current-menu-item > a::after{ width:30px; }
.hy-header-cta{ display:flex; gap:10px; align-items:center; }
/* 移动端下拉菜单 - PC 默认隐藏，防止导航异常 */
.hy-nav-mobile{ display:none; list-style:none; margin:0; padding:0; }
.hy-nav-mobile li{ list-style:none; }
/* 移动端菜单按钮 */
.hy-menu-toggle{ display:none; width:36px; height:36px; flex-direction:column; justify-content:center; gap:5px; }
.hy-menu-toggle span{ display:block; width:24px; height:2px; background:var(--hy-dark); border-radius:2px; transition:.3s; }
.hy-menu-toggle.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hy-menu-toggle.active span:nth-child(2){ opacity:0; }
.hy-menu-toggle.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
/* ==================================================================
首页模块
================================================================== */
/* ---------- 1. 横幅主视觉 ---------- */
.hy-banner{
position:relative; height:600px;
background:linear-gradient(135deg,var(--hy-dark) 0%,var(--hy-dark-2) 100%);
overflow:hidden;
}
.hy-banner::before{
content:""; position:absolute; inset:0;
background:radial-gradient(circle at 30% 50%,rgba(201,160,99,.25) 0%,transparent 60%);
}
.hy-banner::after{
content:""; position:absolute; inset:0;
background:url("data:image/svg+xml;utf8,");
opacity:.5;
}
.hy-banner-inner{
position:relative; z-index:2; height:100%;
display:flex; align-items:center;
}
.hy-banner-content{ color:#fff; max-width:600px; }
.hy-banner-tag{
display:inline-flex; align-items:center; gap:8px;
padding:6px 16px; background:rgba(201,160,99,.15); border:1px solid rgba(201,160,99,.3);
border-radius:30px; color:var(--hy-gold-light); font-size:13px; margin-bottom:24px;
}
.hy-banner-tag::before{ content:""; width:6px; height:6px; background:var(--hy-gold-light); border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
.hy-banner h1{ font-size:46px; font-weight:800; line-height:1.2; margin-bottom:20px; }
.hy-banner h1 .gold{ color:var(--hy-gold-light); }
.hy-banner-sub{ font-size:18px; color:rgba(255,255,255,.85); margin-bottom:36px; line-height:1.6; }
.hy-banner-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hy-banner-quote{
position:absolute; right:5%; top:50%; transform:translateY(-50%);
width:380px; background:rgba(255,255,255,.06);
backdrop-filter:blur(20px); border:1px solid rgba(201,160,99,.25);
border-radius:var(--hy-radius-lg); padding:30px;
z-index:2;
}
.hy-quote-title{ color:var(--hy-gold-light); font-size:14px; margin-bottom:18px; display:flex; align-items:center; gap:8px; }
.hy-quote-title::before{ content:""; width:3px; height:14px; background:var(--hy-gold); border-radius:2px; }
/* Banner 信任数据卡 */
.hy-stat-item{ display:flex; flex-direction:column; gap:4px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.hy-stat-item:last-child{ border-bottom:0; }
.hy-stat-num{ color:var(--hy-gold-light); font-size:26px; font-weight:700; line-height:1.2; letter-spacing:.5px; }
.hy-stat-num .unit{ font-size:14px; font-weight:600; margin-left:4px; color:var(--hy-gold); }
.hy-stat-label{ color:rgba(255,255,255,.78); font-size:13px; line-height:1.5; }
/* ---------- 2. 6大优势 ---------- */
.hy-section{ padding:80px 0; }
.hy-section-dark{ background:var(--hy-dark); color:#fff; }
.hy-section-gray{ background:var(--hy-bg); }
.hy-section-head{ text-align:center; margin-bottom:50px; }
.hy-section-eyebrow{ display:inline-block; color:var(--hy-gold); font-size:13px; font-weight:600; letter-spacing:2px; margin-bottom:12px; text-transform:uppercase; }
.hy-section-title{ font-size:36px; font-weight:700; color:var(--hy-dark); margin-bottom:14px; }
.hy-section-dark .hy-section-title{ color:#fff; }
.hy-section-desc{ color:var(--hy-text-2); font-size:16px; max-width:680px; margin:0 auto; }
.hy-section-dark .hy-section-desc{ color:rgba(255,255,255,.7); }
.hy-advantages{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.hy-advantage-card{
background:#fff; border-radius:var(--hy-radius-lg);
padding:36px 28px; transition:all var(--hy-trans);
border:1px solid var(--hy-line); position:relative; overflow:hidden;
}
.hy-advantage-card::before{
content:""; position:absolute; top:0; left:0; right:0; height:3px;
background:linear-gradient(90deg,var(--hy-gold) 0%,var(--hy-gold-light) 100%);
transform:scaleX(0); transform-origin:left; transition:transform .4s;
}
.hy-advantage-card:hover{ transform:translateY(-6px); box-shadow:var(--hy-shadow); border-color:transparent; }
.hy-advantage-card:hover::before{ transform:scaleX(1); }
.hy-advantage-icon{
width:60px; height:60px; border-radius:14px;
background:linear-gradient(135deg,rgba(201,160,99,.15) 0%,rgba(201,160,99,.05) 100%);
color:var(--hy-gold); font-size:28px;
display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.hy-advantage-card h3{ font-size:18px; font-weight:700; color:var(--hy-dark); margin-bottom:10px; }
.hy-advantage-card p{ color:var(--hy-text-2); font-size:14px; line-height:1.7; }
/* ---------- 3. 资质荣誉 ---------- */
.hy-quals{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.hy-qual-card{
background:rgba(255,255,255,.04); backdrop-filter:blur(8px);
border:1px solid rgba(201,160,99,.2); border-radius:var(--hy-radius);
padding:30px 20px; text-align:center; transition:all var(--hy-trans);
}
.hy-qual-card:hover{ background:rgba(201,160,99,.08); transform:translateY(-4px); border-color:var(--hy-gold); }
.hy-qual-medal{
width:70px; height:70px; margin:0 auto 16px;
background:radial-gradient(circle,var(--hy-gold-light) 0%,var(--hy-gold) 50%,var(--hy-gold-dark) 100%);
border-radius:50%; display:flex; align-items:center; justify-content:center;
color:#fff; font-size:28px;
box-shadow:0 4px 16px rgba(201,160,99,.4); position:relative;
}
.hy-qual-medal::after{
content:""; position:absolute; inset:5px; border:1.5px dashed rgba(255,255,255,.4); border-radius:50%;
}
/* 资质证书图片（参考站点） */
.hy-qual-img{
width:100%; height:130px; margin:0 auto 14px; display:block;
object-fit:contain; background:#fff; border-radius:10px; padding:8px;
box-sizing:border-box;
}
.hy-qual-card:hover .hy-qual-img{ transform:scale(1.03); }
/* 关于页证书图片卡 */
.hy-about-img-card{ background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 8px 30px rgba(14,26,43,.12); padding:22px; text-align:center; }
.hy-about-img-card img{ width:100%; height:auto; object-fit:contain; display:block; }
.hy-about-img-caption{ margin-top:14px; color:#A87E3D; font-size:15px; font-weight:600; }
.hy-qual-card h4{ color:#fff; font-size:15px; font-weight:600; margin-bottom:6px; }
.hy-qual-card p{ color:rgba(255,255,255,.6); font-size:12px; }
/* ---------- 4. 交易产品 ---------- */
.hy-products{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px; }
.hy-product-card{
background:#fff; border-radius:var(--hy-radius-lg);
overflow:hidden; box-shadow:var(--hy-shadow);
display:flex; transition:all var(--hy-trans);
}
.hy-product-card:hover{ transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,.12); }
.hy-product-icon{
width:120px; flex-shrink:0;
background:linear-gradient(135deg,var(--hy-gold) 0%,var(--hy-gold-dark) 100%);
color:#fff; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:6px;
position:relative;
}
.hy-product-icon::after{
content:""; position:absolute; inset:8px;
border:1.5px solid rgba(255,255,255,.3); border-radius:6px;
}
.hy-product-icon .symbol{ font-size:24px; font-weight:700; }
.hy-product-icon .name{ font-size:13px; }
.hy-product-info{ padding:24px 26px; flex:1; }
.hy-product-info h3{ font-size:20px; font-weight:700; color:var(--hy-dark); margin-bottom:10px; }
.hy-product-info p{ color:var(--hy-text-2); font-size:13px; line-height:1.7; margin-bottom:14px; }
.hy-product-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.hy-product-tag{
padding:3px 10px; font-size:12px;
background:rgba(201,160,99,.1); color:var(--hy-gold-dark);
border-radius:4px;
}
.hy-product-info .hy-btn{ font-size:13px; padding:8px 20px; }
/* ---------- 5. APP下载区块 ---------- */
.hy-app-section{
background:linear-gradient(135deg,var(--hy-dark) 0%,var(--hy-dark-2) 100%);
border-radius:var(--hy-radius-lg); padding:60px 50px;
display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;
position:relative; overflow:hidden;
}
.hy-app-section::before{
content:""; position:absolute; top:-50%; right:-10%; width:600px; height:600px;
background:radial-gradient(circle,rgba(201,160,99,.2) 0%,transparent 70%);
border-radius:50%;
}
.hy-app-info{ color:#fff; position:relative; z-index:2; }
.hy-app-info h2{ font-size:34px; font-weight:700; margin-bottom:14px; }
.hy-app-info h2 .gold{ color:var(--hy-gold-light); }
.hy-app-info p{ color:rgba(255,255,255,.8); font-size:15px; margin-bottom:28px; line-height:1.7; }
.hy-app-features{ list-style:none; margin-bottom:30px; }
.hy-app-features li{ padding:8px 0; color:rgba(255,255,255,.85); display:flex; align-items:center; gap:10px; }
.hy-app-features li::before{
content:"✓"; width:22px; height:22px; background:var(--hy-gold);
color:#fff; border-radius:50%; display:inline-flex;
align-items:center; justify-content:center; font-size:12px; flex-shrink:0;
}
.hy-app-downloads{ display:flex; gap:14px; flex-wrap:wrap; }
.hy-app-download{
display:flex; align-items:center; gap:10px;
padding:12px 22px; background:rgba(255,255,255,.08);
border:1px solid rgba(201,160,99,.3); border-radius:30px;
color:#fff; transition:all var(--hy-trans);
}
.hy-app-download:hover{ background:var(--hy-gold); color:#fff; border-color:var(--hy-gold); }
.hy-app-download .icon{ font-size:22px; }
.hy-app-download .text{ display:flex; flex-direction:column; line-height:1.2; }
.hy-app-download .text .small{ font-size:11px; opacity:.85; }
.hy-app-download .text .big{ font-size:15px; font-weight:600; }
.hy-app-mockup{ text-align:center; position:relative; z-index:2; }
.hy-app-mockup img{ max-width:280px; filter:drop-shadow(0 20px 40px rgba(0,0,0,.5)); }
/* ---------- 6. FAQ 常见问答 ---------- */
.hy-faq-list{ max-width:900px; margin:0 auto; }
.hy-faq-item{
background:#fff; border:1px solid var(--hy-line);
border-radius:var(--hy-radius); margin-bottom:14px;
overflow:hidden; transition:all var(--hy-trans);
}
.hy-faq-item:hover{ border-color:var(--hy-gold); }
.hy-faq-q{
display:flex; justify-content:space-between; align-items:center; gap:16px;
padding:20px 26px; cursor:pointer;
font-size:16px; font-weight:600; color:var(--hy-dark);
user-select:none;
}
.hy-faq-q:hover{ color:var(--hy-gold); }
.hy-faq-icon{
width:30px; height:30px; flex-shrink:0; border-radius:50%;
background:rgba(201,160,99,.1); color:var(--hy-gold);
display:flex; align-items:center; justify-content:center;
font-size:18px; font-weight:300; transition:transform var(--hy-trans);
}
.hy-faq-item.active .hy-faq-icon{ background:var(--hy-gold); color:#fff; transform:rotate(45deg); }
.hy-faq-a{
max-height:0; overflow:hidden; transition:max-height .35s ease;
color:var(--hy-text-2); font-size:14.5px; line-height:1.85;
}
.hy-faq-a-inner{ padding:0 26px 22px 26px; }
.hy-faq-item.active .hy-faq-a{ max-height:500px; }
/* ---------- 7. 品牌承诺 ---------- */
.hy-promise-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.hy-promise-card{
text-align:center; padding:30px 20px;
background:rgba(255,255,255,.04); border-radius:var(--hy-radius);
border:1px solid rgba(201,160,99,.15);
transition:all var(--hy-trans);
}
.hy-promise-card:hover{ background:rgba(201,160,99,.08); border-color:var(--hy-gold); transform:translateY(-4px); }
.hy-promise-num{
font-size:42px; font-weight:800; color:var(--hy-gold-light);
line-height:1; margin-bottom:8px; font-family:"DIN",Georgia,serif;
}
.hy-promise-card h4{ color:#fff; font-size:16px; font-weight:600; margin-bottom:6px; }
.hy-promise-card p{ color:rgba(255,255,255,.65); font-size:13px; }
/* ==================================================================
页面内页样式
================================================================== */
/* 内页Banner */
.hy-inner-banner{
background:linear-gradient(135deg,var(--hy-dark) 0%,var(--hy-dark-2) 100%);
padding:80px 0 70px; text-align:center; color:#fff;
position:relative; overflow:hidden;
}
.hy-inner-banner::before{
content:""; position:absolute; inset:0;
background:radial-gradient(circle at 50% 100%,rgba(201,160,99,.2) 0%,transparent 60%);
}
.hy-inner-banner h1{ font-size:36px; font-weight:700; margin-bottom:10px; position:relative; }
.hy-inner-banner .breadcrumb{ color:rgba(255,255,255,.7); font-size:14px; position:relative; }
.hy-inner-banner .breadcrumb a{ color:rgba(255,255,255,.7); }
.hy-inner-banner .breadcrumb a:hover{ color:var(--hy-gold-light); }
.hy-inner-banner .breadcrumb .sep{ margin:0 8px; opacity:.5; }
/* 关于我们 */
.hy-about-intro{ display:grid; grid-template-columns:1fr; gap:0; align-items:center; max-width:860px; }
.hy-about-text h2{ font-size:30px; font-weight:700; color:var(--hy-dark); margin-bottom:18px; }
.hy-about-text h2 .gold{ color:var(--hy-gold); }
.hy-about-text p{ color:var(--hy-text-2); font-size:15px; line-height:1.9; margin-bottom:14px; }
.hy-section-dark .hy-about-text h2{ color:#fff; }
.hy-section-dark .hy-about-text p{ color:rgba(255,255,255,.75); }
.hy-about-img{ border-radius:var(--hy-radius-lg); overflow:hidden; box-shadow:var(--hy-shadow); }
.hy-about-img img{ width:100%; }
.hy-value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.hy-value-card{
background:#fff; padding:30px 24px; border-radius:var(--hy-radius);
border:1px solid var(--hy-line); transition:all var(--hy-trans);
}
.hy-value-card:hover{ box-shadow:var(--hy-shadow); transform:translateY(-4px); }
.hy-value-num{
width:48px; height:48px; border-radius:12px;
background:linear-gradient(135deg,var(--hy-gold) 0%,var(--hy-gold-dark) 100%);
color:#fff; display:flex; align-items:center; justify-content:center;
font-size:22px; font-weight:700; margin-bottom:16px;
}
.hy-value-card h4{ font-size:17px; font-weight:700; color:var(--hy-dark); margin-bottom:8px; }
.hy-value-card p{ color:var(--hy-text-2); font-size:14px; }
.hy-timeline{ position:relative; max-width:800px; margin:0 auto; padding-left:40px; }
.hy-timeline::before{ content:""; position:absolute; left:14px; top:0; bottom:0; width:2px; background:var(--hy-line); }
.hy-timeline-item{ position:relative; padding-bottom:30px; }
.hy-timeline-item::before{
content:""; position:absolute; left:-32px; top:6px;
width:12px; height:12px; border-radius:50%;
background:var(--hy-gold); box-shadow:0 0 0 4px rgba(201,160,99,.2);
}
.hy-timeline-year{ color:var(--hy-gold); font-weight:700; font-size:18px; margin-bottom:4px; }
.hy-timeline-item h4{ color:var(--hy-dark); font-size:16px; font-weight:600; margin-bottom:6px; }
.hy-timeline-item p{ color:var(--hy-text-2); font-size:14px; }
/* APP下载页 */
.hy-app-hero{
text-align:center; padding:60px 40px;
background:linear-gradient(135deg,var(--hy-gold) 0%,var(--hy-gold-dark) 100%);
border-radius:var(--hy-radius-lg); color:#fff; position:relative; overflow:hidden;
}
.hy-app-hero::before{
content:""; position:absolute; inset:0;
background:url("data:image/svg+xml;utf8,");
}
.hy-app-hero > *{ position:relative; z-index:2; }
.hy-app-hero h2{ font-size:32px; font-weight:700; margin-bottom:10px; }
.hy-app-hero p{ font-size:15px; opacity:.9; margin-bottom:30px; }
.hy-app-hero-btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hy-app-hero-btn{
display:flex; align-items:center; gap:12px;
padding:14px 28px; background:rgba(0,0,0,.25); backdrop-filter:blur(8px);
border-radius:30px; color:#fff; transition:all var(--hy-trans);
}
.hy-app-hero-btn:hover{ background:rgba(0,0,0,.4); color:#fff; transform:translateY(-2px); }
.hy-app-hero-btn .icon{ font-size:26px; }
.hy-app-hero-btn .text{ display:flex; flex-direction:column; line-height:1.2; text-align:left; }
.hy-app-hero-btn .text .small{ font-size:11px; opacity:.85; }
.hy-app-hero-btn .text .big{ font-size:15px; font-weight:600; }
.hy-app-features-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.hy-app-feature{
background:#fff; padding:30px 20px; border-radius:var(--hy-radius);
text-align:center; border:1px solid var(--hy-line);
transition:all var(--hy-trans);
}
.hy-app-feature:hover{ transform:translateY(-4px); box-shadow:var(--hy-shadow); border-color:var(--hy-gold); }
.hy-app-feature-icon{
width:60px; height:60px; margin:0 auto 14px;
background:linear-gradient(135deg,rgba(201,160,99,.15) 0%,rgba(201,160,99,.05) 100%);
border-radius:14px; display:flex; align-items:center; justify-content:center;
font-size:26px; color:var(--hy-gold);
}
.hy-app-feature h4{ font-size:15px; font-weight:600; color:var(--hy-dark); margin-bottom:6px; }
.hy-app-feature p{ color:var(--hy-text-2); font-size:13px; }
.hy-app-qr{ text-align:center; padding:30px; background:#fff; border-radius:var(--hy-radius); border:1px solid var(--hy-line); }
.hy-app-qr img{ width:160px; height:160px; }
.hy-app-qr p{ font-size:13px; color:var(--hy-text-2); margin-top:10px; }
/* ==================================================================
文章列表 & 文章详情
================================================================== */
.hy-content-wrap{ display:grid; grid-template-columns:1fr 300px; gap:40px; padding:60px 0; }
.hy-article-list{ display:flex; flex-direction:column; gap:20px; }
.hy-article-card{
background:#fff; border-radius:var(--hy-radius); overflow:hidden;
border:1px solid var(--hy-line); display:flex; transition:all var(--hy-trans);
}
.hy-article-card:hover{ box-shadow:var(--hy-shadow); transform:translateY(-3px); border-color:transparent; }
.hy-article-thumb{ width:240px; flex-shrink:0; aspect-ratio:4/3; overflow:hidden; background:var(--hy-bg); }
.hy-article-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.hy-article-card:hover .hy-article-thumb img{ transform:scale(1.05); }
.hy-article-body{ padding:24px 28px; flex:1; }
.hy-article-meta{ display:flex; gap:14px; font-size:12px; color:var(--hy-text-3); margin-bottom:10px; }
.hy-article-meta a{ color:var(--hy-gold); }
.hy-article-card h3{ font-size:19px; font-weight:700; color:var(--hy-dark); margin-bottom:10px; line-height:1.5; }
.hy-article-card h3 a:hover{ color:var(--hy-gold); }
.hy-article-card p{ color:var(--hy-text-2); font-size:14px; line-height:1.7; margin-bottom:14px; }
.hy-article-card .hy-btn{ font-size:12px; padding:6px 16px; }
/* ---------- 首页 最新文章 ---------- */
.hy-posts-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.hy-post-card{
background:#fff; border-radius:var(--hy-radius); overflow:hidden;
border:1px solid var(--hy-line); display:flex; flex-direction:column;
transition:all var(--hy-trans);
}
.hy-post-card:hover{ box-shadow:var(--hy-shadow); transform:translateY(-4px); border-color:transparent; }
.hy-post-thumb{ display:block; aspect-ratio:16/9; overflow:hidden; background:var(--hy-bg); }
.hy-post-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.hy-post-card:hover .hy-post-thumb img{ transform:scale(1.05); }
.hy-post-body{ padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; align-items:flex-start; }
.hy-post-body h3{
font-size:17px; font-weight:700; color:var(--hy-dark); line-height:1.55;
margin-bottom:10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hy-post-body h3 a:hover{ color:var(--hy-gold); }
.hy-post-body p{ color:var(--hy-text-2); font-size:13.5px; line-height:1.7; margin-bottom:16px; }
.hy-post-body .hy-btn{ margin-top:auto; font-size:12px; padding:6px 16px; }
.hy-posts-more{ text-align:center; margin-top:36px; }
.hy-posts-empty{
grid-column:1/-1; text-align:center; padding:60px 20px;
color:var(--hy-text-3); background:#fff; border:1px dashed var(--hy-line); border-radius:var(--hy-radius);
}
.hy-sidebar{ display:flex; flex-direction:column; gap:24px; }
.hy-widget{ background:#fff; border:1px solid var(--hy-line); border-radius:var(--hy-radius); padding:24px; }
.hy-widget-title{ font-size:16px; font-weight:700; color:var(--hy-dark); margin-bottom:18px; padding-bottom:12px; border-bottom:2px solid var(--hy-gold); position:relative; }
.hy-widget ul li{ padding:10px 0; border-bottom:1px dashed var(--hy-line); font-size:14px; }
.hy-widget ul li:last-child{ border-bottom:0; }
.hy-widget ul li a{ display:flex; gap:10px; align-items:flex-start; }
.hy-widget ul li a:hover{ color:var(--hy-gold); }
.hy-widget ul li a::before{
content:""; width:5px; height:5px; background:var(--hy-gold); border-radius:50%;
margin-top:8px; flex-shrink:0;
}
.hy-tagcloud{ display:flex; flex-wrap:wrap; gap:8px; }
.hy-tagcloud a{
padding:5px 12px; background:var(--hy-bg); border-radius:4px;
font-size:13px; color:var(--hy-text-2); transition:all var(--hy-trans);
}
.hy-tagcloud a:hover{ background:var(--hy-gold); color:#fff; }
/* 文章详情 */
.hy-article-single{ background:#fff; border-radius:var(--hy-radius); padding:40px 50px; border:1px solid var(--hy-line); }
.hy-article-single h1{ font-size:30px; font-weight:700; color:var(--hy-dark); margin-bottom:18px; line-height:1.4; }
.hy-article-single .hy-article-meta{ font-size:13px; padding-bottom:18px; border-bottom:1px solid var(--hy-line); margin-bottom:30px; }
.hy-article-content{ font-size:15.5px; line-height:1.95; color:var(--hy-text); }
.hy-article-content h2, .hy-article-content h3, .hy-article-content h4{ color:var(--hy-dark); font-weight:700; margin:30px 0 14px; }
.hy-article-content h2{ font-size:24px; }
.hy-article-content h3{ font-size:20px; }
.hy-article-content h4{ font-size:17px; }
.hy-article-content p{ margin-bottom:14px; }
.hy-article-content ul, .hy-article-content ol{ margin:14px 0 14px 28px; }
.hy-article-content ul li{ list-style:disc; margin-bottom:6px; }
.hy-article-content ol li{ list-style:decimal; margin-bottom:6px; }
.hy-article-content a{ color:var(--hy-gold); text-decoration:underline; text-underline-offset:3px; }
.hy-article-content img{ border-radius:var(--hy-radius); margin:20px 0; }
.hy-article-content blockquote{
border-left:4px solid var(--hy-gold);
padding:14px 20px; background:var(--hy-bg);
margin:20px 0; color:var(--hy-text-2); border-radius:0 var(--hy-radius) var(--hy-radius) 0;
}
/* 分页 */
.hy-pagination{ display:flex; gap:6px; justify-content:center; margin-top:30px; }
.hy-pagination a, .hy-pagination span{
display:inline-flex; align-items:center; justify-content:center;
min-width:38px; height:38px; padding:0 12px; border-radius:6px;
background:#fff; border:1px solid var(--hy-line); color:var(--hy-text);
font-size:14px; transition:all var(--hy-trans);
}
.hy-pagination a:hover, .hy-pagination .current{ background:var(--hy-gold); color:#fff; border-color:var(--hy-gold); }
/* ==================================================================
底部
================================================================== */
.hy-footer{
background:#0a1424; color:rgba(255,255,255,.7);
padding:60px 0 0; margin-bottom:60px;
}
.hy-footer .hy-container{ position:relative; }
.hy-footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:50px; margin-bottom:50px; }
.hy-footer-brand .hy-logo-text .cn, .hy-footer-brand .hy-logo-text .en{ color:#fff; }
.hy-footer-brand p{ font-size:13.5px; line-height:1.8; margin-top:18px; color:rgba(255,255,255,.6); }
.hy-footer-contact{ margin-top:18px; }
.hy-footer-contact-item{ display:flex; align-items:flex-start; gap:8px; font-size:13px; margin-bottom:8px; color:rgba(255,255,255,.7); }
.hy-footer h5{ color:#fff; font-size:15px; font-weight:600; margin-bottom:18px; position:relative; padding-left:12px; }
.hy-footer h5::before{ content:""; position:absolute; left:0; top:4px; width:3px; height:14px; background:var(--hy-gold); border-radius:2px; }
.hy-footer ul li{ padding:6px 0; font-size:13.5px; }
.hy-footer ul li a{ color:rgba(255,255,255,.65); }
.hy-footer ul li a:hover{ color:var(--hy-gold-light); padding-left:4px; }
.hy-footer-bottom{
border-top:1px solid rgba(255,255,255,.08);
padding:20px 0; text-align:center; font-size:12.5px;
color:rgba(255,255,255,.5);
}
.hy-footer-bottom a{ color:rgba(255,255,255,.5); }
.hy-footer-bottom a:hover{ color:var(--hy-gold-light); }
/* ==================================================================
浮窗 - PC端 底部固定 + 右侧浮窗 + 移动端底部
================================================================== */
/* PC端 底部固定浮窗 */
.hy-floatbar-pc{
display:none;
position:fixed; left:0; right:0; bottom:0; z-index:998;
background:linear-gradient(135deg,rgba(14,26,43,.96) 0%,rgba(20,42,68,.96) 100%);
backdrop-filter:blur(12px);
border-top:2px solid var(--hy-gold);
box-shadow:0 -8px 30px rgba(0,0,0,.25);
}
.hy-floatbar-pc-inner{
max-width:var(--hy-container); margin:0 auto; padding:12px 20px;
display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.hy-floatbar-pc-info{ color:#fff; display:flex; align-items:center; gap:14px; }
.hy-floatbar-pc-info .pulse-dot{
width:10px; height:10px; background:var(--hy-green); border-radius:50%;
position:relative; box-shadow:0 0 0 0 rgba(42,157,143,.7);
animation:pulse-ring 1.5s infinite;
}
@keyframes pulse-ring{
0%{ box-shadow:0 0 0 0 rgba(42,157,143,.7); }
70%{ box-shadow:0 0 0 12px rgba(42,157,143,0); }
100%{ box-shadow:0 0 0 0 rgba(42,157,143,0); }
}
.hy-floatbar-pc-info .text-main{ font-size:15px; font-weight:600; }
.hy-floatbar-pc-info .text-sub{ font-size:12px; color:rgba(255,255,255,.6); margin-top:2px; }
.hy-floatbar-pc-actions{ display:flex; gap:12px; }
.hy-floatbar-pc-btn{
display:inline-flex; align-items:center; gap:8px;
padding:12px 24px; border-radius:30px;
font-size:14px; font-weight:600; transition:all var(--hy-trans);
}
.hy-floatbar-pc-btn.primary{ background:linear-gradient(135deg,var(--hy-gold) 0%,var(--hy-gold-dark) 100%); color:#fff; box-shadow:0 4px 12px rgba(201,160,99,.4); }
.hy-floatbar-pc-btn.primary:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(201,160,99,.6); color:#fff; }
.hy-floatbar-pc-btn.outline{ background:transparent; color:var(--hy-gold-light); border:1.5px solid var(--hy-gold); }
.hy-floatbar-pc-btn.outline:hover{ background:var(--hy-gold); color:#fff; }
.hy-floatbar-close{
position:absolute; top:-26px; right:20px;
width:24px; height:24px; border-radius:50%;
background:var(--hy-dark); color:rgba(255,255,255,.7);
display:flex; align-items:center; justify-content:center;
font-size:14px; cursor:pointer; transition:.3s;
}
.hy-floatbar-close:hover{ background:var(--hy-gold); color:#fff; }
/* PC端 右侧浮窗 */
.hy-sidebar-float{
display:none;
position:fixed; right:20px; top:50%; transform:translateY(-50%);
z-index:997; display:flex; flex-direction:column; gap:0;
background:rgba(14,26,43,.92); backdrop-filter:blur(12px);
border:1px solid rgba(201,160,99,.3); border-radius:14px;
overflow:hidden; box-shadow:0 8px 30px rgba(0,0,0,.2);
}
.hy-side-item{
display:flex; flex-direction:column; align-items:center; gap:6px;
padding:16px 12px; color:rgba(255,255,255,.85);
font-size:13px; cursor:pointer; transition:all var(--hy-trans);
border-bottom:1px solid rgba(255,255,255,.06);
min-width:132px;
}
.hy-side-item:last-child{ border-bottom:0; }
.hy-side-item:hover{ background:var(--hy-gold); color:#fff; }
.hy-side-item .icon{ font-size:24px; }
.hy-side-item .icon.qr{
width:104px; height:104px; padding:5px; background:#fff;
border-radius:10px; overflow:hidden; box-shadow:0 0 0 1.5px var(--hy-gold);
}
.hy-side-item .icon.qr img{ width:100%; height:100%; object-fit:contain; display:block; }
.hy-side-item:hover .icon.qr{ box-shadow:0 0 0 1.5px #fff; }
.hy-side-item .label{ font-weight:500; }
.hy-side-item .badge{
position:absolute; top:6px; right:6px;
width:18px; height:18px; background:var(--hy-red); color:#fff;
border-radius:50%; font-size:10px; display:flex; align-items:center; justify-content:center;
}
.hy-side-item{ position:relative; }
/* 移动端 底部固定条 */
.hy-floatbar-mobile{
display:none;
position:fixed; left:0; right:0; bottom:0; z-index:998;
width:100%; max-width:100vw;
background:var(--hy-dark);
border-top:1px solid rgba(201,160,99,.3);
box-shadow:0 -4px 20px rgba(0,0,0,.2);
padding:10px 12px; padding-bottom:calc(10px + env(safe-area-inset-bottom));
box-sizing:border-box; overflow:hidden;
}
.hy-floatbar-mobile-inner{ display:block; width:100%; }
.hy-floatbar-mobile-btn{
display:block; width:100%; box-sizing:border-box;
padding:12px; border-radius:24px; font-size:14px; font-weight:600;
text-align:center; line-height:1.4;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
transition:all var(--hy-trans);
}
.hy-floatbar-mobile-btn.app{ background:linear-gradient(135deg,var(--hy-gold) 0%,var(--hy-gold-dark) 100%); color:#fff; box-shadow:0 4px 12px rgba(201,160,99,.4); }
.hy-floatbar-mobile-btn.app:hover, .hy-floatbar-mobile-btn.app:active{ color:#fff; transform:scale(.98); }
.hy-floatbar-mobile-btn .icon{ font-size:18px; }
/* 移动端 头部 APP 下载条 */
.hy-app-topbar{
display:none;
position:relative;
background:linear-gradient(135deg,#FDF6E9 0%,#F7E3C2 100%);
border-bottom:1px solid rgba(201,160,99,.35);
align-items:center; gap:10px;
padding:8px 44px;
color:var(--hy-dark);
}
.hy-app-topbar-icon{
width:40px; height:40px; flex:none;
border-radius:9px;
background:linear-gradient(135deg,#0E1A2B 0%,#24466E 100%);
color:var(--hy-gold-light);
display:flex; align-items:center; justify-content:center;
font-weight:700; font-size:13px;
box-shadow:0 3px 8px rgba(14,26,43,.25);
}
.hy-app-topbar-text{ line-height:1.3; min-width:0; }
.hy-app-topbar-text .t1{ font-size:14px; font-weight:700; color:#5A3D14; }
.hy-app-topbar-text .t2{ font-size:11px; color:#8a7a5c; margin-top:1px; }
.hy-app-topbar-btn{
margin-left:auto; flex:none;
background:linear-gradient(135deg,var(--hy-gold) 0%,var(--hy-gold-dark) 100%);
color:#fff; font-size:13px; font-weight:600;
padding:8px 14px; border-radius:20px; white-space:nowrap;
box-shadow:0 3px 10px rgba(201,160,99,.35);
}
.hy-app-topbar-btn:hover{ color:#fff; transform:translateY(-1px); }
.hy-app-topbar-close{
position:absolute; left:8px; top:50%; transform:translateY(-50%);
width:24px; height:24px; line-height:22px; text-align:center;
color:#8a7a5c; font-size:20px; cursor:pointer; user-select:none;
}
.hy-app-topbar-close:hover{ color:var(--hy-dark); }
/* ==================================================================
响应式
================================================================== */
@media (min-width: 1025px){
.hy-floatbar-pc{ display:block; }
.hy-sidebar-float{ display:flex; }
.hy-footer{ margin-bottom:74px; }
.hy-floatbar-mobile{ display:none !important; }
.hy-app-topbar{ display:none !important; }
.hy-nav-mobile{ display:none !important; }
body{ padding-bottom:0; padding-top:0 !important; }
}
@media (max-width: 1024px){
html{ overflow-x:hidden; max-width:100%; }
body{ overflow-x:hidden; max-width:100%; width:100%; }
.hy-container{ padding:0 16px; }
.hy-nav{ display:none; }
.hy-menu-toggle{ display:flex; }
.hy-nav-mobile{
display:block;
position:fixed; top:0; left:0; right:0; bottom:0;
background:#fff;
padding:calc(var(--hy-header-h) + var(--hy-top-shift, 0px) + 16px) 20px 20px;
transform:translateY(-100%); transition:transform .3s; overflow-y:auto;
z-index:998;
}
.hy-nav-mobile.active{ transform:translateY(0); }
.hy-nav-mobile > li > a{
display:block; padding:14px 0; font-size:15px;
border-bottom:1px solid var(--hy-line); color:var(--hy-dark);
}
.hy-banner h1{ font-size:30px; }
.hy-banner-sub{ font-size:15px; }
.hy-banner{ height:auto; padding:120px 0 90px; }
.hy-banner-quote{ display:none; }
.hy-section{ padding:50px 0; }
.hy-section-title{ font-size:26px; }
.hy-advantages, .hy-products, .hy-app-features-grid, .hy-promise-grid{ grid-template-columns:repeat(2,1fr); }
.hy-quals{ grid-template-columns:repeat(2,1fr); }
.hy-app-section{ grid-template-columns:1fr; padding:36px 24px; gap:30px; text-align:center; }
.hy-app-info h2{ font-size:24px; }
.hy-app-downloads{ justify-content:center; }
.hy-content-wrap{ grid-template-columns:1fr; }
.hy-inner-banner h1{ font-size:26px; }
.hy-article-single{ padding:24px 20px; }
.hy-article-single h1{ font-size:22px; }
.hy-article-card{ flex-direction:column; }
.hy-article-thumb{ width:100%; aspect-ratio:16/9; }
.hy-about-intro{ grid-template-columns:1fr; gap:30px; }
.hy-footer{ padding:40px 0 0; }
.hy-footer-grid{ grid-template-columns:1fr 1fr; gap:30px; }
.hy-floatbar-mobile{ display:block !important; visibility:visible !important; opacity:1 !important; transform:none !important; }
.hy-app-topbar{
display:flex; position:relative;
z-index:1001; height:56px; box-sizing:border-box;
padding:0 12px 0 40px;
}
.hy-app-topbar-text{ flex:1 1 auto; overflow:hidden; }
.hy-app-topbar-text .t1, .hy-app-topbar-text .t2{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hy-header{ top:0; }
body{ padding-bottom:64px; overflow-x:hidden; }
body.hy-topbar-closed .hy-header{ top:0; }
body.hy-topbar-closed .hy-app-topbar{ display:none; }
}
@media (max-width: 640px){
.hy-topbar-info{ display:none; }
.hy-advantages, .hy-products, .hy-app-features-grid, .hy-promise-grid, .hy-quals, .hy-value-grid{ grid-template-columns:1fr; }
.hy-product-card{ flex-direction:column; }
.hy-product-icon{ width:100%; height:80px; flex-direction:row; }
.hy-banner h1{ font-size:24px; }
.hy-banner-actions{ gap:10px; }
.hy-banner-actions .hy-btn{ flex:1; }
.hy-section-title{ font-size:22px; }
.hy-faq-q{ padding:16px 18px; font-size:15px; }
.hy-faq-a-inner{ padding:0 18px 18px; }
.hy-app-hero{ padding:40px 20px; }
.hy-app-hero h2{ font-size:22px; }
.hy-app-hero-btns{ flex-direction:column; }
.hy-app-hero-btn{ width:100%; justify-content:center; }
.hy-footer-grid{ grid-template-columns:1fr; gap:30px; }
.hy-floatbar-mobile-btn{ font-size:13px; padding:10px 8px; }
.hy-floatbar-mobile-btn .icon{ font-size:16px; }
.hy-header-cta .hy-btn{ display:none; }
}
/* 滚动渐入动画 */
.hy-fade-in{ opacity:0; transform:translateY(20px); transition:opacity .6s, transform .6s; }
.hy-fade-in.visible{ opacity:1; transform:translateY(0); }
/* ==================================================================
SEO 关键词引导段(新增元素,不影响既有样式)
================================================================== */
.hy-seo-intro,
.hy-archive-intro{
max-width:1080px; margin:0 auto; padding:26px 20px;
background:rgba(255,255,255,.02);
border-left:3px solid var(--hy-gold);
border-radius:0 8px 8px 0;
}
.hy-seo-intro p,
.hy-archive-intro p{
margin:0; font-size:14px; line-height:1.9;
color:var(--hy-text-2); text-align:justify;
}
.hy-seo-intro strong,
.hy-archive-intro strong{ color:var(--hy-gold); font-weight:600; }
/* 内页 hy-main 无额外间距,保持原有 section 间距 */
.hy-main{ display:block; }