/* =================================

   狂欢庄园 Official Website v1.4
   Black Gold Theme

================================= */



/* 全局 */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

    background:#080808;

    color:#eeeeee;

    font-family:

    "Microsoft YaHei",

    sans-serif;

}



a{

    text-decoration:none;

    color:inherit;

}



/* =========================

   顶部导航

========================= */


header{

    position:fixed !important;

    top:0;

    left:0;

    width:100%;

    height:80px;


    display:flex;

    align-items:center;

    justify-content:space-between;


    padding:0 60px;


    background:

    rgba(8,8,8,.75);


    backdrop-filter:blur(12px);


    border-bottom:

    1px solid

    rgba(212,175,99,.2);


    z-index:999;


}





.logo{

    display:flex;

    flex-direction:column;

    line-height:1.1;

}


/* 中文名称 */

.logo span{

    font-size:24px;

    letter-spacing:4px;

    color:#d4af63;

    text-shadow:

    0 0 15px

    rgba(212,175,99,.5);

}



/* 英文名称 */

.logo small{

    font-family:

    "Cinzel",

    serif;

    font-size:11px;

    letter-spacing:3px;

    color:#aaa;

}




/* 导航 */


nav{

    display:flex;

    gap:35px;

}



nav a{


    color:#ddd;


    font-size:15px;


    transition:.35s;


}



nav a:hover{


    color:#d4af63;


}



/* =========================

   页面主体

========================= */


.page{


    min-height:100vh;


    padding-top:140px;


    text-align:center;


}



/* 标题 */


.page h1{


    font-size:42px;


    letter-spacing:6px;


    color:#d4af63;


    margin-bottom:25px;


}




.page h2{


    color:#e5c06a;


    margin:25px 0;


}




.page p{


    color:#cccccc;


    line-height:2;


    font-size:17px;


}



/* =========================

   底部

========================= */


footer{


    padding:50px;


    text-align:center;


    color:#777;


    border-top:


    1px solid

    rgba(212,175,99,.2);


}



/* =========================

   按钮

========================= */


.button{


    display:inline-block;


    margin-top:35px;


    padding:

    14px 40px;


    border:

    1px solid

    #d4af63;


    color:#d4af63;


    transition:.35s;


}


/* =========================

首页首屏

========================= */


.hero{


height:100vh;


display:flex;


align-items:center;


justify-content:center;


text-align:center;


position:relative;


background:


linear-gradient(

rgba(0,0,0,.55),

rgba(0,0,0,.9)

),


url("../images/bg/manor.jpg");



background-size:cover;


background-position:center;


}

.hero-content{

animation:
fadeIn 1.8s ease;


}


.hero h1{

font-family:
"Microsoft YaHei",
sans-serif;

font-size:90px;

letter-spacing:12px;

color:#d4af63;

text-shadow:
0 0 25px
rgba(212,175,99,.6);

}



.hero h2{

font-family:
"Cinzel",
serif;

font-size:35px;

letter-spacing:8px;

margin-top:25px;

color:#ffffff;

opacity:.9;

}



.hero p{

margin-top:25px;

font-size:20px;

color:#ddd;

letter-spacing:2px;

}


@keyframes fadeIn{


from{


opacity:0;


transform:translateY(40px);


}


to{


opacity:1;


transform:translateY(0);


}


}
/* =========================

首页介绍区域

========================= */


.intro{

min-height:600px;

padding:120px 20%;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

background:

linear-gradient(
180deg,
rgba(0,0,0,0),
rgba(20,20,20,.35)
);
}


.intro h2{


font-size:42px;


color:#d4af63;


letter-spacing:8px;


margin-bottom:30px;


}



.intro p{


max-width:800px;


font-size:18px;


line-height:2;


color:#ccc;


}
/* =========================

精选建筑

========================= */


.build-show{


min-height:650px;


padding:100px 20px;


text-align:center;


border-top:

1px solid

rgba(212,175,99,.15);


}



.build-show h2{


font-size:42px;


color:#d4af63;


letter-spacing:8px;


margin-bottom:50px;


}



.card{

width:380px;

background:

rgba(255,255,255,.03);


border:

1px solid

rgba(212,175,99,.25);


padding-bottom:40px;


transition:.4s;

}


.card:hover{


transform:

translateY(-10px);


box-shadow:

0 0 30px

rgba(212,175,99,.25);


}



.card img{

width:100%;

height:240px;

object-fit:cover;

}


.card h3{


font-size:28px;


color:#e5c06a;


margin:25px 0 10px;


}



.card p{


margin-bottom:20px;


}
/* =========================

滚动提示

========================= */


.scroll-tip{

position:absolute;

bottom:70px;

left:50%;

transform:translateX(-50%);

text-align:center;

opacity:.7;

}

.scroll-tip span{

display:block;

font-size:30px;

color:#d4af63;

animation:

scrollMove 1.8s infinite;

}



.scroll-tip p{

font-size:12px;

letter-spacing:4px;

color:#aaa;

margin-top:8px;

}



@keyframes scrollMove{


0%{

transform:translateY(0);

opacity:.4;

}


50%{

transform:translateY(12px);

opacity:1;

}


100%{

transform:translateY(0);

opacity:.4;

}


}
/* =========================

成员展示

========================= */


.member-show{

margin-top:150px;

padding:120px 20px;

text-align:center;

border-top:

1px solid

rgba(212,175,99,.15);

}

.member-show h2{


font-size:42px;


color:#d4af63;


letter-spacing:8px;


margin-bottom:25px;


}



.member-list{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:60px;

margin:50px 0;

}


.member{


transition:.4s;


}
.member{

width:120px;

text-align:center;

transition:.4s;

}


.member:hover{


transform:

translateY(-10px);


}



.member img{


width:70px;


height:70px;


border-radius:8px;


border:

1px solid

#d4af63;


}



.member p{


margin-top:15px;


color:#ddd;


}
/* =================

首页成员预览

================= */


.member-show{


padding:120px 20px;

text-align:center;


border-top:

1px solid

rgba(212,175,99,.15);

}



.member-show h2{


font-size:42px;

color:#d4af63;

letter-spacing:8px;

}



.member-show p{


color:#aaa;

margin-top:20px;

}



.member-preview{


display:flex;

justify-content:center;

gap:50px;

margin:50px 0;

}



.mini-member img{


width:70px;

height:70px;


border-radius:8px;


border:

1px solid

rgba(212,175,99,.5);


transition:.3s;


}



.mini-member img:hover{


transform:translateY(-8px);


}
/* 成员档案 */


.member-list{

margin-top:50px;

display:flex;

gap:30px;

flex-wrap:wrap;

}



.member-card{

width:320px;

padding:25px;

background:
rgba(20,20,20,.75);

border:

1px solid rgba(212,175,99,.35);

display:flex;

gap:20px;

align-items:center;

transition:.3s;

}



.member-card:hover{

transform:translateY(-8px);

border-color:#d4af63;

}



.member-card img{

width:80px;

height:80px;

}



.member-card h3{

margin:0;

color:#d4af63;

font-size:22px;

}



.member-card span{

color:#eee;

}



.member-card p{

font-size:14px;

color:#aaa;

}
/* =====================
   成员档案布局
===================== */


.memberCloud,
.memberGrid{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:30px;

margin-top:40px;

}




.member{


width:180px;

padding:25px 15px;

text-align:center;


background:

rgba(20,20,20,.75);


border:

1px solid rgba(212,175,99,.35);


transition:.35s;


}




.member:hover{


transform:translateY(-8px);


border-color:#d4af63;


box-shadow:

0 10px 30px rgba(212,175,99,.15);


}





.member img{


width:70px;

height:70px;

margin-bottom:15px;


}





.member h3{


color:#d4af63;

font-size:18px;

margin:10px 0;


}





.member p{


color:#aaa;

font-size:14px;


}





.memberTitle{


margin-top:70px;

font-size:32px;

text-align:center;

color:#d4af63;

letter-spacing:5px;


}





.memberDesc{


text-align:center;

color:#999;

margin:20px auto;

max-width:700px;


}
/* 组织架构 */


.organization{

margin-top:50px;

}



.org-card{


background:

rgba(20,20,20,.8);


border:

1px solid rgba(212,175,99,.35);


padding:30px;


text-align:center;


transition:.35s;


}



.org-card:hover{


transform:translateY(-8px);


border-color:#d4af63;


}




.org-card h2{


color:#d4af63;


letter-spacing:3px;


}



.org-card p{


color:#aaa;


line-height:1.8;


}



.main-org{


max-width:500px;


margin:auto;


}



.org-line{


height:50px;


border-left:

1px solid rgba(212,175,99,.5);


margin:auto;


}




.org-grid{


display:grid;


grid-template-columns:

repeat(auto-fit,minmax(250px,1fr));


gap:30px;


margin-top:40px;


}




.org-title{


margin-top:80px;


text-align:center;


font-size:32px;


letter-spacing:8px;


color:#d4af63;


}
/* 加入页面 */


.joinRole{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:20px;

margin:40px 0;

}



.joinRole span{


padding:15px 30px;


border:

1px solid rgba(212,175,99,.35);


background:

rgba(20,20,20,.8);


color:#d4af63;


transition:.3s;


}



.joinRole span:hover{


transform:translateY(-5px);


border-color:#d4af63;


}



.serverBox{


margin-top:50px;


}



.serverGrid{


display:grid;


grid-template-columns:

repeat(auto-fit,minmax(260px,1fr));


gap:30px;


margin-top:30px;


}



.serverCard{


padding:30px;


background:

rgba(20,20,20,.85);


border:

1px solid rgba(212,175,99,.3);


text-align:center;


}



.serverCard h3{


color:#d4af63;


}



.serverCard strong{


color:white;


font-size:18px;


}



.backup,
.contact{


margin-top:50px;


padding:30px;


text-align:center;


background:

rgba(15,15,15,.75);


border:

1px solid rgba(212,175,99,.25);


}


.contact h3{

color:#d4af63;

}
/* 庄园数据 */


.stats{

padding:80px 20px;

}



.statsGrid{


display:grid;


grid-template-columns:

repeat(auto-fit,minmax(200px,1fr));


gap:30px;


max-width:1000px;


margin:40px auto;


}




.statCard{


padding:35px 20px;


background:

rgba(20,20,20,.75);


border:

1px solid rgba(212,175,99,.35);


text-align:center;


transition:.3s;


}



.statCard:hover{


transform:translateY(-10px);


border-color:#d4af63;


}




.statCard h2{


font-size:32px;


color:#d4af63;


margin:0 0 10px;


}




.statCard p{


color:#aaa;


}
/* 建筑展馆 */


.buildingArchive{

margin-top:60px;

}



.buildingArchive{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:35px;

max-width:1200px;

margin:60px auto;

}



.buildingArchiveCard{


background:rgba(15,15,15,.85);


border:1px solid rgba(212,175,99,.35);


padding:25px;


transition:.35s;


}



.buildingArchiveCard:hover{

transform:translateY(-8px);

border-color:#d4af63;

}

padding:30px;


background:

rgba(15,15,15,.85);


border:

1px solid rgba(212,175,99,.35);


transition:.35s;


}



.buildingArchiveCard:hover{


transform:translateY(-8px);


border-color:#d4af63;


}




.archiveImage{

width:100%;

height:260px;

margin-bottom:20px;

overflow:hidden;

}


.archiveImage img{

width:100%;

height:100%;

object-fit:cover;

}



.archiveInfo p{


color:#aaa;


line-height:1.8;


}
.building-show-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(260px,1fr));

gap:30px;

}
.archiveImage img{

width:100%;

height:100%;

object-fit:cover;

}
.hero-content h1{

color:#d4af63;

font-size:72px;

letter-spacing:15px;

text-shadow:

0 0 20px rgba(212,175,99,.5);

}
.hero-content h2{

letter-spacing:10px;

color:#fff;

}
.hero-bg{

position:absolute;

inset:0;

background-size:cover;

background-position:center;

z-index:0;

opacity:1;
transition:opacity 2s ease;

}



.hero-content{

position:relative;

z-index:2;

}



.hero-bg{

position:absolute;

inset:0;

background-size:cover;

background-position:center;

transition:opacity 2.5s ease;

}



.bg-one{

opacity:1;

z-index:0;

}



.bg-two{

opacity:0;

z-index:0;

}



.hero-content{

position:relative;

z-index:2;

}
.motto-mini{

margin:30px auto;

max-width:700px;

opacity:.9;

}



.motto-mini h3{

font-size:20px;

font-weight:400;

color:#d4af63;

line-height:1.8;

}



.motto-mini p{

margin-top:10px;

color:#aaa;

font-size:14px;

}
/* =====================
   庄园日志
===================== */


.timeline{

padding:90px 10%;

text-align:center;

}


.timeline h2{

font-size:36px;

color:#d4af63;

font-family:Cinzel;

}


.sectionDesc{

color:#aaa;

margin-top:15px;

}



.timelineList{

max-width:800px;

margin:50px auto;

}



.timelineItem{

display:flex;

align-items:center;

gap:40px;

padding:25px;

margin-bottom:20px;

background:rgba(20,20,20,.7);

border:1px solid rgba(212,175,99,.25);

transition:.4s;

}



.timelineItem:hover{

transform:translateX(12px);

border-color:#d4af63;

box-shadow:0 0 25px rgba(212,175,99,.3);

}



.time{

width:120px;

color:#d4af63;

font-family:Cinzel;

}



.event{

color:white;

}
.member-info{

font-size:13px;

color:#aaa;

margin-top:8px;

line-height:1.6;

}
/* =====================
   庄园新闻
===================== */


.news{

padding:100px 10%;

text-align:center;

}



.newsList{

max-width:900px;

margin:40px auto 0;

}



.newsItem{

display:flex;

align-items:center;

gap:30px;

padding:20px 25px;

margin-bottom:20px;

background:rgba(255,255,255,.04);

border-left:3px solid #d4af63;

text-align:left;

transition:.3s;

}



.newsItem:hover{

transform:translateX(8px);

background:rgba(212,175,99,.08);

}



.newsItem span{

color:#d4af63;

font-size:14px;

min-width:100px;

}



.newsItem p{

margin:0;

color:#ddd;

font-size:16px;

}
.beian-icon{
    width:16px;
    height:16px;
    vertical-align:-3px;
    margin-right:4px;
}
/* =================================
   狂欢庄园 · 庄园故事
================================= */


.manor-story-page{

width:100%;

text-align:center;

padding-top:100px;

padding-bottom:100px;

box-sizing:border-box;

position:relative;

z-index:1;
}



/* 标题 */

.manor-story-title{

text-align:center;

margin-bottom:60px;

}



.manor-story-title h1{

font-size:56px;

color:#d4af63;

letter-spacing:10px;

margin:0;

}



.manor-story-title p{

font-size:18px;

color:#aaa;

letter-spacing:4px;

margin-top:20px;

}





/* 小说卡片 */

.manor-story-card{

width:700px;

max-width:85%;

margin:0 auto;


padding:45px;



background:

rgba(0,0,0,.75);



border:

1px solid rgba(212,175,99,.6);



border-radius:20px;



box-shadow:

0 0 35px rgba(212,175,99,.2);


}





.manor-story-card h2{

font-size:38px;

color:#d4af63;

margin-bottom:25px;

}



.manor-story-card p{

font-size:18px;

color:#ddd;

line-height:2;

margin:15px 0;

}





/* 阅读按钮 */

.manor-story-card a{

display:inline-block;

margin-top:30px;

padding:12px 45px;


border:

1px solid #d4af63;



border-radius:30px;



color:#d4af63;



text-decoration:none;



transition:.3s;

}



.manor-story-card a:hover{

background:#d4af63;

color:#111;

}





/* 手机 */

@media(max-width:768px){


.manor-story-title h1{

font-size:40px;

}



.manor-story-card{

padding:18px;

}


}
/* 小说章节目录 */


.chapter-list{

width:100%;

min-height:100vh;

padding-top:140px;

text-align:center;

}



.chapter-list h1{

font-size:45px;

color:#d4af63;

}



.chapter-list>p{

color:#aaa;

}



.chapter-card{

width:600px;

max-width:85%;

margin:30px auto;

padding:25px;


background:rgba(0,0,0,.7);


border:1px solid rgba(212,175,99,.5);


border-radius:15px;


}



.chapter-card a{

color:#d4af63;

font-size:22px;

text-decoration:none;

}



.chapter-card:hover{

transform:translateY(-5px);

}
/* ==========================
   小说正文页面
========================== */


.chapter-page{

width:900px;

max-width:90%;

margin:120px auto 80px;

padding:50px;


background:rgba(0,0,0,.75);


border:1px solid rgba(212,175,99,.4);


border-radius:20px;


}



.chapter-page h1{

text-align:center;

color:#d4af63;

font-size:42px;

margin-bottom:50px;

}



.chapter-content{

color:#eee;

font-size:20px;

line-height:2.2;

letter-spacing:2px;

}



.chapter-content p{

margin-bottom:30px;

}



.chapter-nav{

display:flex;

justify-content:space-between;

margin-top:60px;

}



.chapter-nav a{

color:#d4af63;

text-decoration:none;

border-bottom:1px solid #d4af63;

padding-bottom:5px;

}
.menu-btn{
display:none;
}


/* 手机端菜单 */

@media(max-width:768px){


.menu-btn{

display:block;

font-size:30px;

color:#d4af63;

cursor:pointer;

position:relative;

z-index:999999;

}



#mobile-nav{

display:none;

position:absolute;

top:80px;

left:0;

width:100%;

background:rgba(0,0,0,.95);

flex-direction:column;

z-index:999999;

}



#mobile-nav.active{

display:flex;

}



#mobile-nav a{

padding:15px 0;

display:block;

}



}
header{

position:relative;

z-index:999999;

}


.menu-btn{

position:relative;

z-index:9999999;

}
/* 友情链接 */

.friends{

padding:80px 20px;

text-align:center;

background:#080808;

}



.friend-list{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:30px;

margin-top:40px;

}


.friend-card{

width:160px;

padding:25px 20px;

border:1px solid #d4af63;

background:rgba(0,0,0,.45);

text-decoration:none;

color:#d4af63;

transition:.3s;

box-sizing:border-box;

}


.friend-card img{

width:64px;

height:64px;

border-radius:50%;

margin-bottom:15px;

}


.friend-card span{

display:block;

font-size:18px;

letter-spacing:2px;

}


.friend-card:hover{

transform:translateY(-8px);

background:rgba(212,175,99,.15);

}