@charset "UTF-8";
/* ============================================================
   静态导航页 —— 样式（手机 / PC 自适应）
   尺寸全部以「参考稿 430px 宽」为基准，再用 --s 统一缩放：
     · 手机 / 窄屏（≤601px）：--s = 100vw / 430，整页等比缩放
     · PC / 宽屏：--s = 1.4px（卡片约 581px 宽，居中显示）
   想整体放大缩小：只改下面的 --s 和断点即可。
   ============================================================ */

:root{
  --s: 1.4px;                      /* PC 端缩放单位（1 参考像素） */

  --bg-base:#f3e9f2;               /* 背景图未加载时的底色 */

  /* 卡片 */
  --page-w:415;                    /* 卡片宽度（参考px）= 屏宽的 96.5% */
  --card-pad:34;
  --card-radius:9;

  /* 标题 */
  --title-size:60;
  --title-line:68;
  --title-gap:12;                  /* 词与词之间的间距 */
  --title-c1:#ffa3ff;              /* 左：粉 */
  --title-c2:#d59fff;
  --title-c3:#b6a0f7;              /* 中：紫 */
  --title-c4:#4d90ff;
  --title-c5:#1585ff;              /* 右：蓝 */
  --title-margin:31;               /* 标题与卡片的距离 */

  /* 广告图（顶部） */
  --ad-ratio-w:345;
  --ad-ratio-h:139;
  --ad-radius:7;
  --ad-margin:27;

  /* 公告文字（粉→蓝渐变） */
  --notice-size:20;
  --notice-line:27.5;
  --notice-c1:#ff8fe8;
  --notice-c2:#b39bf7;
  --notice-c3:#3fa6ef;

  /* 按钮 */
  --btn-w:272;
  --btn-h:50;
  --btn-radius:25;
  --btn-gap:39;                    /* 按钮之间的间距 */
  --btn-size:20;                   /* 按钮文字大小 */
  --btn-dash-w:55;                 /* 左右虚线长度 */
  --btn-dash-h:4;                  /* 虚线粗细 */
  --btn-dash-on:4;                 /* 每段实线长度 */
  --btn-dash-off:3;                /* 每段间隔长度 */
  --btn-dash-gap:7;                /* 虚线与文字的距离 */
  --btn-dash-alpha:.5;             /* 虚线透明度（颜色跟随按钮文字） */
  --btn-grad-a:#00aaff;            /* 左：蓝 */
  --btn-grad-b:#b25bbb;            /* 右：紫 */
  --links-margin:43;               /* 公告与按钮组的距离 */

  /* 按钮文字颜色（虚线颜色 = 文字颜色 × 透明度） */
  --c1:#ff2020;
  --c2:#ffffff;
  --c3:#00f040;
  --c4:#c6e04a;

  /* 按钮下面的图片 & 文字 */
  --pic-radius:7;
  --pic-margin:34;
  --extra-size:19;
  --extra-line:30;
  --extra-color:#ff5fa8;
}

/* 手机 / 窄屏：整页按参考稿等比缩放（601px 处与 PC 端无缝衔接） */
@media (max-width: 601px){
  :root{ --s: calc(100vw / 430); }
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }

body{
  min-height:100vh;
  min-height:100dvh;
  background:var(--bg-base);
  font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB","Heiti SC",
              "WenQuanYi Micro Hei","Source Han Sans SC","Noto Sans CJK SC",
              Arial,sans-serif;
  display:flex;
  justify-content:center;          /* 横向居中；纵向用 margin:auto 安全居中 */
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- 全屏背景图 ---------- */
.bg{
  position:fixed;
  left:0; top:0; right:0; bottom:0;
  z-index:-1;
  background-color:var(--bg-base);
  /* 注意：图片必须写在第一层（最上面），渐变只能放最后一层当兜底；
     写反了渐变会盖住图片，换 bg.jpg 就没效果。
     换图后如果浏览器还显示旧图，把下面的 ?v=2 改成 ?v=3 即可强制刷新。 */
  background-image:
    url("../assets/bg.jpg?v=2"),
    linear-gradient(160deg,#ffe9f4 0%,#f6f1fb 45%,#efe6f6 70%,#e3d8ef 100%);
  background-repeat:no-repeat, no-repeat;
  background-position:center center, center center;
  background-size:cover, cover;
}

/* ---------- 页面 ---------- */
.page{
  width: calc(var(--page-w) * var(--s));
  max-width:100%;
  margin:auto 0;
  padding: calc(44 * var(--s)) 0 calc(20 * var(--s));
}

/* ---------- 标题（粉→紫→蓝 渐变 + 白色描边光晕） ---------- */
.title{
  display:block;
  width:-moz-fit-content;
  width:fit-content;
  max-width:100%;
  margin:0 auto calc(var(--title-margin) * var(--s));
  font-size: calc(var(--title-size) * var(--s));
  line-height: calc(var(--title-line) * var(--s));
  font-weight:800;
  text-align:center;
  white-space:nowrap;
  color:#b6a0f7;                                    /* 兜底色（不支持渐变文字时） */
  filter:
    drop-shadow(0 0 calc(1.5 * var(--s)) rgba(255,255,255,.95))
    drop-shadow(0 0 calc(4 * var(--s)) rgba(255,255,255,.55));
}
.title .gap{ display:inline-block; width: calc(var(--title-gap) * var(--s)); }

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .title{
    background-image: linear-gradient(90deg,
        var(--title-c1) 0%,
        var(--title-c2) 22%,
        var(--title-c3) 42%,
        var(--title-c4) 72%,
        var(--title-c5) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
}

/* ---------- 白色卡片 ---------- */
.card{
  width:100%;
  background:#fff;
  border-radius: calc(var(--card-radius) * var(--s));
  padding: calc(var(--card-pad) * var(--s));
}

/* ---------- 顶部广告图 ---------- */
.ad{
  display:block;
  width:100%;
  height: calc(var(--ad-ratio-h) * var(--s));       /* 老浏览器兜底 */
  border-radius: calc(var(--ad-radius) * var(--s));
  object-fit:cover;
  object-position:center;
  background:#efe6ea;
  -webkit-user-select:none;
  user-select:none;
}
@supports (aspect-ratio:1 / 1){
  .ad{ height:auto; aspect-ratio: var(--ad-ratio-w) / var(--ad-ratio-h); }
}

/* ---------- 公告文字（整段粉→蓝渐变，居中自动换行） ---------- */
.notice{
  margin: calc(var(--ad-margin) * var(--s)) 0 0;
  font-size: calc(var(--notice-size) * var(--s));
  line-height: calc(var(--notice-line) * var(--s));
  text-align:center;
  word-break:break-all;
  color:var(--notice-c2);                            /* 兜底色 */
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .notice{
    background-image: linear-gradient(90deg,
        var(--notice-c1) 0%,
        var(--notice-c2) 45%,
        var(--notice-c3) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
}

/* ---------- 按钮组 ---------- */
.links{
  margin-top: calc(var(--links-margin) * var(--s));
}
.links .btn + .btn{
  margin-top: calc(var(--btn-gap) * var(--s));
}

.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width: calc(var(--btn-w) * var(--s));
  height: calc(var(--btn-h) * var(--s));
  margin-left:auto;
  margin-right:auto;
  border-radius: calc(var(--btn-radius) * var(--s));
  background-color: var(--btn-grad-b);               /* 兜底色 */
  background-image: linear-gradient(90deg, var(--btn-grad-a) 0%, var(--btn-grad-b) 100%);
  text-decoration:none;
  font-size: calc(var(--btn-size) * var(--s));
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
}

/* 左右两条虚线：颜色跟随按钮文字色，半透明 */
.btn::before,
.btn::after{
  content:"";
  flex:0 0 auto;
  width: calc(var(--btn-dash-w) * var(--s));
  height: calc(var(--btn-dash-h) * var(--s));
  opacity: var(--btn-dash-alpha);
  background-image: repeating-linear-gradient(90deg,
      currentColor 0,
      currentColor calc(var(--btn-dash-on) * var(--s)),
      transparent calc(var(--btn-dash-on) * var(--s)),
      transparent calc((var(--btn-dash-on) + var(--btn-dash-off)) * var(--s)));
}
.btn::before{ margin-right: calc(var(--btn-dash-gap) * var(--s)); }
.btn::after{ margin-left: calc(var(--btn-dash-gap) * var(--s)); }

.btn .label{ color:inherit; font-weight:400; }

/* 每个按钮的文字（=虚线）颜色 */
.btn.c1{ color:var(--c1); }
.btn.c2{ color:var(--c2); }
.btn.c3{ color:var(--c3); }
.btn.c4{ color:var(--c4); }

@media (hover:hover){
  .btn:hover{ filter:brightness(1.08); }
}
.btn:active{ filter:brightness(.94); }

/* ---------- 按钮下面的图片 ---------- */
.pic{
  display:block;
  width:100%;
  height:auto;                                       /* 按图片原始比例，不裁切 */
  margin-top: calc(var(--pic-margin) * var(--s));
  border-radius: calc(var(--pic-radius) * var(--s));
  -webkit-user-select:none;
  user-select:none;
}

/* ---------- 图片下面的文字 ---------- */
.extra{
  margin-top: calc(var(--pic-margin) * var(--s));
  text-align:center;
  font-size: calc(var(--extra-size) * var(--s));
  line-height: calc(var(--extra-line) * var(--s));
  color: var(--extra-color);
}
.extra-title{ margin:0; font-weight:700; }
.extra-list{
  margin: calc(10 * var(--s)) 0 0;
  padding:0;
  list-style:none;
}
.extra-list li + li{ margin-top: calc(4 * var(--s)); }