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

Версия от 21:39, 9 октября 2026

/* Amberfall Wiki — Chronicle v1.2 / Citizen 3.x */
/* Главная страница: самостоятельная композиция без изменения служебных панелей. */
:root {
  --color-progressive-oklch__h: 18;
  --color-progressive-oklch__c: .052;
  --af-surface: #f2f0ed;
  --af-raised: #e7e4df;
  --af-ink: #24262a;
  --af-secondary: #646770;
  --af-line: rgba(44,42,42,.18);
  --af-oxide: #863f3c;
  --af-oxide-hover: #a05149;
  --af-serif: Georgia, 'Times New Roman', serif;
  --af-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
:root.citizen-feature-custom-width-clientpref-standard {
  --width-layout: 1380px;
}
:root.skin-theme-clientpref-night,
:root.skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1 {
  --af-surface: #191b1f;
  --af-raised: #22252a;
  --af-ink: #e8e4dc;
  --af-secondary: #adb0b6;
  --af-line: rgba(227,226,219,.13);
  --af-oxide: #bb7167;
  --af-oxide-hover: #d18b81;
  --color-surface-0: #141519;
  --color-surface-1: #1c1e22;
  --color-surface-2: #25272d;
}
@media (prefers-color-scheme:dark) {
  :root.skin-theme-clientpref-os {
    --af-surface: #191b1f;
    --af-raised: #22252a;
    --af-ink: #e8e4dc;
    --af-secondary: #adb0b6;
    --af-line: rgba(227,226,219,.13);
    --af-oxide: #bb7167;
    --af-oxide-hover: #d18b81;
    --color-surface-0: #141519;
    --color-surface-1: #1c1e22;
    --color-surface-2: #25272d;
  }
}
.af-land, .af-page { color: var(--af-ink); font-family: var(--af-sans); }
.af-land *, .af-page * { box-sizing: border-box; }
.af-land { margin: 0 auto 55px; max-width: 1270px; }
.skin-citizen .mw-body-content .af-land a,
.skin-citizen .mw-body-content .af-page a { text-decoration: none; }
.skin-citizen .mw-body-content .af-land a:hover,
.skin-citizen .mw-body-content .af-page a:hover { text-decoration: underline; text-underline-offset:3px; }
.af-land a:focus-visible, .af-page a:focus-visible { outline: 2px solid var(--af-oxide); outline-offset: 3px; }
.af-brandline { display:flex; justify-content:space-between; align-items:center; gap:12px; padding: 4px 0 13px; font-size:11px; letter-spacing:.075em; font-weight:700; color:var(--af-secondary); }
.af-brandline > span:first-child { color:var(--af-oxide); }
.af-brandline__right { letter-spacing:0; font-weight:400; }
.af-banner { display:grid; grid-template-columns:minmax(0,1.75fr) minmax(250px,.65fr); border-top:2px solid #78433c; background:#202329; color:#e7e4db; }
.af-banner__content { padding:34px 40px 31px; min-width:0; background-image:linear-gradient(118deg,rgba(110,59,57,.14),transparent 65%); }
.af-banner__kicker { font-size:11px; font-weight:700; color:#bc9e95; letter-spacing:.08em; }
.af-banner__title { margin:14px 0 2px; color:#f0ece3; font: normal clamp(36px,4vw,56px)/1.05 var(--af-serif); letter-spacing:-.03em; }
.af-banner__title span { color:#b4a6a0; font-size:.62em; letter-spacing:0; }
.af-banner__subtitle { font-size:15px; font-weight:600; color:#ded5c9; }
.af-banner__text { max-width:690px; margin:14px 0 0; color:#bdc1c4; font-size:13px; line-height:1.7; }
.af-banner__actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:20px; }
.af-link-button a { display:inline-block; font-weight:600; font-size:12px; padding:10px 15px; border:1px solid transparent; transition: background .15s, color .15s; }
.af-link-button--solid a { color:#f6f1ec !important; background:#884742; border-color:#884742; }
.af-link-button--solid a:hover { background:#a45a53; border-color:#a45a53; text-decoration:none !important; }
.af-link-button--plain a { color:#dbd5ce !important; border-color:#555960; }
.af-link-button--plain a:hover { background:rgba(255,255,255,.06); text-decoration:none !important; }
.af-banner__aside { min-width:0; padding:29px 26px 25px; background:#24272c; border-left:1px solid #404047; }
.af-banner__aside-caption { font-size:11px; color:#bf827b; font-weight:700; }
.af-banner__aside-title { margin:6px 0 12px; font:normal 20px/1.3 var(--af-serif); color:#e9e2d8; }
.af-banner__quick a { display:block; padding:10px 0; border-top:1px solid #393d44; color:#ddd8cf !important; font-size:12px; line-height:1.4; }
.af-banner__quick a:hover { color:#e9a39a !important; }
.af-update { display:flex; align-items:baseline; gap:12px; padding:13px 0 14px; color:var(--af-secondary); border-bottom:1px solid var(--af-line); font-size:12px; line-height:1.6; }
.af-update__label { color:var(--af-oxide); white-space:nowrap; font-weight:700; }
.af-directory { margin-top:29px; }
.af-directory__lead { display:flex; justify-content:space-between; align-items:end; gap:24px; margin:0 0 17px; }
.af-eyebrow { color:var(--af-oxide); font-size:10px; letter-spacing:.085em; font-weight:800; }
.af-heading { font:normal 28px/1.25 var(--af-serif); color:var(--af-ink); margin:5px 0 0; }
.af-heading--small { font-size:23px; }
.af-directory__hint { color:var(--af-secondary); font-size:12px; }
.af-directory__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 24px; border-top:1px solid var(--af-line); }
.af-directory-card { min-width:0; padding:17px 0 18px; border-bottom:1px solid var(--af-line); }
.af-directory-card__kind { font-size:10px; font-weight:600; color:var(--af-oxide); margin-bottom:8px; }
.af-directory-card__title { font-size:17px; line-height:1.35; font-weight:650; }
.af-directory-card__title a { color:var(--af-ink) !important; }
.af-directory-card__title a:hover { color:var(--af-oxide) !important; }
.af-directory-card__description { margin-top:5px; font-size:12px; line-height:1.55; color:var(--af-secondary); }
.af-lower { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(290px,.72fr); gap:42px; margin-top:39px; }
.af-lower__main, .af-lower__side { min-width:0; }
.af-topic-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:23px; border-top:1px solid var(--af-line); margin-top:15px; }
.af-topic-list > div { min-width:0; border-bottom:1px solid var(--af-line); }
.af-topic-list a { display:block; padding:12px 0; color:var(--af-ink) !important; font-size:13px; }
.af-topic-list a:hover, .af-side-links a:hover { color:var(--af-oxide) !important; }
.af-lower__side { background:var(--af-surface); padding:21px 24px 24px; border:1px solid var(--af-line); }
.af-lower__text { font-size:12px; line-height:1.7; color:var(--af-secondary); padding-top:12px; }
.af-side-links { margin-top:12px; }
.af-side-links > div { border-top:1px solid var(--af-line); }
.af-side-links a { display:block; padding:11px 0; color:var(--af-ink) !important; font-size:12px; }
.af-land__footer { display:flex; justify-content:space-between; gap:12px; border-top:1px solid var(--af-line); padding-top:17px; margin-top:39px; font-size:11px; color:var(--af-secondary); }
/* Статьи: спокойная типографика, не затрагиваем редактор и админку. */
.af-page-lead { border-left:2px solid var(--af-oxide); padding:13px 17px; margin:8px 0 23px; background:var(--af-surface); font-size:14px; line-height:1.7; }
.af-page h2 { font-family:var(--af-serif); font-size:25px; margin-top:28px; }
.af-page h3 { font-size:17px; margin-top:22px; }
.af-page .af-summary-card { margin:16px 0; padding:16px 19px; border:1px solid var(--af-line); background:var(--af-surface); }
.af-source-note { padding:13px 0; margin-top:23px; border-top:1px solid var(--af-line); color:var(--af-secondary); font-size:12px; }
.af-source-note a { color:var(--af-oxide) !important; }
.af-page .wikitable { border-collapse:collapse; }
.af-page .wikitable th { background:var(--af-surface); }
@media (max-width: 1000px) {
  .af-directory__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .af-banner { grid-template-columns:minmax(0,1.5fr) minmax(220px,.8fr); }
  .af-banner__content { padding:31px; }
}
@media (max-width: 700px) {
  .af-land { margin-bottom:26px; }
  .af-brandline { padding:5px 0 12px; }
  .af-banner { display:block; }
  .af-banner__content { padding:27px 21px 24px; }
  .af-banner__title { font-size:44px; }
  .af-banner__aside { border-left:0; border-top:1px solid #404047; padding:20px 21px; }
  .af-banner__quick a { padding:9px 0; }
  .af-update { display:block; }
  .af-update__label { margin-right:8px; }
  .af-directory__lead { display:block; }
  .af-directory__hint { margin-top:9px; }
  .af-heading { font-size:26px; }
  .af-directory__grid, .af-lower, .af-topic-list { grid-template-columns:1fr; }
  .af-directory-card { padding:14px 0 15px; }
  .af-lower { gap:25px; }
  .af-lower__side { padding:20px; }
  .af-land__footer { display:block; }
  .af-land__footer span { display:block; margin-bottom:7px; }
}
@media (prefers-reduced-motion:reduce) { .af-link-button a { transition:none; } }