MediaWiki:Citizen.css: различия между версиями

Версия от 22:41, 9 октября 2026

/* Amberfall Wiki / Field Guide 2.1. Citizen 3.x. */
:root.citizen-feature-custom-width-clientpref-standard { --width-layout: 1480px; }
:root.skin-theme-clientpref-night {
  --color-surface-0: #0c0f14;
  --color-surface-1: #10151c;
  --color-surface-2: #182029;
}
@media (prefers-color-scheme: dark) {
  :root.skin-theme-clientpref-os {
    --color-surface-0: #0c0f14;
    --color-surface-1: #10151c;
    --color-surface-2: #182029;
  }
}
/* All site-specific styling is scoped to the main page. */
.af-vanguard {
  --af-bg:#10151b; --af-surface:#171d24; --af-surface-hi:#1d252e;
  --af-line:rgba(195,206,208,.15); --af-mist:#9baeb8; --af-text:#f0eee7;
  --af-white:#f7f1e6; --af-rust:#b56b58; --af-rust-bright:#e0a184;
  --af-serif:Georgia,'Times New Roman',serif;
  --af-sans:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  max-width:1376px; margin:0 auto 64px; color:var(--af-text); font-family:var(--af-sans); font-size:14px; isolation:isolate;
}
.af-vanguard *, .af-vanguard *::before, .af-vanguard *::after { box-sizing:border-box; }
.af-vanguard h2, .af-vanguard h3, .af-vanguard p { padding:0; border:0; background:none; }
.af-vanguard a, .af-vanguard a:visited { text-decoration:none !important; }
.af-vanguard a:focus-visible, .af-vanguard .af-filter:focus-visible { outline:2px solid #ecc6a8; outline-offset:4px; }
.af-vanguard .af-topline { display:flex; align-items:center; gap:18px; padding:11px 4px 15px; font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#89949e; }
.af-topline__identity { color:#dbd7cf; font-weight:800; letter-spacing:.15em; white-space:nowrap; }
.af-topline__slash { color:#b56b58; padding:0 4px; }
.af-topline__detail { flex:1; letter-spacing:.035em; text-transform:none; font-weight:400; }
.af-topline__tag { font-size:10px; border:1px solid #45474b; border-radius:1px; padding:6px 9px; white-space:nowrap; }
.af-vanguard .af-hero { position:relative; display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,1fr); min-height:460px; overflow:hidden; background:#111920; border:1px solid #35404a; box-shadow:0 18px 65px rgba(0,0,0,.17); }
.af-hero::before { content:''; position:absolute; z-index:2; pointer-events:none; inset:0; background:radial-gradient(440px circle at var(--af-pointer-x,72%) var(--af-pointer-y,46%),rgba(236,161,111,.10),transparent 74%); opacity:.68; }
.af-hero__text { position:relative; z-index:4; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-width:0; padding:53px clamp(30px,5vw,72px) 38px; background:linear-gradient(92deg,#111820 0%,#121a21 76%,rgba(18,26,33,.89) 100%); }
.af-kicker { display:flex; align-items:center; gap:13px; margin:0 0 31px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#d3a38c; font-weight:700; }
.af-kicker::before { content:''; display:block; height:1px; width:34px; background:#c97b5b; }
.af-hero__title { font:normal clamp(58px,6.7vw,104px)/.91 var(--af-serif); letter-spacing:-.052em; color:#f3ece0; text-shadow:0 6px 25px rgba(0,0,0,.1); white-space:nowrap; }
.af-hero__title > span { display:block; font:normal clamp(25px,3.2vw,39px)/1.1 var(--af-serif); letter-spacing:.015em; margin-top:14px; color:#b8aea7; }
.af-hero__desc { font:normal clamp(17px,2vw,22px)/1.4 var(--af-serif); margin:28px 0 0; color:#ece3d7; }
.af-hero__sub { max-width:530px; margin:10px 0 0; color:#a5b0b9; font-size:13px; line-height:1.8; }
.af-hero__buttons { display:flex; align-items:stretch; gap:12px; flex-wrap:wrap; margin-top:25px; width:100%; }
.af-hero__buttons > span { display:flex; align-items:stretch; background:none !important; padding:0 !important; margin:0 !important; border:0 !important; border-radius:0; }
.af-vanguard .af-hero__buttons .af-button a, .af-vanguard .af-hero__buttons .af-button a:visited { display:inline-flex !important; width:auto; min-width:174px; justify-content:center; align-items:center; white-space:nowrap; min-height:46px; padding:11px 19px !important; margin:0 !important; font-size:12px; font-weight:700; letter-spacing:.01em; line-height:1.2; text-align:center; border:1px solid #67737a !important; border-radius:2px; transition:transform .24s ease,background .24s ease,border-color .24s ease,color .24s ease; }
.af-vanguard .af-hero__buttons .af-button--main a, .af-vanguard .af-hero__buttons .af-button--main a:visited { background:#c37c62 !important; border-color:#c37c62 !important; color:#15161a !important; }
.af-vanguard .af-hero__buttons .af-button--ghost a, .af-vanguard .af-hero__buttons .af-button--ghost a:visited { background:rgba(255,255,255,.015) !important; color:#ddd9d1 !important; }
.af-vanguard .af-hero__buttons .af-button a:hover { transform:translateY(-2px); text-decoration:none !important; }
.af-vanguard .af-hero__buttons .af-button--main a:hover { background:#e1a085 !important; border-color:#e1a085 !important; }
.af-vanguard .af-hero__buttons .af-button--ghost a:hover { border-color:#d6c8bc !important; background:rgba(255,255,255,.07) !important; }
.af-hero__meta { display:flex; align-items:center; gap:12px; margin-top:34px; font-size:9px; letter-spacing:.16em; color:#72828c; }
.af-hero__meta-divider { height:1px; width:28px; background:#66727a; }
/* One atmospheric painting, not a full-page wallpaper. The picture never sits under body text. */
.af-art { position:relative; overflow:hidden; min-height:100%; background:#18212b; isolation:isolate; }
.af-art__painting { position:absolute; inset:-16px; background:url('/index.php/Special:Redirect/file/AmberfallWiki-Hero-v21.jpg') 58% 50%/cover no-repeat; transform:translate3d(var(--af-art-x,0px),var(--af-art-y,0px),0) scale(1.055); transition:transform .45s cubic-bezier(.2,.75,.2,1); will-change:transform; }
.af-art__shadow { position:absolute; inset:0; background:linear-gradient(90deg,rgba(14,20,27,.25),transparent 38%),linear-gradient(0deg,rgba(12,17,23,.46),transparent 32%); }
.af-art__fog { position:absolute; inset:auto -30% -20% -30%; height:35%; background:radial-gradient(ellipse,rgba(161,180,190,.15),transparent 65%); filter:blur(20px); animation:af-fog-drift 24s ease-in-out infinite alternate; pointer-events:none; }
.af-art__fog--far { bottom:19%; opacity:.45; animation-direction:alternate-reverse; animation-duration:30s; }
.af-art__caption { position:absolute; z-index:2; bottom:18px; right:18px; color:#c7c0bc; font-size:9px; font-weight:600; letter-spacing:.14em; opacity:.72; text-shadow:0 1px 5px #111; }
@keyframes af-fog-drift { from { transform:translateX(-3%);opacity:.35 } to { transform:translateX(4%);opacity:.7 } }
.af-rail { display:flex; align-items:center; gap:24px; padding:17px 1px; border-bottom:1px solid #30363b; font-size:10px; letter-spacing:.05em; color:var(--af-mist); }
.af-rail__rule { height:1px; flex:1; background:linear-gradient(90deg,#845b4d,#2a343b 75%); }
.af-rail > span:last-child { font-size:9px; letter-spacing:.16em; color:#b78772; white-space:nowrap; }
.af-sections { padding-top:54px; }
.af-section-head { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:22px; }
.af-overline { font-size:10px; letter-spacing:.14em; color:#b98370; font-weight:700; }
.af-vanguard .af-section-head__title { margin:8px 0 0; font:normal clamp(27px,3.2vw,38px)/1.15 var(--af-serif); color:#eadfd2; }
.af-vanguard .af-section-head__desc { margin:10px 0 0; font-size:12px; color:#a3afb6; line-height:1.6; }
.af-filters { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; padding-bottom:2px; }
.af-filter { padding:9px 12px; border:1px solid #38414a; border-radius:2px; font-size:11px; color:#b2b9bd; cursor:pointer; transition:background .2s,border-color .2s,color .2s; user-select:none; }
.af-filter:hover { border-color:#a17261; color:#e7d3c8; }
.af-filter.is-active { background:#b7755d; border-color:#b7755d; color:#10161b; font-weight:750; }
.af-index { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.af-entry { position:relative; display:flex; gap:15px; align-items:flex-start; min-width:0; min-height:166px; padding:24px 22px; border:1px solid #35414a; background:linear-gradient(145deg,#1b242d,#171d25 70%); overflow:hidden; transition:transform .3s ease,border-color .3s ease,background .3s ease,box-shadow .3s ease; }
.af-entry::before { content:''; position:absolute; inset:0; background:radial-gradient(190px circle at var(--af-card-x,50%) var(--af-card-y,50%),rgba(221,146,109,.13),transparent 85%); opacity:0; transition:opacity .3s; pointer-events:none; }
.af-entry::after { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:#c0836c; transform:scaleY(0); transform-origin:center; transition:transform .32s ease; }
.af-entry:hover, .af-entry:focus-within { transform:translateY(-4px); border-color:#8d6a62; box-shadow:0 16px 38px rgba(0,0,0,.17); }
.af-entry:hover::before { opacity:1; }
.af-entry:hover::after,.af-entry:focus-within::after { transform:scaleY(1); }
.af-entry.is-hidden { display:none; }
.af-entry__symbol { width:40px; height:40px; flex:none; position:relative; border:1px solid #4b5a60; background:linear-gradient(135deg,#273641,#1a2831); transform:rotate(-8deg); }
.af-entry__symbol::before,.af-entry__symbol::after {content:'';position:absolute;display:block;}
.af-entry__symbol--world::before { width:22px;height:22px; border:1px solid #b58d7a;border-radius:50%;top:8px;left:8px; }
.af-entry__symbol--world::after { width:10px;height:26px;border-left:1px solid #b58d7a;border-right:1px solid #b58d7a;top:6px;left:14px; }
.af-entry__symbol--people::before {border:1px solid #bb9c88;border-radius:50%;height:12px;width:12px;left:13px;top:6px;}
.af-entry__symbol--people::after {border:1px solid #bb9c88;border-radius:14px 14px 2px 2px;height:13px;width:21px;left:9px;top:20px;}
.af-entry__symbol--roles::before {width:23px;height:22px;left:8px;top:8px;background:#b98d79;clip-path:polygon(50% 0,100% 20%,90% 75%,50% 100%,10% 75%,0 20%);}
.af-entry__symbol--roles::after {width:15px;height:14px;left:12px;top:11px;background:#22303a;clip-path:polygon(50% 0,100% 20%,85% 70%,50% 100%,15% 70%,0 20%);}
.af-entry__symbol--magic::before {height:24px;width:24px;left:7px;top:7px;border:1px solid #a59ec3;transform:rotate(45deg);}
.af-entry__symbol--magic::after {height:12px;width:12px;left:13px;top:13px;background:#aaa1c8;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);}
.af-entry__symbol--combat::before {width:3px;height:27px;top:4px;left:18px;background:#b9afb1;transform:rotate(42deg);}
.af-entry__symbol--combat::after {width:19px;height:3px;top:22px;left:9px;background:#b9afb1;transform:rotate(42deg);}
.af-entry__symbol--guide::before {width:24px;height:25px;top:6px;left:7px;border:1px solid #c3a77f;border-radius:2px;box-shadow:inset 10px 0 0 rgba(195,167,127,.1);}
.af-entry__symbol--guide::after {top:12px;left:13px;width:14px;height:1px;background:#c3a77f;box-shadow:0 6px #c3a77f,0 12px #c3a77f;}
.af-entry__body { position:relative; flex:1; min-width:0; }
.af-entry__overline { font-size:9px; letter-spacing:.14em; color:#bd9180; font-weight:700; }
.af-vanguard .af-entry__title { margin:10px 0 8px; font:normal 20px/1.18 var(--af-serif); }
.af-vanguard .af-entry__title a, .af-vanguard .af-entry__title a:visited, .af-vanguard .af-entry__title a.new { color:#ece4db !important; }
.af-vanguard .af-entry__title a:hover { color:#f2ad8c !important; }
.af-entry__desc { font-size:12px; line-height:1.55; color:#a4adb4; }
.af-entry__arrow { position:absolute; top:15px;right:17px;font-size:17px;color:#b58674;opacity:.5;transition:opacity .2s,transform .2s; }
.af-entry:hover .af-entry__arrow { transform:translate(3px,-3px);opacity:1; }
.af-index__foot { display:flex; justify-content:space-between; gap:24px; margin-top:16px; font-size:11px; color:#8b989f; }
.af-bottom { display:grid; grid-template-columns:1.35fr .7fr; gap:9vw; padding:56px 0 45px; margin-top:43px; border-top:1px solid #344049; }
.af-vanguard .af-bottom__lead h2 { font:normal clamp(25px,3vw,38px)/1.18 var(--af-serif); margin:13px 0; color:#e7dfd4; }
.af-vanguard .af-bottom__lead p { font-size:12px;line-height:1.7;color:#a0aab1;max-width:530px;margin:0 0 19px; }
.af-vanguard .af-bottom__action a { font-size:12px;font-weight:700;color:#d6a18a !important;border-bottom:1px solid #916955;padding-bottom:5px; }
.af-bottom__label { font-size:10px;color:#ae8475;letter-spacing:.16em;font-weight:700;margin:6px 0 12px; }
.af-bottom__links > div:not(:first-child) { border-bottom:1px solid #333e47; }
.af-bottom__links a, .af-bottom__links a:visited { display:block;padding:10px 0;color:#c8d0d0 !important;font-size:12px; }
.af-bottom__links a:hover { color:#f0ad92 !important; }
.af-foot { display:flex; justify-content:space-between; gap:20px;border-top:1px solid #35404a;padding:18px 0;color:#87929c;font-size:10px;letter-spacing:.06em; }
.af-foot span:first-child {color:#bb9786;letter-spacing:.13em;font-weight:700;}
/* Only enhanced when JS is available; content remains usable without JavaScript. */
/* The entrance animation affects only the hero text; other sections are never hidden. */
.af-vanguard.af-js-ready .af-hero__text { animation:af-enter .6s ease-out both; }
@keyframes af-enter {from {opacity:.75; transform:translateY(7px);} to {opacity:1; transform:none;}}
@media (max-width:1120px){
  .af-hero__text {padding:46px 35px 35px;}
  .af-hero__title {font-size:clamp(56px,6.2vw,82px);}
  .af-index {grid-template-columns:repeat(2,minmax(0,1fr));}
  .af-section-head {align-items:flex-start; flex-direction:column;}
  .af-filters {justify-content:flex-start;}
}
@media (max-width:760px){
  .af-vanguard {margin:0 auto 30px;}
  .af-topline__detail {display:none;}
  .af-topline__tag {margin-left:auto;}
  .af-vanguard .af-hero {display:flex; flex-direction:column-reverse;}
  .af-art {min-height:225px; height:225px;}
  .af-art__moon {width:80px;top:12%;}
  .af-art__citadel {height:70%;bottom:0;}
  .af-hero__text {padding:24px 24px 31px;}
  .af-kicker {margin-bottom:19px;}
  .af-hero__title {font-size:clamp(48px,12vw,75px);white-space:normal;}
  .af-hero__title > span {font-size:26px;margin-top:6px;}
  .af-hero__desc {margin-top:22px;font-size:19px;}
  .af-hero__buttons {gap:9px;}
  .af-hero__meta {margin-top:24px;}
  .af-rail {gap:14px;}
  .af-rail > span:last-child {display:none;}
  .af-sections {padding-top:36px;}
  .af-index {grid-template-columns:1fr; gap:8px;}
  .af-entry {min-height:136px;padding:21px 19px;}
  .af-bottom {grid-template-columns:1fr;gap:31px;margin-top:31px;padding-top:37px;}
  .af-index__foot {display:block;}
  .af-index__foot span {display:block;margin-bottom:6px;}
}
@media (max-width:400px){
  .af-topline__tag {display:none;}
  .af-hero__buttons {flex-direction:column; align-items:stretch;}
  .af-hero__buttons > span,.af-vanguard .af-hero__buttons .af-button a {width:100%;}
  .af-filters {gap:5px;}
  .af-filter {padding:8px 10px;}
}
@media (prefers-reduced-motion:reduce){
  .af-vanguard *, .af-vanguard *::before,.af-vanguard *::after {animation:none !important;transition:none !important;scroll-behavior:auto !important;}
  .af-vanguard.af-js-ready .af-reveal {opacity:1;transform:none;}
  .af-art__moon,.af-art__citadel,.af-art__ridge {transform:none !important;}
}

/* v2.1: restrict highlights and decoration. */
.af-hero__buttons { gap:10px; }
.af-hero__buttons > span { flex:0 0 auto; }
.af-hero__buttons .af-button a { box-sizing:border-box !important; }
.af-vanguard .af-hero__buttons .af-button--main a,
.af-vanguard .af-hero__buttons .af-button--main a:visited { background:#a75f51 !important; border-color:#a75f51 !important; color:#fff8ef !important; }
.af-hero__title { font-size:clamp(55px,6vw,91px); }
.af-hero__text { padding-left:clamp(28px,4.2vw,63px);padding-right:clamp(26px,3.7vw,53px); }
.af-vanguard .af-hero { grid-template-columns:minmax(0,1fr) minmax(0,1.06fr); min-height:440px; }
.af-entry--artworld, .af-entry--artmagic { background-size:cover; background-position:center right; }
.af-entry--artworld {background-image:linear-gradient(90deg,#1b242d 0%,rgba(26,35,44,.97) 54%,rgba(26,35,44,.64) 100%),url('/index.php/Special:Redirect/file/AmberfallWiki-World-v21.jpg');}
.af-entry--artmagic {background-image:linear-gradient(90deg,#1b242d 0%,rgba(26,35,44,.96) 54%,rgba(26,35,44,.64) 100%),url('/index.php/Special:Redirect/file/AmberfallWiki-Magic-v21.jpg');}
.af-entry__body,.af-entry__symbol { z-index:1; }
.af-index .af-entry {min-height:155px;}
.af-art__painting, .af-art__fog { pointer-events:none; }
@media (max-width:760px) {
  .af-vanguard .af-hero {min-height:0;}
  .af-art {height:235px;min-height:235px;}
  .af-hero__title {font-size:clamp(48px,11vw,73px);}
  .af-hero__buttons > span {flex:1 1 100%;}
  .af-vanguard .af-hero__buttons .af-button a {width:100%;}
}
@media (prefers-reduced-motion:reduce) {
  .af-art__painting {transition:none !important; transform:none !important;}
}

@media (prefers-reduced-motion:reduce) { .af-vanguard.af-js-ready .af-hero__text {animation:none !important;} }