Transparent Overlay Header · Black Text
*{margin:0;padding:0;box-sizing:border-box;}
/* 外层大图容器，后续替换背景图片 */
.banner-wrap{
width:100%;
height:320px;
background:url(“bg.jpg”) center center / cover no-repeat;
position:relative;
}
/* 透明悬浮导航栏，无背景，浮在图片上层 */
.transparent-header{
position:absolute;
top:0;
left:0;
width:100%;
padding:2rem 3rem;
display:flex;
align-items:center;
justify-content:space-between;
z-index:10;
}
.logo{
color:#000000;
font-size:40px;
font-weight:bold;
text-decoration:none;
letter-spacing:2px;
}
.nav-menu ul{
display:flex;
gap:36px;
list-style:none;
}
.nav-menu a{
color:#000000;
text-decoration:none;
text-transform:uppercase;
font-size:17px;
letter-spacing:1px;
}
.icon-group{
display:flex;
gap:24px;
}
.icon-group span{
color:#000000;
font-size:22px;
cursor:pointer;
}
.mobile-btn{
display:none;
color:#000000;
font-size:28px;
cursor:pointer;
}
.mobile-menu{
position:absolute;
top:100%;
left:0;
width:100%;
background:rgba(255,255,255,0.75);
display:none;
padding:24px 3rem;
}
.mobile-menu ul{
list-style:none;
display:flex;
flex-direction:column;
gap:16px;
}
.mobile-menu a{
color:#000000;
text-decoration:none;
text-transform:uppercase;
font-size:16px;
}
@media(max-width:768px){
.nav-menu, .icon-group{display:none;}
.mobile-btn{display:block;}
.transparent-header{padding:1.2rem 1.5rem;}
.logo{font-size:28px;}
}
function toggleMobile(){
const m = document.getElementById(‘mobileMenu’);
m.style.display = m.style.display === ‘block’ ? ‘none’ : ‘block’;
}
JIA‘S CRAFT