模板:PageBanner/styles.css

/* --- 1. 暴力隐藏 Citizen 自带的页面标题 --- */
/* 只要用了这个模板，原来的标题就会消失 */
.mw-body-header {
    display: none !important;
}

/* --- 2. PageBanner 容器 --- */
.page-banner {
    /* 核心：用负边距抵消 Citizen 的内边距，强制全宽 */
    margin: -1.5rem -1.5rem 2rem -1.5rem;
    
    /* 高度：霸气一点，默认 450px 或 屏幕的一半 */
    height: 50vh; 
    min-height: 400px;
    
    position: relative;
    background-size: cover;
    background-position: center center;
    
    /* 弹性布局：让文字水平垂直居中 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    overflow: hidden;
    border-radius: 0 0 8px 8px; /* 底部给点圆角，看着舒服 */
}

/* --- 3. 黑色遮罩 (保证白字看得清) --- */
.page-banner-mask {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%);
    z-index: 1;
}

/* --- 4. 文字内容 --- */
.page-banner-text {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 90%;
    color: #fff;
    text-shadow: 0 4px 8px rgba(0,0,0,0.8);
}

/* 大标题 (对应你要求的当地语言名称) */
.page-banner-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.2;
    font-family: 'Linux Libertine', 'Georgia', serif; /* 衬线体才有史诗感 */
    margin: 0;
}

/* 适配手机 */
@media screen and (max-width: 720px) {
    .page-banner { margin: -1rem -1rem 1.5rem -1rem; height: 35vh; }
    .page-banner-title { font-size: 2.2rem; }
}