MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.
Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* Import Montserrat font with multiple weights */
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900&display=swap');

/* Base font for entire site */
body, body.mw-special, .mw-body, #content {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
}

/* ----- MAIN PAGE TITLE ----- */
.mw-body-header h1#firstHeading,
.mw-body-header h1#firstHeading span.mw-page-title-main,
.mw-special h1#firstHeading,
body.special h1#firstHeading {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #000 !important;
}

/* Dark mode version of page title */
@media (prefers-color-scheme: dark) {
    .mw-body-header h1#firstHeading,
    .mw-body-header h1#firstHeading span.mw-page-title-main,
    .mw-special h1#firstHeading,
    body.special h1#firstHeading {
        color: #fff !important;
    }
}

/* Additional selectors for MediaWiki dark mode */
.skin-theme-dark .mw-body-header h1#firstHeading,
.theme-dark .mw-body-header h1#firstHeading,
body.vector-feature-theme-enabled.vector-theme-dark .mw-body-header h1#firstHeading,
.skin-theme-dark h1#firstHeading,
.theme-dark h1#firstHeading,
body.vector-feature-theme-enabled.vector-theme-dark h1#firstHeading {
    color: #fff !important;
}

/* ----- SITE WORDMARK ----- */
/* Consolidated wordmark styling - works on all pages */
.mw-logo-wordmark,
body.special .mw-logo-wordmark,
.mw-specialpages .mw-logo-wordmark,
.vector-header-container .mw-logo-wordmark,
body.mw-special .mw-logo-wordmark {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.3em !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* Light mode specific color */
html:not(.skin-theme-dark):not(.vector-theme-dark):not(.theme-dark) .mw-logo-wordmark {
    color: #000 !important;
}

/* DARK MODE WORDMARK - super aggressive approach */
html.skin-theme-dark .mw-logo-wordmark,
html.vector-theme-dark .mw-logo-wordmark,
html.theme-dark .mw-logo-wordmark,
html[data-darkmode="true"] .mw-logo-wordmark,
html[class*="dark"] .mw-logo-wordmark,
.skin--night .mw-logo-wordmark,
.mw-logo-wordmark.theme-dark,
.theme-dark .mw-logo-wordmark,
body[class*="dark"] .mw-logo-wordmark,
.vector-body-before-content .mw-logo-wordmark,
.mw-dark-mode .mw-logo-wordmark {
    color: #ffffff !important;
}

/* JavaScript-based fallback for dark mode */
@media (prefers-color-scheme: dark) {
    .mw-logo-wordmark {
        color: #ffffff !important;
    }
}

/* Logo container styling */
.mw-logo-container,
body.special .mw-logo-container,
.mw-specialpages .mw-logo-container,
body.mw-special .mw-logo-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 0 !important;
}

/* Target OOUI components */
.oo-ui-widget, .oo-ui-widget *,
.oo-ui-element-hidden, .oo-ui-labelElement-label,
.oo-ui-buttonElement-button {
    font-family: "Montserrat", sans-serif !important;
}

/* Specifically for Special:Preferences */
.mw-htmlform-ooui .oo-ui-layout-preserve,
.mw-special-Preferences * {
    font-family: "Montserrat", sans-serif !important;
}

body.mw-special-Preferences .oo-ui-widget,
body.mw-special-Preferences button,
body.mw-special-Preferences input,
body.mw-special-Preferences select,
body.mw-special-Preferences textarea {
    font-family: "Montserrat", sans-serif !important;
}

/* Form elements - add !important to overcome OOUI styles */
button, input, select, textarea,
body.special button, body.special input, body.special select, body.special textarea {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 600 !important;
}

/* ----- HEADINGS ----- */
h1 {
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
}

h2 {
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
}

h3 {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
}

h4, h5, h6 {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
}

/* ----- TEXT FORMATTING ----- */
/* Italics and emphasis */
em, i {
    font-family: "Montserrat", sans-serif;
    font-style: italic;
    font-weight: 300;
}

/* Bold text */
strong, b {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
}

/* Code blocks */
pre, code {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    background-color: #f5f5f5;
    padding: 5px;
    border-radius: 3px;
}

/* ----- UI ELEMENTS ----- */
/* Navigation */
#p-navigation, #mw-panel,
body.special #p-navigation, body.special #mw-panel,
body.mw-special #p-navigation, body.mw-special #mw-panel {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
}

/* Footer */
#footer, body.special #footer, body.mw-special #footer {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
}

/* Form elements */
button, input, select, textarea,
body.special button, body.special input, body.special select, body.special textarea {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}