Revision as of 00:28, 30 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
VERSION 2.0
Archive Edition
Clean research archive aesthetic:
- Paper background
- Dark text
- Vault accent colours
- Cosmos compatible
========================================================== */
/* ==========================================================
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');
/* ==========================================================
COLOUR SYSTEM
========================================================== */
:root {
--vault-paper:#f4f1e8;
--vault-white:#ffffff;
--vault-text:#222222;
--vault-muted:#666666;
--vault-border:#d8d2c4;
--vault-purple:#5c2d91;
--vault-purple-dark:#3d1d63;
--vault-green:#a6ff3f;
--vault-amber:#d89b00;
--vault-red:#a83232;
--vault-blue:#315f8c;
}
/* ==========================================================
BASE MEDIAWIKI
========================================================== */
html {
background:var(--vault-paper);
}
body {
background:var(--vault-paper) !important;
color:var(--vault-text) !important;
font-family:'Space Grotesk', sans-serif !important;
}
#content,
.mw-body,
#bodyContent,
#mw-content-text {
background:transparent !important;
color:var(--vault-text);
}
.mw-parser-output {
color:var(--vault-text);
line-height:1.65;
}
/* ==========================================================
TYPOGRAPHY
========================================================== */
h1,
h2,
h3,
h4,
.firstHeading,
.mw-first-heading {
font-family:'Bungee',sans-serif !important;
color:var(--vault-purple-dark) !important;
letter-spacing:.02em;
}
.firstHeading,
.mw-first-heading {
border-bottom:3px solid var(--vault-purple);
padding-bottom:.5rem;
}
h2 {
border-bottom:1px solid var(--vault-border);
padding-bottom:.3rem;
margin-top:2rem;
}
h3 {
color:var(--vault-purple);
}
/* ==========================================================
LINKS
========================================================== */
a {
color:var(--vault-purple);
}
a:visited {
color:#74509b;
}
a:hover {
color:#8a5cc4 !important;
}
a.new {
color:var(--vault-red) !important;
}
/* ==========================================================
TABLES
========================================================== */
table.wikitable {
background:var(--vault-white) !important;
color:var(--vault-text) !important;
border:1px solid var(--vault-border) !important;
}
table.wikitable th {
background:var(--vault-purple) !important;
color:white !important;
font-family:'JetBrains Mono',monospace;
}
table.wikitable td {
border-color:var(--vault-border) !important;
}
/* ==========================================================
CATEGORY FOOTER
========================================================== */
#catlinks,
.catlinks {
background:var(--vault-white);
border:1px solid var(--vault-border);
padding:.8rem;
color:var(--vault-muted);
}
#catlinks a,
.catlinks a {
color:var(--vault-purple);
}
/* ==========================================================
THE VAULT
SECTION 2 — ARCHIVE COMPONENTS
========================================================== */
/* ==========================================================
VAULT HERO
========================================================== */
.vault-hero {
background:
linear-gradient(
135deg,
rgba(92,45,145,.08),
rgba(255,255,255,.9)
);
border:1px solid var(--vault-border);
border-left:5px solid var(--vault-purple);
padding:2.5rem;
margin:1.5rem 0 2rem;
text-align:center;
}
.vault-hero .vault-title {
font-family:'Bungee',sans-serif;
font-size:2.8rem;
color:var(--vault-purple-dark);
margin:0;
}
.vault-hero .vault-title span {
color:var(--vault-purple);
}
.vault-hero .vault-tagline {
font-family:'JetBrains Mono',monospace;
text-transform:uppercase;
letter-spacing:.15em;
color:var(--vault-muted);
font-size:.8rem;
margin-top:.8rem;
}
/* ==========================================================
ARCHIVE CARDS
========================================================== */
.vault-card-grid {
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(230px,1fr));
gap:1.2rem;
margin:2rem 0;
}
.vault-card {
background:var(--vault-white);
border:1px solid var(--vault-border);
border-radius:8px;
padding:1.4rem;
text-decoration:none !important;
display:block;
transition:.2s ease;
}
.vault-card:hover {
border-color:var(--vault-purple);
transform:translateY(-4px);
box-shadow:0 5px 15px rgba(0,0,0,.08);
}
.vault-card-icon {
font-size:2rem;
display:block;
margin-bottom:.8rem;
}
.vault-card-title {
font-family:'Bungee',sans-serif;
color:var(--vault-purple) !important;
font-size:1rem;
}
.vault-card-description {
color:var(--vault-muted);
font-size:.9rem;
line-height:1.5;
}
/* ==========================================================
FEATURED FILE
========================================================== */
.vault-feature {
background:var(--vault-white);
border:1px solid var(--vault-border);
border-left:5px solid var(--vault-green);
padding:1.5rem;
margin:2rem 0;
}
.vault-feature-label {
font-family:'JetBrains Mono',monospace;
text-transform:uppercase;
font-size:.7rem;
letter-spacing:.12em;
color:var(--vault-amber);
}
.vault-feature-title {
font-family:'Bungee',sans-serif;
font-size:1.4rem;
color:var(--vault-purple-dark);
}
/* ==========================================================
VAULT INFOBOX
========================================================== */
.vault-infobox {
float:right;
width:300px;
margin:0 0 1.5rem 2rem;
background:var(--vault-white);
border:1px solid var(--vault-border);
border-radius:8px;
overflow:hidden;
}
.vault-infobox-header {
background:var(--vault-purple);
color:white !important;
padding:1rem;
text-align:center;
font-family:'Bungee',sans-serif;
font-size:1rem;
}
.vault-infobox-image {
text-align:center;
padding:1rem;
}
.vault-infobox-image img {
max-width:100%;
height:auto;
}
.vault-infobox-caption {
font-size:.75rem;
color:var(--vault-muted);
padding:.5rem 1rem 1rem;
}
.vault-infobox-row {
display:grid;
grid-template-columns:100px 1fr;
gap:1rem;
padding:.7rem 1rem;
border-top:1px solid var(--vault-border);
}
.vault-infobox-k {
font-family:'JetBrains Mono',monospace;
text-transform:uppercase;
font-size:.65rem;
color:var(--vault-muted);
}
.vault-infobox-v {
color:var(--vault-text);
}
/* ==========================================================
ASSESSMENT BOX
========================================================== */
.vault-assessment {
width:100%;
background:var(--vault-white);
border:1px solid var(--vault-border);
border-radius:8px;
margin:2rem 0;
overflow:hidden;
}
.vault-assessment-header {
background:var(--vault-purple);
color:white !important;
font-family:'Bungee',sans-serif;
text-align:center;
padding:.9rem;
}
.vault-assessment-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
}
.vault-assessment-item {
padding:1rem;
border-right:1px solid var(--vault-border);
}
.vault-assessment-item:last-child {
border-right:none;
}
.vault-assessment-label {
font-family:'JetBrains Mono',monospace;
font-size:.65rem;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--vault-muted);
}
.vault-assessment-value {
color:var(--vault-text);
margin-top:.4rem;
line-height:1.5;
}
.vault-assessment-status {
color:#4c8b00;
font-weight:bold;
}
/* ==========================================================
PROFILE / PERSON ASSESSMENT
========================================================== */
.vault-profile-assessment {
background:var(--vault-white);
border:1px solid var(--vault-border);
border-radius:8px;
margin:2rem 0;
overflow:hidden;
}
.vault-profile-header {
background:var(--vault-purple);
color:white !important;
padding:.9rem;
text-align:center;
font-family:'Bungee',sans-serif;
}
.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:.65rem;
color:var(--vault-muted);
text-transform:uppercase;
}
.vault-profile-value {
margin-top:.4rem;
color:var(--vault-text);
}
/* ==========================================================
THE VAULT
SECTION 3 — ARCHIVE SYSTEM COMPONENTS
========================================================== */
/* ==========================================================
EVIDENCE ASSESSMENT
========================================================== */
.vault-evidence {
background:var(--vault-white);
border:1px solid var(--vault-border);
border-radius:8px;
margin:2rem 0;
overflow:hidden;
}
.vault-evidence-header {
background:var(--vault-purple);
color:white !important;
font-family:'Bungee',sans-serif;
text-align:center;
padding:.9rem;
}
.vault-evidence-score {
text-align:center;
font-family:'Bungee',sans-serif;
font-size:2.5rem;
color:var(--vault-amber);
padding:1rem;
}
.vault-evidence-label {
text-align:center;
font-family:'JetBrains Mono',monospace;
text-transform:uppercase;
font-size:.75rem;
color:var(--vault-muted);
padding-bottom:1rem;
}
.vault-evidence-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.vault-evidence-grid > *:not(.vault-evidence-item) {
display:none;
}
.vault-evidence-item:only-child {
grid-column:1 / -1;
}
.vault-evidence-item {
padding:1rem;
border-top:1px solid var(--vault-border);
}
.vault-evidence-title {
font-family:'JetBrains Mono',monospace;
font-size:.65rem;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--vault-muted);
}
.vault-evidence-value {
color:var(--vault-text);
margin-top:.5rem;
line-height:1.5;
}
/* ==========================================================
WORK ASSESSMENT
========================================================== */
.vault-work-assessment {
background:var(--vault-white);
border:1px solid var(--vault-border);
border-radius:8px;
margin:2rem 0;
overflow:hidden;
}
.vault-work-header {
background:var(--vault-purple);
color:white !important;
font-family:'Bungee',sans-serif;
text-align:center;
padding:.9rem;
}
.vault-work-row {
display:grid;
grid-template-columns:140px 1fr;
gap:1rem;
padding: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;
text-transform:uppercase;
font-size:.65rem;
color:var(--vault-muted);
}
.vault-work-v {
color:var(--vault-text);
line-height:1.6;
}
/* ==========================================================
LOCATION ASSESSMENT
========================================================== */
.vault-location-assessment {
background:var(--vault-white);
border:1px solid var(--vault-border);
border-radius:8px;
margin:2rem 0;
overflow:hidden;
}
.vault-location-header {
background:var(--vault-purple);
color:white !important;
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-item:last-child {
border-right:none;
}
.vault-location-label {
font-family:'JetBrains Mono',monospace;
text-transform:uppercase;
font-size:.65rem;
color:var(--vault-muted);
}
.vault-location-value {
margin-top:.4rem;
color:var(--vault-text);
}
/* ==========================================================
NOTICE BOXES
========================================================== */
.vault-notice {
background:var(--vault-white);
border:1px solid var(--vault-border);
border-left:5px solid var(--vault-amber);
padding:1.2rem;
margin:2rem 0;
border-radius:6px;
}
.vault-notice-header {
font-family:'JetBrains Mono',monospace;
font-size:.7rem;
text-transform:uppercase;
letter-spacing:.1em;
color:var(--vault-amber);
}
.vault-notice-title {
font-family:'Bungee',sans-serif;
color:var(--vault-purple-dark);
margin:.5rem 0;
}
.vault-notice-body {
color:var(--vault-text);
line-height:1.6;
}
.vault-notice.warning {
border-left-color:var(--vault-red);
}
.vault-notice.research {
border-left-color:var(--vault-blue);
}
.vault-notice.featured {
border-left-color:var(--vault-green);
}
/* ==========================================================
STATISTICS BAR
========================================================== */
.vault-stats {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:1rem;
background:var(--vault-white);
border:1px solid var(--vault-border);
border-radius:8px;
padding:1.5rem;
margin:2rem 0;
text-align:center;
}
.vault-stat-number {
font-family:'Bungee',sans-serif;
font-size:2rem;
color:var(--vault-purple);
}
.vault-stat-label {
font-family:'JetBrains Mono',monospace;
font-size:.7rem;
text-transform:uppercase;
color:var(--vault-muted);
}
/* ==========================================================
BUTTONS / CALL TO ACTIONS
========================================================== */
.vault-cta {
background:var(--vault-purple);
color:white;
text-align:center;
padding:2rem;
margin:2rem 0;
border-radius:8px;
}
.vault-cta-title {
font-family:'Bungee',sans-serif;
font-size:1.5rem;
}
.vault-btn {
display:inline-block;
padding:.7rem 1.5rem;
margin:.5rem;
border-radius:5px;
font-family:'JetBrains Mono',monospace;
text-transform:uppercase;
font-size:.75rem;
text-decoration:none !important;
}
.vault-btn-primary {
background:var(--vault-green);
color:#111 !important;
}
.vault-btn-secondary {
background:white;
color:var(--vault-purple) !important;
}
/* ==========================================================
TAGS
========================================================== */
.vault-tag {
display:inline-block;
background:#eee7f5;
border:1px solid #d5c5e8;
color:var(--vault-purple) !important;
border-radius:20px;
padding:.25rem .7rem;
margin:.2rem;
font-size:.7rem;
font-family:'JetBrains Mono',monospace;
text-transform:uppercase;
}
/* ==========================================================
COSMOS SKIN COMPATIBILITY
========================================================== */
#cosmos-rail .rail-module,
.rail-module {
background:var(--vault-white);
border:1px solid var(--vault-border);
color:var(--vault-text);
}
.rail-module-header {
color:var(--vault-purple) !important;
font-family:'JetBrains Mono',monospace;
}
#searchInput,
.cosmos-searchInput input {
background:white !important;
color:var(--vault-text) !important;
border:1px solid var(--vault-border) !important;
}
/* ==========================================================
RESPONSIVE DESIGN
========================================================== */
@media screen and (max-width:800px) {
.vault-infobox {
float:none;
width:100%;
margin:1rem 0;
}
.vault-assessment-grid,
.vault-profile-grid,
.vault-location-grid {
grid-template-columns:1fr;
}
.vault-evidence-grid {
grid-template-columns:1fr;
}
.vault-work-row {
grid-template-columns:1fr;
}
.vault-hero .vault-title {
font-size:2rem;
}
}
/* ==========================================================
END OF THE VAULT ARCHIVE STYLE SYSTEM
========================================================== */
/* ==========================================================
THE EERIE FILES — CLASSIFIED DOSSIER THEME
Main Page Only
========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Oswald:wght@500;600;700&display=swap');
.ef-page {
background:#0b0b0d;
color:#d8d4c4;
padding:2rem;
font-family:'Special Elite',monospace;
}
.ef-stamp-header {
text-align:center;
padding:3rem 1rem 2rem;
border-bottom:2px dashed #3a3a3e;
margin-bottom:2rem;
}
.ef-stamp-header .ef-classified {
display:inline-block;
border:3px solid #b3262f;
color:#b3262f;
font-family:'Oswald',sans-serif;
font-weight:700;
letter-spacing:.3em;
padding:.3rem 1.2rem;
transform:rotate(-4deg);
margin-bottom:1.5rem;
}
.ef-stamp-header .ef-title {
font-family:'Oswald',sans-serif;
font-weight:700;
font-size:3rem;
letter-spacing:.05em;
color:#ece7d8;
text-transform:uppercase;
}
.ef-stamp-header .ef-subtitle {
color:#8a8578;
font-size:.85rem;
letter-spacing:.15em;
text-transform:uppercase;
margin-top:.5rem;
}
.ef-tabs-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:1.5rem;
margin:2.5rem 0;
}
.ef-tab {
background:#16161a;
border:1px solid #2a2a2e;
position:relative;
padding:1.5rem 1.2rem 1.2rem;
text-decoration:none !important;
display:block;
}
.ef-tab::before {
content:"";
position:absolute;
top:-10px;
left:1.2rem;
width:50px;
height:10px;
background:#b3262f;
}
.ef-tab-title {
font-family:'Oswald',sans-serif;
text-transform:uppercase;
letter-spacing:.05em;
color:#ece7d8 !important;
font-size:1.1rem;
}
.ef-tab-desc {
color:#8a8578;
font-size:.8rem;
margin-top:.5rem;
line-height:1.5;
}
.ef-case-file {
background:#16161a;
border:1px solid #2a2a2e;
padding:2rem;
position:relative;
margin:2.5rem 0;
}
.ef-case-file .ef-stamp-corner {
position:absolute;
top:1.2rem;
right:1.5rem;
border:2px solid #c98a2c;
color:#c98a2c;
font-family:'Oswald',sans-serif;
font-size:.75rem;
letter-spacing:.2em;
padding:.2rem .6rem;
transform:rotate(6deg);
}
.ef-case-file .ef-case-label {
color:#8a8578;
font-size:.75rem;
letter-spacing:.2em;
text-transform:uppercase;
}
.ef-case-file .ef-case-title {
font-family:'Oswald',sans-serif;
font-size:1.8rem;
color:#ece7d8;
margin:.5rem 0 1rem;
}
.ef-redacted {
background:#000;
color:#000;
padding:0 .3em;
border-radius:2px;
}
.ef-ledger {
border-top:1px dashed #3a3a3e;
margin:2.5rem 0;
padding-top:1.5rem;
}
.ef-ledger li {
list-style:none;
border-bottom:1px dotted #2a2a2e;
padding:.6rem 0;
color:#d8d4c4;
}
.ef-stats-strip {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
border-top:2px dashed #3a3a3e;
border-bottom:2px dashed #3a3a3e;
margin:2.5rem 0;
padding:1.5rem 0;
text-align:center;
}
.ef-stat-number {
font-family:'Oswald',sans-serif;
font-size:2.2rem;
color:#c98a2c;
}
.ef-stat-label {
color:#8a8578;
font-size:.7rem;
letter-spacing:.15em;
text-transform:uppercase;
margin-top:.3rem;
}
.ef-submit {
border:2px solid #b3262f;
padding:2rem;
text-align:center;
margin:2.5rem 0 1rem;
}
.ef-submit-title {
font-family:'Oswald',sans-serif;
color:#ece7d8;
font-size:1.3rem;
letter-spacing:.05em;
text-transform:uppercase;
margin-bottom:.8rem;
}
.ef-btn {
display:inline-block;
border:1px solid #c98a2c;
color:#c98a2c !important;
font-family:'Oswald',sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
font-size:.75rem;
padding:.6rem 1.4rem;
margin:.8rem .4rem 0;
text-decoration:none !important;
}
.ef-btn:hover {
background:#c98a2c;
color:#0b0b0d !important;
}