Winds Of Valen Wiki

MediaWiki:Common.css: Difference between revisions

← Older edit

Life (talk | contribs)

3 user groups
2,267 edits
Modern Discord button styling
made stats box smaller
 
(66 intermediate revisions by 2 users not shown)
Line 25: Line 25:
/* --- 2. Base Body Override --- */
/* --- 2. Base Body Override --- */
body {
body {
     background: url('/resources/assets/background_stone.png') repeat !important;
     background-image: none !important;
     background-color: #2b2b2b !important;
     background-color: #e1d5be !important;
     font-family: 'Museo Sans', 'PT Serif', Georgia, serif;
     font-family: 'Museo Sans', 'PT Serif', Georgia, serif;
}
}
Line 49: Line 49:
}
}


/* --- 5. Fix Logo Clipping --- */
/* --- 5. Hide Foreground Logo (Use Background Instead) --- */
#p-logo a {
#p-logo a {
    background-size: contain !important;
     height: 140px !important;
    background-position: center center !important;
     height: 140px !important; /* Optional: shrink if it overlaps */
}
}


Line 60: Line 58:
.page-Main_Page .mw-first-heading {
.page-Main_Page .mw-first-heading {
     display: none !important;
     display: none !important;
}
/* Give all page titles some breathing room from the top border */
.firstHeading {
    padding-top: 15px !important;
}
}
.page-Main_Page .mw-body-content {
.page-Main_Page .mw-body-content {
Line 88: Line 91:
   OSRS NATIVE DOM ARCHITECTURE (Main Page Layout Engine)
   OSRS NATIVE DOM ARCHITECTURE (Main Page Layout Engine)
   ========================================================================== */
   ========================================================================== */


.mainpage-container {
.mainpage-container {
Line 99: Line 103:
     display: grid;
     display: grid;
     grid-template-columns: 1fr 300px;
     grid-template-columns: 1fr 300px;
     gap: 14px;
     gap: 20px;
     align-items: start;
     align-items: start;
}
}
Line 111: Line 115:
.mainpage-header {
.mainpage-header {
     display: flex;
     display: flex;
     gap: 14px;
     gap: 20px;
     margin-bottom: 14px;
     margin-bottom: 20px;
}
}
.header-intro {
.header-intro {
     flex: 1;
     flex: 1;
     background-color: #fcf6e8 !important;
     background: url('/resources/assets/welcomeimage.jpg') center center no-repeat !important;
     border: 1px solid #b3a07d;
    background-size: cover !important;
     padding: 25px;
     border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
     padding: 30px;
     text-align: center;
     text-align: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.header-intro::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(20, 15, 10, 0.8) 0%, rgba(40, 25, 15, 0.6) 100%);
    z-index: -1;
}
}
.header-title {
.header-title {
     font-size: 1.6em;
     font-size: 1.8em;
     font-weight: bold;
     font-weight: bold;
     color: #4a3c28;
     color: #ffd700;
     margin-bottom: 8px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 0 15px rgba(255, 215, 0, 0.3);
     margin-bottom: 12px;
     line-height: 1.2;
     line-height: 1.2;
}
}
.header-intro p {
.header-intro p {
     font-size: 0.95em;
     font-size: 1.05em;
     color: #5c4e38;
     color: #f1e7d3;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
     margin: 0;
     margin: 0;
}
.header-intro p a {
    color: #7dd3fc !important;
    font-weight: bold !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
}
.header-intro p a:hover {
    color: #bae6fd !important;
    text-shadow: 0 0 8px rgba(125, 211, 252, 0.6);
}
}


.header-stats {
.header-stats {
     width: 300px;
     width: 190px;
     flex-shrink: 0;
     flex-shrink: 0;
     background-color: #f1e7d3 !important;
     background: linear-gradient(to bottom, #fcf6e8, #f1e7d3) !important;
     border: 1px solid #b3a07d;
    border-radius: 8px;
     padding: 20px 25px;
    box-shadow: 0 4px 10px rgba(61, 43, 31, 0.15);
     border: 1px solid rgba(179, 160, 125, 0.4);
     padding: 12px 16px;
     box-sizing: border-box;
     box-sizing: border-box;
}
}
Line 150: Line 181:
     display: flex;
     display: flex;
     justify-content: space-between;
     justify-content: space-between;
     margin-bottom: 6px;
     margin-bottom: 5px;
     font-size: 0.9em;
     font-size: 0.8em;
     border-bottom: 1px dashed #d1c4ac;
     border-bottom: 1px dashed rgba(179, 160, 125, 0.6);
     padding-bottom: 6px;
     padding-bottom: 5px;
}
}
.header-stats li:last-child {
.header-stats li:last-child {
Line 161: Line 192:
}
}
.header-stats b {
.header-stats b {
     color: #4a3c28;
     color: #611313;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}
}


Line 170: Line 202:


.section-title {
.section-title {
     font-family: 'PT Serif', Georgia, serif;
     font-family: 'Kingthings Petrock', 'PT Serif', serif;
     font-size: 1.15em;
     font-size: 1.6em;
     font-weight: bold;
     font-weight: normal;
     color: #4a3c28;
     color: #3b240b;
     padding: 8px 14px 7px;
    text-align: center;
     border-bottom: 2px solid #b3a07d;
     padding: 0 0 10px 0;
     background-color: #f1e7d3;
    margin: 30px 0 20px 0;
     margin: 0 0 14px 0;
    position: relative;
    background: none;
     border-bottom: none;
}
.section-title::after {
    content: "";
    display: block;
    width: 150px;
    height: 3px;
     background: linear-gradient(90deg, transparent, #b3a07d, transparent);
     margin: 8px auto 0 auto;
}
}


.tile-row {
.tile-row {
     display: grid;
     display: grid;
     gap: 8px;
     gap: 16px;
     margin-bottom: 14px;
     margin-bottom: 20px;
}
}
.updates-row {
.updates-row {
     grid-template-columns: 1fr 1fr;
     grid-template-columns: 1fr 1fr;
     background-color: #fcf6e8;
     background: none;
     border: 1px solid #b3a07d;
     border: none;
    gap: 0;
}
}
.categories-grid {
.categories-grid {
     grid-template-columns: repeat(4, 1fr);
     grid-template-columns: repeat(3, 1fr);
     background-color: #f1e7d3;
     background: none;
     padding: 10px;
     border: none;
     border: 1px solid #b3a07d;
     padding: 0;
}
}


.tile-halves {
.update-card {
     display: flex;
     background: linear-gradient(145deg, #ffffff, #fcf6e8);
     flex-direction: column;
    border-radius: 8px;
     padding: 20px;
    box-shadow: 0 4px 12px rgba(61, 43, 31, 0.1);
    border: 1px solid rgba(179, 160, 125, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
}
 
.update-card:hover {
.update-card {
     transform: translateY(-3px);
     padding: 12px 14px;
     box-shadow: 0 8px 16px rgba(61, 43, 31, 0.15);
     border-right: 1px solid #b3a07d;
}
}
.update-card:last-child { border-right: none; }
.update-header {
.update-header {
     font-family: 'Inter', sans-serif;
     font-family: 'Inter', sans-serif;
     font-size: 0.7em;
     font-size: 0.75em;
     font-weight: 700;
     font-weight: 700;
     text-transform: uppercase;
     text-transform: uppercase;
     color: #5c4e38;
     color: #8c7657;
     letter-spacing: 0.05em;
     letter-spacing: 0.05em;
     margin-bottom: 4px;
     margin-bottom: 8px;
}
}
.update-title {
.update-title {
     font-size: 0.95em;
     font-size: 1.1em;
     font-weight: bold;
     font-weight: bold;
     margin-bottom: 6px;
     margin-bottom: 10px;
     line-height: 1.3;
     line-height: 1.3;
}
}
.update-title a {
.update-title a {
    color: #791a1a !important;
    text-decoration: none;
    transition: color 0.2s ease;
}
.update-title a:hover {
     color: #a61c1c !important;
     color: #a61c1c !important;
     text-decoration: none;
     text-decoration: none;
}
}
.update-title a:hover { text-decoration: underline; }
.update-card p {
    font-size: 0.9em;
    color: #4a3c28;
    line-height: 1.5;
    margin: 0;
}


.categories-grid .tile-halves {
.category-card {
     border: 1px solid #b3a07d;
    background: #ffffff;
     background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(20, 12, 4, 0.25);
     border: 1px solid rgba(179, 160, 125, 0.3);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}
.category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 28px rgba(20, 12, 4, 0.35), 0 0 15px rgba(255, 215, 0, 0.15);
     border-color: #b3a07d;
}
}
.tile-top.tile-image {
.tile-top.tile-image {
     background-color: #ffffff !important;
     background: radial-gradient(circle, #ffffff 0%, #f1e7d3 100%) !important;
     height: 110px;
     height: 220px;
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     justify-content: center;
     justify-content: center;
     padding: 10px;
     padding: 15px;
     border-bottom: 1px solid #b3a07d;
     border-bottom: 1px solid rgba(179, 160, 125, 0.3);
}
}
.tile-top.tile-image img {
.tile-top.tile-image img {
     max-width: 100%;
     max-width: 175px;
     max-height: 100%;
     max-height: 175px;
     object-fit: contain;
     object-fit: contain;
    filter: drop-shadow(0 14px 16px rgba(20, 12, 4, 0.5));
    transition: transform 0.2s ease, filter 0.2s ease;
}
.category-card:hover .tile-top.tile-image img {
    transform: scale(1.05);
    filter: drop-shadow(0 18px 20px rgba(20, 12, 4, 0.6));
}
}
.tile-bottom.link-button {
.tile-bottom.link-button {
     background-color: #fcf6e8 !important;
     background: #fcf6e8 !important;
     padding: 8px 6px;
     padding: 12px 10px;
     text-align: center;
     text-align: center;
     font-size: 0.9em;
     font-size: 1em;
     flex-grow: 1;
     flex-grow: 1;
}
}
.tile-bottom.link-button a {
.tile-bottom.link-button a {
     color: #611313 !important;
     color: #4a3c28 !important;
     font-weight: bold;
     font-weight: bold;
     text-decoration: none !important;
     text-decoration: none !important;
     display: block;
     display: block;
    transition: color 0.2s ease;
}
.category-card:hover .tile-bottom.link-button a {
    color: #791a1a !important;
}
}
.tile-bottom.link-button a:hover { text-decoration: underline !important; }


.popular-grid {
.popular-grid {
     display: grid;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-columns: repeat(3, 1fr);
     gap: 8px;
     gap: 12px;
     background-color: #f1e7d3;
     margin-bottom: 20px;
     padding: 10px;
     background: none;
     border: 1px solid #b3a07d;
     border: none;
     margin-bottom: 14px;
     padding: 0;
}
}
.link-button.dark-button a {
.link-button.dark-button a {
     display: block;
     display: flex;
     background-color: #5c4e38 !important;
    align-items: center;
     color: #ffffff !important;
    justify-content: center;
     background: linear-gradient(to bottom, #4a3c28, #3b240b) !important;
     color: #f1e7d3 !important;
     font-family: 'Inter', sans-serif;
     font-family: 'Inter', sans-serif;
     font-weight: bold;
     font-weight: 600;
     font-size: 0.85em;
     font-size: 0.9em;
     text-align: center;
     text-align: center;
     padding: 12px 6px;
     padding: 14px 10px;
    border-radius: 6px;
     text-decoration: none !important;
     text-decoration: none !important;
     border: 1px solid #3d3324;
     border: 1px solid #231607;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.1);
    transition: all 0.2s ease;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.link-button.dark-button a:hover {
    background: linear-gradient(to bottom, #5c4e38, #4a3c28) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.4), 0 0 10px rgba(255, 215, 0, 0.2), inset 0 1px 1px rgba(255,255,255,0.2);
    color: #ffffff !important;
}
}
.link-button.dark-button a:hover { background-color: #6e5e44 !important; }


.skills-grid {
.skills-grid {
     display: grid;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-columns: repeat(3, 1fr);
     background-color: #fcf6e8;
     gap: 12px;
     border: 1px solid #b3a07d;
    margin-bottom: 20px;
     padding: 8px 10px;
     background: none;
     margin-bottom: 14px;
     border: none;
     padding: 0;
}
}
.skill-item {
.skill-item {
     padding: 8px 10px;
    background: #ffffff;
     font-size: 0.85em;
    border-radius: 6px;
     border-bottom: 1px solid #b3a07d;
     padding: 10px 14px;
     border-right: 1px solid #b3a07d;
     font-size: 0.95em;
     box-shadow: 0 2px 6px rgba(61, 43, 31, 0.08);
     border: 1px solid rgba(179, 160, 125, 0.4);
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     gap: 8px;
     gap: 12px;
    transition: all 0.2s ease;
}
.skill-item img {
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.15));
}
}
.skill-item:nth-child(3n) { border-right: none; }
.skill-item a {
.skill-item a {
     color: #4a3c28 !important;
     color: #4a3c28 !important;
     font-weight: bold;
     font-weight: bold;
     text-decoration: none;
     text-decoration: none;
    flex-grow: 1;
}
.skill-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 8px rgba(61, 43, 31, 0.15);
    border-color: #b3a07d;
}
.skill-item:hover a {
    color: #791a1a !important;
}
}
.skill-item a:hover { color: #611313 !important; text-decoration: underline; }


.discord-widget, .widget-box {
.discord-widget, .widget-box {
     background-color: #f1e7d3;
     background: linear-gradient(to bottom, #fcf6e8, #f1e7d3);
     border: 1px solid #b3a07d;
    border-radius: 8px;
     margin-bottom: 14px;
    box-shadow: 0 4px 10px rgba(61, 43, 31, 0.15);
     border: 1px solid rgba(179, 160, 125, 0.4);
     margin-bottom: 20px;
    overflow: hidden;
}
}


.discord-widget {
.discord-widget {
     background-color: #3b5580 !important;
     background: linear-gradient(135deg, #3b5580, #263854) !important;
     border: 1px solid #263854 !important;
     border: 1px solid #1c2a3d !important;
     color: #ffffff;
     color: #ffffff;
    box-shadow: 0 6px 15px rgba(28, 42, 61, 0.4);
}
.discord-top {
    padding: 16px 20px;
    position: relative;
    overflow: hidden;
}
}
.discord-title {
.discord-title {
     font-family: 'PT Serif', Georgia, serif;
     font-family: 'Inter', sans-serif;
     font-size: 1.15em;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: bold;
    color: #94a3b8;
    margin-bottom: 10px;
    border: none;
    padding: 0;
}
.discord-server-name {
     font-size: 1.2em;
     font-weight: bold;
     font-weight: bold;
     border-bottom: 1px solid #526e9c;
     margin-bottom: 4px;
     padding: 10px 14px;
}
.discord-join-text {
    font-size: 0.9em;
     color: #cbd5e1;
}
}
.discord-body { padding: 12px 14px; }
.discord-bottom {  
.discord-body p { margin: 0 0 12px 0; font-size: 0.85em; line-height: 1.5; color: #e2e8f0; }
    background: rgba(0,0,0,0.2);
.discord-btn a {
    padding: 12px 20px;
    display: block;
    font-size: 0.8em;
     background-color: #21324d !important;
    text-transform: uppercase;
     color: #ffffff !important;
     letter-spacing: 0.1em;
     color: #94a3b8;
     text-align: center;
     text-align: center;
     padding: 10px;
     border-top: 1px solid rgba(255,255,255,0.1);
    font-family: 'Inter', sans-serif;
}
    font-weight: bold;
.discord-widget:hover .discord-arrow {
    text-decoration: none !important;
     transform: translateX(4px);
     border: 1px solid #141f30;
    border-radius: 2px;
}
}
.discord-btn a:hover { background-color: #17253a !important; }


.widget-title {
.widget-title {
     font-family: 'PT Serif', Georgia, serif;
     font-family: 'Kingthings Petrock', 'PT Serif', serif;
     font-size: 1.15em;
     font-size: 1.3em;
     font-weight: bold;
     font-weight: normal;
     color: #4a3c28;
     color: #3b240b;
     border-bottom: 1px solid #b3a07d;
     border-bottom: 1px solid rgba(179, 160, 125, 0.4);
     padding: 10px 14px;
     padding: 14px 20px;
    background: rgba(255,255,255,0.4);
}
}
.widget-body {
.widget-body {
     padding: 12px 14px;
     padding: 16px 20px;
     font-size: 0.85em;
     font-size: 0.9em;
    background-color: #fcf6e8;
     line-height: 1.6;
     line-height: 1.6;
    background: none;
}
}
.widget-body p { margin: 0 0 8px 0; }
.widget-body p { margin: 0 0 12px 0; color: #4a3c28; }
.plainlist ul {
.plainlist ul {
     list-style: none;
     list-style: none;
Line 365: Line 484:
}
}
.plainlist li {
.plainlist li {
     margin-bottom: 4px;
     margin-bottom: 8px;
    padding-left: 14px;
    position: relative;
}
}
.plainlist li::before {
.plainlist li::before {
     content: "•";
     content: "";
     color: #611313;
     position: absolute;
     margin-right: 6px;
    left: 0;
     font-weight: bold;
    top: 8px;
    width: 6px;
     height: 6px;
     background: #b3a07d;
    border-radius: 50%;
}
}
.plainlist a {
.plainlist a {
Line 377: Line 502:
     font-weight: bold;
     font-weight: bold;
     text-decoration: none;
     text-decoration: none;
    transition: color 0.2s ease;
}
}
.plainlist a:hover { text-decoration: underline; }
.plainlist a:hover {  
 
     color: #a61c1c !important;
@media screen and (max-width: 900px) {
     text-decoration: underline;  
     .updates-row, .categories-grid, .popular-grid, .skills-grid {
        grid-template-columns: 1fr;
     }
    .update-card { border-right: none; border-bottom: 1px solid #b3a07d; }
}
}


Line 403: Line 525:
/* Base inactive tab style */
/* Base inactive tab style */
.vector-menu-tabs .vector-menu-content-list > li {
.vector-menu-tabs .vector-menu-content-list > li {
     background-color: #cfc08d !important; /* OSRS inactive tab beige */
     background-color: transparent !important;  
     border: 1px solid #94866d !important;
     border: none !important;
    border-bottom: none !important;
     margin-right: 0 !important;
    border-radius: 3px 3px 0 0;
     margin-right: 4px !important;
     display: inline-block;
     display: inline-block;
     padding: 0 !important;
     padding: 0 !important;
Line 414: Line 534:
/* Active tab style */
/* Active tab style */
.vector-menu-tabs .vector-menu-content-list > li.selected {
.vector-menu-tabs .vector-menu-content-list > li.selected {
     background-color: #f1e7d3 !important; /* Matches #content parchment */
     background-color: #ffffff !important;  
     border: 3px solid #3d2b1f !important;
     border: none !important;
    border-bottom: none !important;
     position: relative;
     position: relative;
     z-index: 2; /* Sit on top of the content border */
     z-index: 2;  
     margin-bottom: -3px; /* Pull it down over the content border */
     margin-bottom: 0;  
}
}


/* Tab link text */
/* Tab link text */
.vector-menu-tabs .vector-menu-content-list > li > a {
.vector-menu-tabs .vector-menu-content-list > li > a {
     color: #4a3c28 !important;
     color: #794900 !important;
     padding: 10px 12px 6px 12px !important;
     padding: 10px 14px !important;
     font-family: 'PT Serif', Georgia, serif;
     font-family: 'Museo Sans', 'PT Serif', sans-serif;
     font-weight: bold;
     font-weight: normal;
     font-size: 0.9em;
     font-size: 0.95em;
     background: transparent !important;
     background: transparent !important;
    height: 40px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
}
}


/* Active tab text */
/* Active tab text */
.vector-menu-tabs .vector-menu-content-list > li.selected > a {
.vector-menu-tabs .vector-menu-content-list > li.selected > a {
     color: #000000 !important;
     color: #3b240b !important;
     padding-bottom: 9px !important; /* Extra padding to cover the gap */
}
 
/* --- Right Navigation (Read, Edit, History) Overrides --- */
/* In OSRS, the right tabs are just text links, not white boxes */
#p-views .vector-menu-content-list > li.selected {
     background-color: transparent !important;
    margin-bottom: 0 !important;
    z-index: 2 !important;
}
#p-views .vector-menu-content-list > li.selected > a {
    color: #794900 !important;
}
}


Line 491: Line 624:
}
}


/* Re-apply the specific tab backgrounds we WANT */
/* Hide the Read tab to match OSRS */
.vector-menu-tabs .vector-menu-content-list > li {
#ca-view {
    background-color: #cfc08d !important; /* Inactive tab */
     display: none !important;
}
.vector-menu-tabs .vector-menu-content-list > li.selected {
     background-color: #f1e7d3 !important; /* Active tab */
}
}


Line 512: Line 642:
     color: #4a3c28 !important;
     color: #4a3c28 !important;
     font-weight: bold;
     font-weight: bold;
}
/* --- 11. Cut-off Background & Attach Welcome Box --- */
/* Change body background to repeat-x (horizontal only) so it cuts off,
  and use a solid color for the rest of the page behind the content */
body {
    background: url('/resources/assets/background_stone.png') center top repeat-x !important;
    background-color: #2b2b2b !important; /* Or #e1d5be if they want tan canvas */
}
/* Remove the top padding from #content ONLY on the Main Page so the
  Welcome box slides up and attaches perfectly to the top border */
.page-Main_Page #content {
    padding-top: 0 !important;
}
/* The Welcome Box and Stats Box touch the top border */
.page-Main_Page .mainpage-header {
    margin-top: 0;
}
}
/* --- 12. Remove Vector Text Shadows --- */
/* --- 12. Remove Vector Text Shadows --- */
Line 554: Line 666:
     padding-left: 14px !important;
     padding-left: 14px !important;
     padding-right: 14px !important;
     padding-right: 14px !important;
}
/* --- 14. Logo Subtext --- */
/* Inject text under the logo */
#p-logo::after {
    content: "The Winds of Valen Wiki";
    display: block;
    text-align: center;
    font-family: 'Kingthings Petrock', 'PT Serif', Georgia, serif; /* Using the custom OSRS font! */
    font-size: 1.3em;
    font-weight: normal;
    color: #f1e7d3; /* Parchment color */
    text-shadow: 2px 2px 3px #000000, -1px -1px 2px #000000; /* Strong dark outline to make it readable over backgrounds */
    position: relative;
    top: -35px; /* Pull it up into the logo bounding box so it sits right under the image */
    line-height: 1.2;
    z-index: 10;
}
/* Push the sidebar navigation down slightly to make room for the new text */
#p-navigation {
    margin-top: 10px !important;
}
}
/* --- 15. VisualEditor Toolbar Fixes --- */
/* --- 15. VisualEditor Toolbar Fixes --- */
Line 619: Line 710:
     margin-top: 48px !important; /* Push it down below the beige header bar */
     margin-top: 48px !important; /* Push it down below the beige header bar */
}
}
/* --- 17. Custom Top-Left Logo Background Banner --- */
 
/* Use the newly generated custom background image that only has art in the top-left corner,
 
   and make the rest of the body a matching solid beige canvas so it blends seamlessly. */
/* ==========================================================================
  BODY & BACKGROUND
   ========================================================================== */
body {
body {
     background: url('/resources/assets/header_bg_valen.png') left top no-repeat !important;
     background: #e1d5be;
    background-color: #e1d5be !important; /* Authentic OSRS beige outer canvas color */
     background-image: none;
     background-size: auto 160px; /* Constrain the height so it doesn't bleed down too far, adjust as needed */
}
}
/* --- 18. Mystical Shared Header Banner --- */
 
/* Remove legacy vector page fade/clouds on #mw-page-base */
/* ==========================================================================
  LOGO TEXT (sidebar, below logo icon)
  ========================================================================== */
#p-logo::after {
    content: "The Winds of Valen Wiki";
    display: block;
    text-align: center;
    font-family: 'Kingthings Petrock', 'PT Serif', Georgia, serif;
    font-size: 1.1em;
    font-weight: normal;
    color: #f1e7d3;
    text-shadow: 2px 2px 4px #000000, -1px -1px 2px #000000;
    line-height: 1.2;
    padding: 0 6px;
    margin-top: 2px;
}
 
/* ==========================================================================
  BANNER
  #mw-page-base is already position:absolute in Vector Legacy skin.
  We use it as the full-width banner container.
  ========================================================================== */
#mw-page-base {
#mw-page-base {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 160px !important;
    background-image: none !important;
    background-color: transparent !important;
    z-index: 0 !important;
    display: block !important;
}
/* Hide the redundant head-base gradient overlay */
#mw-head-base {
    display: none !important;
}
/* ==========================================================================
  DESKTOP LAYOUT  >= 1000px
  ========================================================================== */
@media screen and (min-width: 1000px) {
    /* Tab bar row: sits at the bottom of the 160px banner */
    #mw-head {
        position: absolute !important;
        top: 120px !important;
        left: 0 !important;
        right: 0 !important;
        height: 40px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 50 !important;
    }
    /* Beige bar behind the tabs */
    #mw-head::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 165px !important;
        right: 0 !important;
        height: 40px !important;
        background-color: #d8ccb4 !important;
        border-top: 2px solid #3d2b1f !important;
        z-index: 0 !important;
    }
    /* Left nav: Main Page, Discussion tabs */
    #left-navigation {
        position: absolute !important;
        bottom: 0 !important;
        left: 165px !important;
        margin: 0 !important;
        float: none !important;
        z-index: 2 !important;
    }
    /* Right nav: Read, Edit, Search */
    #right-navigation {
        position: absolute !important;
        bottom: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        float: none !important;
        z-index: 2 !important;
    }
    /* Personal tools: Create account / Log in ??? top right corner */
    #p-personal {
        position: absolute !important;
        top: -80px !important;
        right: 10px !important;
        margin: 0 !important;
        z-index: 200 !important;
    }
    #p-personal ul {
        background: rgba(241, 231, 211, 0.95) !important;
        border: 1px solid #b3a07d !important;
        padding: 6px 12px !important;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    }
    /* Content box: starts at bottom of banner, shifted right of sidebar */
    #content {
        position: relative !important;
        z-index: 1 !important;
        margin-top: 160px !important;
        margin-left: 165px !important;
        padding-top: 0 !important;
    }
    /* Active tab latches onto content box top border (only left tabs) */
    #left-navigation .vector-menu-tabs .vector-menu-content-list > li.selected {
        margin-bottom: -3px !important;
        z-index: 3 !important;
        position: relative !important;
    }
   
    #right-navigation .vector-menu-tabs .vector-menu-content-list > li.selected {
        margin-bottom: 0 !important;
    }
    /* Sidebar: fixed to the viewport so it stays visible while the page
      content scrolls, instead of scrolling away with it. */
    #mw-panel {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 165px !important;
        height: 100vh !important;
        overflow-y: auto !important;
        padding-top: 0 !important;
        z-index: 10 !important;
        background: transparent !important;
    }
    /* Logo area: spans full 160px banner height */
    #p-logo {
        height: 160px !important;
        display: block !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    /* Logo anchor: shows the icon image in top portion, leaves room for text below */
    #p-logo a {
        display: block !important;
        width: 165px !important;
        height: 110px !important;
        background-size: 100px auto !important;
        background-position: center 8px !important;
        background-repeat: no-repeat !important;
    }
}
/* ==========================================================================
  MOBILE LAYOUT  < 1000px
  ========================================================================== */
@media screen and (max-width: 999px) {
    body {
        background: #e1d5be !important;
        background-image: none !important;
    }
    #mw-page-base {
        display: none !important;
    }
    #content {
        margin-top: 70px !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
        padding-top: 10px !important;
    }
    #mw-head {
        position: static !important;
        top: auto !important;
    }
    #mw-head::before {
        display: none !important;
    }
    /* The stock "Not logged in / Talk / Contributions / Log in" toolbar has
      nowhere sensible to sit once the header collapses on mobile, so hide
      it rather than let it float over the page. */
    #p-personal {
        display: none !important;
    }
    /* Sidebar becomes a slide-in drawer, opened via #mobile-nav-toggle
      (added by Common.js). Off-screen by default. */
    #mw-panel {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 240px !important;
        max-width: 80vw !important;
        height: 100vh !important;
        overflow-y: auto !important;
        background: #f1e7d3 !important;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4) !important;
        z-index: 500 !important;
        padding: 60px 15px 20px 15px !important;
        box-sizing: border-box !important;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }
    #mw-panel.mobile-nav-open {
        transform: translateX(0);
    }
    #p-logo {
        height: auto !important;
    }
    #p-logo a {
        height: 80px !important;
        background-size: contain !important;
        background-position: center !important;
    }
    .vector-menu-tabs .vector-menu-content-list > li {
        margin-bottom: 2px !important;
    }
    #mobile-nav-toggle {
        display: block !important;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 600;
        background: #3d2b1f;
        color: #f1e7d3;
        border: 2px solid #b3a07d;
        border-radius: 4px;
        padding: 8px 14px;
        font-size: 1.1em;
        font-family: 'Inter', sans-serif;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    }
    #mobile-nav-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 400;
    }
    #mobile-nav-backdrop.mobile-nav-open {
        display: block;
    }
}
/* Hamburger toggle/backdrop only exist for the mobile drawer; keep them
  fully inert on desktop widths. */
#mobile-nav-toggle, #mobile-nav-backdrop {
    display: none;
}
/* ==========================================================================
  SIDEBAR PORTAL BACKGROUNDS
  ========================================================================== */
div.vector-menu-portal,
#mw-panel div.portal,
.portal,
.mw-portlet {
     background-image: none !important;
     background-image: none !important;
    background-color: transparent !important;
}
}


/* Apply the full-width mystical background behind both the logo and the header */
/* ==========================================================================
body {
  DISCORD WIDGET
     background: url('/resources/assets/mystical_header.png') center top no-repeat !important;
  ========================================================================== */
     background-color: #e1d5be !important; /* Outer canvas color */
.discord-widget-modern {
     background-size: 100% 180px !important; /* Stretch horizontally across the header height */
    position: relative;
     background-color: #5865F2;
    border-radius: 4px;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
     color: #ffffff;
    margin-bottom: 20px;
     transition: background-color 0.2s ease;
}
}
/* --- 19. Fix Header Banner & Solid Body Canvas --- */
.discord-widget-modern a {
/* Move the banner image from the body to the dedicated #mw-page-base container.
  This explicitly crops the image to the header height (hiding the watermark)
  and prevents it from fading or bleeding down behind the main content area. */
#mw-page-base {
    background: url('/resources/assets/bg.png') center center no-repeat !important;
    background-size: cover !important;
    height: 180px !important;
    width: 100% !important;
     position: absolute;
     position: absolute;
     top: 0;
     top: 0; left: 0; right: 0; bottom: 0;
    left: 0;
     z-index: 10;
     z-index: 0;
    text-decoration: none !important;
}
.discord-click-target { display: block; width: 100%; height: 100%; }
.discord-top { padding: 16px 20px; display: flex; align-items: center; }
.discord-icon {
    width: 45px; height: 35px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36" fill="%23ffffff"><path d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1,105.25,105.25,0,0,0,32.19-16.14c0,0,.04-.06.05-.09,2.7-27.14-2.88-51.52-19-72.06ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.31,60,73.31,53s5-12.74,11.43-12.74S96.2,46,96.09,53,91.04,65.69,84.69,65.69Z"/></svg>');
    background-size: contain; background-repeat: no-repeat; background-position: center;
    margin-right: 15px;
}
.discord-text { flex-grow: 1; }
.discord-server-name { font-weight: 800; font-size: 17px; margin-bottom: 2px; }
.discord-join-text { font-size: 14px; }
.discord-arrow { font-size: 28px; font-weight: bold; margin-left: 10px; line-height: 1; }
.discord-bottom {
    background-color: #4752C4; padding: 10px; text-align: center;
    font-size: 12px; font-weight: 800; letter-spacing: 0.5px;
    transition: background-color 0.2s ease;
}
}
.discord-widget-modern:hover { background-color: #4752C4; cursor: pointer; }
.discord-widget-modern:hover .discord-bottom { background-color: #3b45a5; }


/* Ensure the body is strictly a solid beige color, with NO background image */
/* Hide Powered by MediaWiki */
body {
#footer-poweredbyico { display: none !important; }
     background-image: none !important;
 
     background-color: #e1d5be !important;
/* OSRS Style Wikitables and Infoboxes */
table.infobox, table.wikitable {
    background-color: #dfd0b6;
    border: 1px solid #7d6b54;
    border-collapse: collapse;
    color: #2b2b2b;
}
table.infobox th, table.wikitable th {
    background-color: #cbb493;
    border: 1px solid #7d6b54;
    padding: 6px;
    text-align: center;
}
table.infobox td, table.wikitable td {
    border: 1px solid #7d6b54;
    padding: 6px;
}
table.infobox caption {
    background-color: #cbb493;
    border: 1px solid #7d6b54;
    border-bottom: none;
    padding: 4px;
    font-weight: bold;
}
/* Section Headers */
#content h2 {
     border-bottom: 2px solid #7d6b54;
    font-family: 'PT Serif', Georgia, serif;
    color: #4a3c28;
    margin-top: 1.5em;
    padding-bottom: 2px;
}
#content h3 {
     font-family: 'PT Serif', Georgia, serif;
    color: #4a3c28;
}
}


/* Make sure the content box (#content) has a solid background so it doesn't look faded */
/* --- TOC Styling --- */
#content {
#toc, .toc, .mw-parser-output #toc, .mw-parser-output .toc {
     background-color: #f1e7d3 !important;
    background-color: #e2d1b4 !important;
    border: 1px solid #998363 !important;
    padding: 2px !important;
    display: inline-block;
    color: #2b2b2b;
    border-radius: 0;
    margin-bottom: 15px;
}
#toc .toctitle, .toc .toctitle, #toc h2, .toc h2 {
    background-color: #c7b08d !important;
    border-bottom: none !important;
    text-align: center;
    font-family: 'PT Serif', serif !important;
    font-size: 1.1em !important;
    font-weight: bold !important;
    margin: 0 !important;
    padding: 6px 15px !important;
    color: #4a3c28 !important;
}
#toc ul, .toc ul {
    list-style-type: none !important;
    padding: 10px 15px !important;
    margin: 0 !important;
     background-color: #e2d1b4 !important;
}
#toc ul ul, .toc ul ul {
    padding-left: 1.5em !important;
    border-left: 1px dotted #a08c6c;
    margin-left: 5px !important;
    padding-top: 5px;
    padding-bottom: 5px;
}
#toc li, .toc li {
    margin-bottom: 4px !important;
    font-size: 0.95em;
    line-height: 1.4;
}
#toc a, .toc a {
    color: #5a3c21 !important;
    text-decoration: none !important;
}
}
/* --- 20. Final Layout Fixes --- */
#toc a:hover, .toc a:hover {
/* Remove absolute positioning from mw-page-base so it actually pushes the content down below the header again */
     text-decoration: underline !important;
#mw-page-base {
     position: static !important;
}
}


/* Ensure the main content box does NOT use the mountain background image, and is strictly solid beige */
/* --- Popups (PagePreviews) Styling --- */
#content {
.mwe-popups {
     background-image: none !important;
    background-color: transparent !important;
     background-color: #f1e7d3 !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.6) !important;
}
.mwe-popups .mwe-popups-container {
    background-color: #e2d1b4 !important;
    border: 1px solid #7d6b54 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}
.mwe-popups .mwe-popups-extract {
    color: #2b2b2b !important;
    font-family: 'Museo Sans', sans-serif !important;
    padding: 15px !important;
    font-size: 0.95em !important;
}
.mwe-popups.mwe-popups-is-tall .mwe-popups-extract {
    padding-top: 10px !important;
}
.mwe-popups .mwe-popups-settings-icon {
    opacity: 0.7 !important;
}
.mwe-popups .mwe-popups-settings-icon:hover {
    opacity: 1 !important;
}
.mwe-popups .mwe-popups-extract::after {
     background-image: linear-gradient(to right, rgba(226, 209, 180, 0), #e2d1b4 50%) !important;
}
.mwe-popups .mwe-popups-extract[dir='ltr']::after {
     background-image: linear-gradient(to right, rgba(226, 209, 180, 0), #e2d1b4 50%) !important;
}
}
/* --- 21. Pixel-Perfect Content Latch --- */
svg.mwe-popups-settings-icon path {
/* Make the header banner absolute again so it doesn't push the content down 180px */
     fill: #2b2b2b !important;
#mw-page-base {
     position: absolute !important;
}
}


/* Explicitly push the content down by EXACTLY the distance of the tabs (15px top + 46px bar = 61px)
/* Discord Widget Clickable Overlay */
  so it latches perfectly onto the bottom of the navigation menu! */
.discord-widget {
#content {
    margin-top: 61px !important;
     position: relative;
     position: relative;
     z-index: 1; /* Sit under the tabs which are z-index 2 */
     transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.discord-widget:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(28, 42, 61, 0.6);
}
.discord-widget .external {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10;
}
}
/* --- 22. Fine-Tuned 4px Shift --- */
.discord-click-target {
/* Push the content box down by 4 more pixels so the inactive tabs stop overlapping the border */
    display: block;
#content {
    width: 100%;
     margin-top: 65px !important;
    height: 100%;
}
/* Fantasy UI Infobox */
.infobox-fantasy {
    width: 320px;
    float: right;
    clear: right;
    margin-left: 1em;
    margin-bottom: 1em;
    padding: 30px 25px 25px 25px;
    background-image: url('/images/1/13/T_FantasyWarrior_Box_Parchment01.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    color: #332717;
    font-size: 90%;
    font-family: 'Museo Sans', sans-serif;
    box-sizing: border-box;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}
 
.infobox-fantasy-header {
    background-image: url('/images/2/24/T_FantasyWarrior_Bar_Horizontal03.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    color: #fff;
    text-align: center;
    font-family: 'Kingthings Petrock', serif;
    font-size: 150%;
    padding: 12px 10px;
    margin-bottom: 15px;
     margin-top: -10px;
    text-shadow: 1px 1px 2px #000;
}
}


/* Because the content box moved down 4px, we must stretch the active tab down by 4 more pixels
.infobox-fantasy table {
  so it still seamlessly overlaps the dark brown border of the content box! */
     width: 100%;
.vector-menu-tabs .vector-menu-content-list > li.selected {
    border-collapse: collapse;
     margin-bottom: -7px !important;
}
}
/* --- 23. Shift Header Up & Unify Left Padding --- */
 
/* The user requested #mw-head to move up. We apply the negative margin and move the content up equally */
.infobox-fantasy th, .infobox-fantasy td {
#mw-head {
     padding: 6px 4px;
     margin-top: -30px !important;
    border-bottom: 1px solid rgba(125, 107, 84, 0.4);
}
}
#content {
 
     margin-top: 35px !important; /* Shifted up 30px from 65px to stay connected to the tabs */
.infobox-fantasy tr:last-child th, .infobox-fantasy tr:last-child td {
     border-bottom: none;
}
}


/* Unify the left-side alignment of the beige bar, the tabs, and the main content box
.infobox-fantasy th {
  so the beige bar never sticks out to the left of the active tab. */
    text-align: left;
#left-navigation {
    font-weight: bold;
     margin-left: 175px !important;
     width: 60%;
}
}
#content {
 
     margin-left: 175px !important;
.infobox-fantasy td {
     text-align: right;
}
}
#mw-head::before {
 
     left: 175px !important;  
.stat-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
    width: 22px;
     height: 22px;
}
}
/* --- 24. Fix Buttons Overlapping and Login Visibility --- */
.quest-details-fantasy {
/* Pull the login/register tools down so they don't disappear off the top of the screen */
    background-image: url('/images/f/f2/T_HUD_FantasyWarrior_Box_Large_Parchment01.png');
#p-personal {
    background-size: 100% 100%;
     top: 35px !important;  
    background-repeat: no-repeat;
     z-index: 100 !important;
    padding: 30px;
     margin-bottom: 20px;
     font-family: 'Museo Sans', sans-serif;
    color: #332717;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}
}


/* Ensure the entire navigation block (tabs, search, buttons) strictly sits ON TOP of the content box.
.quest-details-fantasy-header {
  This prevents the content box from swallowing the Read/Edit buttons. */
    background-image: url('/images/2/24/T_FantasyWarrior_Bar_Horizontal03.png');
#left-navigation,  
    background-size: 100% 100%;
#right-navigation {
    background-repeat: no-repeat;
     position: relative !important;
    background-position: center;
     z-index: 50 !important;
    color: #fff;
    text-align: center;
    font-family: 'Kingthings Petrock', serif;
    font-size: 150%;
    padding: 12px 10px;
    margin-top: -10px;
     margin-bottom: 20px;
     text-shadow: 1px 1px 2px #000;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}
}


/* Ensure the content box is layered safely UNDER the navigation menu */
 
#content {
/* Fix Watch Tab Text Overlap */
     position: relative !important;
#ca-watch a, #ca-unwatch a {
     z-index: 1 !important;
     width: 30px !important;
     padding: 0 !important;
    justify-content: center !important;
}
}
/* --- 25. The Ultimate Absolute Header Reset --- */
#ca-watch a span, #ca-unwatch a span {
/* Make page-base absolute so it stops interfering with vertical flow */
     display: none !important;
#mw-page-base {
     position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 180px !important; /* Keep the sky banner 180px tall */
}
}


/* Hardcode the header container to exactly 90px tall at the top of the page */
/* Fix Personal Tools Position and Overlap */
#mw-head {
#p-personal {
     position: absolute !important;
     position: absolute !important;
     top: 0 !important;
     top: -50px !important;
    left: 0 !important;
     right: 10px !important;
     right: 0 !important;
     z-index: 200 !important;
    width: 100% !important;
     height: 90px !important;
     margin: 0 !important;
     margin: 0 !important;
     z-index: 50 !important; /* Ensure header is always above content */
}
@media screen and (max-width: 1000px) {
     #p-personal {
        top: -15px !important;
        right: 0 !important;
        transform: scale(0.85);
        transform-origin: top right;
    }
}
 
/* ==========================================================================
  MOBILE / NARROW WINDOW FIXES
  Fixed-column grids on the main page (and any other page) don't shrink
  below their content's natural width, which forces the whole page to
  scroll horizontally on phones and narrow windows. Collapse them to fewer
  columns instead of letting them overflow, and give grid/flex children an
  explicit min-width so they're actually allowed to shrink.
  ========================================================================== */
/* Force normal document-level scrolling. Something (base skin CSS, not
  wiki-editable) was letting <body> become its own independent scroll
  container while <html> stayed pinned to the viewport height - which
  made position:absolute elements like the tab bar (whose containing
  block is the html-level initial containing block) behave as if fixed,
  overlapping content instead of scrolling away with it normally. */
html, body {
    height: auto !important;
    overflow-y: visible !important;
}
html {
    overflow-x: hidden;
}
 
.mainpage-container, .mainpage-layout, .mainpage-header, .mainpage-left, .mainpage-right,
.tile-row, .updates-row, .categories-grid, .popular-grid, .skills-grid,
.update-card, .category-card, .skill-item, .header-intro, .header-stats {
    min-width: 0;
}
 
/* Any image, table, or file thumbnail (including the Interactive Map's
  <imagemap>) should shrink to fit rather than force a scrollbar. Explicit
  width/height attributes are kept by the browser for the image's own
  scaling math (and for <imagemap> AREA coordinate scaling), so this is
  safe even for the world map. */
img, .thumb, .thumbinner, .image {
    max-width: 100% !important;
    height: auto !important;
}
 
@media screen and (max-width: 700px) {
    .categories-grid, .popular-grid, .skills-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .updates-row {
        grid-template-columns: 1fr !important;
    }
}
 
@media screen and (max-width: 460px) {
    .categories-grid, .popular-grid, .skills-grid {
        grid-template-columns: 1fr !important;
    }
    /* The leaderboard widgets have a hardcoded inline min-width:300px that
      stops them shrinking on the narrowest phones; override it. */
    .leaderboards-row {
        flex-direction: column !important;
    }
    .widget-box {
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}
}


/* Force personal tools (login) to sit at the absolute top right, far away from tabs */
/* Item/monster infobox portrait is a fixed 250px; on very narrow screens
#p-personal {
  that can be wider than the infobox itself is allowed to shrink to. */
     position: absolute !important;
@media screen and (max-width: 460px) {
    top: 10px !important;
     .infobox {
    right: 15px !important;
        width: 100% !important;
    margin: 0 !important;
        max-width: 320px;
     z-index: 100 !important;
     }
}
}


/* Force Left Navigation (Main Page tab) to sit at the absolute bottom left of the 90px header */
/* Forced refresh 2 */
#left-navigation {
 
     position: absolute !important;
/* ==========================================================================
     bottom: 0 !important;
  MINERVA MOBILE MENU - injected navigation sections
     left: 175px !important;
  Styled to fit Minerva's own native look (plain, light gray), not the
     margin: 0 !important;
  OSRS/parchment desktop theme, since this only ever renders on Minerva.
     float: none !important;
  ========================================================================== */
.wov-minerva-nav-heading {
     font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
     letter-spacing: 0.05em;
    color: #72777d;
     padding: 14px 16px 6px 16px;
    border-top: 1px solid #eaecf0;
}
#wov-minerva-extra-nav .toggle-list__list {
     margin: 0;
     padding: 0;
    list-style: none;
}
#wov-minerva-extra-nav .toggle-list-item__anchor {
    display: block;
    padding: 10px 16px;
    color: #202122;
    text-decoration: none;
    font-size: 0.95em;
}
#wov-minerva-extra-nav .toggle-list-item__anchor:active {
    background: #eaecf0;
}
}


/* Force Right Navigation (Read/Edit/Search) to sit at the absolute bottom right of the 90px header */
/* Keep just the hamburger button pinned while scrolling; everything else
#right-navigation {
  in the header (site name, search) scrolls away normally. */
     position: absolute !important;
#mw-mf-main-menu-button {
     bottom: 0 !important;
     position: fixed !important;
     right: 15px !important;
     top: 8px;
     left: 8px;
     margin: 0 !important;
     margin: 0 !important;
     float: none !important;
     z-index: 1000;
    width: 40px;
    height: 40px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1.5px solid #a2a9b1;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
/* Hide it while the drawer is open so it doesn't sit on top of "Home";
  tapping outside the drawer still closes it via Minerva's own overlay. */
#main-menu-input:checked ~ #mw-mf-main-menu-button {
    display: none !important;
}
/* The button leaving normal flow collapses its old slot to 0 width, so the
  site name/search would otherwise slide left underneath it; push them
  right to clear it. */
.minerva-header {
    padding-left: 52px;
    box-sizing: border-box;
}
}


/* Ensure the beige bar spans the entire width and anchors to the bottom */
/* List Category:Skills members in a single vertical column instead of the
#mw-head::before {
  default multi-column layout. */
     content: "";
.page-Category_Skills .mw-category-columns {
    position: absolute !important;
     column-count: 1 !important;
     bottom: 0 !important;
     column-width: auto !important;
     left: 175px !important;
}
    right: 0 !important;
.page-Category_Skills .mw-category-group ul {
    height: 46px !important;
     display: block !important;
     z-index: 0 !important; /* Behind the tabs */
}
.page-Category_Skills .mw-category-group li {
     display: block !important;
}
}


/* Push the content box down by exactly 90px so it latches perfectly to the header */
/* Drop the Score column from the Top Contributors table. */
#content {
.contributionscores-wrapper th:nth-child(2),
    margin-top: 90px !important;
.contributionscores-wrapper td:nth-child(2) {
    margin-left: 175px !important;
     display: none;
     position: relative !important;
    z-index: 1 !important; /* Safely under the header */
}
}


/* Reset the active tab overlap to the correct 3px now that everything is perfectly absolute */
/* Hide the whole Tools toolbox from the sidebar (What links here, Related
.vector-menu-tabs .vector-menu-content-list > li.selected {
  changes, Printable version, Permanent link, Page information, Cargo
     margin-bottom: -3px !important;
  data) - none of it is meant for regular readers. */
#p-tb {
     display: none !important;
}
}
/* MODERN DISCORD BUTTON OVERRIDE */
#footer-places-about {
.discord-btn a {
     display: none !important;
    background-color: #5865F2 !important;
    padding: 12px 20px !important;
    font-size: 1.05em !important;
    border: none !important;
    border-radius: 30px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.2s ease-in-out !important;
}
.discord-btn a:hover {
     background-color: #4752C4 !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
    transform: translateY(-2px) !important;
}
}
Retrieved from "https://windsofvalenwiki.com/w/MediaWiki:Common.css"