×
Create a new article
Write your page title here:
We currently have 245 articles on The Vault @ The EERIE Files. Type your article name above or click on one of the titles below and start writing!



The Vault @ The EERIE Files

MediaWiki:Common.css: Difference between revisions

No edit summary
Tag: Manual revert
No edit summary
Line 1,581: Line 1,581:
   END OF THE VAULT ARCHIVE STYLE SYSTEM
   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

Revision as of 00:32, 30 July 2026

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