Revision as of 23:19, 29 July 2026 by GaryJJSpate (talk | contribs)
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.
/* ==========================================================
THE VAULT @ THE E.E.R.I.E. FILES
MediaWiki:Common.css
VAULT DESIGN SYSTEM v2
PART 1 — FOUNDATION
Archive aesthetic:
- parchment background
- dark readable text
- coloured Vault headers
- clean research database style
========================================================== */
/* ==========================================================
FONTS
========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bungee&family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
/* ==========================================================
VAULT COLOUR SYSTEM
========================================================== */
:root {
/* Page */
--vault-background: #f5f1e8;
--vault-surface: #ffffff;
--vault-border: #d8d0c2;
/* Text */
--vault-text: #24201c;
--vault-muted: #6f665c;
/* Vault branding */
--vault-green: #7fbf32;
--vault-green-dark: #355834;
--vault-purple: #7b3fb3;
--vault-purple-dark: #4d286f;
--vault-amber: #c48a00;
--vault-red: #9b3434;
/* Category colours */
--cryptid: #355834;
--ufo: #315c8c;
--haunting: #5b3b70;
--psychic: #a36a00;
--forteana: #555555;
--folklore: #765438;
}
/* ==========================================================
GLOBAL PAGE
========================================================== */
html {
background: var(--vault-background);
}
body {
background: var(--vault-background) !important;
color: var(--vault-text) !important;
font-family:
'Space Grotesk',
Arial,
sans-serif !important;
}
/* Main MediaWiki containers */
#content,
.mw-body,
#bodyContent,
#mw-content-text {
background:
transparent !important;
color:
var(--vault-text) !important;
}
/* Article wrapper */
.mw-body {
border: none !important;
}
/* ==========================================================
TYPOGRAPHY
========================================================== */
p,
li,
dd,
dt {
color: var(--vault-text);
line-height: 1.65;
}
strong {
font-weight: 700;
}
/* ==========================================================
HEADINGS
========================================================== */
h1,
h2,
h3,
h4,
.firstHeading,
.mw-first-heading {
font-family:
'Bungee',
system-ui,
sans-serif !important;
color:
var(--vault-text) !important;
letter-spacing:
.02em;
}
.firstHeading,
.mw-first-heading {
border-bottom:
3px solid var(--vault-purple);
padding-bottom:
.6rem;
}
h2 {
border-bottom:
1px solid var(--vault-border);
padding-bottom:
.35rem;
margin-top:
2rem;
color:
var(--vault-purple) !important;
}
h3 {
color:
var(--vault-purple-dark) !important;
}
/* ==========================================================
LINKS
========================================================== */
a {
color:
#246a9b;
}
a:visited {
color:
#694b8f;
}
a:hover {
color:
var(--vault-green-dark) !important;
}
a.new {
color:
#a33b3b !important;
}
/* ==========================================================
ARTICLE BODY
========================================================== */
.mw-parser-output {
color:
var(--vault-text);
}
.mw-parser-output blockquote {
background:
#ebe4d7;
border-left:
4px solid var(--vault-purple);
padding:
1rem 1.5rem;
margin:
1.5rem 0;
color:
var(--vault-muted);
}
/* ==========================================================
TABLES
========================================================== */
table.wikitable {
background:
var(--vault-surface) !important;
color:
var(--vault-text) !important;
border:
1px solid var(--vault-border) !important;
border-collapse:
collapse;
}
table.wikitable th {
background:
var(--vault-purple-dark) !important;
color:
#ffffff !important;
font-family:
'JetBrains Mono',
monospace;
text-transform:
uppercase;
letter-spacing:
.05em;
}
table.wikitable td {
border:
1px solid var(--vault-border) !important;
}
table.wikitable tr:nth-child(even) {
background:
#faf8f3;
}
/* ==========================================================
CATEGORY FOOTER
========================================================== */
#catlinks,
.catlinks {
background:
var(--vault-surface);
border:
1px solid var(--vault-border);
border-radius:
8px;
padding:
.8rem 1rem;
color:
var(--vault-muted);
}
#catlinks a,
.catlinks a {
color:
var(--vault-purple);
}
/* ==========================================================
SEARCH / FORMS
========================================================== */
input,
textarea,
select {
background:
#ffffff;
color:
var(--vault-text);
border:
1px solid var(--vault-border);
}
input:focus,
textarea:focus {
border-color:
var(--vault-purple);
outline:
none;
}
/* ==========================================================
MEDIAWIKI MESSAGE BOXES
========================================================== */
.cdx-message {
color:
#202122;
}
/* ==========================================================
REFERENCES
========================================================== */
.reflist {
color:
var(--vault-text);
}
.reflist a {
color:
#246a9b !important;
}
/* ==========================================================
END PART 1
========================================================== */
/* ==========================================================
THE VAULT @ THE E.E.R.I.E. FILES
MediaWiki:Common.css
VAULT DESIGN SYSTEM v2
PART 2 — VAULT COMPONENTS
========================================================== */
/* ==========================================================
HERO COMPONENT
Template: VaultHero
========================================================== */
.vault-hero {
background:
linear-gradient(
135deg,
#ffffff,
#f1eadc
);
border:
1px solid var(--vault-border);
border-left:
6px solid var(--vault-purple);
border-radius:
12px;
padding:
2.5rem;
margin:
1rem 0 2rem;
text-align:
center;
}
.vault-hero .vault-title {
font-family:
'Bungee',
sans-serif;
font-size:
2.5rem;
color:
var(--vault-purple-dark);
margin:
0;
}
.vault-hero .vault-title span {
color:
var(--vault-green-dark);
}
.vault-hero .vault-tagline {
font-family:
'JetBrains Mono',
monospace;
font-size:
.8rem;
text-transform:
uppercase;
letter-spacing:
.15em;
color:
var(--vault-muted);
margin-top:
.8rem;
}
/* ==========================================================
PORTAL CARDS
Template: PortalCard
========================================================== */
.vault-portal-grid {
display:
grid;
grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));
gap:
1.2rem;
margin:
2rem 0;
}
.vault-portal-card {
display:
block;
background:
var(--vault-surface);
border:
1px solid var(--vault-border);
border-radius:
10px;
padding:
1.5rem;
text-decoration:
none !important;
transition:
.2s ease;
}
.vault-portal-card:hover {
transform:
translateY(-5px);
border-color:
var(--vault-green);
box-shadow:
0 8px 20px rgba(0,0,0,.08);
}
.vault-portal-card .icon {
font-size:
2rem;
}
.vault-portal-card .label {
display:
block;
font-family:
'Bungee',
sans-serif;
font-size:
1rem;
color:
var(--vault-purple) !important;
margin:
.7rem 0;
}
.vault-portal-card .desc {
color:
var(--vault-muted) !important;
font-size:
.9rem;
line-height:
1.5;
}
/* ==========================================================
FEATURE CASE CARDS
Template: CaseCard
========================================================== */
.vault-case-grid {
display:
grid;
grid-template-columns:
repeat(auto-fit,minmax(240px,1fr));
gap:
1.2rem;
}
.vault-case-card {
background:
var(--vault-surface);
border:
1px solid var(--vault-border);
border-radius:
10px;
padding:
1.4rem;
transition:
.2s;
}
.vault-case-card:hover {
border-color:
var(--vault-purple);
transform:
translateY(-4px);
}
.vault-case-card-title {
font-family:
'Bungee',
sans-serif;
font-size:
1.1rem;
color:
var(--vault-purple-dark) !important;
}
.vault-case-card-excerpt {
color:
var(--vault-muted) !important;
font-size:
.9rem;
margin-top:
.6rem;
}
/* ==========================================================
STATISTICS BAR
Template: StatsBar
========================================================== */
.vault-stats-bar {
display:
grid;
grid-template-columns:
repeat(auto-fit,minmax(150px,1fr));
gap:
1rem;
background:
var(--vault-surface);
border:
1px solid var(--vault-border);
border-radius:
10px;
padding:
1.5rem;
margin:
2rem 0;
text-align:
center;
}
.vault-stats-bar-number {
font-family:
'Bungee',
sans-serif;
font-size:
2rem;
color:
var(--vault-green-dark);
}
.vault-stats-bar-label {
font-family:
'JetBrains Mono',
monospace;
font-size:
.7rem;
text-transform:
uppercase;
color:
var(--vault-muted);
letter-spacing:
.08em;
}
/* ==========================================================
DID YOU KNOW
Template: DidYouKnow
========================================================== */
.vault-dyk {
background:
#fffdf8;
border:
1px solid var(--vault-border);
border-left:
5px solid var(--vault-amber);
border-radius:
8px;
padding:
1.4rem 1.6rem;
margin:
2rem 0;
}
.vault-dyk-header {
font-family:
'Bungee',
sans-serif;
color:
var(--vault-amber);
}
.vault-dyk li {
color:
var(--vault-text);
margin-bottom:
.5rem;
}
/* ==========================================================
CTA STRIP
Template: CTAStrip
========================================================== */
.vault-cta-strip {
background:
var(--vault-purple-dark);
color:
white;
border-radius:
10px;
padding:
2rem;
text-align:
center;
margin:
2rem 0;
}
.vault-cta-strip a {
color:
white;
}
.vault-btn {
display:
inline-block;
padding:
.7rem 1.4rem;
margin:
.4rem;
border-radius:
5px;
font-family:
'JetBrains Mono',
monospace;
text-transform:
uppercase;
font-size:
.75rem;
}
.vault-btn-primary {
background:
var(--vault-green);
color:
#16200b !important;
}
.vault-btn-vault {
background:
var(--vault-purple);
color:
white !important;
}
/* ==========================================================
STANDARD INFORMATION PANELS
========================================================== */
.vault-featured,
.vault-notice {
background:
var(--vault-surface);
border:
1px solid var(--vault-border);
border-radius:
8px;
padding:
1.5rem;
margin:
2rem 0;
}
.vault-featured {
border-left:
5px solid var(--vault-green);
}
.vault-featured-title {
font-family:
'Bungee',
sans-serif;
color:
var(--vault-purple-dark);
}
/* ==========================================================
END PART 2
========================================================== */
/* ==========================================================
THE VAULT @ THE E.E.R.I.E. FILES
MediaWiki:Common.css
VAULT DESIGN SYSTEM v2
PART 3 — ASSESSMENTS, INFOBOXES & FINAL FIXES
========================================================== */
/* ==========================================================
UNIVERSAL INFOBOX
Used by:
CryptidInfobox
PersonInfobox
BookInfobox
LocationInfobox
========================================================== */
.vault-infobox {
float:
right;
width:
300px;
margin:
0 0 1.5rem 2rem;
background:
var(--vault-surface);
border:
1px solid var(--vault-border);
border-radius:
10px;
overflow:
hidden;
box-shadow:
0 4px 12px rgba(0,0,0,.08);
}
.vault-infobox-header {
background:
var(--vault-purple-dark);
color:
white;
font-family:
'Bungee',
sans-serif;
text-align:
center;
padding:
.9rem;
}
.vault-infobox-row {
display:
grid;
grid-template-columns:
100px 1fr;
gap:
.8rem;
padding:
.7rem 1rem;
border-top:
1px solid var(--vault-border);
}
.vault-infobox-k {
font-family:
'JetBrains Mono',
monospace;
font-size:
.65rem;
text-transform:
uppercase;
color:
var(--vault-muted);
}
.vault-infobox-v {
color:
var(--vault-text);
line-height:
1.4;
}
.vault-infobox-image {
text-align:
center;
}
.vault-infobox-image img {
max-width:
100%;
height:
auto;
}
.vault-infobox-caption {
font-size:
.75rem;
color:
var(--vault-muted);
padding:
.6rem;
}
/* ==========================================================
VAULT ASSESSMENT
Full width evidence summary
========================================================== */
.vault-assessment {
width:
100%;
background:
var(--vault-surface);
border:
1px solid var(--vault-border);
border-radius:
10px;
margin:
2rem 0;
overflow:
hidden;
}
.vault-assessment-header {
background:
var(--vault-purple-dark);
color:
white;
font-family:
'Bungee',
sans-serif;
text-align:
center;
padding:
.9rem;
}
.vault-assessment-grid {
display:
grid;
grid-template-columns:
repeat(2,1fr);
}
.vault-assessment-item {
padding:
1rem;
border-top:
1px solid var(--vault-border);
}
.vault-assessment-label {
font-family:
'JetBrains Mono',
monospace;
font-size:
.7rem;
text-transform:
uppercase;
color:
var(--vault-muted);
}
.vault-assessment-value {
color:
var(--vault-text);
margin-top:
.3rem;
}
.vault-assessment-status {
color:
var(--vault-green-dark);
font-weight:
bold;
}
/* Category colours */
.vault-assessment-cryptid .vault-assessment-header {
background:
var(--cryptid);
}
.vault-assessment-ufo .vault-assessment-header {
background:
var(--ufo);
}
.vault-assessment-haunting .vault-assessment-header {
background:
var(--haunting);
}
.vault-assessment-parapsychology .vault-assessment-header {
background:
var(--psychic);
}
.vault-assessment-forteana .vault-assessment-header {
background:
var(--forteana);
}
.vault-assessment-folklore .vault-assessment-header {
background:
var(--folklore);
}
/* ==========================================================
WORK ASSESSMENT
Books, films, TV, articles
========================================================== */
.vault-work-assessment {
width:
100%;
background:
var(--vault-surface);
border:
1px solid var(--vault-border);
border-radius:
10px;
overflow:
hidden;
margin:
2rem 0;
}
.vault-work-header {
background:
var(--vault-purple);
color:
white;
text-align:
center;
font-family:
'Bungee',
sans-serif;
padding:
.9rem;
}
.vault-work-row {
display:
grid;
grid-template-columns:
130px 1fr;
padding:
.8rem 1rem;
border-top:
1px solid var(--vault-border);
}
.vault-work-section {
padding:
1.2rem;
border-top:
1px solid var(--vault-border);
}
.vault-work-k {
font-family:
'JetBrains Mono',
monospace;
font-size:
.7rem;
text-transform:
uppercase;
color:
var(--vault-muted);
}
.vault-work-v {
color:
var(--vault-text);
}
.vault-work-status {
color:
var(--vault-green-dark);
font-weight:
bold;
}
/* ==========================================================
PROFILE ASSESSMENT
People
========================================================== */
.vault-profile-assessment {
width:
100%;
background:
var(--vault-surface);
border:
1px solid var(--vault-border);
border-radius:
10px;
overflow:
hidden;
margin:
2rem 0;
}
.vault-profile-header {
background:
var(--vault-purple-dark);
color:
white;
font-family:
'Bungee',
sans-serif;
text-align:
center;
padding:
.9rem;
}
.vault-profile-grid {
display:
grid;
grid-template-columns:
repeat(3,1fr);
}
.vault-profile-item {
padding:
1rem;
border-right:
1px solid var(--vault-border);
}
.vault-profile-label {
font-family:
'JetBrains Mono',
monospace;
font-size:
.7rem;
text-transform:
uppercase;
color:
var(--vault-muted);
}
.vault-profile-value {
color:
var(--vault-text);
}
.vault-profile-summary {
padding:
1.2rem;
border-top:
1px solid var(--vault-border);
}
/* ==========================================================
LOCATION ASSESSMENT
Places
========================================================== */
.vault-location-assessment {
width:
100%;
background:
var(--vault-surface);
border:
1px solid var(--vault-border);
border-radius:
10px;
overflow:
hidden;
margin:
2rem 0;
}
.vault-location-header {
background:
var(--vault-green-dark);
color:
white;
font-family:
'Bungee',
sans-serif;
text-align:
center;
padding:
.9rem;
}
.vault-location-grid {
display:
grid;
grid-template-columns:
repeat(3,1fr);
}
.vault-location-item {
padding:
1rem;
border-right:
1px solid var(--vault-border);
}
.vault-location-label {
font-family:
'JetBrains Mono',
monospace;
font-size:
.7rem;
text-transform:
uppercase;
color:
var(--vault-muted);
}
.vault-location-value {
color:
var(--vault-text);
}
.vault-location-summary {
padding:
1.2rem;
border-top:
1px solid var(--vault-border);
}
/* ==========================================================
VAULT NOTICE
========================================================== */
.vault-notice {
background:
#fffdf8;
border:
1px solid var(--vault-border);
border-left:
5px solid var(--vault-amber);
border-radius:
8px;
padding:
1.2rem;
margin:
2rem 0;
}
.vault-notice-header {
font-family:
'JetBrains Mono',
monospace;
text-transform:
uppercase;
color:
var(--vault-amber);
}
.vault-notice-title {
font-family:
'Bungee',
sans-serif;
}
.vault-notice-body {
color:
var(--vault-text);
}
.vault-notice.warning {
border-left-color:
var(--vault-red);
}
.vault-notice.research {
border-left-color:
#315c8c;
}
.vault-notice.featured {
border-left-color:
var(--vault-green);
}
/* ==========================================================
MOBILE RESPONSIVE
========================================================== */
@media screen and (max-width:700px) {
.vault-infobox {
float:
none;
width:
100%;
margin:
1rem 0;
}
.vault-assessment-grid,
.vault-profile-grid,
.vault-location-grid {
grid-template-columns:
1fr;
}
.vault-profile-item,
.vault-location-item {
border-right:
none;
border-bottom:
1px solid var(--vault-border);
}
.vault-work-row {
grid-template-columns:
1fr;
}
.vault-hero .vault-title {
font-size:
1.8rem;
}
}
/* ==========================================================
END VAULT DESIGN SYSTEM v2
========================================================== */