Jump to content

MediaWiki:Common.css

From Nightlife Report Wiki
Revision as of 23:23, 22 October 2026 by Anthony (talk | contribs) (Nightlife Report design system v1.0.0)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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.
/* Nightlife Report design system v1.0.0. Generated from tokens.css + _src; edit those, not this file. */
/* Paste the whole file into MediaWiki:Common.css. Google Fonts are loaded by NightlifeReportBrand.php. */
/*
 * Nightlife Report design tokens v1.0.0 (2026-10-19)
 * One source for blog (WordPress), forum (phpBB prosilver), apex and wiki (MediaWiki Vector 2022).
 *
 * Brand rules baked in:
 *  - Primary: Nightlife Red #EB3F43 (RGB 235/63/67). Red type and red marks sit on WHITE only.
 *    Never red on black, never red on light gray.
 *  - Secondary: black, white, dark gray #545659 (RGB 84/86/89), light gray #A6A6A8 (RGB 166/166/168).
 *  - Accents (lemon, pink, blue) are for charts and colour-coding only. Never for type, logo or UI chrome.
 *  - Type: Playfair Display for headlines, Inter for body. Light for large text, Regular for running text,
 *    Bold/Semibold for headers and subheads.
 *  - Flat: no gradients, no drop shadows, no glow, no rounded "app" cards. Hairline rules, generous white space.
 *  - Text colours allowed: red, black, white, dark gray, light gray (light gray only for large/meta text on white).
 */

:root {
  /* ---------- colour ---------- */
  --nr-red: #EB3F43;          /* primary. On white only */
  --nr-black: #000000;
  --nr-white: #FFFFFF;
  --nr-gray-dark: #545659;    /* secondary text, meta, captions */
  --nr-gray-light: #A6A6A8;   /* hairlines, disabled, large meta only */
  --nr-accent-lemon: #D6D972; /* charts only */
  --nr-accent-pink: #F5BAC5;  /* charts only */
  --nr-accent-blue: #24298F;  /* charts only */

  /* semantic roles */
  --nr-bg: var(--nr-white);
  --nr-text: var(--nr-black);
  --nr-text-muted: var(--nr-gray-dark);
  --nr-link: var(--nr-red);            /* links on white */
  --nr-link-hover: var(--nr-black);
  --nr-link-on-dark: var(--nr-white);  /* red is never used on black */
  --nr-bg-inverse: var(--nr-black);
  --nr-text-inverse: var(--nr-white);
  --nr-focus: var(--nr-black);
  --nr-selection-bg: var(--nr-black);
  --nr-selection-text: var(--nr-white);

  /* ---------- type ---------- */
  --nr-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --nr-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --nr-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --nr-weight-light: 300;
  --nr-weight-regular: 400;
  --nr-weight-semibold: 600;
  --nr-weight-bold: 700;
  --nr-weight-headline: 800;   /* display + h1 */
  --nr-weight-subhead: 600;    /* h2-h4 (Playfair 600) */

  /* type scale (fluid, ~1.25 ratio; base 17px) */
  --nr-size-micro: 0.75rem;     /* 12px eyebrow / kicker */
  --nr-size-caption: 0.8125rem; /* 13px captions, meta */
  --nr-size-small: 0.875rem;    /* 14px UI, forum meta */
  --nr-size-body: 1.0625rem;    /* 17px running text */
  --nr-size-lede: 1.25rem;      /* 20px standfirst (Inter Light) */
  --nr-size-h4: 1.25rem;
  --nr-size-h3: 1.5rem;
  --nr-size-h2: clamp(1.75rem, 1.2rem + 1.8vw, 2.25rem);
  --nr-size-h1: clamp(2.25rem, 1.4rem + 3.2vw, 3.5rem);
  --nr-size-display: clamp(2.75rem, 1.5rem + 5vw, 5rem);
  --nr-size-masthead: clamp(1.25rem, 1rem + 1vw, 1.75rem);

  --nr-leading-tight: 1.05;
  --nr-leading-heading: 1.15;
  --nr-leading-body: 1.65;
  --nr-leading-ui: 1.4;
  --nr-tracking-eyebrow: 0.14em;
  --nr-tracking-masthead: 0.18em;
  --nr-measure: 68ch;

  /* ---------- space (4px base) ---------- */
  --nr-space-1: 4px;
  --nr-space-2: 8px;
  --nr-space-3: 12px;
  --nr-space-4: 16px;
  --nr-space-5: 24px;
  --nr-space-6: 32px;
  --nr-space-7: 48px;
  --nr-space-8: 64px;   /* page margin on large screens */
  --nr-space-9: 96px;
  --nr-space-10: 128px;
  --nr-gutter: clamp(16px, 4vw, 64px);
  --nr-section: clamp(48px, 8vw, 128px);

  /* ---------- layout ---------- */
  --nr-content: 720px;
  --nr-wide: 1280px;

  /* ---------- rules ---------- */
  --nr-rule-hair: 1px solid var(--nr-gray-light);
  --nr-rule: 1px solid var(--nr-black);
  --nr-rule-strong: 2px solid var(--nr-black);
  --nr-rule-accent: 2px solid var(--nr-red);   /* on white only */
  --nr-radius: 0;
  --nr-shadow: none;
  --nr-transition: 150ms ease;
}

/* ===== Nightlife Report shared components (network bar, footer, tips mark, signup) =====
   Namespaced .nr-* so they never collide with WordPress, prosilver, apex or Vector classes. */
.nr-bar, .nr-footer { font-family: var(--nr-font-body); color: var(--nr-text); background: var(--nr-white); box-sizing: border-box; }
.nr-bar *, .nr-footer * { box-sizing: border-box; }
.nr-bar a, .nr-footer a { text-decoration: none; box-shadow: none; text-shadow: none; }

/* --- network bar (top of every surface) --- */
.nr-bar { border-bottom: var(--nr-rule-hair); position: relative; z-index: 5; }
.nr-bar__inner { max-width: var(--nr-wide); margin: 0 auto; padding: var(--nr-space-3) var(--nr-gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nr-space-3) var(--nr-space-6); }
.nr-masthead { font-family: var(--nr-font-display); font-weight: var(--nr-weight-headline); font-size: var(--nr-size-masthead);
  letter-spacing: var(--nr-tracking-masthead); text-transform: uppercase; line-height: 1; color: var(--nr-black) !important; white-space: nowrap; }
.nr-masthead:hover { color: var(--nr-red) !important; }
.nr-network { display: flex; flex-wrap: wrap; gap: var(--nr-space-1) var(--nr-space-5); margin: 0; padding: 0; list-style: none; }
.nr-network a { font-family: var(--nr-font-body); font-size: var(--nr-size-small); font-weight: var(--nr-weight-semibold);
  letter-spacing: 0.04em; color: var(--nr-black) !important; padding: var(--nr-space-2) 0; border-bottom: 2px solid transparent; line-height: 1.2; display: inline-block; }
.nr-network a:hover, .nr-network a:focus-visible { color: var(--nr-red) !important; border-bottom-color: var(--nr-red); }
.nr-network a[aria-current="page"] { color: var(--nr-red) !important; border-bottom-color: var(--nr-red); }
.nr-network a.nr-network__cta { color: var(--nr-red) !important; }

/* --- footer --- */
.nr-footer { border-top: var(--nr-rule-strong); margin-top: var(--nr-section); clear: both; }
.nr-footer__inner { max-width: var(--nr-wide); margin: 0 auto; padding: var(--nr-space-8) var(--nr-gutter) var(--nr-space-6);
  display: grid; gap: var(--nr-space-7); grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .nr-footer__inner { grid-template-columns: minmax(0, 1fr); gap: var(--nr-space-6); } }
.nr-eyebrow { font-family: var(--nr-font-body); font-size: var(--nr-size-micro); font-weight: var(--nr-weight-semibold);
  letter-spacing: var(--nr-tracking-eyebrow); text-transform: uppercase; color: var(--nr-red); margin: 0 0 var(--nr-space-3); line-height: 1.3; }
.nr-tips { display: flex; gap: var(--nr-space-5); align-items: flex-start; }
.nr-mark { flex: 0 0 auto; width: 56px; height: 56px; color: var(--nr-black); display: block; }
.nr-mark .nr-mark__pupil { fill: var(--nr-red); }
.nr-tips__line { font-family: var(--nr-font-display); font-weight: var(--nr-weight-subhead); font-size: var(--nr-size-h3);
  line-height: var(--nr-leading-heading); color: var(--nr-black); margin: 0 0 var(--nr-space-4); max-width: 30ch; }
.nr-tips__mail { font-size: var(--nr-size-body); font-weight: var(--nr-weight-semibold); color: var(--nr-red) !important; border-bottom: 1px solid var(--nr-red); }
.nr-tips__mail:hover { color: var(--nr-black) !important; border-bottom-color: var(--nr-black); }
.nr-footer__links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nr-space-2); }
.nr-footer__links a { font-size: var(--nr-size-small); color: var(--nr-black) !important; }
.nr-footer__links a:hover { color: var(--nr-red) !important; }
.nr-signup { margin: 0; }
.nr-signup label { display: block; font-size: var(--nr-size-caption); color: var(--nr-text-muted); margin: 0 0 var(--nr-space-2); }
.nr-signup__row { display: flex; gap: 0; }
.nr-signup input[type="email"] { flex: 1 1 auto; min-width: 0; font: inherit; font-size: var(--nr-size-small); padding: var(--nr-space-3);
  border: var(--nr-rule); border-right: 0; border-radius: 0; background: var(--nr-white); color: var(--nr-black); box-shadow: none; height: auto; }
.nr-signup input[type="email"]:focus { outline: 2px solid var(--nr-black); outline-offset: 2px; }
.nr-btn, .nr-signup button { font-family: var(--nr-font-body); font-size: var(--nr-size-small); font-weight: var(--nr-weight-semibold);
  letter-spacing: 0.04em; text-transform: uppercase; padding: var(--nr-space-3) var(--nr-space-5); border: 2px solid var(--nr-red);
  border-radius: 0; background: var(--nr-white); color: var(--nr-red); cursor: pointer; box-shadow: none; text-shadow: none; background-image: none; line-height: 1.2; }
.nr-btn:hover, .nr-signup button:hover { background: var(--nr-black); border-color: var(--nr-black); color: var(--nr-white); }
.nr-signup__note { font-size: var(--nr-size-caption); color: var(--nr-text-muted); margin: var(--nr-space-2) 0 0; }
.nr-signup__note a { color: var(--nr-text-muted) !important; text-decoration: underline; }
.nr-hp { position: absolute; left: -5000px; }
.nr-footer__fine { grid-column: 1 / -1; border-top: var(--nr-rule-hair); padding-top: var(--nr-space-5); margin: 0;
  font-size: var(--nr-size-caption); color: var(--nr-text-muted); letter-spacing: 0.04em; }
.nr-footer__fine b { font-family: var(--nr-font-display); letter-spacing: var(--nr-tracking-masthead); color: var(--nr-black); }
.nr-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* older fleet-kit footer strip (blog mu-plugin / forum extension): keep, but flatten to the brand */
.fleetkit-footer, .fleetkit-links, .fleetkit-mission { font-family: var(--nr-font-body) !important; color: var(--nr-text-muted) !important; opacity: 1 !important; }
.fleetkit-footer a, .fleetkit-links a { color: var(--nr-black) !important; }

/* fleet newsletter popup (#fs-pop, inline on every fleet site): flat, no shadow, no rounding */
#fs-pop .fs-card { box-shadow: none !important; border-radius: 0 !important; background: var(--nr-black) !important; color: var(--nr-white) !important; border: 0 !important; font-family: var(--nr-font-body); }
#fs-pop .fs-card h2, #fs-pop #fs-title { font-family: var(--nr-font-display) !important; color: var(--nr-white) !important; }
#fs-pop .fs-card a { color: var(--nr-white) !important; }
#fs-pop input, #fs-pop button { border-radius: 0 !important; box-shadow: none !important; background-image: none !important; }

/* ===== MediaWiki 1.43+ Vector 2022 (paste into MediaWiki:Common.css) =====
   Fonts are loaded by the LocalSettings hook in NightlifeReportBrand.php (ResourceLoader drops
   @import from site CSS), so this file has no @import. */
:root, .skin-vector-2022 {
  --color-progressive: var(--nr-red); --color-progressive--hover: var(--nr-black); --color-progressive--active: var(--nr-black);
  --color-progressive--focus: var(--nr-black); --border-color-progressive: var(--nr-red);
  --color-base: var(--nr-black); --color-emphasized: var(--nr-black); --color-subtle: var(--nr-gray-dark);
  --color-visited: var(--nr-red); --color-link-red: var(--nr-gray-dark); --color-link-red--visited: var(--nr-gray-dark);
  --background-color-base: var(--nr-white); --background-color-neutral-subtle: var(--nr-white); --background-color-interactive-subtle: var(--nr-white);
  --border-color-base: var(--nr-gray-light); --border-color-subtle: var(--nr-gray-light); --border-color-muted: var(--nr-gray-light);
  --box-shadow-drop-medium: none; --box-shadow-drop-small: none; --box-shadow-drop-xx-large: none; --border-radius-base: 0;
  --font-family-system-sans: var(--nr-font-body); --font-family-base: var(--nr-font-body); --font-family-serif: var(--nr-font-display);
}
body, .mw-body, .vector-body, .mw-body-content, .vector-menu, .mw-footer, .cdx-button, .vector-toc, .mw-parser-output { font-family: var(--nr-font-body); }
body { background: var(--nr-white); color: var(--nr-text); }
::selection { background: var(--nr-selection-bg); color: var(--nr-selection-text); }
.vector-body, .mw-body-content { font-size: var(--nr-size-body); line-height: var(--nr-leading-body); }
.mw-parser-output > p, .mw-parser-output > ul, .mw-parser-output > ol { max-width: var(--nr-measure); }

/* headings: Playfair, black, hairline under h2 only */
.mw-body h1, .mw-body .mw-heading1, #firstHeading, .mw-first-heading {
  font-family: var(--nr-font-display) !important; font-weight: var(--nr-weight-headline); font-size: var(--nr-size-h1); line-height: var(--nr-leading-tight); color: var(--nr-black); border-bottom: 0; }
.mw-body h2, .mw-heading2 h2, .mw-parser-output h2 {
  font-family: var(--nr-font-display) !important; font-weight: var(--nr-weight-subhead); font-size: var(--nr-size-h2); color: var(--nr-black); line-height: var(--nr-leading-heading); }
.mw-heading2, .mw-body h2 { border-bottom: var(--nr-rule-hair); margin-top: var(--nr-space-7); }
.mw-body h3, .mw-heading3 h3, .mw-parser-output h3 { font-family: var(--nr-font-display); font-weight: var(--nr-weight-subhead); font-size: var(--nr-size-h3); }
.mw-body h4, .mw-parser-output h4 { font-family: var(--nr-font-body); font-weight: var(--nr-weight-semibold); font-size: var(--nr-size-micro); letter-spacing: var(--nr-tracking-eyebrow); text-transform: uppercase; color: var(--nr-red); }
#siteSub, #contentSub, .mw-indicators, .vector-page-titlebar-toc, .mw-editsection, .mw-editsection a { color: var(--nr-gray-dark); font-size: var(--nr-size-caption); }

/* links: red on white. Missing-page (red) links become dark gray dotted so "red" stays the brand red */
.mw-parser-output a, .mw-body a:not(.cdx-button), .vector-menu-content a, #footer a { color: var(--nr-red); }
.mw-parser-output a:hover, .mw-body a:hover { color: var(--nr-black); }
.mw-parser-output a.new, .mw-parser-output a.new:visited, a.new { color: var(--nr-gray-dark) !important; text-decoration: underline dotted; }
.mw-parser-output a.external { background-image: none; padding-right: 0; }
.mw-parser-output a.external::after { content: "\2009\2197"; font-size: 0.8em; color: var(--nr-gray-dark); }

/* header and chrome: white, masthead text instead of an image wordmark */
.vector-header-container, .vector-header, .vector-sticky-header { background: var(--nr-white); box-shadow: none !important; }
.vector-header-container { border-bottom: var(--nr-rule-strong); }
.vector-sticky-header { border-bottom: var(--nr-rule-hair); }
.mw-logo-wordmark, .mw-logo-container { font-family: var(--nr-font-display); font-weight: var(--nr-weight-headline); letter-spacing: var(--nr-tracking-masthead); text-transform: uppercase; color: var(--nr-black); }
.mw-logo-tagline { font-family: var(--nr-font-body); color: var(--nr-gray-dark); letter-spacing: 0.04em; }
.vector-pinnable-header-label, .vector-menu-heading, .vector-toc .vector-pinnable-header-label {
  font-family: var(--nr-font-body); font-size: var(--nr-size-micro); font-weight: var(--nr-weight-semibold); letter-spacing: var(--nr-tracking-eyebrow); text-transform: uppercase; color: var(--nr-red); }
.vector-toc .vector-toc-list-item-active > .vector-toc-link, .vector-toc .vector-toc-level-1-active:not(.vector-toc-list-item-expanded) > .vector-toc-link { color: var(--nr-black); font-weight: var(--nr-weight-semibold); }
.vector-toc .vector-toc-link { color: var(--nr-gray-dark); }
.vector-menu-tabs .mw-list-item.selected a, .vector-menu-tabs .selected a { color: var(--nr-black) !important; border-bottom: 2px solid var(--nr-red); }
.vector-menu-tabs .mw-list-item a { color: var(--nr-gray-dark); }
.vector-dropdown-content, .vector-menu-content, .vector-popover, .vector-typeahead-search .cdx-menu { border-radius: 0 !important; box-shadow: none !important; border: var(--nr-rule) !important; }
.mw-page-container { background: var(--nr-white); }

/* search and Codex buttons: square, flat */
.cdx-text-input__input, .cdx-search-input__text-input .cdx-text-input__input, .vector-search-box-input, input.mw-ui-input, .oo-ui-inputWidget-input {
  border-radius: 0 !important; box-shadow: none !important; border-color: var(--nr-black) !important; font-family: var(--nr-font-body); }
.cdx-button, .mw-ui-button, .oo-ui-buttonElement-button { border-radius: 0 !important; box-shadow: none !important; background-image: none !important; font-family: var(--nr-font-body); }
.cdx-button.cdx-button--action-progressive.cdx-button--weight-primary, .mw-ui-button.mw-ui-progressive, .oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive .oo-ui-buttonElement-button {
  background: var(--nr-white) !important; color: var(--nr-red) !important; border: 2px solid var(--nr-red) !important; text-transform: uppercase; letter-spacing: 0.04em; font-weight: var(--nr-weight-semibold); }
.cdx-button.cdx-button--action-progressive.cdx-button--weight-primary:hover, .mw-ui-button.mw-ui-progressive:hover {
  background: var(--nr-black) !important; border-color: var(--nr-black) !important; color: var(--nr-white) !important; }

/* content blocks */
.mw-parser-output blockquote { border-left: var(--nr-rule-accent); padding: 0 0 0 var(--nr-space-5); margin-left: 0; font-family: var(--nr-font-display); font-size: var(--nr-size-h4); }
.mw-parser-output .wikitable { border: 0; border-top: var(--nr-rule-strong); background: var(--nr-white); color: var(--nr-black); border-collapse: collapse; }
.mw-parser-output .wikitable > tr > th, .mw-parser-output .wikitable > * > tr > th { background: var(--nr-white); border: 0; border-bottom: var(--nr-rule); font-size: var(--nr-size-micro); letter-spacing: var(--nr-tracking-eyebrow); text-transform: uppercase; text-align: left; }
.mw-parser-output .wikitable > tr > td, .mw-parser-output .wikitable > * > tr > td { border: 0; border-bottom: var(--nr-rule-hair); padding: var(--nr-space-2) var(--nr-space-3); }
.mw-parser-output .thumbinner, .mw-parser-output figure[typeof~="mw:File/Thumb"], .mw-parser-output figure[typeof~="mw:File/Frame"] { border: 0; background: var(--nr-white); padding: 0; }
.mw-parser-output figcaption, .mw-parser-output .thumbcaption { font-size: var(--nr-size-caption); color: var(--nr-gray-dark); }
.mw-parser-output pre, .mw-parser-output code { background: var(--nr-white); border: var(--nr-rule-hair); border-radius: 0; color: var(--nr-black); font-family: var(--nr-font-mono); }
.toc, #toc, .catlinks, .mw-message-box, .messagebox, .ambox, .cdx-message { background: var(--nr-white) !important; border-radius: 0 !important; box-shadow: none !important; border: 0 !important; border-top: var(--nr-rule-hair) !important; }
.catlinks { border-top: var(--nr-rule-strong) !important; padding: var(--nr-space-3) 0; font-size: var(--nr-size-small); }

/* on-wiki helper classes used by the starter pages */
.nr-eyebrow-wiki { font-size: var(--nr-size-micro); font-weight: var(--nr-weight-semibold); letter-spacing: var(--nr-tracking-eyebrow); text-transform: uppercase; color: var(--nr-red); }
.nr-lede { font-weight: var(--nr-weight-light); font-size: var(--nr-size-lede); line-height: 1.5; max-width: var(--nr-measure); }
.nr-tipbox { border-top: var(--nr-rule-accent); border-bottom: var(--nr-rule-hair); padding: var(--nr-space-4) 0; margin: var(--nr-space-6) 0; max-width: var(--nr-measure); }
.nr-tipbox p { font-family: var(--nr-font-display); font-size: var(--nr-size-h4); margin: 0 0 var(--nr-space-2); }
.nr-swatch { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -0.2em; border: var(--nr-rule-hair); margin-right: 0.4em; }

/* page footer (MediaWiki's own): quiet, under the shared .nr-footer partial */
.mw-footer { border-top: var(--nr-rule-hair); color: var(--nr-gray-dark); font-size: var(--nr-size-caption); }
.mw-footer a { color: var(--nr-black) !important; }
#footer-icons { display: none; }  /* "Powered by" badges are images in non-brand colours */
Retrieved from "https://intel.nightlifereport.app/index.php?title=MediaWiki:Common.css&oldid=3"