Bear Call: Header wordmark visible in night mode

2026-09-27T19:33:29Z

Header wordmark visible in night mode

← Older revision		Revision as of 19:33, 27 September 2026
Line 44:		Line 44:
	.mw-body-content h2 {		.mw-body-content h2 {
	font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;		font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
			}
			/* Vector inverts the logo in night mode (skin-invert); the wordmark is already light text. */
			html.skin-theme-clientpref-night .mw-logo-container.skin-invert {
			filter: none;
	}		}
	.mw-logo-wordmark {		.mw-logo-wordmark {

Bear Call: RuneBR look: match the landing page

2026-09-27T19:33:00Z

RuneBR look: match the landing page

Show changes

Bear Call: Wordmark fits on phones

2026-09-27T19:31:24Z

Wordmark fits on phones

← Older revision		Revision as of 19:31, 27 September 2026
Line 57:		Line 57:
	color: #f0d9a0;		color: #f0d9a0;
	font-size: 1.4em;		font-size: 1.4em;
	~~text~~-~~shadow~~: ~~1px 1px 0 #000~~;		white-space: nowrap;
	}		}
	.mw-body h1.firstHeading,		.mw-body h1.firstHeading,
Line 174:		Line 174:

	@media ( max-width: 640px ) {		@media ( max-width: 640px ) {
			.mw-logo-wordmark {
			font-size: 1.05em;
			}
	.rbr-hero {		.rbr-hero {
	flex-direction: column;		flex-direction: column;
Line 185:		Line 188:
	}		}
	.rbr-hero-title {		.rbr-hero-title {
	font-size: ~~44px~~;		font-size: 34px;
	}		}
	.rbr-hero-tag {		.rbr-hero-tag {

Bear Call: Lighter wordmark shadow

2026-09-27T19:30:33Z

Lighter wordmark shadow

← Older revision		Revision as of 19:30, 27 September 2026
Line 57:		Line 57:
	color: #f0d9a0;		color: #f0d9a0;
	font-size: 1.4em;		font-size: 1.4em;
	text-shadow: ~~2px 2px~~ 0 #000;		text-shadow: 1px 1px 0 #000;
	}		}
	.mw-body h1.firstHeading,		.mw-body h1.firstHeading,

Bear Call: RuneBR look: brand palette, wordmark, Main Page components

2026-09-27T19:29:28Z

RuneBR look: brand palette, wordmark, Main Page components

New page

/* RuneBR look. The palette is the brand's (client/public/brand/make-banners.ps1): dark brown
#2b2620, border #675a4a, gold #f0d9a0, tan #c7ae7e, headings in Arial Black. Everyone is in
Vector's night mode (LocalSettings.php sets it as the default); the values below replace its
colours. Pages that never load site CSS (login, preferences) keep Vector's own dark palette. */

html.skin-theme-clientpref-night {
--background-color-base: #2b2620;
--background-color-neutral: #3a332b;
--background-color-neutral-subtle: #332d26;
--background-color-interactive: #3a332b;
--background-color-interactive-subtle: #332d26;
--background-color-inverted: #f0d9a0;
--background-color-progressive: #d8b86e;
--background-color-progressive--hover: #f0d9a0;
--background-color-progressive--active: #c7ae7e;
--background-color-progressive--focus: #f0d9a0;
--background-color-progressive-subtle: #463c2c;
--background-color-notice-subtle: #3a332b;
--color-base: #e8dfcb;
--color-emphasized: #f6efdd;
--color-subtle: #b5a78c;
--color-base--subtle: #b5a78c;
--color-inverted: #2b2620;
--color-progressive: #f0d9a0;
--color-progressive--hover: #fbe9bf;
--color-progressive--active: #c7ae7e;
--color-visited: #c7ae7e;
--color-destructive: #f08a6c;
--color-notice: #f6efdd;
--border-color-base: #675a4a;
--border-color-subtle: #54493c;
--border-color-muted: #423a30;
--border-color-interactive: #8a7a64;
--border-color-inverted: #2b2620;
--border-color-progressive: #d8b86e;
--border-color-progressive--hover: #f0d9a0;
--border-color-progressive--active: #c7ae7e;
--border-color-progressive--focus: #f0d9a0;
--border-color-notice: #675a4a;
--box-shadow-color-progressive--focus: #f0d9a0;
}

/* The palette is the look, so the day/night switch in the Appearance menu is hidden. */
#skin-client-prefs-skin-theme {
display: none;
}

/* Wordmark and headings in the brand's heavy type. */
.mw-logo-wordmark,
.mw-body h1.firstHeading,
.mw-body-content h1,
.mw-body-content h2 {
font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
font-weight: 900;
}
.mw-logo-wordmark {
color: #f0d9a0;
font-size: 1.4em;
text-shadow: 2px 2px 0 #000;
}
.mw-body h1.firstHeading,
.mw-body-content h1,
.mw-body-content h2 {
color: #f0d9a0;
border-bottom-color: #675a4a;
}
.mw-body-content h3 {
color: #c7ae7e;
}

/* ---- Main Page ---------------------------------------------------------------------------- */
.page-Main_Page #firstHeading {
display: none;
}

/* The banner: the forum banner's layout, the R icon beside the wordmark and tagline. */
.rbr-hero {
display: flex;
align-items: center;
gap: 28px;
background: #2b2620;
border: 3px solid #675a4a;
padding: 24px 32px;
margin: 0 0 1.2em;
}
.rbr-hero-icon {
flex: none;
width: 128px;
height: 128px;
background: url(/runebr-assets/icon-192.png) center / contain no-repeat;
}
.rbr-hero-title {
font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
font-weight: 900;
font-size: 64px;
line-height: 1;
color: #f0d9a0;
text-shadow: 3px 3px 0 #000;
}
.rbr-hero-tag {
font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
font-weight: 900;
font-size: 15px;
letter-spacing: 3px;
color: #c7ae7e;
margin: 10px 0 16px;
}
.mw-parser-output .rbr-btn a,
.mw-parser-output .rbr-btn a.external {
display: inline-block;
margin: 0 6px 6px 0;
padding: 6px 16px;
border: 1px solid #675a4a;
background: #3a332b;
color: #f0d9a0;
font-weight: bold;
text-decoration: none;
}
.mw-parser-output .rbr-btn a.external::after {
content: none;
display: none;
}
.mw-parser-output .rbr-btn a:hover {
background: #463c2c;
text-decoration: none;
}
.mw-parser-output .rbr-btn-primary a,
.mw-parser-output .rbr-btn-primary a.external {
background: #f0d9a0;
border-color: #f0d9a0;
color: #2b2620;
}
.mw-parser-output .rbr-btn-primary a:hover {
background: #fbe9bf;
}

/* The data page cards. */
.rbr-cards {
display: grid;
grid-template-columns: repeat( auto-fill, minmax( 210px, 1fr ) );
gap: 12px;
margin: 0.6em 0 1em;
}
.rbr-card {
background: #332d26;
border: 1px solid #675a4a;
border-top: 3px solid #c7ae7e;
padding: 12px 14px;
}
.rbr-card-title {
font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
font-weight: 900;
font-size: 1.15em;
margin-bottom: 4px;
}
.rbr-card-text {
color: #b5a78c;
font-size: 0.92em;
}

/* Skill links as chips. */
.mw-parser-output .rbr-chips a {
display: inline-block;
margin: 0 4px 6px 0;
padding: 3px 10px;
background: #332d26;
border: 1px solid #54493c;
border-radius: 3px;
}
.mw-parser-output .rbr-chips a:hover {
border-color: #c7ae7e;
text-decoration: none;
}

@media ( max-width: 640px ) {
.rbr-hero {
flex-direction: column;
text-align: center;
gap: 12px;
padding: 20px 16px;
}
.rbr-hero-icon {
width: 88px;
height: 88px;
}
.rbr-hero-title {
font-size: 44px;
}
.rbr-hero-tag {
font-size: 12px;
letter-spacing: 2px;
}
}

MediaWiki:Common.css - Revision history

Bear Call: Header wordmark visible in night mode

Bear Call: RuneBR look: match the landing page

Bear Call: Wordmark fits on phones

Bear Call: Lighter wordmark shadow

Bear Call: RuneBR look: brand palette, wordmark, Main Page components