×
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
No edit summary
Line 3: Line 3:
   MediaWiki:Common.css
   MediaWiki:Common.css


   PART 1 — FOUNDATION
   Purpose:
   Clean MediaWiki light theme with Vault branding
   - Vault template styling
  - Typography
  - Custom components
 
  Default MediaWiki/Cosmos colours are preserved.
 
   ========================================================== */
   ========================================================== */


Line 12: Line 17:
   ========================================================== */
   ========================================================== */


@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');
@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
   VAULT TYPOGRAPHY
   ========================================================== */
   ========================================================== */


:root {
    --vault-purple:#6f32a8;
    --vault-violet:#b34aff;
    --vault-green:#5c8f00;
    --vault-acid:#a6ff3f;
    --vault-gold:#c28b00;
    --vault-paper:#faf9f5;
    --vault-panel:#ffffff;
    --vault-border:#d8d2c5;
    --vault-text:#202122;
    --vault-muted:#666666;
    --vault-blue:#1769aa;
    --vault-red:#b32424;
}
/* ==========================================================
  BASE MEDIAWIKI PAGE
  ========================================================== */


body {
body {
    background:var(--vault-paper);
    color:var(--vault-text);


     font-family:'Space Grotesk', sans-serif;
     font-family:'Space Grotesk', sans-serif;
Line 56: Line 32:
}
}


#content,
.mw-body,
#bodyContent {
    background:var(--vault-paper);
    color:var(--vault-text);
}
/* ==========================================================
  ARTICLE CONTENT
  ========================================================== */
.mw-parser-output {
    color:var(--vault-text);
    font-family:'Space Grotesk', sans-serif;
}
.mw-parser-output p,
.mw-parser-output li,
.mw-parser-output dd,
.mw-parser-output dt,
.mw-parser-output blockquote,
.mw-parser-output td,
.mw-parser-output th {
    color:var(--vault-text);
}
.mw-parser-output p {
    line-height:1.65;
}
/* ==========================================================
  HEADINGS
  ========================================================== */


h1,
h1,
Line 118: Line 41:


     font-family:'Bungee', system-ui, sans-serif;
     font-family:'Bungee', system-ui, sans-serif;
    color:#222;
    letter-spacing:.02em;


}
}




h1.firstHeading,
.mw-first-heading {
    border-bottom:2px solid var(--vault-border);
    padding-bottom:.5rem;
}
h2 {
    color:var(--vault-purple);
    border-bottom:1px solid var(--vault-border);
    margin-top:2rem;
}
h3 {
    color:#444;
}
/* ==========================================================
  LINKS
  ========================================================== */
a {
    color:var(--vault-blue);
}
a:visited {
    color:#5c3d85;
}
a:hover {
    color:var(--vault-green);
}
a.new {
    color:var(--vault-red);
}
/* ==========================================================
  TABLES
  ========================================================== */
table.wikitable {
    background:white;
    color:var(--vault-text);
    border:1px solid var(--vault-border);
}
table.wikitable > tr > th,
table.wikitable > * > tr > th {
    background:var(--vault-purple);
    color:white;
    font-family:'JetBrains Mono', monospace;
    letter-spacing:.05em;
}
table.wikitable > tr > td,
table.wikitable > * > tr > td {
    border-color:var(--vault-border);
}
table.wikitable tr:nth-child(even) td {
    background:#faf8f2;
}
/* ==========================================================
  CODE / PREFORMATTED TEXT
  ========================================================== */


code,
code,
pre {
pre,
.mw-code {


     font-family:'JetBrains Mono', monospace;
     font-family:'JetBrains Mono', monospace;
Line 254: Line 55:




pre {
    background:#f5f2ea;
    border:1px solid var(--vault-border);
    color:#222;
}






/* ==========================================================
/* ==========================================================
   BLOCKQUOTES
   VAULT HERO
   ========================================================== */
   ========================================================== */


blockquote {
    border-left:4px solid var(--vault-purple);
    background:#f8f5ed;
    padding:.8rem 1rem;
    margin:1rem 0;
    color:#444;
}
/* ==========================================================
  CATEGORY FOOTER
  ========================================================== */
#catlinks,
.catlinks {
    background:#f6f1e4;
    border:1px solid var(--vault-border);
    color:var(--vault-muted);
    padding:.8rem;
}
#catlinks a,
.catlinks a {
    color:var(--vault-purple);
}
/* ==========================================================
  MEDIAWIKI SEARCH / UI TEXT FIXES
  ========================================================== */
.mw-body,
.mw-body-content {
    color:var(--vault-text);
}
.mw-body a {
    color:var(--vault-blue);
}
/* ==========================================================
  END PART 1
  PART 2 — VAULT COMPONENTS
  ========================================================== */
/* ==========================================================
  THE VAULT @ THE E.E.R.I.E. FILES
  PART 2 — VAULT COMPONENTS
  Infoboxes, assessments, evidence panels,
  profiles, notices, cards and branding elements
  ========================================================== */
/* ==========================================================
  HERO / LANDING COMPONENTS
  ========================================================== */


.vault-hero {
.vault-hero {
Line 368: Line 68:


     padding:2rem 1rem;
     padding:2rem 1rem;
    background:white;
    border:1px solid var(--vault-border);


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


     margin:1.5rem 0;
     margin-bottom:1.8rem;


}
}
Line 383: Line 79:
.vault-hero .vault-title {
.vault-hero .vault-title {


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


     font-size:2.2rem;
     font-size:2.2rem;
    color:var(--vault-purple);


     margin:0;
     margin:0;
}
.vault-hero .vault-title span {
    color:var(--vault-green);


}
}
Line 413: Line 99:
     text-transform:uppercase;
     text-transform:uppercase;


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


    margin-top:.6rem;


}






/* ==========================================================
/* ==========================================================
   CARDS / PORTALS / CASE GRID
   VAULT CARDS
   ========================================================== */
   ========================================================== */


.vault-portal-grid,
.vault-portal-grid,
Line 430: Line 115:
     display:grid;
     display:grid;


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


     gap:1rem;
     gap:1rem;
Line 443: Line 129:
.vault-case-card {
.vault-case-card {


     background:white;
     padding:1.3rem;


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


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


     padding:1.3rem;
     display:block;


     text-decoration:none !important;
     text-decoration:none !important;
Line 461: Line 147:
.vault-portal-card:hover,
.vault-portal-card:hover,
.vault-case-card:hover {
.vault-case-card:hover {
    border-color:var(--vault-purple);


     transform:translateY(-3px);
     transform:translateY(-3px);
Line 473: Line 157:
.vault-case-card-title {
.vault-case-card-title {


    display:block;
     font-family:'Bungee', sans-serif;
 
     font-family:'Bungee',system-ui,sans-serif;
 
    color:var(--vault-purple) !important;


     margin-bottom:.5rem;
     font-size:1rem;


}
}
Line 487: Line 167:
.vault-portal-card .desc,
.vault-portal-card .desc,
.vault-case-card-excerpt {
.vault-case-card-excerpt {
    color:var(--vault-muted) !important;


     font-size:.85rem;
     font-size:.85rem;
Line 495: Line 173:


}
}




Line 501: Line 181:
   INFOBOX
   INFOBOX
   ========================================================== */
   ========================================================== */


.vault-infobox {
.vault-infobox {
Line 510: Line 191:
     margin:0 0 1rem 1.5rem;
     margin:0 0 1rem 1.5rem;


     background:white;
     border:1px solid #aaa;


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


     overflow:hidden;
     overflow:hidden;
Line 524: Line 203:
.vault-infobox-header {
.vault-infobox-header {


    background:var(--vault-purple);
     font-family:'Bungee', sans-serif;
 
    color:var(--vault-acid);
 
     font-family:'Bungee',system-ui,sans-serif;


     text-align:center;
     text-align:center;


     padding:.8rem;
     padding:.7rem;


}
}
Line 541: Line 216:


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


}
}
Line 561: Line 234:


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


     padding:.5rem;
     padding:.5rem;
Line 578: Line 249:
     gap:.5rem;
     gap:.5rem;


     padding:.55rem .8rem;
     padding:.5rem .8rem;
 
    border-top:1px solid #ddd;


     border-top:1px solid var(--vault-border);
     font-size:.85rem;


}
}
Line 593: Line 266:


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


}
}
Line 600: Line 271:




.vault-infobox-v {
.vault-infobox-status {


     color:var(--vault-text);
     font-weight:bold;


}
}




.vault-infobox-status {
    color:var(--vault-green);
    font-weight:bold;
}




Line 621: Line 284:
   VAULT ASSESSMENT
   VAULT ASSESSMENT
   ========================================================== */
   ========================================================== */


.vault-assessment {
.vault-assessment {
Line 626: Line 290:
     width:100%;
     width:100%;


     margin:1.8rem 0;
     margin:1.5rem 0;
 
    background:white;


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


     border-radius:8px;
     border-radius:8px;
Line 644: Line 306:
.vault-assessment-header {
.vault-assessment-header {


    background:var(--vault-purple);
     font-family:'Bungee',sans-serif;
 
    color:var(--vault-acid);
 
     font-family:'Bungee',system-ui,sans-serif;


     text-align:center;
     text-align:center;
Line 672: Line 330:
     padding:1rem;
     padding:1rem;


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


}
}
Line 685: Line 343:


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


}
}
Line 693: Line 349:


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


     line-height:1.5;
     line-height:1.5;
Line 703: Line 357:


.vault-assessment-status {
.vault-assessment-status {
    color:var(--vault-green);


     font-weight:bold;
     font-weight:bold;
Line 712: Line 364:




/* Assessment categories */
@media screen and (max-width:700px) {


.vault-assessment-cryptid .vault-assessment-header {
    .vault-assessment-grid {


    background:#355834;
        grid-template-columns:1fr;


}
     }
 
 
 
.vault-assessment-ufo .vault-assessment-header {
 
    background:#1d3f73;
 
}
 
 
 
.vault-assessment-haunting .vault-assessment-header {
 
    background:#5b3b70;
 
}
 
 
 
.vault-assessment-parapsychology .vault-assessment-header {
 
     background:#a36a00;
 
}
 
 
 
.vault-assessment-forteana .vault-assessment-header {
 
    background:#444;


}
}




.vault-assessment-folklore .vault-assessment-header {
    background:#765438;
}






/* ==========================================================
/* ==========================================================
   EVIDENCE ASSESSMENT
   WORK / BOOK / PROFILE / LOCATION ASSESSMENTS
   ========================================================== */
   ========================================================== */


.vault-evidence {
    width:100%;
    background:white;
    border:1px solid var(--vault-border);
    border-radius:8px;
    overflow:hidden;
    margin:1.8rem 0;
}
.vault-evidence-header {
    background:var(--vault-purple);
    color:var(--vault-acid);
    font-family:'Bungee',system-ui,sans-serif;
    text-align:center;
    padding:.8rem;
}
.vault-evidence-score {
    text-align:center;
    font-size:2.2rem;
    color:var(--vault-gold);
    padding:1rem;
}
.vault-evidence-label {
    text-align:center;
    font-family:'JetBrains Mono',monospace;
    font-size:.75rem;
    text-transform:uppercase;
}
.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:.7rem;
    text-transform:uppercase;
    color:var(--vault-muted);
}
.vault-evidence-value {
    color:var(--vault-text);
}
/* ==========================================================
  PROFILE / LOCATION / WORK ASSESSMENTS
  ========================================================== */


.vault-work-assessment,
.vault-profile-assessment,
.vault-profile-assessment,
.vault-location-assessment,
.vault-location-assessment,
.vault-work-assessment {
.vault-evidence {


     width:100%;
     width:100%;


     background:white;
     margin:1.5rem 0;


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


     border-radius:8px;
     border-radius:8px;
    margin:1.8rem 0;


     overflow:hidden;
     overflow:hidden;
Line 896: Line 404:




.vault-work-header,
.vault-profile-header,
.vault-profile-header,
.vault-location-header,
.vault-location-header,
.vault-work-header {
.vault-evidence-header {
 
    background:var(--vault-purple);
 
    color:var(--vault-acid);


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


     text-align:center;
     text-align:center;
Line 913: Line 418:




.vault-profile-grid,
.vault-location-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
}
.vault-profile-item,
.vault-location-item {
    padding:1rem;
    border-right:1px solid var(--vault-border);
}
.vault-profile-label,
.vault-location-label {
    font-family:'JetBrains Mono',monospace;
    font-size:.7rem;
    text-transform:uppercase;
    color:var(--vault-muted);
}
.vault-profile-value,
.vault-location-value {
    color:var(--vault-text);
    line-height:1.5;
}
.vault-profile-summary,
.vault-location-summary {
    border-top:1px solid var(--vault-border);
    padding:1rem;
}
/* ==========================================================
  WORK ASSESSMENT
  ========================================================== */


.vault-work-row {
.vault-work-row {
Line 982: Line 424:


     grid-template-columns:130px 1fr;
     grid-template-columns:130px 1fr;
    gap:1rem;


     padding:.8rem 1rem;
     padding:.8rem 1rem;


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


}
}
Line 995: Line 439:
     padding:1rem;
     padding:1rem;


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


}
}
Line 1,008: Line 452:


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


}
}
Line 1,016: Line 458:


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


     line-height:1.6;
     line-height:1.6;


}
}






/* ==========================================================
/* ==========================================================
   NOTICES
   NOTICE BOX
   ========================================================== */
   ========================================================== */


.vault-notice {
.vault-notice {


    background:white;
     border-left:4px solid #888;
 
    border:1px solid var(--vault-border);
 
     border-left:5px solid var(--vault-gold);
 
    border-radius:6px;


     padding:1rem 1.2rem;
     padding:1rem 1.2rem;
Line 1,050: Line 487:


     font-family:'JetBrains Mono',monospace;
     font-family:'JetBrains Mono',monospace;
    font-size:.7rem;


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


     color:var(--vault-gold);
     font-size:.7rem;


}
}
Line 1,063: Line 498:
.vault-notice-title {
.vault-notice-title {


     font-family:'Bungee',system-ui,sans-serif;
     font-family:'Bungee',sans-serif;
 
    color:var(--vault-purple);


}
}
.vault-notice-body {
    color:var(--vault-text);
    line-height:1.5;
}
.vault-notice.warning {
    border-left-color:#b32424;
}
.vault-notice.research {
    border-left-color:#1769aa;
}
.vault-notice.featured {
    border-left-color:var(--vault-green);
}
/* ==========================================================
  END PART 2
  PART 3 — BUTTONS, TAGS, RESPONSIVE & FINAL FIXES
  ========================================================== */




/* ==========================================================
  THE VAULT @ THE E.E.R.I.E. FILES
  PART 3 — FINAL COMPONENTS & SYSTEM OVERRIDES
  Buttons, tags, stats, references, categories,
  edit pages and responsive layout
  ========================================================== */




Line 1,130: Line 509:
   BUTTONS
   BUTTONS
   ========================================================== */
   ========================================================== */
.vault-cta-strip {
    text-align:center;
    background:white;
    border:1px solid var(--vault-border);
    border-radius:8px;
    padding:1.5rem;
    margin:1.8rem 0;
}




Line 1,152: Line 514:


     display:inline-block;
     display:inline-block;
    font-family:'JetBrains Mono',monospace;
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.06em;


     padding:.7rem 1.3rem;
     padding:.7rem 1.3rem;
Line 1,165: Line 519:
     border-radius:4px;
     border-radius:4px;


    margin:.3rem;
     font-family:'JetBrains Mono',monospace;
 
     font-weight:bold;


     text-decoration:none !important;
     text-decoration:none !important;
Line 1,174: Line 526:




.vault-btn-primary {
    background:var(--vault-green) !important;
    color:white !important;
}
.vault-btn-vault {
    background:var(--vault-purple) !important;
    color:white !important;
}
.vault-btn-outline {
    background:white !important;
    color:var(--vault-purple) !important;
    border:1px solid var(--vault-purple);
}
.vault-btn:hover {
    opacity:.85;
}




Line 1,218: Line 532:
   TAGS
   TAGS
   ========================================================== */
   ========================================================== */


.vault-tag {
.vault-tag {
Line 1,223: Line 538:
     display:inline-block;
     display:inline-block;


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


     font-size:.68rem;
     border:1px solid #aaa;


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


     letter-spacing:.06em;
     font-family:'JetBrains Mono',monospace;


     background:#f2eafa;
     font-size:.7rem;


    color:var(--vault-purple) !important;
     text-transform:uppercase;
 
    border:1px solid #d5b9ee;
 
    padding:.25rem .7rem;
 
    border-radius:999px;
 
     text-decoration:none !important;
 
    margin:.2rem;


}
}




.vault-tag:hover {
    background:#e5d4f5;
}






/* ==========================================================
/* ==========================================================
   FEATURE / DID YOU KNOW BOXES
   STATS
   ========================================================== */
   ========================================================== */


.vault-featured,
.vault-dyk {
    background:white;
    border:1px solid var(--vault-border);
    border-left:5px solid var(--vault-green);
    border-radius:6px;
    padding:1.2rem 1.5rem;
    margin:1.5rem 0;
}
.vault-featured-title {
    font-family:'Bungee',system-ui,sans-serif;
    color:var(--vault-purple);
}
.vault-eyebrow {
    font-family:'JetBrains Mono',monospace;
    text-transform:uppercase;
    font-size:.7rem;
    color:var(--vault-gold);
}
/* ==========================================================
  STATISTICS BAR
  ========================================================== */


.vault-stats-bar {
.vault-stats-bar {
Line 1,312: Line 565:
     display:grid;
     display:grid;


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


     gap:1rem;
     gap:1rem;


     background:white;
     padding:1.4rem;
 
    margin:1.8rem 0;


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


     border-radius:8px;
     border-radius:8px;
    padding:1.3rem;
    margin:1.8rem 0;


     text-align:center;
     text-align:center;
}
.vault-stats-bar-item {
    display:flex;
    flex-direction:column;


}
}
Line 1,344: Line 586:
.vault-stats-bar-number {
.vault-stats-bar-number {


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


     font-size:1.8rem;
     font-size:1.8rem;
    color:var(--vault-purple);
}
.vault-stats-bar-label {
    font-family:'JetBrains Mono',monospace;
    font-size:.7rem;
    text-transform:uppercase;
    color:var(--vault-muted);
}
.vault-stats-bar a {
    text-decoration:none;
}
/* ==========================================================
  REFERENCES
  ========================================================== */
.reflist {
    color:var(--vault-text);
    font-size:.9rem;
}
.reflist a {
    color:var(--vault-blue);
}
.reflist a:hover {
    color:var(--vault-green);
}
/* Reference target highlight */
#mw-content-text li:target {
    background:#fff8dc;
    padding:.3rem;
}
/* ==========================================================
  CATEGORY PAGES
  ========================================================== */
#mw-pages,
.mw-category,
.mw-category-group {
    color:var(--vault-text);
}
#mw-pages a,
.mw-category a,
.mw-category-group a {
    color:var(--vault-blue);
}
#mw-pages a:hover,
.mw-category a:hover,
.mw-category-group a:hover {
    color:var(--vault-green);
}
/* ==========================================================
  EDIT PAGE FIXES
  ========================================================== */
#editform,
#editform label,
#editform p,
#editform .editOptions,
.mw-editTools,
#editpage-copywarn,
.editnotice-area {
    color:var(--vault-text);


}
}




.oo-ui-fieldLayout-header,
.oo-ui-labelElement,
.oo-ui-labelElement-label,
.oo-ui-labelWidget.oo-ui-inline-help {
    color:var(--vault-text);
}






/* ==========================================================
/* ==========================================================
   MEDIAWIKI MESSAGE BOXES
   RESPONSIVE
 
  Keep native MediaWiki warning/error styling
   ========================================================== */
   ========================================================== */


.cdx-message {
    color:#202122;
}
/* ==========================================================
  FOOTNOTES / SMALL TEXT
  ========================================================== */
.mw-parser-output small {
    color:var(--vault-muted);
}
/* ==========================================================
  RECENT CHANGES CLEANUP
  Keeps page names and timestamps,
  hides unnecessary metadata
  ========================================================== */
.mw-changeslist-user,
.mw-usertoollinks,
.mw-changeslist-bytes,
.mw-plusminus-pos,
.mw-plusminus-neg,
.mw-tag-markers,
.comment {
    display:none !important;
}
/* ==========================================================
  RESPONSIVE DESIGN
  ========================================================== */


@media screen and (max-width:700px) {
@media screen and (max-width:700px) {
Line 1,542: Line 611:


         margin:1rem 0;
         margin:1rem 0;
    }
    .vault-assessment-grid,
    .vault-evidence-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);


     }
     }
Line 1,572: Line 621:
     }
     }


    .vault-hero .vault-title {
        font-size:1.6rem;
    }
    .vault-case-grid,
    .vault-portal-grid {
        grid-template-columns:1fr;
    }
}
/* ==========================================================
  FINAL CLEANUP
  ========================================================== */
/* Prevent assessment boxes being squeezed beside floats */
.vault-assessment,
.vault-evidence,
.vault-profile-assessment,
.vault-location-assessment,
.vault-work-assessment {
    clear:both;
}
/* Images behave nicely inside content */
.mw-parser-output img {
    max-width:100%;
    height:auto;
}
/* Keep Vault headers consistent */
.vault-infobox-header,
.vault-assessment-header,
.vault-evidence-header,
.vault-profile-header,
.vault-location-header,
.vault-work-header {
    letter-spacing:.04em;


}
}
/* ==========================================================
  END OF THE VAULT COMMON.CSS
  ========================================================== */

Revision as of 22:31, 29 July 2026

/* ==========================================================
   THE VAULT @ THE E.E.R.I.E. FILES
   MediaWiki:Common.css

   Purpose:
   - Vault template styling
   - Typography
   - Custom components

   Default MediaWiki/Cosmos colours are preserved.

   ========================================================== */


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


body {

    font-family:'Space Grotesk', sans-serif;

}


h1,
h2,
h3,
h4,
.firstHeading,
.mw-first-heading {

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

}



code,
pre,
.mw-code {

    font-family:'JetBrains Mono', monospace;

}





/* ==========================================================
   VAULT HERO
   ========================================================== */


.vault-hero {

    text-align:center;

    padding:2rem 1rem;

    border-radius:10px;

    margin-bottom:1.8rem;

}



.vault-hero .vault-title {

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

    font-size:2.2rem;

    margin:0;

}



.vault-hero .vault-tagline {

    font-family:'JetBrains Mono', monospace;

    font-size:.75rem;

    letter-spacing:.2em;

    text-transform:uppercase;

}





/* ==========================================================
   VAULT CARDS
   ========================================================== */


.vault-portal-grid,
.vault-case-grid {

    display:grid;

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

    gap:1rem;

    margin:1.5rem 0;

}



.vault-portal-card,
.vault-case-card {

    padding:1.3rem;

    border:1px solid #ccc;

    border-radius:8px;

    display:block;

    text-decoration:none !important;

    transition:.2s;

}



.vault-portal-card:hover,
.vault-case-card:hover {

    transform:translateY(-3px);

}



.vault-portal-card .label,
.vault-case-card-title {

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

    font-size:1rem;

}



.vault-portal-card .desc,
.vault-case-card-excerpt {

    font-size:.85rem;

    line-height:1.5;

}





/* ==========================================================
   INFOBOX
   ========================================================== */


.vault-infobox {

    float:right;

    width:280px;

    margin:0 0 1rem 1.5rem;

    border:1px solid #aaa;

    border-radius:6px;

    overflow:hidden;

}



.vault-infobox-header {

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

    text-align:center;

    padding:.7rem;

}



.vault-infobox-image {

    text-align:center;

}



.vault-infobox-image img {

    max-width:100%;

    height:auto;

}



.vault-infobox-caption {

    font-size:.75rem;

    padding:.5rem;

}



.vault-infobox-row {

    display:grid;

    grid-template-columns:95px 1fr;

    gap:.5rem;

    padding:.5rem .8rem;

    border-top:1px solid #ddd;

    font-size:.85rem;

}



.vault-infobox-k {

    font-family:'JetBrains Mono',monospace;

    font-size:.65rem;

    text-transform:uppercase;

}



.vault-infobox-status {

    font-weight:bold;

}





/* ==========================================================
   VAULT ASSESSMENT
   ========================================================== */


.vault-assessment {

    width:100%;

    margin:1.5rem 0;

    border:1px solid #aaa;

    border-radius:8px;

    overflow:hidden;

    clear:both;

}



.vault-assessment-header {

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

    text-align:center;

    padding:.8rem;

}



.vault-assessment-grid {

    display:grid;

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

}



.vault-assessment-item {

    padding:1rem;

    border-top:1px solid #ddd;

}



.vault-assessment-label {

    font-family:'JetBrains Mono',monospace;

    font-size:.7rem;

    text-transform:uppercase;

}



.vault-assessment-value {

    line-height:1.5;

}



.vault-assessment-status {

    font-weight:bold;

}



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

    .vault-assessment-grid {

        grid-template-columns:1fr;

    }

}





/* ==========================================================
   WORK / BOOK / PROFILE / LOCATION ASSESSMENTS
   ========================================================== */


.vault-work-assessment,
.vault-profile-assessment,
.vault-location-assessment,
.vault-evidence {

    width:100%;

    margin:1.5rem 0;

    border:1px solid #aaa;

    border-radius:8px;

    overflow:hidden;

    clear:both;

}



.vault-work-header,
.vault-profile-header,
.vault-location-header,
.vault-evidence-header {

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

    text-align:center;

    padding:.8rem;

}



.vault-work-row {

    display:grid;

    grid-template-columns:130px 1fr;

    gap:1rem;

    padding:.8rem 1rem;

    border-top:1px solid #ddd;

}



.vault-work-section {

    padding:1rem;

    border-top:1px solid #ddd;

}



.vault-work-k {

    font-family:'JetBrains Mono',monospace;

    font-size:.7rem;

    text-transform:uppercase;

}



.vault-work-v {

    line-height:1.6;

}





/* ==========================================================
   NOTICE BOX
   ========================================================== */


.vault-notice {

    border-left:4px solid #888;

    padding:1rem 1.2rem;

    margin:1.5rem 0;

}



.vault-notice-header {

    font-family:'JetBrains Mono',monospace;

    text-transform:uppercase;

    font-size:.7rem;

}



.vault-notice-title {

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

}





/* ==========================================================
   BUTTONS
   ========================================================== */


.vault-btn {

    display:inline-block;

    padding:.7rem 1.3rem;

    border-radius:4px;

    font-family:'JetBrains Mono',monospace;

    text-decoration:none !important;

}





/* ==========================================================
   TAGS
   ========================================================== */


.vault-tag {

    display:inline-block;

    padding:.25rem .7rem;

    border:1px solid #aaa;

    border-radius:999px;

    font-family:'JetBrains Mono',monospace;

    font-size:.7rem;

    text-transform:uppercase;

}





/* ==========================================================
   STATS
   ========================================================== */


.vault-stats-bar {

    display:grid;

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

    gap:1rem;

    padding:1.4rem;

    margin:1.8rem 0;

    border:1px solid #aaa;

    border-radius:8px;

    text-align:center;

}



.vault-stats-bar-number {

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

    font-size:1.8rem;

}





/* ==========================================================
   RESPONSIVE
   ========================================================== */


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


    .vault-infobox {

        float:none;

        width:100%;

        margin:1rem 0;

    }


    .vault-work-row {

        grid-template-columns:1fr;

    }


}