/* =================================================
LUNQHAL BRAND HOMEPAGE V1.3.5
FINAL PRODUCTION CSS
修正版：按钮文案 / 对齐修复 / Logo修复 / 法律页样式恢复
================================================= */
/* =================================================
01. RESET 基础重置
================================================= */
*,
*::before,
*::after{
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
margin:0;
background:#000;
color:#fff;
font-family:
-apple-system,
BlinkMacSystemFont,
"SF Pro Display",
"Helvetica Neue",
Arial,
sans-serif;
-webkit-font-smoothing:antialiased;
}
img{
display:block;
max-width:100%;
}
a{
color:inherit;
text-decoration:none;
}
button{
font-family:inherit;
}
/* =================================================
02. DESIGN TOKENS 设计变量
================================================= */
:root{
--lhq-black:#000000;
--lhq-white:#ffffff;
--lhq-gray:#86868b;
--lhq-light-gray:#d2d2d7;
--lhq-gold:#C9A24A;
--lhq-card:#111111;
--lhq-container:1200px;
--lhq-radius:18px;
--lhq-btn-radius:22px;
--lhq-section-space:120px;
}
/* =================================================
03. CONTAINER SYSTEM 容器系统
================================================= */
.lhq-container{
width:100%;
max-width:var(--lhq-container);
margin:0 auto;
padding-left:24px;
padding-right:24px;
}
/* =================================================
04. GLOBAL SECTION 全局区块
================================================= */
.lhq-section{
padding-top:var(--lhq-section-space);
padding-bottom:var(--lhq-section-space);
}
.lhq-section-large{
padding-top:160px;
padding-bottom:160px;
}
/* =================================================
05. TYPOGRAPHY SYSTEM 字体系统
================================================= */
h1,
h2,
h3,
p{
margin:0;
}
.lhq-title-xl{
font-size:64px;
line-height:1.05;
font-weight:600;
letter-spacing:-0.045em;
}
.lhq-title-lg{
font-size:48px;
line-height:1.1;
font-weight:600;
letter-spacing:-0.035em;
}
.lhq-title-md{
font-size:36px;
line-height:1.15;
font-weight:600;
}
.lhq-body{
font-size:18px;
line-height:1.6;
color:var(--lhq-light-gray);
letter-spacing:-0.01em;
}
.lhq-small{
font-size:14px;
color:var(--lhq-gray);
}
/* =================================================
06. HEADER 顶部导航（锁定不变）
================================================= */
.lhq-header{
position:fixed;
top:0;
left:0;
width:100%;
height:60px;
z-index:1000;
background:
rgba(0,0,0,.72);
backdrop-filter:
blur(20px);
-webkit-backdrop-filter:
blur(20px);
border-bottom:
1px solid rgba(255,255,255,.08);
}
.lhq-header-inner {
height:100%;
max-width:1200px;
margin:0 auto;
padding:0 24px;
display:flex;
align-items:center;
justify-content:space-between;
}
/* Logo 桌面端+移动端共用同一SVG */
.lhq-logo{
display:flex;
align-items:center;
}
.lhq-logo img{
height:24px;
width:auto;
object-fit:contain;
}
/* 桌面端导航 */
.lhq-navigation {
display:flex;
align-items:center;
justify-content:flex-end;
gap:34px;
font-size:14px;
line-height:1;
color:rgba(255,255,255,.78);
}
.lhq-navigation a{
display:inline-flex;
align-items:center;
min-height:32px;
white-space:nowrap;
transition:color .25s ease, opacity .25s ease;
}
.lhq-navigation a:hover{
color:#fff;
}

/* 移动端菜单：桌面端全局默认隐藏 */
.lhq-mobile-menu {
    display: none;
}

/* 移动端汉堡按钮 */
.lhq-menu-button {
display:none;
background:none;
border:0;
padding:8px;
cursor: pointer;
}
.lhq-menu-button span {
display:block;
width:22px;
height:1px;
background:#fff;
margin:5px 0;
transition: all .3s ease;
}
/* =================================================
07. BUTTON SYSTEM 按钮系统（全站统一）
================================================= */
.lhq-btn{
display:inline-flex;
align-items:center;
justify-content:center;
height:48px;
padding:0 28px;
border-radius:999px;
background:#fff;
color:#000;
font-size:15px;
font-weight:500;
transition:all 0.3s cubic-bezier(.4,0,.2,1);
text-decoration:none;
}
.lhq-btn:hover {
background: #C9A24A;
color: #000000;
transform: translateY(-2px);
opacity: 1;
}
.lhq-btn-outline{
background:transparent;
border:1px solid rgba(255,255,255,.5);
color:#fff;
}
.lhq-btn-outline:hover {
background: #C9A24A;
border-color: #C9A24A;
color: #000;
}
/* =================================================
08. HERO H01 首屏模块
================================================= */
.lhq-hero{
position:relative;
width:100%;
overflow:hidden;
}
.lhq-hero picture {
display:block;
width:100%;
}
.lhq-hero img{
width:100%;
height:auto;
object-fit:contain;
background:#000;
}
/* H01 文字层 - 与下方模块左边缘对齐 */
.lhq-hero-overlay{
position:absolute;
left: max(64px, calc((100vw - 1440px)/2 + 64px));
bottom:90px;
max-width:560px;
z-index:2;
background: transparent;
backdrop-filter: none;
}
.lhq-hero-overlay h1{
margin:0 0 22px;
font-size:64px;
line-height:1.05;
font-weight:600;
letter-spacing:-.04em;
}
.lhq-hero-overlay p{
margin:0 0 34px;
font-size:22px;
line-height:1.45;
color:rgba(255,255,255,.85);
}
/* =================================================
09. EDITORIAL MODULE H02/H03 社论模块
================================================= */
.lhq-editorial{
position:relative;
max-width:1440px;
margin:120px auto 0;
overflow:hidden;
border-radius:var(--lhq-radius);
}
.lhq-editorial-media{
width:100%;
}
.lhq-editorial-media img{
width:100%;
height:auto;
border-radius:var(--lhq-radius);
object-fit:contain;
background:#000;
}
/* 文字层 - 完全透明背景 */
.lhq-editorial-overlay{
position:absolute;
left:64px;
bottom:64px;
max-width:560px;
z-index:2;
background: transparent;
backdrop-filter: none;
}
.lhq-editorial-overlay h2{
margin:0 0 18px;
font-size:52px;
line-height:1.08;
font-weight:600;
letter-spacing:-.03em;
}
.lhq-editorial-overlay p{
margin:0 0 28px;
font-size:20px;
line-height:1.45;
color:rgba(255,255,255,.85);
}
/* H03 户外模块左上定位 */
.lhq-outdoor .lhq-editorial-overlay{
left:6%;
top:10%;
bottom:auto;
max-width:440px;
}
/* =================================================
10. H04 SL016 产品核心模块
================================================= */
.lhq-product.lhq-sl016{
width:min(100%,1440px);
max-width:1440px;
margin:120px auto;
padding:0;
display:grid;
grid-template-columns:33.3333% 66.6667%;
gap:0;
align-items:stretch;
background:#050505;
border-radius:28px;
overflow:hidden;
box-shadow:0 24px 80px rgba(0,0,0,.35);
}
/* 左侧文字区 */
.lhq-sl016-copy{
min-width:0;
min-height:100%;
padding:72px 56px 42px;
display:flex;
flex-direction:column;
justify-content:space-between;
background:
radial-gradient(circle at 100% 38%,rgba(201,162,74,.12),transparent 42%),
linear-gradient(180deg,#080808 0%,#000 100%);
}
.lhq-sl016-copy-top{
max-width:100%;
}
.lhq-sl016-eyebrow{
display:block;
margin:0 0 12px;
color:#c9a24a;
font-size:16px;
line-height:1;
letter-spacing:.08em;
text-transform:uppercase;
}
.lhq-sl016-copy h2{
margin:0 0 24px;
color:#fff;
font-size:52px;
line-height:1.08;
font-weight:600;
letter-spacing:-.035em;
}
.lhq-sl016-lead{
max-width:430px;
margin:0 0 34px;
color:rgba(255,255,255,.82);
font-size:20px;
line-height:1.5;
}
/* 特性图标区 - 统一白化 */
.lhq-sl016-features{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
padding-top:22px;
border-top:1px solid rgba(255,255,255,.12);
}
.lhq-sl016-feature{
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
gap:7px;
text-align:center;
}
.lhq-sl016-feature img{
width:30px;
height:30px;
flex:0 0 30px;
object-fit:contain;
filter: brightness(0) invert(1);
opacity: 1;
}
.lhq-sl016-feature div{
display:flex;
flex-direction:column;
align-items:center;
min-width:0;
}
.lhq-sl016-feature strong{
color:#f4c94f;
font-size:12px;
font-weight:600;
line-height:1.2;
}
.lhq-sl016-feature span{
margin-top:2px;
color:rgba(255,255,255,.68);
font-size:11px;
line-height:1.2;
}
/* 右侧图片区 */
.lhq-sl016-media{
min-width:0;
background:#000;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
position:relative;
}
.lhq-sl016-media picture{
display:block;
width:100%;
}
.lhq-sl016-media img{
display:block;
width:100%;
height:auto;
max-width:100%;
object-fit:contain;
}
/* 产品细节标注 */
.lhq-sl016-detail-overlays {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
}
.lhq-sl016-detail-overlay {
position: absolute;
margin: 0;
padding: 5px 8px 6px;
background: rgba(0,0,0,.72);
border-left: 2px solid #13b7ff;
max-width: 29%;
color: rgba(255,255,255,.82);
text-shadow: 0 1px 4px rgba(0,0,0,.7);
}
.lhq-sl016-detail-overlay h3 {
margin: 0;
color: #fff;
font-size: clamp(10px,.82vw,14px);
line-height: 1.15;
font-weight: 500;
}
.lhq-sl016-detail-overlay h3 strong { color: #f4c94f; font-weight: 700; }
.lhq-sl016-detail-overlay p {
margin: 2px 0 0;
color: rgba(255,255,255,.70);
font-size: clamp(8px,.62vw,11px);
line-height: 1.25;
}
.lhq-sl016-detail-overlay--1 { left: 56.2%; top: 39.5%; }
.lhq-sl016-detail-overlay--2 { left: 82.5%; top: 39.5%; }
.lhq-sl016-detail-overlay--3 { left: 56.2%; top: 76.5%; }
.lhq-sl016-detail-overlay--4 { left: 82.5%; top: 76.5%; }
/* =================================================
11. V01-V04 场景卡片网格
================================================= */
.lhq-gallery{
max-width:1440px;
margin:120px auto;
padding:0 48px;
}
.lhq-gallery-header{
text-align:center;
margin-bottom:60px;
}
.lhq-gallery-header h2{
margin:0 0 16px;
font-size:52px;
letter-spacing:-.04em;
font-weight:600;
}
.lhq-gallery-header p{
margin:0;
font-size:20px;
color:rgba(255,255,255,.65);
}
.lhq-gallery-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:28px;
}
.lhq-gallery-card{
position:relative;
display:block;
border-radius:28px;
overflow:hidden;
background:#111;
text-decoration:none;
}
.lhq-gallery-card picture {
display:block;
width:100%;
height:100%;
}
.lhq-gallery-card img{
display:block;
width:100%;
height:100%;
object-fit:contain;
background:#111;
transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.lhq-gallery-card:hover img {
transform:scale(1.04);
}
/* 卡片文字层 - 完全透明背景 */
.lhq-gallery-overlay{
position:absolute;
left:40px;
bottom:36px;
z-index:2;
max-width:80%;
background: transparent;
backdrop-filter: none;
}
.lhq-gallery-overlay h3{
margin:0 0 12px;
font-size:36px;
line-height:1.1;
font-weight:600;
letter-spacing:-.03em;
}
.lhq-gallery-overlay p{
margin:0;
font-size:17px;
line-height:1.45;
color:rgba(255,255,255,.85);
}
/* =================================================
12. V05 未来之家模块
================================================= */
.lhq-future{
position:relative;
max-width:1440px;
margin:120px auto;
border-radius:28px;
overflow:hidden;
}
.lhq-future picture {
display:block;
}
.lhq-future img{
display:block;
width:100%;
height:auto;
object-fit:contain;
background:#000;
}
/* 文字层 - 底部居中 + 完全透明背景 */
.lhq-future-home .lhq-future-overlay{
position:absolute;
left:50%;
right:auto;
top:auto;
bottom:9%;
transform:translateX(-50%);
width:min(760px,calc(100% - 64px));
text-align:center;
z-index:2;
background: transparent;
backdrop-filter: none;
}
.lhq-future-overlay h2{
margin:0 0 20px;
font-size:56px;
line-height:1.05;
font-weight:600;
letter-spacing:-.04em;
}
.lhq-future-overlay p{
margin:0 0 32px;
font-size:20px;
line-height:1.5;
color:rgba(255,255,255,.82);
}
.lhq-future-tags{
display:flex;
gap:14px;
flex-wrap:wrap;
justify-content:center;
}
.lhq-future-tags span{
padding:10px 18px;
border-radius:999px;
background:rgba(255,255,255,.12);
backdrop-filter:blur(12px);
font-size:14px;
border:1px solid rgba(255,255,255,.15);
}
/* =================================================
13. FOOTER 页脚（锁定不变）
================================================= */
.lhq-footer{
margin-top:160px;
padding:80px 48px 40px;
background:#050505;
border-top:1px solid rgba(255,255,255,.1);
}
.lhq-footer-inner{
max-width:1440px;
margin:auto;
}
.lhq-footer-brand{
margin-bottom:60px;
}
.lhq-footer-brand img{
width:140px;
height:auto;
object-fit:contain;
}
.lhq-footer-brand p{
margin-top:20px;
font-size:18px;
color:rgba(255,255,255,.65);
}
.lhq-footer-columns{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:40px;
padding-bottom:60px;
border-bottom:1px solid rgba(255,255,255,.1);
}
.lhq-footer-column{
display:flex;
flex-direction:column;
gap:14px;
}
.lhq-footer-column h4{
margin:0 0 10px;
font-size:14px;
color:#fff;
}
.lhq-footer-column a{
font-size:14px;
color:rgba(255,255,255,.65);
text-decoration:none;
transition:color .3s ease;
}
.lhq-footer-column a:hover{
color:#fff;
}
.lhq-footer-bottom{
padding-top:32px;
display:flex;
justify-content:space-between;
align-items:center;
font-size:13px;
color:rgba(255,255,255,.5);
}
.lhq-footer-legal{
display:flex;
gap:28px;
}
.lhq-footer-legal a{
color:rgba(255,255,255,.5);
text-decoration:none;
}
.lhq-footer-legal a:hover{
color:#fff;
}
/* =================================================
14. 动画与无障碍
================================================= */
.lhq-animate{
opacity:0;
transform:translateY(30px);
transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
.lhq-animate.active{
opacity:1;
transform:none;
}
.lhq-image-reveal{
overflow:hidden;
}
.lhq-image-reveal img{
transform:scale(1.05);
transition:transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.lhq-image-reveal.active img{
transform:scale(1);
}
.lhq-reveal{
opacity:0;
transform:translateY(40px);
transition:opacity .9s ease, transform .9s ease;
}
.lhq-reveal.is-visible{
opacity:1;
transform:none;
}
@media(prefers-reduced-motion:reduce){
*,
*::before,
*::after{
animation-duration:0.01ms!important;
animation-iteration-count:1!important;
scroll-behavior:auto!important;
transition-duration:0.01ms!important;
}
.lhq-reveal,
.lhq-animate{
opacity:1;
transform:none;
}
}
a:focus-visible,
button:focus-visible{
outline:2px solid var(--lhq-gold);
outline-offset:4px;
border-radius:6px;
}
/* =================================================
15. 法律页面样式（完整恢复，修复排版错误）
================================================= */
.lhq-legal-page {
min-height: 100vh;
background: #fff;
color: #1d1d1f;
}
.lhq-legal-shell {
width: min(100% - 48px, 920px);
margin: 0 auto;
padding: 58px 0 88px;
}
.lhq-legal-brand {
display: inline-flex;
align-items: center;
margin-bottom: 54px;
}
.lhq-legal-brand img { width: 112px; height: auto; display:block; }
.lhq-legal-title {
margin: 0;
font-size: clamp(40px,6vw,64px);
line-height: 1.04;
letter-spacing: -.035em;
font-weight: 600;
}
.lhq-legal-updated {
margin: 14px 0 56px;
color: #6e6e73;
font-size: 14px;
}
.lhq-legal-intro {
max-width: 760px;
margin: 0 0 54px;
color: #424245;
font-size: 20px;
line-height: 1.55;
}
.lhq-legal-content { max-width: 780px; }
.lhq-legal-content section { margin: 0 0 46px; }
.lhq-legal-content h2 {
margin: 0 0 16px;
font-size: 27px;
line-height: 1.2;
letter-spacing: -.018em;
}
.lhq-legal-content h3 {
margin: 26px 0 10px;
font-size: 19px;
line-height: 1.3;
}
.lhq-legal-content p,
.lhq-legal-content li {
color: #424245;
font-size: 16px;
line-height: 1.72;
}
.lhq-legal-content ul { padding-left: 24px; }
.lhq-legal-content a,
.lhq-legal-back a { color: #0066cc; text-decoration: none; }
.lhq-legal-content a:hover,
.lhq-legal-back a:hover { text-decoration: underline; }
.lhq-legal-back {
margin-top: 72px;
padding-top: 26px;
border-top: 1px solid #d2d2d7;
font-size: 15px;
}
.lhq-legal-nav {
margin: 14px 0 50px;
display: flex;
gap: 18px;
flex-wrap: wrap;
font-size: 14px;
}
/* =================================================
16. 性能优化与打印样式
================================================= */
.lhq-gallery-card img,
.lhq-editorial img,
.lhq-product img{
content-visibility:auto;
}
.lhq-gallery-card,
.lhq-editorial,
.lhq-product{
contain:layout paint;
}
.lhq-gallery-card img,
.lhq-btn{
will-change:transform;
}
@media print{
.lhq-header{
display:none;
}
}
/* =================================================
17. 移动端响应式 768px
================================================= */
@media(max-width:768px){
:root {
--lhq-padding:20px;
--lhq-section-space:80px;
}

/* 顶部导航 */
.lhq-header {
height:56px;
}
.lhq-header-inner {
padding:0 20px;
}
/* Logo 移动端：与桌面端同比例缩放，不变形 */
.lhq-logo img {
height:20px;
width:auto;
object-fit:contain;
}
.lhq-navigation {
display:none;
}
.lhq-menu-button {
display:block;
}

/* 移动端汉堡菜单 */
.lhq-mobile-menu {
display: none;
position: fixed;
top: 56px;
left: 0;
width: 100%;
background: #000000;
padding: 20px 24px 40px;
z-index: 999;
flex-direction: column;
gap: 24px;
border-top: 1px solid rgba(255,255,255,.08);
}
.lhq-mobile-menu.open {
display: flex;
}
.lhq-mobile-menu a {
font-size: 18px;
color: #ffffff;
padding: 8px 0;
border-bottom: 1px solid rgba(255,255,255,.1);
text-decoration: none;
transition: color .2s ease;
}
.lhq-mobile-menu a:hover {
color: #C9A24A;
}

/* ========== 全局模块：文字在上，图片在下（Apple风格） ========== */
.lhq-hero,
.lhq-editorial,
.lhq-future {
display: flex;
flex-direction: column;
margin: 60px 20px;
border-radius: 20px;
}

/* 文字容器：居中 + 深色背景衔接图片顶部 */
.lhq-hero-overlay,
.lhq-editorial-overlay,
.lhq-future-home .lhq-future-overlay {
position: static;
transform: none;
width: 100%;
max-width: 100%;
padding: 60px 24px 40px;
margin: 0;
border-radius: 0;
background: linear-gradient(180deg, #000000 0%, #0a0a0a 100%);
backdrop-filter: none;
text-align: center;
left: auto;
bottom: auto;
}

.lhq-hero-overlay h1,
.lhq-editorial-overlay h2,
.lhq-future-overlay h2 {
margin-bottom: 12px;
font-size: 38px;
}

.lhq-hero-overlay p,
.lhq-editorial-overlay p,
.lhq-future-overlay p {
margin-bottom: 24px;
font-size: 17px;
}

/* 图片容器 */
.lhq-hero picture,
.lhq-editorial picture,
.lhq-future picture {
order: 2;
}
.lhq-hero img,
.lhq-editorial img,
.lhq-future img {
border-radius: 0 0 20px 20px;
}

/* H03 户外模块重置位置 */
.lhq-outdoor .lhq-editorial-overlay {
left: auto;
top: auto;
max-width: 100%;
}

/* ========== H04 移动端重构 ========== */
.lhq-product.lhq-sl016 {
width: calc(100% - 40px);
margin: 60px 20px;
display: flex;
flex-direction: column;
border-radius: 20px;
}
.lhq-sl016-copy {
order: 1;
padding: 44px 28px 30px;
background: linear-gradient(180deg, #000000 0%, #0a0a0a 100%);
}
.lhq-sl016-copy h2 {
font-size: 38px;
}
.lhq-sl016-media {
order: 2;
}
.lhq-sl016-features {
grid-template-columns: repeat(4,minmax(0,1fr));
gap: 6px;
margin-top: 36px;
}
.lhq-sl016-feature img {
width:26px;
height:26px;
flex-basis:26px;
}
.lhq-sl016-detail-overlays {
position:relative;
inset:auto;
z-index:3;
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
padding:10px;
background:#050505;
}
.lhq-sl016-detail-overlay,
.lhq-sl016-detail-overlay--1,
.lhq-sl016-detail-overlay--2,
.lhq-sl016-detail-overlay--3,
.lhq-sl016-detail-overlay--4 {
position:static;
max-width:none;
}

/* ========== V01-V04 卡片移动端重构 ========== */
.lhq-gallery {
padding: 0 20px;
margin: 70px auto;
}
.lhq-gallery-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.lhq-gallery-card {
display: flex;
flex-direction: column;
border-radius: 20px;
aspect-ratio: auto;
height: auto;
}
.lhq-gallery-overlay {
position: static;
transform: none;
text-align: center;
width: 100%;
max-width: 100%;
padding: 40px 24px 30px;
border-radius: 0;
background: linear-gradient(180deg, #000000 0%, #0a0a0a 100%);
backdrop-filter: none;
left: auto;
bottom: auto;
}
.lhq-gallery-overlay h3 {
font-size: 30px;
}
.lhq-gallery-card img {
border-radius: 0 0 20px 20px;
}

/* ========== 页脚移动端 ========== */
.lhq-footer {
padding: 60px 20px 30px;
}
.lhq-footer-columns {
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.lhq-footer-bottom {
flex-direction:column;
align-items:flex-start;
gap:20px;
}

/* 法律页面移动端适配 */
.lhq-legal-shell { width:min(100% - 36px,920px); padding:38px 0 58px; }
.lhq-legal-brand { margin-bottom:38px; }
.lhq-legal-title { font-size:42px; }
.lhq-legal-intro { font-size:18px; }
}

/* =================================================
18. 小屏手机适配 430px
================================================= */
@media(max-width:430px){
.lhq-btn{
height:42px;
padding:0 22px;
}
.lhq-hero-overlay h1{
font-size:36px;
}
.lhq-sl016-copy{
padding:36px 22px 26px;
}
.lhq-sl016-copy h2{
font-size:32px;
}
.lhq-sl016-lead{
font-size:16px;
}
.lhq-future-overlay h2{
font-size:32px;
}
}
/* =================================================
19. iPhone 安全区适配
================================================= */
@supports(padding:max(0px)){
.lhq-header{
padding-top:env(safe-area-inset-top);
}
.lhq-footer{
padding-bottom:calc(80px + env(safe-area-inset-bottom));
}
body{
padding-bottom:env(safe-area-inset-bottom);
}
}
/* =================================================
END
================================================= */