MediaWiki:Common.css: Difference between revisions

Help

Revision as of 23:19, 29 July 2026

/* ==========================================================
   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
   ========================================================== */

@@ Line 3: / Line 3: @@
     MediaWiki:Common.css
-    Purpose:
+    VAULT DESIGN SYSTEM v2
-    - Vault template styling
+    PART 1 — FOUNDATION
-   - Typography
-   - Custom components
-    Default MediaWiki/Cosmos colours are preserved.
+    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');
 /* ==========================================================
-    FONTS
+    VAULT COLOUR SYSTEM
     ========================================================== */
-@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);
+: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;
+}
 /* ==========================================================
-    VAULT TYPOGRAPHY
+    GLOBAL PAGE
     ========================================================== */
+html {
+    background: var(--vault-background);
+}
 body {
-     font-family:'Space Grotesk', sans-serif;
+    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
+   ========================================================== */
@@ Line 40: / Line 148: @@
 .mw-first-heading {
-     font-family:'Bungee', system-ui, sans-serif;
+     font-family:
+        'Bungee',
+        system-ui,
+        sans-serif !important;
+    color:
+        var(--vault-text) !important;
+    letter-spacing:
+        .02em;
+}
+.firstHeading,
+.mw-first-heading {
+    border-bottom:
+px solid var(--vault-purple);
+    padding-bottom:
+        .6rem;
 }
@@ Line 46: / Line 175: @@
-code,
+h2 {
-pre,
-.mw-code {
+    border-bottom:
+px solid var(--vault-border);
-     font-family:'JetBrains Mono', monospace;
+     padding-bottom:
+        .35rem;
+    margin-top:
+rem;
+    color:
+        var(--vault-purple) !important;
 }
+h3 {
+    color:
+        var(--vault-purple-dark) !important;
+}
 /* ==========================================================
-    VAULT HERO
+    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:
+px solid var(--vault-purple);
+    padding:
+rem 1.5rem;
+    margin:
+.5rem 0;
+    color:
+        var(--vault-muted);
+}
+/* ==========================================================
+   TABLES
+   ========================================================== */
+table.wikitable {
+    background:
+        var(--vault-surface) !important;
+    color:
+        var(--vault-text) !important;
+    border:
+px 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:
+px solid var(--vault-border) !important;
+}
+table.wikitable tr:nth-child(even) {
+    background:
+        #faf8f3;
+}
+/* ==========================================================
+   CATEGORY FOOTER
+   ========================================================== */
+#catlinks,
+.catlinks {
+    background:
+        var(--vault-surface);
+    border:
+px solid var(--vault-border);
+    border-radius:
+px;
+    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:
+px 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
     ========================================================== */
@@ Line 65: / Line 474: @@
 .vault-hero {
-     text-align:center;
+     background:
+        linear-gradient(
+deg,
+            #ffffff,
+            #f1eadc
+        );
+    border:
+px solid var(--vault-border);
+    border-left:
+px solid var(--vault-purple);
+    border-radius:
+px;
-     padding:2rem 1rem;
+     padding:
+.5rem;
-     border-radius:10px;
+     margin:
+rem 0 2rem;
-     margin-bottom:1.8rem;
+     text-align:
+        center;
 }
@@ Line 79: / Line 505: @@
 .vault-hero .vault-title {
-     font-family:'Bungee', sans-serif;
+     font-family:
+        'Bungee',
+        sans-serif;
+    font-size:
+.5rem;
+    color:
+        var(--vault-purple-dark);
+    margin:
+;
+}
-    font-size:2.2rem;
-     margin:0;
+.vault-hero .vault-title span {
+     color:
+        var(--vault-green-dark);
 }
@@ Line 91: / Line 533: @@
 .vault-hero .vault-tagline {
-     font-family:'JetBrains Mono', monospace;
+     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:
+.2rem;
+    margin:
+rem 0;
+}
+.vault-portal-card {
+    display:
+        block;
+    background:
+        var(--vault-surface);
+    border:
+px solid var(--vault-border);
+    border-radius:
+px;
-     font-size:.75rem;
+     padding:
+.5rem;
-     letter-spacing:.2em;
+     text-decoration:
+        none !important;
-     text-transform:uppercase;
+     transition:
+        .2s ease;
+}
+.vault-portal-card:hover {
+    transform:
+        translateY(-5px);
+    border-color:
+        var(--vault-green);
+    box-shadow:
+8px 20px rgba(0,0,0,.08);
+}
+.vault-portal-card .icon {
+    font-size:
+rem;
+}
+.vault-portal-card .label {
+    display:
+        block;
+    font-family:
+        'Bungee',
+        sans-serif;
+    font-size:
+rem;
+    color:
+        var(--vault-purple) !important;
+    margin:
+        .7rem 0;
+}
+.vault-portal-card .desc {
+    color:
+        var(--vault-muted) !important;
+    font-size:
+        .9rem;
+    line-height:
+.5;
 }
@@ Line 106: / Line 673: @@
 /* ==========================================================
-    VAULT CARDS
+    FEATURE CASE CARDS
+   Template: CaseCard
     ========================================================== */
-.vault-portal-grid,
 .vault-case-grid {
-     display:grid;
+     display:
+        grid;
      grid-template-columns:
-    repeat(auto-fit,minmax(220px,1fr));
+        repeat(auto-fit,minmax(240px,1fr));
-     gap:1rem;
+     gap:
+.2rem;
-    margin:1.5rem 0;
 }
@@ Line 126: / Line 693: @@
-.vault-portal-card,
 .vault-case-card {
-     padding:1.3rem;
+     background:
+        var(--vault-surface);
-     border:1px solid #ccc;
+     border:
+px solid var(--vault-border);
-     border-radius:8px;
+     border-radius:
+px;
-     display:block;
+     padding:
+.4rem;
-     text-decoration:none !important;
+     transition:
+        .2s;
-    transition:.2s;
 }
@@ Line 145: / Line 714: @@
-.vault-portal-card:hover,
 .vault-case-card:hover {
-     transform:translateY(-3px);
+    border-color:
+        var(--vault-purple);
+     transform:
+        translateY(-4px);
 }
@@ Line 154: / Line 726: @@
-.vault-portal-card .label,
 .vault-case-card-title {
-     font-family:'Bungee', sans-serif;
+     font-family:
+        'Bungee',
+        sans-serif;
+    font-size:
+.1rem;
-     font-size:1rem;
+     color:
+        var(--vault-purple-dark) !important;
 }
@@ Line 165: / Line 742: @@
-.vault-portal-card .desc,
 .vault-case-card-excerpt {
-     font-size:.85rem;
+    color:
+        var(--vault-muted) !important;
+     font-size:
+        .9rem;
-     line-height:1.5;
+     margin-top:
+        .6rem;
+}
+/* ==========================================================
+   STATISTICS BAR
+   Template: StatsBar
+   ========================================================== */
+.vault-stats-bar {
+    display:
+        grid;
+    grid-template-columns:
+        repeat(auto-fit,minmax(150px,1fr));
+    gap:
+rem;
+    background:
+        var(--vault-surface);
+    border:
+px solid var(--vault-border);
+    border-radius:
+px;
+    padding:
+.5rem;
+    margin:
+rem 0;
+    text-align:
+        center;
+}
+.vault-stats-bar-number {
+    font-family:
+        'Bungee',
+        sans-serif;
+    font-size:
+rem;
+    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;
 }
@@ Line 179: / Line 838: @@
 /* ==========================================================
-    INFOBOX
+    DID YOU KNOW
+   Template: DidYouKnow
     ========================================================== */
-.vault-infobox {
+.vault-dyk {
+    background:
+        #fffdf8;
+    border:
+px solid var(--vault-border);
+    border-left:
+px solid var(--vault-amber);
+    border-radius:
+px;
+    padding:
+.4rem 1.6rem;
+    margin:
+rem 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:
+px;
+    padding:
+rem;
+    text-align:
+        center;
+    margin:
+rem 0;
+}
+.vault-cta-strip a {
+    color:
+        white;
+}
+.vault-btn {
+    display:
+        inline-block;
+    padding:
+        .7rem 1.4rem;
+    margin:
+        .4rem;
+    border-radius:
+px;
+    font-family:
+        'JetBrains Mono',
+        monospace;
+    text-transform:
+        uppercase;
+    font-size:
+        .75rem;
+}
+.vault-btn-primary {
+    background:
+        var(--vault-green);
-     float:right;
+     color:
+        #16200b !important;
-    width:280px;
+}
-    margin:0 0 1rem 1.5rem;
-    border:1px solid #aaa;
-    border-radius:6px;
+.vault-btn-vault {
-     overflow:hidden;
+     background:
+        var(--vault-purple);
+    color:
+        white !important;
 }
@@ Line 201: / Line 985: @@
-.vault-infobox-header {
-    font-family:'Bungee', sans-serif;
-     text-align:center;
+/* ==========================================================
+   STANDARD INFORMATION PANELS
+   ========================================================== */
+.vault-featured,
+.vault-notice {
+     background:
+        var(--vault-surface);
+    border:
+px solid var(--vault-border);
+    border-radius:
+px;
+    padding:
+.5rem;
+    margin:
+rem 0;
+}
+.vault-featured {
-     padding:.7rem;
+     border-left:
+px solid var(--vault-green);
 }
@@ Line 213: / Line 1,023: @@
-.vault-infobox-image {
+.vault-featured-title {
+    font-family:
+        'Bungee',
+        sans-serif;
-     text-align:center;
+     color:
+        var(--vault-purple-dark);
 }
@@ Line 221: / Line 1,036: @@
-.vault-infobox-image img {
+/* ==========================================================
+   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:
+px;
+    margin:
+0 1.5rem 2rem;
+    background:
+        var(--vault-surface);
+    border:
+px solid var(--vault-border);
+    border-radius:
+px;
-     max-width:100%;
+     overflow:
+        hidden;
-     height:auto;
+     box-shadow:
+4px 12px rgba(0,0,0,.08);
 }
@@ Line 231: / Line 1,095: @@
-.vault-infobox-caption {
+.vault-infobox-header {
+    background:
+        var(--vault-purple-dark);
+    color:
+        white;
+    font-family:
+        'Bungee',
+        sans-serif;
-     font-size:.75rem;
+     text-align:
+        center;
-     padding:.5rem;
+     padding:
+        .9rem;
 }
@@ Line 243: / Line 1,119: @@
 .vault-infobox-row {
-     display:grid;
+     display:
+        grid;
-     grid-template-columns:95px 1fr;
+     grid-template-columns:
+px 1fr;
-     gap:.5rem;
+     gap:
+        .8rem;
-     padding:.5rem .8rem;
+     padding:
+        .7rem 1rem;
-     border-top:1px solid #ddd;
+     border-top:
+px solid var(--vault-border);
-     font-size:.85rem;
+}
+.vault-infobox-k {
+    font-family:
+        'JetBrains Mono',
+        monospace;
+     font-size:
+        .65rem;
+    text-transform:
+        uppercase;
+    color:
+        var(--vault-muted);
 }
@@ Line 259: / Line 1,157: @@
-.vault-infobox-k {
+.vault-infobox-v {
+    color:
+        var(--vault-text);
+    line-height:
+.4;
+}
+.vault-infobox-image {
+    text-align:
+        center;
+}
-    font-family:'JetBrains Mono',monospace;
-    font-size:.65rem;
-     text-transform:uppercase;
+.vault-infobox-image img {
+     max-width:
+%;
+    height:
+        auto;
 }
@@ Line 271: / Line 1,190: @@
-.vault-infobox-status {
+.vault-infobox-caption {
+    font-size:
+        .75rem;
+    color:
+        var(--vault-muted);
-     font-weight:bold;
+     padding:
+        .6rem;
 }
@@ Line 283: / Line 1,209: @@
 /* ==========================================================
     VAULT ASSESSMENT
+   Full width evidence summary
     ========================================================== */
@@ Line 288: / Line 1,215: @@
 .vault-assessment {
-     width:100%;
+     width:
+%;
-     margin:1.5rem 0;
+     background:
+        var(--vault-surface);
-     border:1px solid #aaa;
+     border:
+px solid var(--vault-border);
-     border-radius:8px;
+     border-radius:
+px;
-     overflow:hidden;
+     margin:
+rem 0;
-     clear:both;
+     overflow:
+        hidden;
 }
@@ Line 306: / Line 1,239: @@
 .vault-assessment-header {
-     font-family:'Bungee',sans-serif;
+     background:
+        var(--vault-purple-dark);
-     text-align:center;
+     color:
+        white;
-     padding:.8rem;
+    font-family:
+        'Bungee',
+        sans-serif;
+    text-align:
+        center;
+     padding:
+        .9rem;
 }
@@ Line 318: / Line 1,261: @@
 .vault-assessment-grid {
-     display:grid;
+     display:
+        grid;
-     grid-template-columns:repeat(2,1fr);
+     grid-template-columns:
+        repeat(2,1fr);
 }
@@ Line 328: / Line 1,273: @@
 .vault-assessment-item {
-     padding:1rem;
+     padding:
+rem;
-     border-top:1px solid #ddd;
+     border-top:
+px solid var(--vault-border);
 }
@@ Line 338: / Line 1,285: @@
 .vault-assessment-label {
-     font-family:'JetBrains Mono',monospace;
+     font-family:
+        'JetBrains Mono',
+        monospace;
+    font-size:
+        .7rem;
-     font-size:.7rem;
+     text-transform:
+        uppercase;
-     text-transform:uppercase;
+     color:
+        var(--vault-muted);
 }
@@ Line 350: / Line 1,304: @@
 .vault-assessment-value {
-     line-height:1.5;
+     color:
+        var(--vault-text);
+    margin-top:
+        .3rem;
 }
@@ Line 358: / Line 1,316: @@
 .vault-assessment-status {
-     font-weight:bold;
+    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);
-@media screen and (max-width:700px) {
+}
-    .vault-assessment-grid {
-        grid-template-columns:1fr;
+.vault-assessment-folklore .vault-assessment-header {
-     }
+     background:
+        var(--folklore);
 }
@@ Line 379: / Line 1,381: @@
 /* ==========================================================
-    WORK / BOOK / PROFILE / LOCATION ASSESSMENTS
+    WORK ASSESSMENT
+   Books, films, TV, articles
     ========================================================== */
-.vault-work-assessment,
+.vault-work-assessment {
-.vault-profile-assessment,
-.vault-location-assessment,
-.vault-evidence {
-     width:100%;
+     width:
+%;
-     margin:1.5rem 0;
+     background:
+        var(--vault-surface);
-     border:1px solid #aaa;
+     border:
+px solid var(--vault-border);
-     border-radius:8px;
+     border-radius:
+px;
-     overflow:hidden;
+     overflow:
+        hidden;
-     clear:both;
+     margin:
+rem 0;
 }
@@ Line 404: / Line 1,410: @@
-.vault-work-header,
+.vault-work-header {
-.vault-profile-header,
-.vault-location-header,
-.vault-evidence-header {
-     font-family:'Bungee',sans-serif;
+     background:
+        var(--vault-purple);
-     text-align:center;
+     color:
+        white;
-     padding:.8rem;
+    text-align:
+        center;
+    font-family:
+        'Bungee',
+        sans-serif;
+     padding:
+        .9rem;
 }
@@ Line 421: / Line 1,434: @@
 .vault-work-row {
-     display:grid;
+     display:
+        grid;
-     grid-template-columns:130px 1fr;
+     grid-template-columns:
+px 1fr;
-     gap:1rem;
+     padding:
+        .8rem 1rem;
-    padding:.8rem 1rem;
+     border-top:
+px solid var(--vault-border);
-     border-top:1px solid #ddd;
 }
@@ Line 437: / Line 1,452: @@
 .vault-work-section {
-     padding:1rem;
+     padding:
+.2rem;
-     border-top:1px solid #ddd;
+     border-top:
+px solid var(--vault-border);
 }
@@ Line 447: / Line 1,464: @@
 .vault-work-k {
-     font-family:'JetBrains Mono',monospace;
+     font-family:
+        'JetBrains Mono',
+        monospace;
-     font-size:.7rem;
+     font-size:
+        .7rem;
-     text-transform:uppercase;
+     text-transform:
+        uppercase;
+    color:
+        var(--vault-muted);
 }
@@ Line 459: / Line 1,483: @@
 .vault-work-v {
-     line-height:1.6;
+     color:
+        var(--vault-text);
+}
+.vault-work-status {
+    color:
+        var(--vault-green-dark);
+    font-weight:
+        bold;
 }
@@ Line 468: / Line 1,505: @@
 /* ==========================================================
-    NOTICE BOX
+    PROFILE ASSESSMENT
+   People
     ========================================================== */
-.vault-notice {
+.vault-profile-assessment {
+    width:
+%;
+    background:
+        var(--vault-surface);
+    border:
+px solid var(--vault-border);
+    border-radius:
+px;
+    overflow:
+        hidden;
+    margin:
+rem 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);
+}
-    border-left:4px solid #888;
+.vault-profile-item {
-     padding:1rem 1.2rem;
+     padding:
+rem;
-     margin:1.5rem 0;
+     border-right:
+px solid var(--vault-border);
 }
@@ Line 484: / Line 1,580: @@
-.vault-notice-header {
+.vault-profile-label {
+    font-family:
+        'JetBrains Mono',
+        monospace;
+    font-size:
+        .7rem;
+    text-transform:
+        uppercase;
+    color:
+        var(--vault-muted);
+}
-    font-family:'JetBrains Mono',monospace;
-    text-transform:uppercase;
+.vault-profile-value {
-     font-size:.7rem;
+     color:
+        var(--vault-text);
 }
@@ Line 496: / Line 1,608: @@
-.vault-notice-title {
+.vault-profile-summary {
+    padding:
+.2rem;
-     font-family:'Bungee',sans-serif;
+     border-top:
+px solid var(--vault-border);
 }
@@ Line 507: / Line 1,623: @@
 /* ==========================================================
-    BUTTONS
+    LOCATION ASSESSMENT
+   Places
     ========================================================== */
-.vault-btn {
+.vault-location-assessment {
+    width:
+%;
+    background:
+        var(--vault-surface);
+    border:
+px solid var(--vault-border);
+    border-radius:
+px;
+    overflow:
+        hidden;
+    margin:
+rem 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);
+}
-    display:inline-block;
-    padding:.7rem 1.3rem;
-    border-radius:4px;
+.vault-location-item {
-     font-family:'JetBrains Mono',monospace;
+     padding:
+rem;
-     text-decoration:none !important;
+     border-right:
+px solid var(--vault-border);
 }
@@ Line 527: / Line 1,698: @@
+.vault-location-label {
+    font-family:
+        'JetBrains Mono',
+        monospace;
+    font-size:
+        .7rem;
+    text-transform:
+        uppercase;
-/* ==========================================================
+    color:
-   TAGS
+        var(--vault-muted);
-   ========================================================== */
+}
-.vault-tag {
-    display:inline-block;
+.vault-location-value {
-     padding:.25rem .7rem;
+     color:
+        var(--vault-text);
-    border:1px solid #aaa;
+}
-    border-radius:999px;
-    font-family:'JetBrains Mono',monospace;
-    font-size:.7rem;
+.vault-location-summary {
-     text-transform:uppercase;
+     padding:
+.2rem;
+    border-top:
+px solid var(--vault-border);
 }
@@ Line 557: / Line 1,741: @@
 /* ==========================================================
-    STATS
+    VAULT NOTICE
     ========================================================== */
-.vault-stats-bar {
+.vault-notice {
+    background:
+        #fffdf8;
+    border:
+px solid var(--vault-border);
+    border-left:
+px solid var(--vault-amber);
+    border-radius:
+px;
+    padding:
+.2rem;
+    margin:
+rem 0;
+}
+.vault-notice-header {
+    font-family:
+        'JetBrains Mono',
+        monospace;
+    text-transform:
+        uppercase;
+    color:
+        var(--vault-amber);
+}
+.vault-notice-title {
+    font-family:
+        'Bungee',
+        sans-serif;
+}
-    display:grid;
-    grid-template-columns:
-    repeat(auto-fit,minmax(140px,1fr));
-    gap:1rem;
+.vault-notice-body {
-     padding:1.4rem;
+     color:
+        var(--vault-text);
-    margin:1.8rem 0;
+}
-    border:1px solid #aaa;
-    border-radius:8px;
-     text-align:center;
+.vault-notice.warning {
+     border-left-color:
+        var(--vault-red);
 }
+.vault-notice.research {
+    border-left-color:
+        #315c8c;
+}
-.vault-stats-bar-number {
-    font-family:'Bungee',sans-serif;
+.vault-notice.featured {
-     font-size:1.8rem;
+     border-left-color:
+        var(--vault-green);
 }
@@ Line 597: / Line 1,832: @@
 /* ==========================================================
-    RESPONSIVE
+    MOBILE RESPONSIVE
     ========================================================== */
@@ Line 606: / Line 1,841: @@
      .vault-infobox {
-         float:none;
+         float:
+            none;
-         width:100%;
+         width:
+%;
-         margin:1rem 0;
+         margin:
+rem 0;
+    }
+    .vault-assessment-grid,
+    .vault-profile-grid,
+    .vault-location-grid {
+        grid-template-columns:
+fr;
+    }
+    .vault-profile-item,
+    .vault-location-item {
+        border-right:
+            none;
+        border-bottom:
+px solid var(--vault-border);
      }
@@ Line 617: / Line 1,877: @@
      .vault-work-row {
-         grid-template-columns:1fr;
+         grid-template-columns:
+fr;
+    }
+    .vault-hero .vault-title {
+        font-size:
+.8rem;
      }
@@ Line 623: / Line 1,892: @@
 }
+/* ==========================================================
+   END VAULT DESIGN SYSTEM v2
+   ========================================================== */

GaryJJSpate (talk | contribs)

Revision as of 23:19, 29 July 2026