ميدياويكي:Common.css: الفرق بين النسختين

/* === Faylasof — Astro design v2 (cleaner) === */

@font-face { font-family:"Thmanyah Sans"; src:url("/_assets/fonts/thmanyah-sans-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Thmanyah Sans"; src:url("/_assets/fonts/thmanyah-sans-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Thmanyah Sans"; src:url("/_assets/fonts/thmanyah-sans-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Thmanyah Display"; src:url("/_assets/fonts/thmanyah-display-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Thmanyah Display"; src:url("/_assets/fonts/thmanyah-display-900.woff2") format("woff2"); font-weight:900; font-style:normal; font-display:swap; }

:root {
  --paper:#f6f0e2; --paper-card:#fbf7ee; --paper-deep:#ece2cd; --paper-edge:#e3d8be;
  --ink:#211c12; --ink-soft:#4b4435; --muted:#6e6553;
  --emerald:#0c5b3c; --emerald-deep:#084027; --emerald-bright:#0a8f5e; --emerald-tint:#e6efe2;
  --ink-deep:#0f1f18; --on-dark:#f3ecda; --on-dark-soft:#b7c2b3;
  --gold:#b0892f; --gold-soft:#d6b873;
  --font-display:"Thmanyah Display","Thmanyah Sans","SF Arabic","Noto Naskh Arabic",serif;
  --font-body:"Thmanyah Sans","SF Arabic","Noto Sans Arabic","Geeza Pro",-apple-system,sans-serif;
}

html, body { background: var(--paper) !important; color: var(--ink) !important; font-family: var(--font-body) !important; }
.mw-body, .mw-page-container, .mw-page-container-inner, .vector-body, #content {
  background: var(--paper) !important; color: var(--ink) !important; font-family: var(--font-body) !important;
}

/* Dark editorial header */
.mw-header, .vector-header-container, .vector-header {
  background: var(--ink-deep) !important; color: var(--on-dark) !important;
  border-bottom: 1px solid var(--gold-soft) !important;
}
.mw-header *, .vector-header *, .vector-header-container * { color: var(--on-dark) !important; }
.mw-logo-wordmark, .mw-logo { font-family: var(--font-display) !important; font-size: 28px !important; font-weight: 900 !important; }

/* Headings */
.mw-body h1, .mw-body h2, .mw-body h3, .firstHeading, .mw-first-heading {
  font-family: var(--font-display) !important; color: var(--ink-deep) !important;
  border-bottom: 1px solid var(--gold) !important; padding-bottom: .3em !important;
}
.mw-body h1, .firstHeading, .mw-first-heading { font-size: 2.4em !important; font-weight: 900 !important; }
.mw-body h2 { font-size: 1.7em !important; font-weight: 700 !important; margin-top: 1.8em !important; }
.mw-body h3 { font-size: 1.3em !important; font-weight: 700 !important; }

/* Links */
.mw-body a, #content a { color: var(--emerald) !important; text-decoration: none !important; }
.mw-body a:hover, #content a:hover { color: var(--gold-deep) !important; text-decoration: underline !important; }
.mw-body a.new, #content a.new { color: var(--muted) !important; font-style: italic !important; }

/* Search box */
#searchInput, .cdx-text-input__input {
  background: var(--paper-card) !important; border: 1px solid var(--gold-soft) !important;
  color: var(--ink) !important; border-radius: 6px !important; font-family: var(--font-body) !important;
}
#searchInput:focus, .cdx-text-input__input:focus {
  border-color: var(--emerald) !important; outline: 2px solid var(--emerald-tint) !important;
}

/* Hide noisy Vector chrome on main page */
.vector-page-tools-landmark, .vector-appearance-landmark, .vector-pinnable-element { display: none !important; }
#p-lang-btn, .mw-portlet-lang, .vector-menu-portal, [class*="ULS"] { display: none !important; }
.mw-portlet-tb, .mw-portlet-cactions, .mw-portlet-views, .vector-menu-tabs { display: none !important; }
.vector-toc { display: none !important; }
.mw-indicators, #siteNotice, .mw-jump-link { display: none !important; }
.mw-footer-container .mw-footer-info { display: none !important; }

/* Main content centering */
.mw-body, #bodyContent, .mw-parser-output { max-width: 1180px !important; margin: 0 auto !important; padding: 24px 40px !important; }

/* === HERO === */
.faylasof-hero {
  text-align: center !important; padding: 60px 20px 50px !important;
  background: var(--paper-card) !important; border: 1px solid var(--paper-edge) !important;
  border-radius: 12px !important; margin: 24px 0 40px !important; box-shadow: 0 16px 34px -14px rgba(40,28,8,0.18) !important;
}
.faylasof-mark {
  font-family: var(--font-display) !important; font-size: 72px !important; font-weight: 900 !important;
  color: var(--ink-deep) !important; line-height: 1 !important; margin-bottom: 12px !important;
  letter-spacing: -0.5px !important;
}
.faylasof-tagline {
  font-size: 20px !important; color: var(--muted) !important; margin-bottom: 28px !important;
  font-family: var(--font-body) !important;
}
.faylasof-cta { font-size: 16px !important; }
.faylasof-cta a {
  display: inline-block !important; padding: 10px 20px !important; margin: 0 6px !important;
  background: var(--emerald) !important; color: var(--on-dark) !important;
  border-radius: 6px !important; font-weight: 500 !important;
}
.faylasof-cta a:hover { background: var(--emerald-deep) !important; color: var(--on-dark) !important; text-decoration: none !important; }

/* === GRID OF CARDS === */
.faylasof-grid {
  display: grid !important; grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important; margin: 32px 0 !important;
}
@media (max-width: 900px) { .faylasof-grid { grid-template-columns: 1fr !important; } }
.faylasof-card {
  background: var(--paper-card) !important; padding: 24px 28px !important;
  border: 1px solid var(--paper-edge) !important; border-radius: 8px !important;
  box-shadow: 0 6px 16px -8px rgba(46,34,12,0.10) !important;
}
.faylasof-card h3 {
  font-family: var(--font-display) !important; color: var(--emerald) !important;
  font-size: 1.2em !important; margin-top: 0 !important; padding-bottom: .4em !important;
  border-bottom: 1px solid var(--gold-soft) !important;
}
.faylasof-card ul { padding-inline-start: 1.2em !important; }
.faylasof-card li { margin: 6px 0 !important; }

/* Footer */
.mw-footer, #footer, .vector-footer {
  background: var(--ink-deep) !important; color: var(--on-dark-soft) !important;
  border-top: 1px solid var(--gold-soft) !important; padding: 20px 40px !important;
}
.mw-footer a, #footer a, .vector-footer a { color: var(--gold-soft) !important; }

/* Tables + code (defensive) */
.mw-body table, table.wikitable { background: var(--paper-card) !important; border: 1px solid var(--paper-edge) !important; }
.mw-body table th, table.wikitable th { background: var(--emerald-tint) !important; color: var(--ink-deep) !important; }
.mw-body pre, .mw-body code { background: var(--paper-deep) !important; border: 1px solid var(--paper-edge) !important; border-radius: 4px !important; }

/* Suppress "no text in this page" giant warning - more elegant */
.noarticletext {
  background: var(--paper-card) !important; border: 1px solid var(--gold-soft) !important;
  border-radius: 8px !important; padding: 24px !important; color: var(--ink-soft) !important;
}