×
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
The Vault @ The EERIE Files
245Articles

MediaWiki:Common.css: Difference between revisions

← Older editNewer edit →

GaryJJSpate (talk | contribs)

3 user groups
1,819 edits
No edit summary
No edit summary
Line 3: Line 3:
   MediaWiki:Common.css
   MediaWiki:Common.css


   VAULT DESIGN SYSTEM v2
   VERSION 2.0
   PART 1 — FOUNDATION
   Archive Edition


   Archive aesthetic:
   Clean research archive aesthetic:
   - parchment background
   - Paper background
   - dark readable text
   - Dark text
   - coloured Vault headers
   - Vault accent colours
   - clean research database style
   - Cosmos compatible
   ========================================================== */
   ========================================================== */


Line 22: Line 22:


/* ==========================================================
/* ==========================================================
   VAULT COLOUR SYSTEM
   COLOUR SYSTEM
   ========================================================== */
   ========================================================== */


:root {
:root {


     /* Page */
     --vault-paper:#f4f1e8;
     --vault-background: #f5f1e8;
     --vault-white:#ffffff;
     --vault-surface: #ffffff;
     --vault-text:#222222;
     --vault-border: #d8d0c2;
     --vault-muted:#666666;


    /* Text */
     --vault-border:#d8d2c4;
     --vault-text: #24201c;
    --vault-muted: #6f665c;


    /* Vault branding */
     --vault-purple:#5c2d91;
     --vault-green: #7fbf32;
     --vault-purple-dark:#3d1d63;
     --vault-green-dark: #355834;


     --vault-purple: #7b3fb3;
     --vault-green:#a6ff3f;
     --vault-purple-dark: #4d286f;
     --vault-amber:#d89b00;
    --vault-red:#a83232;
    --vault-blue:#315f8c;


    --vault-amber: #c48a00;
}
    --vault-red: #9b3434;
 
    /* Category colours */
    --cryptid: #355834;
    --ufo: #315c8c;
    --haunting: #5b3b70;
    --psychic: #a36a00;
    --forteana: #555555;
    --folklore: #765438;


}




/* ==========================================================
/* ==========================================================
   GLOBAL PAGE
   BASE MEDIAWIKI
   ========================================================== */
   ========================================================== */


Line 64: Line 53:
html {
html {


     background: var(--vault-background);
     background:var(--vault-paper);


}
}
Line 71: Line 60:
body {
body {


     background: var(--vault-background) !important;
     background:var(--vault-paper) !important;


     color: var(--vault-text) !important;
     color:var(--vault-text) !important;


     font-family:
     font-family:'Space Grotesk', sans-serif !important;
        'Space Grotesk',
        Arial,
        sans-serif !important;


}
}




/* Main MediaWiki containers */


#content,
#content,
Line 91: Line 75:
#mw-content-text {
#mw-content-text {


     background:
     background:transparent !important;
        transparent !important;


     color:
     color:var(--vault-text);
        var(--vault-text) !important;


}
}
Line 101: Line 83:




/* Article wrapper */
.mw-parser-output {


.mw-body {
    color:var(--vault-text);


     border: none !important;
     line-height:1.65;


}
}
Line 113: Line 95:
/* ==========================================================
/* ==========================================================
   TYPOGRAPHY
   TYPOGRAPHY
  ========================================================== */
p,
li,
dd,
dt {
    color: var(--vault-text);
    line-height: 1.65;
}
strong {
    font-weight: 700;
}
/* ==========================================================
  HEADINGS
   ========================================================== */
   ========================================================== */


Line 148: Line 105:
.mw-first-heading {
.mw-first-heading {


    font-family:
        'Bungee',
        system-ui,
        sans-serif !important;


     color:
    font-family:'Bungee',sans-serif !important;
        var(--vault-text) !important;
 
     color:var(--vault-purple-dark) !important;


     letter-spacing:
     letter-spacing:.02em;
        .02em;


}
}




Line 165: Line 119:
.mw-first-heading {
.mw-first-heading {


    border-bottom:
        3px solid var(--vault-purple);


     padding-bottom:
    border-bottom:3px solid var(--vault-purple);
        .6rem;
 
     padding-bottom:.5rem;
 


}
}
Line 177: Line 131:
h2 {
h2 {


    border-bottom:
        1px solid var(--vault-border);


     padding-bottom:
     border-bottom:1px solid var(--vault-border);
        .35rem;


     margin-top:
    padding-bottom:.3rem;
        2rem;
 
     margin-top:2rem;


    color:
        var(--vault-purple) !important;


}
}
Line 195: Line 145:
h3 {
h3 {


     color:
     color:var(--vault-purple);
        var(--vault-purple-dark) !important;


}
}
Line 209: Line 158:
a {
a {


     color:
     color:var(--vault-purple);
        #246a9b;


}
}




a:visited {
a:visited {


     color:
     color:#74509b;
        #694b8f;


}
}




a:hover {
a:hover {


     color:
     color:#8a5cc4 !important;
        var(--vault-green-dark) !important;


}
}
Line 234: Line 182:
a.new {
a.new {


     color:
     color:var(--vault-red) !important;
        #a33b3b !important;


}
}
Line 242: Line 189:


/* ==========================================================
/* ==========================================================
   ARTICLE BODY
   TABLES
   ========================================================== */
   ========================================================== */




.mw-parser-output {
table.wikitable {
 
 
    background:var(--vault-white) !important;
 
    color:var(--vault-text) !important;
 
    border:1px solid var(--vault-border) !important;


    color:
        var(--vault-text);


}
}
Line 255: Line 207:




.mw-parser-output blockquote {
table.wikitable th {


    background:
        #ebe4d7;


     border-left:
     background:var(--vault-purple) !important;
        4px solid var(--vault-purple);


     padding:
     color:white !important;
        1rem 1.5rem;


     margin:
     font-family:'JetBrains Mono',monospace;
        1.5rem 0;


    color:
        var(--vault-muted);


}
}
Line 276: Line 221:




/* ==========================================================
table.wikitable td {
  TABLES
  ========================================================== */




table.wikitable {
    border-color:var(--vault-border) !important;


    background:
        var(--vault-surface) !important;


    color:
}
        var(--vault-text) !important;


    border:
        1px solid var(--vault-border) !important;


    border-collapse:
        collapse;


}
/* ==========================================================
  CATEGORY FOOTER
  ========================================================== */




#catlinks,
.catlinks {


table.wikitable th {


     background:
     background:var(--vault-white);
        var(--vault-purple-dark) !important;


     color:
     border:1px solid var(--vault-border);
        #ffffff !important;


     font-family:
     padding:.8rem;
        'JetBrains Mono',
        monospace;


     text-transform:
     color:var(--vault-muted);
        uppercase;


    letter-spacing:
        .05em;


}
}
Line 321: Line 253:




table.wikitable td {
#catlinks a,
.catlinks a {


    border:
        1px solid var(--vault-border) !important;


}
    color:var(--vault-purple);




}


table.wikitable tr:nth-child(even) {


    background:
        #faf8f3;


}


/* ==========================================================
  THE VAULT
  SECTION 2 — ARCHIVE COMPONENTS
  ========================================================== */




/* ==========================================================
/* ==========================================================
   CATEGORY FOOTER
   VAULT HERO
   ========================================================== */
   ========================================================== */




#catlinks,
.vault-hero {
.catlinks {


     background:
     background:
         var(--vault-surface);
         linear-gradient(
            135deg,
            rgba(92,45,145,.08),
            rgba(255,255,255,.9)
        );
 
    border:1px solid var(--vault-border);


     border:
     border-left:5px solid var(--vault-purple);
        1px solid var(--vault-border);


     border-radius:
     padding:2.5rem;
        8px;


     padding:
     margin:1.5rem 0 2rem;
        .8rem 1rem;


     color:
     text-align:center;
        var(--vault-muted);


}
}
Line 366: Line 299:




#catlinks a,
.vault-hero .vault-title {
.catlinks a {
 
    font-family:'Bungee',sans-serif;
 
    font-size:2.8rem;
 
    color:var(--vault-purple-dark);


     color:
     margin:0;
        var(--vault-purple);


}
}
Line 376: Line 313:




/* ==========================================================
.vault-hero .vault-title span {
  SEARCH / FORMS
  ========================================================== */


    color:var(--vault-purple);


input,
}
textarea,
select {


    background:
        #ffffff;


    color:
        var(--vault-text);


    border:
.vault-hero .vault-tagline {
        1px solid var(--vault-border);


}
    font-family:'JetBrains Mono',monospace;


    text-transform:uppercase;


    letter-spacing:.15em;


input:focus,
    color:var(--vault-muted);
textarea:focus {


     border-color:
     font-size:.8rem;
        var(--vault-purple);


     outline:
     margin-top:.8rem;
        none;


}
}
Line 412: Line 340:


/* ==========================================================
/* ==========================================================
   MEDIAWIKI MESSAGE BOXES
   ARCHIVE CARDS
   ========================================================== */
   ========================================================== */




.cdx-message {
.vault-card-grid {


     color:
     display:grid;
         #202122;
 
    grid-template-columns:
         repeat(auto-fit,minmax(230px,1fr));
 
    gap:1.2rem;
 
    margin:2rem 0;


}
}
Line 425: Line 359:




/* ==========================================================
.vault-card {
  REFERENCES
 
  ========================================================== */
 
    background:var(--vault-white);
 
    border:1px solid var(--vault-border);
 
    border-radius:8px;
 
    padding:1.4rem;
 
    text-decoration:none !important;


    display:block;


.reflist {
    transition:.2s ease;


    color:
        var(--vault-text);


}
}




.reflist a {


     color:
.vault-card:hover {
        #246a9b !important;
 
 
     border-color:var(--vault-purple);
 
    transform:translateY(-4px);
 
    box-shadow:0 5px 15px rgba(0,0,0,.08);
 


}
}




/* ==========================================================
  END PART 1
  ========================================================== */


.vault-card-icon {
    font-size:2rem;


    display:block;


    margin-bottom:.8rem;




}






/* ==========================================================
.vault-card-title {
  THE VAULT @ THE E.E.R.I.E. FILES
 
  MediaWiki:Common.css


  VAULT DESIGN SYSTEM v2
    font-family:'Bungee',sans-serif;
  PART 2 — VAULT COMPONENTS
  ========================================================== */


    color:var(--vault-purple) !important;


/* ==========================================================
    font-size:1rem;
  HERO COMPONENT
  Template: VaultHero
  ========================================================== */




.vault-hero {
}


    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f1eadc
        );


    border:
        1px solid var(--vault-border);


    border-left:
.vault-card-description {
        6px solid var(--vault-purple);


    border-radius:
        12px;


     padding:
     color:var(--vault-muted);
        2.5rem;


     margin:
     font-size:.9rem;
        1rem 0 2rem;


     text-align:
     line-height:1.5;
        center;


}
}
Line 503: Line 436:




.vault-hero .vault-title {
/* ==========================================================
  FEATURED FILE
  ========================================================== */


    font-family:
        'Bungee',
        sans-serif;


    font-size:
.vault-feature {
        2.5rem;


    color:
        var(--vault-purple-dark);


     margin:
     background:var(--vault-white);
        0;


}
    border:1px solid var(--vault-border);


    border-left:5px solid var(--vault-green);


    padding:1.5rem;


.vault-hero .vault-title span {
    margin:2rem 0;


    color:
        var(--vault-green-dark);


}
}
Line 531: Line 459:




.vault-hero .vault-tagline {
.vault-feature-label {
 


     font-family:
     font-family:'JetBrains Mono',monospace;
        'JetBrains Mono',
        monospace;


     font-size:
     text-transform:uppercase;
        .8rem;


     text-transform:
     font-size:.7rem;
        uppercase;


     letter-spacing:
     letter-spacing:.12em;
        .15em;


     color:
     color:var(--vault-amber);
        var(--vault-muted);


    margin-top:
        .8rem;


}
}




.vault-feature-title {
    font-family:'Bungee',sans-serif;
    font-size:1.4rem;
    color:var(--vault-purple-dark);
}






/* ==========================================================
/* ==========================================================
   PORTAL CARDS
   VAULT INFOBOX
  Template: PortalCard
   ========================================================== */
   ========================================================== */




.vault-portal-grid {
.vault-infobox {


    display:
        grid;


     grid-template-columns:
     float:right;
        repeat(auto-fit,minmax(220px,1fr));
 
    width:300px;
 
    margin:0 0 1.5rem 2rem;


     gap:
     background:var(--vault-white);
        1.2rem;


     margin:
     border:1px solid var(--vault-border);
        2rem 0;


}
    border-radius:8px;


    overflow:hidden;




.vault-portal-card {
}


    display:
        block;


    background:
        var(--vault-surface);


    border:
.vault-infobox-header {
        1px solid var(--vault-border);


    border-radius:
        10px;


     padding:
     background:var(--vault-purple);
        1.5rem;


     text-decoration:
     color:white !important;
        none !important;


     transition:
     padding:1rem;
        .2s ease;


}
    text-align:center;


    font-family:'Bungee',sans-serif;


    font-size:1rem;


.vault-portal-card:hover {


    transform:
}
        translateY(-5px);


    border-color:
        var(--vault-green);


    box-shadow:
        0 8px 20px rgba(0,0,0,.08);


}
.vault-infobox-image {




    text-align:center;


.vault-portal-card .icon {
    padding:1rem;


    font-size:
        2rem;


}
}
Line 633: Line 550:




.vault-portal-card .label {
.vault-infobox-image img {


    display:
        block;


     font-family:
     max-width:100%;
        'Bungee',
        sans-serif;


     font-size:
     height:auto;
        1rem;


    color:
        var(--vault-purple) !important;


    margin:
}
        .7rem 0;


}




.vault-infobox-caption {


.vault-portal-card .desc {


     color:
     font-size:.75rem;
        var(--vault-muted) !important;


     font-size:
     color:var(--vault-muted);
        .9rem;


     line-height:
     padding:.5rem 1rem 1rem;
        1.5;


}
}
Line 670: Line 575:




.vault-infobox-row {




/* ==========================================================
    display:grid;
  FEATURE CASE CARDS
  Template: CaseCard
  ========================================================== */


    grid-template-columns:100px 1fr;


.vault-case-grid {
    gap:1rem;


     display:
     padding:.7rem 1rem;
        grid;


     grid-template-columns:
     border-top:1px solid var(--vault-border);
        repeat(auto-fit,minmax(240px,1fr));


    gap:
        1.2rem;


}
}
Line 693: Line 593:




.vault-case-card {
.vault-infobox-k {
 


     background:
     font-family:'JetBrains Mono',monospace;
        var(--vault-surface);


     border:
     text-transform:uppercase;
        1px solid var(--vault-border);


     border-radius:
     font-size:.65rem;
        10px;


     padding:
     color:var(--vault-muted);
        1.4rem;


    transition:
        .2s;


}
}
Line 714: Line 609:




.vault-case-card:hover {
.vault-infobox-v {


    border-color:
        var(--vault-purple);


     transform:
     color:var(--vault-text);
        translateY(-4px);


}
}
Line 726: Line 618:




.vault-case-card-title {
/* ==========================================================
  ASSESSMENT BOX
  ========================================================== */


    font-family:
        'Bungee',
        sans-serif;


    font-size:
.vault-assessment {
        1.1rem;


    color:
        var(--vault-purple-dark) !important;


}
    width:100%;


    background:var(--vault-white);


    border:1px solid var(--vault-border);


.vault-case-card-excerpt {
    border-radius:8px;


     color:
     margin:2rem 0;
        var(--vault-muted) !important;


     font-size:
     overflow:hidden;
        .9rem;


    margin-top:
        .6rem;


}
}
Line 757: Line 643:




.vault-assessment-header {
    background:var(--vault-purple);
    color:white !important;


/* ==========================================================
    font-family:'Bungee',sans-serif;
  STATISTICS BAR
  Template: StatsBar
  ========================================================== */


    text-align:center;


.vault-stats-bar {
    padding:.9rem;


    display:
        grid;


    grid-template-columns:
}
        repeat(auto-fit,minmax(150px,1fr));


    gap:
        1rem;


    background:
        var(--vault-surface);


    border:
.vault-assessment-grid {
        1px solid var(--vault-border);


    border-radius:
        10px;


     padding:
     display:grid;
        1.5rem;


     margin:
     grid-template-columns:repeat(3,1fr);
        2rem 0;


    text-align:
        center;


}
}
Line 797: Line 673:




.vault-stats-bar-number {
.vault-assessment-item {
 


     font-family:
     padding:1rem;
        'Bungee',
        sans-serif;


     font-size:
     border-right:1px solid var(--vault-border);
        2rem;


    color:
        var(--vault-green-dark);


}
}
Line 813: Line 685:




.vault-stats-bar-label {
.vault-assessment-item:last-child {
 
    font-family:
        'JetBrains Mono',
        monospace;
 
    font-size:
        .7rem;


    text-transform:
        uppercase;


     color:
     border-right:none;
        var(--vault-muted);


    letter-spacing:
        .08em;


}
}
Line 835: Line 695:




.vault-assessment-label {




/* ==========================================================
    font-family:'JetBrains Mono',monospace;
  DID YOU KNOW
  Template: DidYouKnow
  ========================================================== */


    font-size:.65rem;


.vault-dyk {
    text-transform:uppercase;


     background:
     letter-spacing:.08em;
        #fffdf8;


     border:
     color:var(--vault-muted);
        1px solid var(--vault-border);


    border-left:
        5px solid var(--vault-amber);


    border-radius:
}
        8px;


    padding:
        1.4rem 1.6rem;


    margin:
        2rem 0;


}
.vault-assessment-value {




    color:var(--vault-text);


.vault-dyk-header {
    margin-top:.4rem;


     font-family:
     line-height:1.5;
        'Bungee',
        sans-serif;


    color:
        var(--vault-amber);


}
}
Line 880: Line 727:




.vault-dyk li {
.vault-assessment-status {


    color:
        var(--vault-text);


     margin-bottom:
     color:#4c8b00;
        .5rem;


}
    font-weight:bold;




}






/* ==========================================================
/* ==========================================================
   CTA STRIP
   PROFILE / PERSON ASSESSMENT
  Template: CTAStrip
   ========================================================== */
   ========================================================== */




.vault-cta-strip {
.vault-profile-assessment {
 


     background:
     background:var(--vault-white);
        var(--vault-purple-dark);


     color:
     border:1px solid var(--vault-border);
        white;


     border-radius:
     border-radius:8px;
        10px;


     padding:
     margin:2rem 0;
        2rem;


     text-align:
     overflow:hidden;
        center;


    margin:
        2rem 0;


}
}
Line 924: Line 762:




.vault-cta-strip a {
.vault-profile-header {


    color:
        white;


}
    background:var(--vault-purple);


    color:white !important;


    padding:.9rem;


.vault-btn {
    text-align:center;


     display:
     font-family:'Bungee',sans-serif;
        inline-block;


    padding:
        .7rem 1.4rem;


    margin:
}
        .4rem;


    border-radius:
        5px;


    font-family:
        'JetBrains Mono',
        monospace;


    text-transform:
.vault-profile-grid {
        uppercase;


    font-size:
        .75rem;


}
    display:grid;


    grid-template-columns:repeat(3,1fr);




.vault-btn-primary {
}


    background:
        var(--vault-green);


    color:
        #16200b !important;
}


.vault-profile-item {




.vault-btn-vault {
    padding:1rem;


     background:
     border-right:1px solid var(--vault-border);
        var(--vault-purple);


    color:
        white !important;


}
}
Line 985: Line 804:




.vault-profile-label {




/* ==========================================================
    font-family:'JetBrains Mono',monospace;
  STANDARD INFORMATION PANELS
  ========================================================== */


    font-size:.65rem;


.vault-featured,
    color:var(--vault-muted);
.vault-notice {


     background:
     text-transform:uppercase;
        var(--vault-surface);


    border:
        1px solid var(--vault-border);


    border-radius:
}
        8px;


    padding:
        1.5rem;


    margin:
        2rem 0;


}
.vault-profile-value {




    margin-top:.4rem;


.vault-featured {
    color:var(--vault-text);


    border-left:
        5px solid var(--vault-green);


}
}
Line 1,023: Line 832:




.vault-featured-title {


    font-family:
        'Bungee',
        sans-serif;


    color:
        var(--vault-purple-dark);
}


/* ==========================================================
  THE VAULT
  SECTION 3 — ARCHIVE SYSTEM COMPONENTS
  ========================================================== */




/* ==========================================================
/* ==========================================================
   END PART 2
   EVIDENCE ASSESSMENT
   ========================================================== */
   ========================================================== */




.vault-evidence {




    background:var(--vault-white);


    border:1px solid var(--vault-border);


/* ==========================================================
    border-radius:8px;
  THE VAULT @ THE E.E.R.I.E. FILES
  MediaWiki:Common.css


  VAULT DESIGN SYSTEM v2
    margin:2rem 0;
  PART 3 — ASSESSMENTS, INFOBOXES & FINAL FIXES
  ========================================================== */


    overflow:hidden;




/* ==========================================================
}
  UNIVERSAL INFOBOX
  Used by:
  CryptidInfobox
  PersonInfobox
  BookInfobox
  LocationInfobox
  ========================================================== */




.vault-infobox {


    float:
.vault-evidence-header {
        right;


    width:
        300px;


     margin:
     background:var(--vault-purple);
        0 0 1.5rem 2rem;


     background:
     color:white !important;
        var(--vault-surface);


     border:
     font-family:'Bungee',sans-serif;
        1px solid var(--vault-border);


     border-radius:
     text-align:center;
        10px;


     overflow:
     padding:.9rem;
        hidden;


    box-shadow:
        0 4px 12px rgba(0,0,0,.08);


}
}
Line 1,095: Line 882:




.vault-infobox-header {
.vault-evidence-score {
 
 
    text-align:center;


     background:
     font-family:'Bungee',sans-serif;
        var(--vault-purple-dark);


     color:
     font-size:2.5rem;
        white;


     font-family:
     color:var(--vault-amber);
        'Bungee',
        sans-serif;


     text-align:
     padding:1rem;
        center;


    padding:
        .9rem;


}
}
Line 1,117: Line 900:




.vault-infobox-row {
.vault-evidence-label {
 
 
    text-align:center;
 
    font-family:'JetBrains Mono',monospace;


     display:
     text-transform:uppercase;
        grid;


     grid-template-columns:
     font-size:.75rem;
        100px 1fr;


     gap:
     color:var(--vault-muted);
        .8rem;


     padding:
     padding-bottom:1rem;
        .7rem 1rem;


    border-top:
        1px solid var(--vault-border);


}
}
Line 1,138: Line 920:




.vault-infobox-k {
.vault-evidence-grid {


    font-family:
        'JetBrains Mono',
        monospace;


     font-size:
     display:grid;
        .65rem;


     text-transform:
     grid-template-columns:repeat(2,1fr);
        uppercase;


    color:
        var(--vault-muted);


}
}
Line 1,157: Line 932:




.vault-infobox-v {
.vault-evidence-item {
 
 
    padding:1rem;


     color:
     border-top:1px solid var(--vault-border);
        var(--vault-text);


    line-height:
        1.4;


}
}
Line 1,169: Line 944:




.vault-infobox-image {
.vault-evidence-title {


    text-align:
        center;


}
    font-family:'JetBrains Mono',monospace;


    font-size:.65rem;


    text-transform:uppercase;


.vault-infobox-image img {
    letter-spacing:.08em;


     max-width:
     color:var(--vault-muted);
        100%;


    height:
        auto;


}
}
Line 1,190: Line 962:




.vault-infobox-caption {
.vault-evidence-value {


    font-size:
        .75rem;


     color:
     color:var(--vault-text);
        var(--vault-muted);


     padding:
     margin-top:.5rem;
        .6rem;


}
    line-height:1.5;




}






/* ==========================================================
/* ==========================================================
   VAULT ASSESSMENT
   WORK ASSESSMENT
  Full width evidence summary
   ========================================================== */
   ========================================================== */




.vault-assessment {
.vault-work-assessment {
 


     width:
     background:var(--vault-white);
        100%;


     background:
     border:1px solid var(--vault-border);
        var(--vault-surface);


     border:
     border-radius:8px;
        1px solid var(--vault-border);


     border-radius:
     margin:2rem 0;
        10px;


     margin:
     overflow:hidden;
        2rem 0;


    overflow:
        hidden;


}
}
Line 1,237: Line 999:




.vault-assessment-header {
.vault-work-header {
 
 
    background:var(--vault-purple);


     background:
     color:white !important;
        var(--vault-purple-dark);


     color:
     font-family:'Bungee',sans-serif;
        white;


     font-family:
     text-align:center;
        'Bungee',
        sans-serif;


     text-align:
     padding:.9rem;
        center;


    padding:
        .9rem;


}
}
Line 1,259: Line 1,017:




.vault-assessment-grid {
.vault-work-row {
 
 
    display:grid;
 
    grid-template-columns:140px 1fr;
 
    gap:1rem;
 
    padding:1rem;


     display:
     border-top:1px solid var(--vault-border);
        grid;


    grid-template-columns:
        repeat(2,1fr);


}
}
Line 1,271: Line 1,035:




.vault-assessment-item {
.vault-work-section {
 
 
    padding:1.2rem;


     padding:
     border-top:1px solid var(--vault-border);
        1rem;


    border-top:
        1px solid var(--vault-border);


}
}
Line 1,283: Line 1,047:




.vault-assessment-label {
.vault-work-k {
 
 
    font-family:'JetBrains Mono',monospace;


     font-family:
     text-transform:uppercase;
        'JetBrains Mono',
        monospace;


     font-size:
     font-size:.65rem;
        .7rem;


     text-transform:
     color:var(--vault-muted);
        uppercase;


    color:
        var(--vault-muted);


}
}
Line 1,302: Line 1,063:




.vault-assessment-value {
.vault-work-v {
 
 
    color:var(--vault-text);


     color:
     line-height:1.6;
        var(--vault-text);


    margin-top:
        .3rem;


}
}
Line 1,314: Line 1,075:




.vault-assessment-status {
/* ==========================================================
  LOCATION ASSESSMENT
  ========================================================== */


    color:
        var(--vault-green-dark);


    font-weight:
.vault-location-assessment {
        bold;


}


    background:var(--vault-white);


    border:1px solid var(--vault-border);


/* Category colours */
    border-radius:8px;


    margin:2rem 0;


.vault-assessment-cryptid .vault-assessment-header {
    overflow:hidden;


    background:
        var(--cryptid);


}
}




.vault-assessment-ufo .vault-assessment-header {


    background:
.vault-location-header {
        var(--ufo);


}


    background:var(--vault-purple);


.vault-assessment-haunting .vault-assessment-header {
    color:white !important;


     background:
     font-family:'Bungee',sans-serif;
        var(--haunting);


}
    text-align:center;


    padding:.9rem;


.vault-assessment-parapsychology .vault-assessment-header {
    background:
        var(--psychic);


}
}




.vault-assessment-forteana .vault-assessment-header {


    background:
.vault-location-grid {
        var(--forteana);


}


    display:grid;


.vault-assessment-folklore .vault-assessment-header {
    grid-template-columns:repeat(3,1fr);


    background:
        var(--folklore);


}
}




.vault-location-item {




    padding:1rem;


/* ==========================================================
    border-right:1px solid var(--vault-border);
  WORK ASSESSMENT
  Books, films, TV, articles
  ========================================================== */




.vault-work-assessment {
}


    width:
        100%;


    background:
        var(--vault-surface);


    border:
.vault-location-item:last-child {
        1px solid var(--vault-border);


    border-radius:
        10px;


     overflow:
     border-right:none;
        hidden;


    margin:
        2rem 0;


}
}
Line 1,410: Line 1,150:




.vault-work-header {
.vault-location-label {
 


     background:
     font-family:'JetBrains Mono',monospace;
        var(--vault-purple);


     color:
     text-transform:uppercase;
        white;


     text-align:
     font-size:.65rem;
        center;


     font-family:
     color:var(--vault-muted);
        'Bungee',
        sans-serif;


    padding:
        .9rem;


}
}
Line 1,432: Line 1,166:




.vault-work-row {
.vault-location-value {
 
    display:
        grid;


    grid-template-columns:
        130px 1fr;


     padding:
     margin-top:.4rem;
        .8rem 1rem;


     border-top:
     color:var(--vault-text);
        1px solid var(--vault-border);


}
}
Line 1,450: Line 1,177:




.vault-work-section {
/* ==========================================================
  NOTICE BOXES
  ========================================================== */


    padding:
        1.2rem;


    border-top:
.vault-notice {
        1px solid var(--vault-border);


}


    background:var(--vault-white);


    border:1px solid var(--vault-border);


.vault-work-k {
    border-left:5px solid var(--vault-amber);


     font-family:
     padding:1.2rem;
        'JetBrains Mono',
        monospace;


     font-size:
     margin:2rem 0;
        .7rem;


     text-transform:
     border-radius:6px;
        uppercase;


    color:
        var(--vault-muted);


}
}
Line 1,481: Line 1,202:




.vault-work-v {
.vault-notice-header {


    color:
        var(--vault-text);


}
    font-family:'JetBrains Mono',monospace;


    font-size:.7rem;


    text-transform:uppercase;


.vault-work-status {
    letter-spacing:.1em;


     color:
     color:var(--vault-amber);
        var(--vault-green-dark);


    font-weight:
        bold;


}
}
Line 1,502: Line 1,220:




.vault-notice-title {




/* ==========================================================
    font-family:'Bungee',sans-serif;
  PROFILE ASSESSMENT
  People
  ========================================================== */


    color:var(--vault-purple-dark);


.vault-profile-assessment {
    margin:.5rem 0;


    width:
        100%;


    background:
}
        var(--vault-surface);


    border:
        1px solid var(--vault-border);


    border-radius:
        10px;


    overflow:
.vault-notice-body {
        hidden;


    margin:
        2rem 0;


}
    color:var(--vault-text);


    line-height:1.6;




.vault-profile-header {
}


    background:
        var(--vault-purple-dark);


    color:
        white;


    font-family:
.vault-notice.warning {
        'Bungee',
        sans-serif;


    text-align:
        center;


     padding:
     border-left-color:var(--vault-red);
        .9rem;


}
}
Line 1,556: Line 1,255:




.vault-profile-grid {
.vault-notice.research {


    display:
        grid;


     grid-template-columns:
     border-left-color:var(--vault-blue);
        repeat(3,1fr);


}
}
Line 1,568: Line 1,264:




.vault-profile-item {
.vault-notice.featured {


    padding:
        1rem;


     border-right:
     border-left-color:var(--vault-green);
        1px solid var(--vault-border);


}
}
Line 1,580: Line 1,273:




.vault-profile-label {
/* ==========================================================
  STATISTICS BAR
  ========================================================== */
 
 
.vault-stats {
 
 
    display:grid;


     font-family:
     grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
        'JetBrains Mono',
        monospace;


     font-size:
     gap:1rem;
        .7rem;


     text-transform:
     background:var(--vault-white);
        uppercase;


     color:
     border:1px solid var(--vault-border);
        var(--vault-muted);


}
    border-radius:8px;


    padding:1.5rem;


    margin:2rem 0;


.vault-profile-value {
    text-align:center;


    color:
        var(--vault-text);


}
}
Line 1,608: Line 1,304:




.vault-profile-summary {
.vault-stat-number {


    padding:
        1.2rem;


     border-top:
     font-family:'Bungee',sans-serif;
        1px solid var(--vault-border);
 
    font-size:2rem;
 
    color:var(--vault-purple);
 


}
}
Line 1,620: Line 1,318:




.vault-stat-label {




/* ==========================================================
    font-family:'JetBrains Mono',monospace;
  LOCATION ASSESSMENT
  Places
  ========================================================== */


    font-size:.7rem;


.vault-location-assessment {
    text-transform:uppercase;


     width:
     color:var(--vault-muted);
        100%;


    background:
}
        var(--vault-surface);


    border:
        1px solid var(--vault-border);


    border-radius:
        10px;


    overflow:
/* ==========================================================
        hidden;
  BUTTONS / CALL TO ACTIONS
  ========================================================== */


    margin:
        2rem 0;


}
.vault-cta {




    background:var(--vault-purple);


.vault-location-header {
    color:white;


     background:
     text-align:center;
        var(--vault-green-dark);


     color:
     padding:2rem;
        white;


     font-family:
     margin:2rem 0;
        'Bungee',
        sans-serif;


     text-align:
     border-radius:8px;
        center;


    padding:
        .9rem;


}
}
Line 1,674: Line 1,358:




.vault-location-grid {
.vault-cta-title {
 


     display:
     font-family:'Bungee',sans-serif;
        grid;


     grid-template-columns:
     font-size:1.5rem;
        repeat(3,1fr);


}
}
Line 1,686: Line 1,369:




.vault-location-item {
.vault-btn {


    padding:
        1rem;


     border-right:
     display:inline-block;
        1px solid var(--vault-border);


}
    padding:.7rem 1.5rem;


    margin:.5rem;


    border-radius:5px;


.vault-location-label {
    font-family:'JetBrains Mono',monospace;


     font-family:
     text-transform:uppercase;
        'JetBrains Mono',
        monospace;


     font-size:
     font-size:.75rem;
        .7rem;


     text-transform:
     text-decoration:none !important;
        uppercase;


    color:
        var(--vault-muted);


}
}
Line 1,717: Line 1,393:




.vault-location-value {
.vault-btn-primary {
 
 
    background:var(--vault-green);
 
    color:#111 !important;


    color:
        var(--vault-text);


}
}
Line 1,726: Line 1,405:




.vault-location-summary {
.vault-btn-secondary {


    padding:
        1.2rem;


     border-top:
     background:white;
        1px solid var(--vault-border);


}
    color:var(--vault-purple) !important;




}






/* ==========================================================
/* ==========================================================
   VAULT NOTICE
   TAGS
   ========================================================== */
   ========================================================== */




.vault-notice {
.vault-tag {
 
    background:
        #fffdf8;


    border:
        1px solid var(--vault-border);


     border-left:
     display:inline-block;
        5px solid var(--vault-amber);


     border-radius:
     background:#eee7f5;
        8px;


     padding:
     border:1px solid #d5c5e8;
        1.2rem;


     margin:
     color:var(--vault-purple) !important;
        2rem 0;


}
    border-radius:20px;


    padding:.25rem .7rem;


    margin:.2rem;


.vault-notice-header {
    font-size:.7rem;


     font-family:
     font-family:'JetBrains Mono',monospace;
        'JetBrains Mono',
        monospace;


     text-transform:
     text-transform:uppercase;
        uppercase;


    color:
        var(--vault-amber);


}
}
Line 1,785: Line 1,450:




.vault-notice-title {
/* ==========================================================
  COSMOS SKIN COMPATIBILITY
  ========================================================== */
 


    font-family:
#cosmos-rail .rail-module,
        'Bungee',
.rail-module {
        sans-serif;


}


    background:var(--vault-white);


    border:1px solid var(--vault-border);


.vault-notice-body {
    color:var(--vault-text);


    color:
        var(--vault-text);


}
}
Line 1,804: Line 1,470:




.vault-notice.warning {
.rail-module-header {
 
 
    color:var(--vault-purple) !important;
 
    font-family:'JetBrains Mono',monospace;


    border-left-color:
        var(--vault-red);


}
}




.vault-notice.research {


    border-left-color:
#searchInput,
        #315c8c;
.cosmos-searchInput input {
 


}
    background:white !important;


    color:var(--vault-text) !important;


.vault-notice.featured {
    border:1px solid var(--vault-border) !important;


    border-left-color:
        var(--vault-green);


}
}






/* ==========================================================
/* ==========================================================
   MOBILE RESPONSIVE
   RESPONSIVE DESIGN
   ========================================================== */
   ========================================================== */




@media screen and (max-width:700px) {
@media screen and (max-width:800px) {




     .vault-infobox {
     .vault-infobox {


        float:
            none;


         width:
        float:none;
            100%;
 
         width:100%;
 
        margin:1rem 0;


        margin:
            1rem 0;


     }
     }




Line 1,857: Line 1,523:
     .vault-location-grid {
     .vault-location-grid {


         grid-template-columns:
 
            1fr;
         grid-template-columns:1fr;
 


     }
     }




    .vault-profile-item,
    .vault-location-item {


         border-right:
    .vault-evidence-grid {
            none;
 
 
         grid-template-columns:1fr;


        border-bottom:
            1px solid var(--vault-border);


     }
     }




     .vault-work-row {
     .vault-work-row {


         grid-template-columns:
 
            1fr;
         grid-template-columns:1fr;
 


     }
     }




     .vault-hero .vault-title {
     .vault-hero .vault-title {


         font-size:
 
            1.8rem;
         font-size:2rem;
 


     }
     }
Line 1,892: Line 1,561:


}
}






/* ==========================================================
/* ==========================================================
   END VAULT DESIGN SYSTEM v2
   END OF THE VAULT ARCHIVE STYLE SYSTEM
   ========================================================== */
   ========================================================== */

Revision as of 23:42, 29 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(2,1fr);


}



.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
   ========================================================== */
Retrieved from "https://eeriefiles.com/thevault/index.php?title=MediaWiki:Common.css&oldid=738"