Revision as of 00:32, 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
========================================================== */
/* ==========================================================
MAIN PAGE — ASYMMETRIC LAYOUT
Uses existing --vault-* variables only, no new colours
========================================================== */
.ef-layout {
display:grid;
grid-template-columns:2fr 1fr;
grid-template-areas:
"nav nav"
"main aside"
"footer footer";
gap:2.5rem;
align-items:start;
}
/* horizontal tab strip instead of a card grid */
.ef-nav-strip {
grid-area:nav;
display:flex;
flex-wrap:wrap;
gap:0;
border-bottom:2px solid var(--vault-purple);
padding-bottom:0;
}
.ef-nav-strip a {
font-family:'JetBrains Mono',monospace;
text-transform:uppercase;
font-size:.75rem;
letter-spacing:.1em;
color:var(--vault-muted) !important;
padding:.8rem 1.2rem;
border-bottom:3px solid transparent;
text-decoration:none !important;
}
.ef-nav-strip a:hover {
color:var(--vault-purple) !important;
border-bottom-color:var(--vault-purple);
}
/* main column — editorial style, not a boxed panel */
.ef-main {
grid-area:main;
}
.ef-dropcap:first-letter {
font-family:'Bungee',sans-serif;
font-size:3.5rem;
float:left;
line-height:.8;
padding:.1rem .5rem 0 0;
color:var(--vault-purple-dark);
}
.ef-case-heading {
font-family:'Bungee',sans-serif;
font-size:1.8rem;
color:var(--vault-purple-dark);
margin:0 0 .3rem;
}
.ef-case-meta {
font-family:'JetBrains Mono',monospace;
font-size:.7rem;
text-transform:uppercase;
letter-spacing:.1em;
color:var(--vault-muted);
margin-bottom:1rem;
}
/* pull-note floated inside the main column, not a full-width box */
.ef-marginal-note {
float:right;
width:220px;
margin:.3rem 0 1rem 1.5rem;
padding:1rem;
border-top:2px solid var(--vault-amber);
background:var(--vault-white);
}
.ef-marginal-note .ef-note-label {
font-family:'JetBrains Mono',monospace;
font-size:.65rem;
text-transform:uppercase;
letter-spacing:.1em;
color:var(--vault-amber);
margin-bottom:.5rem;
}
.ef-marginal-note ul {
margin:0;
padding-left:1.1rem;
font-size:.85rem;
color:var(--vault-text);
}
/* sidebar — sticky, compact, stacked lists not stat boxes */
.ef-aside {
grid-area:aside;
position:sticky;
top:1rem;
}
.ef-aside-block {
margin-bottom:2rem;
}
.ef-aside-heading {
font-family:'JetBrains Mono',monospace;
text-transform:uppercase;
font-size:.7rem;
letter-spacing:.15em;
color:var(--vault-purple);
border-bottom:1px solid var(--vault-border);
padding-bottom:.5rem;
margin-bottom:.8rem;
}
.ef-aside ul {
list-style:none;
margin:0;
padding:0;
font-size:.85rem;
}
.ef-aside li {
padding:.5rem 0;
border-bottom:1px dotted var(--vault-border);
}
.ef-inline-stats {
display:flex;
justify-content:space-between;
font-family:'JetBrains Mono',monospace;
font-size:.8rem;
padding:.4rem 0;
border-bottom:1px dotted var(--vault-border);
}
.ef-inline-stats b {
color:var(--vault-purple-dark);
}
.ef-aside-cta {
font-size:.85rem;
}
.ef-aside-cta a {
color:var(--vault-purple) !important;
}
.ef-footer-line {
grid-area:footer;
text-align:center;
font-family:'JetBrains Mono',monospace;
font-size:.7rem;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--vault-muted);
border-top:1px solid var(--vault-border);
padding-top:1.5rem;
}
@media screen