模板:Fstpagetest styles：修订间差异

2026年2月14日 (六) 00:40的版本

/* =========================
   Fstpagetest_styles (MW 1.39 TemplateStyles-safe)
   - NO url(), NO background-image
   - NO iframe, NO JS, NO input/radio/checkbox reliance
   - interactions: :hover + :target
   - layout: flex + simple blocks
========================= */

/* ---------- Base ---------- */
.fstx{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 14px 44px 14px;
  color: rgba(0,0,0,.86);
  line-height: 1.6;
}

.fstx a{
  color:#8f1f1f;
  font-weight: 800;
  text-decoration: none;
}

.fstx a:hover{ text-decoration: underline; }

.fstx-mini{
  margin-top:10px;
  font-size:12px;
  color: rgba(0,0,0,.58);
  line-height:1.7;
}

.fstx-blocktitle{
  font-size:14px;
  font-weight:900;
  letter-spacing:.2px;
  margin-bottom:10px;
}

/* ---------- HERO (image as <img>, overlay content) ---------- */
.fstx-hero{
  position: relative;
  margin-top: 12px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
}

/* Wikitext: [[File:xxx.png|class=fstx-hero-bg|frameless]] */
.fstx-hero-bg{
  width: 100%;
  height: 360px;
  display: block;
  object-fit: cover;
}

/* overlay card layer */
.fstx-hero-overlay{
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  padding: 18px;
  background: rgba(255,255,255,.82);
}

/* header box */
.fstx-hero-head{
  padding: 14px 14px 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.78);
}

.fstx-kicker{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(182,55,55,.22);
  background: rgba(182,55,55,.10);
  color:#8f1f1f;
  font-size:12px;
  font-weight:900;
}

.fstx-title{
  margin-top:10px;
  font-size:34px;
  font-weight:900;
  letter-spacing:.6px;
}

.fstx-sub{
  margin-top:6px;
  font-size:13px;
  color: rgba(0,0,0,.65);
  line-height:1.7;
}

/* "dynamic" banner - CSS-only opacity rotation */
.fstx-banner{
  position: relative;
  margin-top: 10px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  overflow: hidden;
}

.fstx-bitem{
  position:absolute;
  left:12px;
  right:12px;
  top:10px;
  font-size:13px;
  font-weight:900;
  color: rgba(0,0,0,.72);
  opacity: 0;
  animation: fstxFade 12s infinite;
}

.fstx-b2{ animation-delay: 4s; }
.fstx-b3{ animation-delay: 8s; }

@keyframes fstxFade{
  0%{opacity:0;}
  8%{opacity:1;}
  30%{opacity:1;}
  38%{opacity:0;}
  100%{opacity:0;}
}

/* top grid under banner */
.fstx-topgrid{
  display:flex;
  gap:14px;
  margin-top:12px;
  align-items:stretch;
}

/* KPIs */
.fstx-kpis{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.fstx-kpi{
  min-width: 160px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.78);
}

.fstx-kpi-num{
  font-weight: 900;
  font-size: 16px;
}

.fstx-kpi-text{
  margin-top:2px;
  font-size:12px;
  color: rgba(0,0,0,.62);
  font-weight: 800;
}

/* small nav row */
.fstx-nav{
  margin-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.fstx-nav a{
  display:inline-block;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.70);
  color: rgba(0,0,0,.72);
  font-weight:900;
}

.fstx-nav a:hover{
  border-color: rgba(182,55,55,.22);
  background: rgba(182,55,55,.06);
  color:#8f1f1f;
  text-decoration:none;
}

.fstx-note{
  margin-top:10px;
  font-size:12px;
  color: rgba(0,0,0,.58);
  line-height:1.7;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.78);
}

/* ---------- Left quick links ---------- */
.fstx-quick{
  flex: 1 1 360px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  padding:12px;
}

.fstx-quickgrid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.fstx-q{
  width: 92px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  background:#fafbfe;
  padding:10px 8px;
  text-align:center;
  font-size:12px;
  font-weight:900;
  line-height:1.35;
}

.fstx-q:hover{
  border-color: rgba(182,55,55,.20);
  background: rgba(182,55,55,.06);
}

/* force icons align */
.fstx-q img{
  display:block;
  margin: 0 auto 6px auto;
}

/* ---------- World tiles (image inside tile, overlay content) ---------- */
.fstx-worlds{
  flex: 0 0 460px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* tile container */
.fstx-worldtile{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background:#fff;
  height: 120px;
}

/* Wikitext: [[File:xxx.png|class=fstx-wimg|frameless]] */
.fstx-wimg{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* content overlay */
.fstx-wcontent{
  position:absolute;
  left:10px;
  right:10px;
  top:10px;
  bottom:10px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.84);
  padding: 10px 12px;
}

.fstx-worldtile:hover{
  border-color: rgba(182,55,55,.18);
}

.fstx-worldtile:hover .fstx-wcontent{
  background: rgba(255,255,255,.92);
  border-color: rgba(182,55,55,.14);
}

.fstx-wname{
  font-size:18px;
  font-weight:900;
  letter-spacing:.3px;
}

.fstx-wdesc{
  margin-top:4px;
  font-size:12px;
  color: rgba(0,0,0,.62);
  font-weight:800;
}

/* ---------- MID ---------- */
.fstx-mid{
  margin-top:16px;
}

.fstx-mid-inner{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

/* Tabs left */
.fstx-tabs{
  flex: 1 1 620px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  padding:12px;
}

.fstx-tabbar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.fstx-tabbar a{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:#fbfbfd;
  color: rgba(0,0,0,.70);
  font-weight:900;
}

.fstx-tabbar a:hover{
  border-color: rgba(182,55,55,.20);
  background: rgba(182,55,55,.06);
  color:#8f1f1f;
  text-decoration:none;
}

/* Pills */
.fstx-pill{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
}

.fstx-pill-green{ border-color: rgba(60,160,120,.22); background: rgba(60,160,120,.10); color: rgba(10,90,60,.95); }
.fstx-pill-amber{ border-color: rgba(255,153,0,.22); background: rgba(255,153,0,.14); color: rgba(110,70,0,.95); }
.fstx-pill-red{ border-color: rgba(182,55,55,.22); background: rgba(182,55,55,.10); color:#8f1f1f; }

.fstx-panelhint{
  font-size:12px;
  color: rgba(0,0,0,.60);
  font-weight:800;
}

/* panels (CSS-only :target) */
.fstx-panel{
  display:none;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  background:#fbfbfd;
  padding:12px;
}

.fstx-panel-default{ display:block; }

#t1:target, #t2:target, #t3:target{ display:block; }
#t1:target ~ .fstx-panel-default,
#t2:target ~ .fstx-panel-default,
#t3:target ~ .fstx-panel-default{ display:none; }

.fstx-panelhead{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}

.fstx-panelbig{
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  padding:12px;
}

.fstx-panelbig-title{
  font-weight:900;
  font-size:16px;
}

.fstx-panelbig-text{
  margin-top:6px;
  color: rgba(0,0,0,.72);
  line-height:1.7;
  font-size:13px;
}

.fstx-reclist{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.fstx-rec{
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  padding:10px 12px;
}

.fstx-rec-title{ font-weight:900; }
.fstx-rec-sub{
  margin-top:2px;
  color: rgba(0,0,0,.62);
  font-size:12px;
  line-height:1.6;
}

.fstx-panelfoot{
  margin-top:10px;
  font-size:12px;
  color: rgba(0,0,0,.62);
  font-weight:800;
}

/* Notice right */
.fstx-notice{
  flex: 0 0 420px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  padding:12px;
}

.fstx-ncard{
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  background:#fbfbfd;
  padding:12px;
}

.fstx-nhead{
  font-weight:900;
  margin-bottom:6px;
}

.fstx-nitem{
  font-size:13px;
  line-height:1.7;
  color: rgba(0,0,0,.72);
  margin-top:4px;
}

.fstx-nbanner{
  margin-top:10px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  background:#fbfbfd;
  padding:10px;
}

.fstx-nbanner-title{
  font-weight:900;
  margin-bottom:8px;
}

.fstx-nbanner-sub{
  margin-top:6px;
  font-size:12px;
  color: rgba(0,0,0,.58);
  line-height:1.6;
}

/* make images inside cards responsive */
.fstx-notice img,
.fstx-tabs img,
.fstx-worldinner img{
  max-width:100%;
  height:auto;
  border-radius: 12px;
  display:block;
}

/* ---------- World sections ---------- */
.fstx-worldsec{ margin-top:16px; }

.fstx-worldinner{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.fstx-wbox{
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  padding:12px;
}

.fstx-wtext{
  margin-top:-4px;
  margin-bottom:10px;
  color: rgba(0,0,0,.70);
  line-height:1.7;
  font-size:13px;
}

/* ---------- Landmarks ---------- */
.fstx-land{ margin-top:16px; }

.fstx-land-inner{
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  padding:14px;
}

.fstx-landtitle{
  font-size:22px;
  font-weight:900;
  text-align:center;
  letter-spacing:.6px;
  margin: 8px 0;
}

.fstx-landsub{
  text-align:center;
  color: rgba(0,0,0,.60);
  font-size:13px;
  line-height:1.7;
  margin-bottom:12px;
}

.fstx-landgrid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.fstx-landcard{
  flex: 1 1 260px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  background:#fbfbfd;
  padding:12px;
}

.fstx-landh{
  font-weight:900;
  font-size:16px;
}

.fstx-landp{
  margin-top:8px;
  line-height:1.8;
  color: rgba(0,0,0,.72);
  font-size:13px;
}

/* ---------- Footer ---------- */
.fstx-foot{ margin-top:16px; }

.fstx-foot-inner{
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  padding:14px;
}

.fstx-footbox{
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  background:#fbfbfd;
  padding:12px;
}

.fstx-foottitle{
  font-weight:900;
  font-size:14px;
  margin-bottom:6px;
}

.fstx-foottext{
  color: rgba(0,0,0,.72);
  line-height:1.8;
  font-size:13px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1020px){
  .fstx-hero-bg{ height: 320px; }
  .fstx-topgrid{ flex-direction:column; }
  .fstx-worlds{ flex:1 1 auto; }
  .fstx-mid-inner{ flex-direction:column; }
  .fstx-notice{ flex:1 1 auto; }
}