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

Текущая версия от 23:20, 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;} }

/* --- Amberfall hero buttons fix --- */
.af-hero__actions,
.af-home-hero__actions,
.af-cta-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
}

.af-hero__actions .af-button,
.af-home-hero__actions .af-button,
.af-cta-row .af-button,
.af-hero__actions .mw-ui-button,
.af-home-hero__actions .mw-ui-button,
.af-cta-row .mw-ui-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 0 22px;
	width: auto;
	min-width: 180px;
	max-width: 220px;
	flex: 0 0 auto;
	text-align: center;
	white-space: nowrap;
}

@media (max-width: 720px) {
	.af-hero__actions,
	.af-home-hero__actions,
	.af-cta-row {
		flex-direction: column;
	}

	.af-hero__actions .af-button,
	.af-home-hero__actions .af-button,
	.af-cta-row .af-button,
	.af-hero__actions .mw-ui-button,
	.af-home-hero__actions .mw-ui-button,
	.af-cta-row .mw-ui-button {
		width: 100%;
		max-width: none;
	}
}

/* Amberfall hero buttons: parsed MediaWiki links, v2.1.2 */
.af-vanguard .af-hero__buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 24px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}
/* MediaWiki can wrap wikitext links in a paragraph. */
.af-vanguard .af-hero__buttons > p { display: contents !important; }
.af-vanguard .af-hero__buttons a {
    box-sizing: border-box !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 158px !important;
    width: auto !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 18px !important;
    margin: 0 !important;
    border: 1px solid #5e6871 !important;
    border-radius: 3px !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.af-vanguard .af-hero__buttons a[href*="#af-sections"] {
    color: #fff6ee !important;
    background: #a75f51 !important;
    border-color: #a75f51 !important;
}
.af-vanguard .af-hero__buttons a.external {
    color: #e9e4dd !important;
    background: rgba(255,255,255,.025) !important;
    border-color: #53606a !important;
}
.af-vanguard .af-hero__buttons a:hover { transform: translateY(-2px); }
@media (max-width: 540px) {
    .af-vanguard .af-hero__buttons { flex-direction: column !important; }
    .af-vanguard .af-hero__buttons a { width: 100% !important; }
}
@media (prefers-reduced-motion: reduce) {
    .af-vanguard .af-hero__buttons a { transition: none !important; transform: none !important; }
}

/* AMBERFALL SIDEBAR V2.2 BEGIN */
/* Только штатная выдвижная панель Citizen. Главная, кнопки и статьи не меняются. */
#citizen-drawer__card {
    --af-nav-accent: #bc7967;
    --af-nav-outline: rgba(172, 185, 192, .15);
    --af-nav-hover: rgba(188, 121, 103, .12);
    width: min(354px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    border-radius: 7px;
}
#citizen-drawer__card .citizen-drawer__header {
    justify-content: flex-start;
    gap: 13px;
    padding: 18px 19px 15px;
    border-bottom: 1px solid var(--af-nav-outline);
}
#citizen-drawer__card .mw-logo-wordmark {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: .025em;
}
#citizen-main-menu.citizen-drawer__menu {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    justify-content: stretch;
    padding: 10px 12px 17px;
    margin-bottom: 0;
}
#citizen-main-menu > .citizen-menu {
    min-width: 0;
    padding: 9px 0 12px;
}
#citizen-main-menu > .citizen-menu + .citizen-menu {
    border-top: 1px solid var(--af-nav-outline);
}
#citizen-main-menu .citizen-menu__heading {
    margin: 0;
    padding: 7px 12px 9px;
    color: var(--af-nav-accent);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .095em;
    text-transform: uppercase;
}
#citizen-main-menu .citizen-menu__content-list {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
}
#citizen-main-menu .mw-list-item a {
    display: flex;
    align-items: center;
    min-height: 37px;
    padding: 8px 12px;
    border-radius: 4px;
    line-height: 1.45;
    font-size: 13px;
    font-weight: 450;
    transition: background-color .16s ease, color .16s ease, opacity .16s ease;
}
#citizen-main-menu .mw-list-item a:hover {
    background: var(--af-nav-hover);
    text-decoration: none;
}
#citizen-main-menu .mw-list-item a:focus-visible {
    outline: 2px solid var(--af-nav-accent);
    outline-offset: -2px;
}
#citizen-main-menu .mw-list-item a.new {
    opacity: .7;
}
#citizen-main-menu .mw-list-item a.new:hover,
#citizen-main-menu .mw-list-item a.new:focus-visible {
    opacity: 1;
}
/* Тёмный вариант: только при выбранной тёмной теме Citizen. */
:root.skin-theme-clientpref-night #citizen-drawer__card {
    background: #151b22;
    border: 1px solid #333b44;
    color: #e9e5dc;
}
@media (prefers-color-scheme: dark) {
    :root.skin-theme-clientpref-os #citizen-drawer__card {
        background: #151b22;
        border: 1px solid #333b44;
        color: #e9e5dc;
    }
}
@media (max-width: 600px) {
    #citizen-drawer__card .citizen-drawer__header {
        padding: 14px 15px 11px;
    }
    #citizen-main-menu.citizen-drawer__menu {
        padding: 8px 9px 14px;
    }
}
@media (prefers-reduced-motion: reduce) {
    #citizen-main-menu .mw-list-item a {
        transition: none;
    }
}
/* AMBERFALL SIDEBAR V2.2 END */