MediaWiki:Common.css: Difference between revisions

From Ekologos Wiki
← Older edit
Admin (talk | contribs)
Bureaucrats, Interface administrators, Administrators
276 edits
No edit summary
No edit summary
 
(84 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* ==========================================================
/* ==========================================================
   EKOLOGOS WIKI DESIGN SYSTEM
   EKOLOGOS WIKI DESIGN SYSTEM v2.0
   Clean & Consolidated Stylesheet
   Foundation
========================================================== */
========================================================== */


/* ==========================================
/* ==========================================================
   1. GLOBAL STYLES
   1. ROOT VARIABLES
========================================== */
========================================================== */
 
:root{
 
    --eko-green:#23492F;
    --eko-accent:#295536;
    --eko-bg:#F8F6F1;
    --eko-white:#ffffff;
    --eko-text:#333333;
    --eko-light:#666666;


body {
    --radius:18px;
     background: #f8f6f1;
 
     color: #2f2f2f;
    --shadow-sm:0 6px 18px rgba(0,0,0,.08);
     font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --shadow-md:0 12px 30px rgba(0,0,0,.10);
    --shadow-lg:0 22px 50px rgba(0,0,0,.15);
 
    --container:1280px;
 
}
 
/* ==========================================================
  2. GLOBAL
========================================================== */
 
html{
    scroll-behavior:smooth;
}
 
body{
    margin:0;
    padding:0;
     background:var(--eko-bg);
     color:var(--eko-text);
     font-family:"Segoe UI",Roboto,Arial,sans-serif;
}
}


/* Full-width utility */
/* ==========================================================
  FULL WIDTH LAYOUT
========================================================== */
 
body .container,
body .container,
body .container-fluid,
body .container-fluid,
Line 20: Line 52:
.col-12,
.col-12,
#mw-content-text,
#mw-content-text,
.mw-parser-output {
.page-Main_Page .mw-parser-output{
     max-width: 100% !important;
 
     width: 100% !important;
    width:100% !important;
    max-width:100% !important;
 
}
 
.page-Main_Page .container{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
}
 
.page-Main_Page .flex-fill.container{
    width:100% !important;
     max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
}
 
.page-Main_Page #content,
.page-Main_Page #bodyContent,
.page-Main_Page #mw-content-text,
.page-Main_Page .mw-parser-output{
 
    margin:0 !important;
    padding:0 !important;
 
}
 
/* ==========================================================
  CONTENT PAGES
========================================================== */
 
body:not(.page-Main_Page) .mw-parser-output{
 
    max-width:1100px;
    margin:auto;
    padding:40px 30px;
 
}
 
/* ==========================================================
  MAIN PAGE CLEANUP
========================================================== */
 
.page-Main_Page #firstHeading,
.page-Main_Page #contentSub,
.page-Main_Page #toc,
.page-Main_Page .page-tools,
.page-Main_Page .mw-indicators{
 
    display:none !important;
 
}
 
/* ==========================================================
  NAVBAR
========================================================== */
 
.page-Main_Page .navbar{
 
    position:absolute;
    top:0;
    left:0;
    right:0;
 
    z-index:1000;
 
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
 
}
 
/* Logo */
 
.navbar-brand{
 
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center;
 
    height:70px;
 
    padding:0 8px !important;
    margin-top:-30px;
 
}
 
.navbar-brand img,
.navbar-brand .mw-wiki-logo,
#p-logo img{
 
    display:block;
 
    height:70px;
    width:auto;
 
}
 
/* Navigation */
 
.page-Main_Page .navbar-nav>li>a{
 
    color:#ffffff !important;
    font-weight:500;
 
}
 
.page-Main_Page .navbar-nav>li>a:hover{
 
    color:#d8ead8 !important;
 
}
/* ==========================================================
  HERO
========================================================== */
 
.eko-hero {
    position: relative;
 
     width: 100%;
    min-height: 720px;
    height: 80vh;
    max-height: 900px;
 
    background:
        linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)),
        url("https://wiki.highlanderpress.org/images/thumb/2/26/Hero.jpg/800px-Hero.jpg?20260703054727");
 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
 
    /* CENTRE EVERYTHING */
    display: flex;
    justify-content: center;
    align-items: center;
 
    text-align: center;
 
    overflow: hidden;
}
 
 
/* HERO OVERLAY */
 
.eko-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.30);
}
 
 
/* HERO CONTENT */
 
.eko-content {
    position: relative;
    z-index: 2;
 
    width: 100%;
    max-width: 950px;
 
    margin: 0 auto !important;
    padding: 0 30px;
 
    box-sizing: border-box;
 
    text-align: center !important;
}
 
 
/* ==========================================================
  HERO TYPOGRAPHY
========================================================== */
 
.eko-content .hero-title-main {
    font-family: Georgia, "Times New Roman", serif;
 
    font-size: 78px;
    font-weight: 700;
    line-height: 1;
 
    color: #ffffff !important;
 
    margin: 0 0 -5px !important;
 
    text-align: center !important;
}
}


/* ==========================================
  2. TYPOGRAPHY
========================================== */


.home-title {
.eko-content .hero-title-sub {
     font-family: Georgia, "Times New Roman", serif;
     font-family: Georgia, "Times New Roman", serif;
     font-size: clamp(36px, 6vw, 68px);
 
     line-height: 1.2;
     font-size: 52px;
     color: #23492f;
    font-weight: 500;
     font-weight: 600;
     line-height: 1.15;
     margin-bottom: 20px;
 
     color: #ffffff !important;
 
     margin: 0 0 0px !important;
 
    text-align: center !important;
}
 
 
/* Divider */
 
.eko-content .hero-title-sub::after {
    display: none !important;
     content: none !important;
}
}


.home-subtitle {
 
     font-size: clamp(18px, 2.5vw, 24px);
/* HERO DESCRIPTION */
 
.eko-content > p {
    max-width: 720px;
 
    margin: 28px auto 0 !important;
 
    font-family: Arial, sans-serif;
     font-size: 20px;
     line-height: 1.6;
     line-height: 1.6;
     color: #555;
 
     max-width: 900px;
     color: #ffffff !important;
     margin: 0 auto;
 
    text-align: center !important;
}/* ==========================================================
  HOMEPAGE SECTION
========================================================== */
 
.homepage-section{
 
     max-width:var(--container);
     margin:0 auto;
    padding:90px 40px;
 
}
 
/* ==========================================================
  SECTION HEADER
========================================================== */
 
.section-header{
 
    display:flex;
    justify-content:space-between;
    align-items:center;
 
    width:100%;
 
    margin-bottom:2px;
 
}
 
/* Left side */
 
.section-title-left{
 
    display:flex;
    align-items:center;
 
    gap:16px;
 
    flex:1;
 
}
 
/* Remove MediaWiki image wrappers */
 
.section-title-left span,
.section-title-left a{
 
    display:flex;
    align-items:center;
 
    margin:0;
    padding:0;
 
}
 
/* Globe icon */
 
.section-title-left .mw-file-element,
.section-title-left img,
.section-icon,
.section-icon img{
 
    width:32px !important;
    height:32px !important;
 
    min-width:32px;
    min-height:32px;
 
    display:block;
 
    object-fit:contain;
 
    margin:0;
    padding:0;
 
    border:none;
    box-shadow:none;
 
}
 
/* Heading */
 
.section-heading{
 
    margin:0;
    padding:0;
 
    font-family:Georgia,"Times New Roman",serif;
    font-size:46px;
    font-weight:500;
    line-height:1;
 
    color:var(--eko-green);
 
}
 
/* Remove default MediaWiki heading spacing */
 
.section-heading::before,
.section-heading::after{
 
    display:none !important;
    content:none !important;
 
}
 
.section-title-left h2{
 
    margin:0 !important;
    padding:0 !important;
    border:none !important;
 
}
 
/* Right side */
 
.section-title-right{
 
    margin-left:auto;
 
    white-space:nowrap;
 
    font-size:18px;
    font-weight:600;
 
    display:flex;
    align-items:center;
 
}
 
.section-title-right a{
 
    color:var(--eko-green);
    text-decoration:none;
 
    transition:.25s;
 
}
}


.section-title {
.section-title-right a:hover{
    font-family: Georgia, serif;
 
     font-size: clamp(28px, 4vw, 42px);
     color:var(--eko-accent);
     color: #23492f;
     text-decoration:none;
    margin-bottom: 20px;
 
}
}


/* ==========================================
/* ==========================================================
   3. NAVBAR & LOGO
   RESPONSIVE
========================================== */
========================================================== */
 
@media (max-width:768px){
 
    .section-header{
 
        flex-direction:column;
        align-items:flex-start;
        gap:20px;
 
    }
 
    .section-heading{
 
        font-size:34px;
 
    }
 
    .section-title-right{
 
        margin-left:0;
 
    }
 
}
 
@media (max-width:480px){
 
    .section-heading{
 
        font-size:28px;
 
    }
 
    .section-title-left .mw-file-element,
    .section-title-left img{
 
        width:26px !important;
        height:26px !important;
 
        min-width:26px;
        min-height:26px;
 
    }
 
    .section-title-right{
 
        font-size:16px;
 
    }


.navbar-brand {
    padding: 5px !important;
    min-height: 70px;
    display: flex !important;
    align-items: center !important;
}
}


.navbar-brand img,
/* ==========================================================
.navbar-brand .mw-wiki-logo,
  GRID
#p-logo img {
========================================================== */
     height: 60px;
 
     width: auto;
.homepage-grid{
    max-height: 60px;
     display:grid;
     max-width: 250px;
     grid-template-columns:repeat(3,1fr);
     gap:34px;
}
}


/* ==========================================
/* ==========================================================
   4. CARDS
   CARDS
========================================== */
========================================================== */


.eko-card{
.eko-card{
     position:relative;
     width:100%;
    display:block;
     background:#fff;
     background:#fff;
     border-radius:18px;
     border-radius:18px;
     overflow:hidden;
     overflow:hidden;
     box-shadow:0 8px 24px rgba(0,0,0,.08);
     box-shadow:var(--shadow-sm);
     transition:all .3s ease;
     transition:.3s;
    text-decoration:none;
}
}


.eko-card:hover{
.eko-card:hover{
     transform:translateY(-6px);
     transform:translateY(-6px);
     box-shadow:0 18px 40px rgba(0,0,0,.15);
 
     box-shadow:var(--shadow-lg);
 
}
}


.eko-card img,
.eko-card img,
.eko-card .mw-file-element{
.eko-card .mw-file-element{
     width:100%;
     width:100%;
     height:230px;
     height:260px;
 
     object-fit:cover;
     object-fit:cover;
     display:block;
     display:block;
     transition:transform .4s ease;
 
     transition:transform .35s ease;
 
}
}


.eko-card:hover img,
.eko-card:hover img,
.eko-card:hover .mw-file-element{
.eko-card:hover .mw-file-element{
     transform:scale(1.08);
 
     transform:scale(1.05);
 
}
}


.eko-card-body{
.eko-card-body{
     padding:18px;
     padding:18px;
}
}


.eko-card-title{
.eko-card-title{
    font-family:Georgia, serif;
 
    font-size:24px;
    color:#23492f;
     margin:0;
     margin:0;
     text-align:center;
     text-align:center;
    font-family:Georgia,serif;
    font-size:24px;
    color:var(--eko-green);
}
}


.eko-card-text{
.eko-card-text{
     display:none;
 
     display:none !important;
 
}
}


/* ==========================================
/* ==========================================================
   5. BUTTONS
   RESPONSIVE
========================================== */
========================================================== */
 
@media (max-width:1000px){
 
    .homepage-grid{
        grid-template-columns:repeat(2,1fr);
    }


.eko-button {
    display: inline-block;
    background: #295536;
    color: white;
    padding: 14px 32px;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: background 0.2s ease, transform 0.2s ease;
    border: none;
    cursor: pointer;
}
}


.eko-button:hover {
@media (max-width:768px){
     background: #1f4129;
 
     color: white;
    .eko-hero{
     text-decoration: none;
        min-height:600px;
     transform: translateY(-2px);
        height:auto;
        padding:100px 25px 80px;
    }
 
    .hero-title-main{
        font-size:54px;
        line-height:1.05;
        margin-bottom:10px;
     }
 
    .hero-title-sub{
        font-size:36px;
        line-height:1.2;
        margin-bottom:24px;
    }
 
     .hero-title-sub::after{
        width:320px;
        margin:24px auto 0;
     }
 
    .eko-content p{
        max-width:620px;
        font-size:18px;
        line-height:1.6;
        margin-top:28px;
    }
 
    .section-header{
        flex-direction:column;
        align-items:flex-start;
        gap:15px;
    }
 
    .homepage-section{
        padding:70px 25px;
     }
 
    .homepage-grid{
        grid-template-columns:1fr;
    }
 
    .navbar-brand img,
    .navbar-brand .mw-wiki-logo{
        height:50px;
    }
 
}
}


.eko-button-outline {
@media (max-width:480px){
     background: transparent;
 
     color: white;
    .eko-hero{
     border: 2px solid white;
        min-height:500px;
        height:auto;
        padding:80px 18px 60px;
    }
 
    .hero-title-main{
        font-size:40px;
        line-height:1.1;
        margin-bottom:8px;
    }
 
    .hero-title-sub{
        font-size:28px;
        line-height:1.25;
        margin-bottom:20px;
    }
 
    .hero-title-sub::after{
        width:220px;
        margin:20px auto 0;
     }
 
    .eko-content p{
        max-width:100%;
        font-size:17px;
        line-height:1.6;
        margin-top:24px;
     }
 
    .homepage-section{
        padding:50px 18px;
     }
 
    .eko-card img,
    .eko-card .mw-file-element{
        height:200px;
    }
 
}
}


.eko-button-outline:hover {
/* ==========================================================
    background: white;
  ANIMATION
    color: #23492f;
========================================================== */
 
@keyframes fadeInUp{
 
from{
 
opacity:0;
transform:translateY(30px);
 
}
}


/* ==========================================
to{
  6. HERO SECTION
 
========================================== */
opacity:1;
transform:translateY(0);
 
}


.hero {
    min-height: 100vh;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
        url("https://localhost/wiki/index.php/File:Hero.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 120px 20px 80px;
    position: relative;
}
}


.hero-overlay {
.animate-in{
    max-width: 900px;
 
    width: 100%;
animation:fadeInUp .6s ease forwards;
 
}
}


.hero .home-title {
.eko-card:nth-child(1){animation-delay:.1s;}
     color: white;
.eko-card:nth-child(2){animation-delay:.2s;}
     margin-bottom: 20px;
.eko-card:nth-child(3){animation-delay:.3s;}
.eko-card:nth-child(4){animation-delay:.4s;}
 
/* ==========================================================
  UTILITIES
========================================================== */
 
.text-center{text-align:center;}
.mt-20{margin-top:20px;}
.mt-40{margin-top:40px;}
.mb-20{margin-bottom:20px;}
.mb-40{margin-bottom:40px;}
/* Make both texts the same size */
.homepage-section .section-heading,
.homepage-section .section-title-right a {
     font-family: Georgia, "Times New Roman", serif !important;
     font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}
}
.section-title-right a,
.section-title-right a:visited {
    color: var(--eko-green) !important;
}
/* Show all six region cards in one row on desktop */
@media (min-width: 1001px) {
    .homepage-grid {
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 18px !important;
    }
    .eko-card img,
    .eko-card .mw-file-element {
        height: 150px !important;
    }
    .eko-card-body {
        padding: 12px 8px !important;
    }


.hero .home-subtitle {
    .eko-card-title {
    color: rgba(255, 255, 255, 0.9);
        font-size: 17px !important;
     margin-bottom: 40px;
     }
}
}
/* Region titles inside images — compact version */


/* Hero search bar */
.eko-card {
.hero-search {
    position: relative !important;
     margin-top: 40px;
    padding: 0 !important;
     margin: 0 !important;
    background: transparent !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}
}


.hero-search input {
/* Remove MediaWiki spacing around images */
    width: 100%;
 
    max-width: 600px;
.eko-card > p,
     padding: 18px 24px;
.eko-card > figure,
     border-radius: 50px;
.eko-card > span,
     border: none;
.eko-card > a,
     font-size: 18px;
.eko-card .mw-file-description {
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     display: block !important;
     outline: none;
     width: 100% !important;
    transition: box-shadow 0.3s ease;
     margin: 0 !important;
     padding: 0 !important;
     line-height: 0 !important;
     background: transparent !important;
}
}


.hero-search input:focus {
.eko-card > p > span,
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
.eko-card > p > span > a,
.eko-card > figure > a,
.eko-card > span > a {
    display: block !important;
    width: 100% !important;
     margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}
}


/* ==========================================
/* Image fills the card without a white border */
  7. HOMEPAGE (MAIN PAGE) SPECIFICS
========================================== */


/* Full-width layout on Main Page */
.eko-card img,
.page-Main_Page .container,
.eko-card .mw-file-element {
.page-Main_Page .container-fluid,
     display: block !important;
.page-Main_Page .mw-body,
.page-Main_Page #content,
.page-Main_Page #mw-content-text {
     max-width: 100% !important;
     width: 100% !important;
     width: 100% !important;
    height: 150px !important;
     margin: 0 !important;
     margin: 0 !important;
     padding: 0 !important;
     padding: 0 !important;
    border-radius: 12px !important;
    object-fit: cover !important;
}
/* Small title overlay */
.eko-card-body {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 10px 4px 4px !important;
    background: linear-gradient(
    to bottom,
    transparent,
    var(--eko-green)
) !important;
    box-sizing: border-box !important;
}
.eko-card-title {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
/* Final fix: space between region heading and cards */
.page-Main_Page .homepage-section > .section-header {
    margin-bottom: 8px !important;
}
}


.page-Main_Page .mw-parser-output {
.page-Main_Page .homepage-section > .section-header + p {
    display: none !important;
     margin: 0 !important;
     margin: 0 !important;
     padding: 0 !important;
     padding: 0 !important;
}
}


/* Hide unwanted elements on Main Page */
.page-Main_Page .homepage-section > .homepage-grid {
.page-Main_Page #firstHeading,
    margin-top: 0 !important;
.page-Main_Page #contentSub,
}
.page-Main_Page .mw-indicators,
 
.page-Main_Page .page-tools,
/* Move region cards closer to the heading */
.page-Main_Page #toc {
.page-Main_Page .homepage-section .homepage-grid {
     display: none !important;
    margin-top: 0px !important;
}
 
/* ==========================================================
  EXPLORE BY THEME
========================================================== */
 
.theme-section {
    max-width: var(--container);
    margin: 0 auto;
    padding: 25px 40px 55px;
    box-sizing: border-box;
}
 
/* Theme heading row */
 
.theme-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 14px;
}
 
.theme-title-left {
    display: flex;
    align-items: center;
    gap: 9px;
}
 
.theme-title-left span,
.theme-title-left a {
     display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}
}


/* Transparent navbar overlay on Main Page */
.theme-title-left img,
.page-Main_Page nav.navbar,
.theme-title-left .mw-file-element {
.page-Main_Page .navbar {
     display: block;
     position: absolute;
    width: 22px !important;
     top: 0;
     height: 22px !important;
     left: 0;
     min-width: 22px !important;
     right: 0;
     min-height: 22px !important;
     z-index: 1000;
     object-fit: contain;
     background: transparent !important;
    margin: 0 !important;
     padding: 0 !important;
     border: none !important;
     border: none !important;
     box-shadow: none !important;
     box-shadow: none !important;
}
}


/* Content sections on homepage */
.theme-heading,
.homepage-section {
.theme-title-right a {
     padding: 80px 20px;
     font-family: Georgia, "Times New Roman", serif;
     max-width: 1200px;
    font-size: 20px !important;
     margin: 0 auto;
     font-weight: 500;
     line-height: 1.2;
    color: var(--eko-green) !important;
}
}


.homepage-section-alt {
.theme-title-right {
     background: white;
     margin-left: auto;
     padding: 80px 20px;
     white-space: nowrap;
}
}


.homepage-grid{
.theme-title-right a {
     display:grid;
     text-decoration: none !important;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
    margin-top:35px;
}
}


@media (max-width:1000px){
.theme-title-right a:hover {
     .homepage-grid{
     color: var(--eko-accent) !important;
        grid-template-columns:repeat(2,1fr);
    }
}
}


@media (max-width:650px){
/* Ten theme cards in one row */
    .homepage-grid{
 
        grid-template-columns:1fr;
.theme-grid {
     }
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 12px;
     width: 100%;
}
}


/* Feature row */
/* Individual theme card */
.feature-row {
 
     display: grid;
.theme-card {
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    min-height: 115px;
     gap: 30px;
    padding: 12px 5px 10px;
    box-sizing: border-box;
 
     display: flex;
     flex-direction: column;
    align-items: center;
    justify-content: center;
 
    background: #f5f3ed;
    border: 1px solid rgba(35, 73, 47, 0.12);
     border-radius: 14px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
 
     text-align: center;
     text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
}


.feature-icon {
.theme-card:hover {
     font-size: 48px;
     transform: translateY(-3px);
     margin-bottom: 20px;
     box-shadow: 0 7px 16px rgba(0, 0, 0, 0.08);
    color: #295536;
}
}


.feature-title {
/* Icon */
     font-family: Georgia, serif;
 
     font-size: 24px;
.theme-icon {
     color: #23492f;
     height: 58px;
     margin-bottom: 10px;
    display: flex;
    align-items: center;
     justify-content: center;
     line-height: 0;
     margin-bottom: 5px;
}
}


/* ==========================================
.theme-icon span,
  8. CONTENT PAGES (non-homepage)
.theme-icon a {
========================================== */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
}
 
.theme-icon img,
.theme-icon .mw-file-element {
    display: block;
    width: 52px !important;
    height: 52px !important;
    object-fit: contain;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}
 
/* Theme title */


.mw-parser-output {
.theme-name {
     padding: 0 20px;
    color: var(--eko-green);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
     line-height: 1.15;
}
}


/* ==========================================
/* Responsive layout */
  9. RESPONSIVE DESIGN
========================================== */


/* Tablets */
@media (max-width: 1000px) {
@media (max-width: 768px) {
     .theme-grid {
     .hero {
         grid-template-columns: repeat(5, 1fr);
         min-height: 80vh;
        padding: 100px 20px 60px;
     }
     }
   
}
     .hero .home-title {
 
         font-size: clamp(32px, 8vw, 48px);
@media (max-width: 600px) {
     .theme-section {
         padding: 25px 18px 40px;
     }
     }
   
 
     .hero-search input {
     .theme-header {
         max-width: 100%;
         align-items: flex-start;
         padding: 16px 20px;
         gap: 12px;
        font-size: 16px;
     }
     }
   
 
     .homepage-section,
     .theme-heading,
     .homepage-section-alt {
     .theme-title-right a {
         padding: 50px 20px;
         font-size: 15px !important;
     }
     }
   
 
     .homepage-grid,
     .theme-grid {
    .feature-row {
         grid-template-columns: repeat(2, 1fr);
         grid-template-columns: 1fr;
         gap: 10px;
         gap: 20px;
     }
     }
      
}
     .navbar-brand img,
/* Remove vertical gaps around Explore by Theme */
    .navbar-brand .mw-wiki-logo {
 
        height: 50px;
.page-Main_Page .homepage-section {
        max-height: 50px;
    padding-bottom: 0 !important;
     }
}
      
 
     .section-title {
.page-Main_Page .theme-section {
         text-align: center;
    padding-top: 0 !important;
}
 
.page-Main_Page .theme-header {
    margin-bottom: 0 !important;
}
 
.page-Main_Page .theme-grid {
    margin-top: 0 !important;
}
/* ==========================================================
  FEATURED KNOWLEDGE COLLECTIONS
========================================================== */
 
.collections-section {
    max-width: var(--container);
    margin: 0 auto;
    padding: 30px 40px 70px;
    box-sizing: border-box;
}
 
/* Section heading */
 
.collections-heading {
    margin: 0 0 14px;
    color: var(--eko-green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}
 
/* Four cards in one row */
 
.collections-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
}
 
/* Individual card */
 
.collection-card {
    background: #ffffff;
    border: 1px solid rgba(35, 73, 47, 0.12);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
 
.collection-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 9px 20px rgba(0, 0, 0, 0.09);
}
 
/* Remove MediaWiki image spacing */
 
.collection-image {
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
}
 
.collection-image p,
.collection-image span,
.collection-image a {
    display: block;
    width: 100%;
    margin: 0 !important;
     padding: 0 !important;
     line-height: 0;
}
 
/* Main card image */
 
.collection-image img,
.collection-image .mw-file-element {
    display: block;
    width: 100% !important;
    height: 170px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover;
    border: none !important;
    box-shadow: none !important;
}
 
/* Text area */
 
.collection-body {
    min-height: 135px;
     padding: 16px 16px 18px;
    box-sizing: border-box;
}
 
/* Card title */
 
.collection-title {
     margin: 0 0 7px;
     font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.1;
}
 
.collection-title a,
.collection-title a:visited {
    color: var(--eko-green) !important;
    text-decoration: none !important;
}
 
.collection-title a:hover {
    color: var(--eko-accent) !important;
}
 
/* Description */
 
.collection-text {
    color: var(--eko-text);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
}
 
/* Tablet */
 
@media (max-width: 900px) {
    .collections-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }
     }
}
}


/* Mobile */
/* Mobile */
@media (max-width: 480px) {
 
     .hero {
@media (max-width: 600px) {
        min-height: 70vh;
     .collections-section {
         padding: 80px 15px 40px;
         padding: 25px 18px 45px;
     }
     }
   
 
     .eko-button {
     .collections-grid {
         padding: 12px 24px;
         grid-template-columns: 1fr;
        font-size: 14px;
        width: 100%;
        text-align: center;
    }
   
    .eko-card img {
        height: 160px;
    }
   
    .eko-card-body {
        padding: 18px;
     }
     }
}
/* ==========================================================
  HOMEPAGE LOWER SECTIONS
========================================================== */
.home-lower-section {
    max-width: var(--container);
    margin: 0 auto;
    padding: 20px 40px 25px;
    box-sizing: border-box;
}
}


/* ==========================================
  10. ANIMATIONS
========================================== */


@keyframes fadeInUp {
/* ==========================================================
     from {
  FEATURED ARTICLES AND COMMUNITY
        opacity: 0;
========================================================== */
        transform: translateY(30px);
 
     }
.home-upper-grid {
     to {
     display: grid;
        opacity: 1;
    grid-template-columns: 1.8fr 1fr;
        transform: translateY(0);
     gap: 24px;
    }
     align-items: stretch;
    width: 100%;
}
}


.animate-in {
.home-articles-panel {
     animation: fadeInUp 0.6s ease forwards;
     border-top: 1px solid rgba(35, 73, 47, 0.15);
    padding-top: 12px;
}
}


/* Stagger animation delays for cards */
.home-lower-heading {
.eko-card:nth-child(1) { animation-delay: 0.1s; }
    margin: 0 0 14px;
.eko-card:nth-child(2) { animation-delay: 0.2s; }
    color: var(--eko-green);
.eko-card:nth-child(3) { animation-delay: 0.3s; }
    font-family: Georgia, "Times New Roman", serif;
.eko-card:nth-child(4) { animation-delay: 0.4s; }
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}


/* ==========================================
.home-articles-grid {
  11. UTILITY CLASSES
    display: grid;
========================================== */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
    row-gap: 12px;
}


.text-center { text-align: center; }
.home-article-item {
.mt-20 { margin-top: 20px; }
    display: flex;
.mt-40 { margin-top: 40px; }
    align-items: center;
.mb-20 { margin-bottom: 20px; }
    gap: 10px;
.mb-40 { margin-bottom: 40px; }
    min-width: 0;
}


/* ===========================
.home-article-thumb {
  EKOLOGOS HOMEPAGE
    width: 48px;
=========================== */
    height: 48px;
    flex: 0 0 48px;
    line-height: 0;
    border-radius: 50%;
    overflow: hidden;
}


.eko-hero {
.home-article-thumb span,
     position: relative;
.home-article-thumb a {
     display: block;
     width: 100%;
     width: 100%;
     height: 700px;
     height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}
 
.home-article-thumb img,
.home-article-thumb .mw-file-element {
    display: block;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover;
    border-radius: 50%;
    border: none !important;
    box-shadow: none !important;
}
 
.home-article-copy {
    min-width: 0;
}
 
.home-article-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
}
 
.home-article-title a,
.home-article-title a:visited {
    color: var(--eko-green) !important;
    text-decoration: none !important;
}
 
.home-article-title a:hover {
    color: var(--eko-accent) !important;
}
 
.home-article-place {
    margin-top: 2px;
    color: var(--eko-light);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 11px;
    line-height: 1.2;
}
 
.home-browse-articles {
    margin-top: 12px;
    text-align: right;
}


     background-image:
.home-browse-articles a,
        linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)),
.home-browse-articles a:visited {
        url("/wiki/images/2/26/Hero.jpg?20260703054727");
     color: var(--eko-green) !important;
    font-size: 12px;
    text-decoration: none !important;
}
 
 
/* Community card */
 
.home-community-card {
    padding: 22px 26px;
    box-sizing: border-box;
    background: #eeece4;
    border: 1px solid rgba(35, 73, 47, 0.08);
    border-radius: 14px;
}
 
.home-community-title {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--eko-green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
}
 
.home-community-symbol {
    font-size: 26px;
    line-height: 1;
}


     background-size: cover;
.home-community-text {
     background-position: center;
     max-width: 330px;
     background-repeat: no-repeat;
    margin: 16px auto 12px;
    color: var(--eko-text);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 13px;
     line-height: 1.45;
     text-align: center;
}


.home-community-people {
     display: flex;
     display: flex;
     justify-content: center;
     justify-content: center;
     align-items: center;
     align-items: flex-end;
    gap: 10px;
    margin: 12px 0;
    color: var(--eko-green);
    font-size: 34px;
    line-height: 1;
}
 
.home-community-button {
     text-align: center;
     text-align: center;
    color: #fff;
}
}


.eko-overlay{
.home-community-button a,
     position:absolute;
.home-community-button a:visited {
     inset:0;
    display: inline-block;
     background:rgba(0,0,0,.35);
    padding: 8px 20px;
    background: var(--eko-green);
    color: #ffffff !important;
    border-radius: 4px;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
}
 
.home-community-button a:hover {
    background: var(--eko-accent);
}
 
 
/* ==========================================================
  ABOUT AND PROJECT
========================================================== */
 
.home-about-project {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 20px;
     background: #f1efe8;
    border: 1px solid rgba(35, 73, 47, 0.08);
    border-radius: 14px;
    overflow: hidden;
}
 
.home-about-box,
.home-project-box {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 14px;
    padding: 25px;
    box-sizing: border-box;
}
 
.home-project-box {
    border-left: 1px solid rgba(35, 73, 47, 0.16);
}
}


.eko-content{
.home-info-icon {
     position:relative;
     width: 70px;
    z-index:2;
     line-height: 0;
     max-width:900px;
    padding:20px;
}
}


.eko-content h1{
.home-info-icon span,
.home-info-icon a {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
}
 
.home-info-icon img,
.home-info-icon .mw-file-element {
    display: block;
    width: 70px !important;
    height: 70px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain;
    border: none !important;
    box-shadow: none !important;
}
 
.home-info-title {
    margin-bottom: 9px;
    color: var(--eko-green);
     font-family: Georgia, "Times New Roman", serif;
     font-family: Georgia, "Times New Roman", serif;
     font-size:72px;
     font-size: 18px;
     font-weight:600;
     font-weight: 600;
     line-height:1.1;
     line-height: 1.2;
     margin-bottom:25px;
}
     color:#ffffff;
 
.home-info-text {
    color: var(--eko-text);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}
 
.home-info-link {
     margin-top: 12px;
}
 
.home-info-link a,
.home-info-link a:visited {
     color: var(--eko-green) !important;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none !important;
}
 
 
/* ==========================================================
  HOMEPAGE FOOTER
========================================================== */
 
.home-footer {
    display: grid;
    grid-template-columns: 220px 1fr 120px;
    align-items: center;
    gap: 20px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(35, 73, 47, 0.18);
}
 
.home-footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}
 
.home-footer-brand > span,
.home-footer-brand > a {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0;
}
}


.eko-content p{
.home-footer-brand img,
     font-size:22px;
.home-footer-brand .mw-file-element {
     line-height:1.6;
     display: block;
     margin-bottom:35px;
    width: 42px !important;
     color:rgba(255,255,255,.92);
     height: 42px !important;
     margin: 0 !important;
    padding: 0 !important;
    object-fit: contain;
    border: none !important;
     box-shadow: none !important;
}
}


.eko-search{
.home-footer-brand-main {
     width:700px;
     color: var(--eko-green);
     max-width:90%;
     font-family: Georgia, "Times New Roman", serif;
     padding:18px 28px;
     font-size: 16px;
     border-radius:50px;
     letter-spacing: 3px;
    border:none;
     line-height: 1;
     font-size:18px;
}
}


/* ==========================================
.home-footer-brand-small {
  HERO SEARCH BAR
    margin-top: 4px;
========================================== */
    color: var(--eko-green);
    font-size: 8px;
    letter-spacing: 5px;
    line-height: 1;
}


.hero-search {
.home-footer-links {
    margin-top: 45px;
     display: flex;
     display: flex;
    align-items: center;
     justify-content: center;
     justify-content: center;
    gap: 26px;
    flex-wrap: wrap;
}
}


.hero-search form {
.home-footer-links a,
     width: 100%;
.home-footer-links a:visited {
     max-width: 700px;
     color: var(--eko-text) !important;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 10px;
     text-decoration: none !important;
}
}


.hero-search-box {
.home-footer-social {
     display: flex;
     display: flex;
    justify-content: flex-end;
     align-items: center;
     align-items: center;
     background: #fff;
     gap: 17px;
     border-radius: 60px;
     color: var(--eko-green);
     padding: 8px 10px 8px 25px;
    font-family: Arial, sans-serif;
     box-shadow: 0 12px 35px rgba(0,0,0,.25);
    font-size: 18px;
    font-weight: 700;
}
 
 
/* ==========================================================
  RESPONSIVE LOWER SECTIONS
========================================================== */
 
@media (max-width: 900px) {
 
    .home-upper-grid {
        grid-template-columns: 1fr;
     }
 
    .home-about-project {
        grid-template-columns: 1fr;
     }
 
    .home-project-box {
        border-left: none;
        border-top: 1px solid rgba(35, 73, 47, 0.16);
    }
 
    .home-footer {
        grid-template-columns: 1fr;
        text-align: center;
    }
 
    .home-footer-brand,
    .home-footer-social {
        justify-content: center;
    }
 
}
}


.hero-search-box input {
@media (max-width: 600px) {
     flex: 1;
 
     border: none;
    .home-lower-section {
     outline: none;
        padding: 20px 18px;
     font-size: 18px;
    }
     padding: 14px 10px;
 
     background: transparent;
    .home-articles-grid {
        grid-template-columns: 1fr;
    }
 
    .home-about-box,
    .home-project-box {
        grid-template-columns: 1fr;
    }
 
    .home-footer-links {
        gap: 12px;
    }
 
}
/* Keep Featured Articles and Communities side by side */
 
.home-upper-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr) !important;
    gap: 24px !important;
    align-items: stretch !important;
}
 
/* Stack them only on small screens */
 
@media (max-width: 400px) {
    .home-upper-grid {
        grid-template-columns: 1fr !important;
    }
}
/* Featured Articles left — Communities right */
 
.page-Main_Page .home-upper-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) !important;
    gap: 24px !important;
    align-items: stretch !important;
    width: 100% !important;
}
 
.page-Main_Page .home-articles-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
}
 
.page-Main_Page .home-community-card {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
}
/* About Ekologos left — Ekologos Project right */
 
.page-Main_Page .home-about-project {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
}
 
.page-Main_Page .home-about-box,
.page-Main_Page .home-project-box {
    width: 50% !important;
     flex: 0 0 50% !important;
    box-sizing: border-box !important;
}
 
.page-Main_Page .home-project-box {
    border-left: 1px solid rgba(35, 73, 47, 0.16) !important;
     border-top: none !important;
}
 
/* Stack only on very small screens */
 
@media (max-width: 500px) {
 
     .page-Main_Page .home-about-project {
        flex-direction: column !important;
    }
 
    .page-Main_Page .home-about-box,
    .page-Main_Page .home-project-box {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
 
    .page-Main_Page .home-project-box {
        border-left: none !important;
        border-top: 1px solid rgba(35, 73, 47, 0.16) !important;
    }
 
}
/* More space between footer links */
.page-Main_Page .home-footer-links {
    gap: 32px !important;
}
/* Correct spacing between footer links */
 
.page-Main_Page .home-footer-links > p {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 28px !important;
 
    margin: 0 !important;
    padding: 0 !important;
}
 
.page-Main_Page .home-footer-links > p > a {
    display: inline-block !important;
     margin: 0 !important;
}
/* More space between social symbols */
 
.page-Main_Page .home-footer-social > p {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 18px !important;
 
    margin: 0 !important;
     padding: 0 !important;
}
 
.page-Main_Page .home-footer-social > p > span {
    display: inline-block !important;
    margin: 0 !important;
}
/* Keep the Contribute button permanently green */
 
.page-Main_Page .home-community-button a,
.page-Main_Page .home-community-button a:visited,
.page-Main_Page .home-community-button a.new {
    display: inline-block !important;
    padding: 8px 20px !important;
 
    background-color: var(--eko-green) !important;
    color: #ffffff !important;
 
    border-radius: 4px !important;
    text-decoration: none !important;
}
 
/* Keep it green when hovering */
 
.page-Main_Page .home-community-button a:hover,
.page-Main_Page .home-community-button a.new:hover {
     background-color: var(--eko-accent) !important;
    color: #ffffff !important;
}
 
/* Resize MediaWiki header logo */
.mw-logo {
    background-size: contain !important;
}
 
/* ==========================================================
  HERO — REMOVE ALL DIVIDERS
========================================================== */
 
.eko-hero .hero-title-main::before,
.eko-hero .hero-title-main::after,
.eko-hero .hero-title-sub::before,
.eko-hero .hero-title-sub::after,
.eko-hero .eko-content h1::before,
.eko-hero .eko-content h1::after,
.eko-hero .eko-content h2::before,
.eko-hero .eko-content h2::after {
    content: none !important;
    display: none !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}
 
/* ==========================================================
  REMOVE ALL HERO DIVIDERS — FINAL OVERRIDE
========================================================== */
 
/* Remove borders from headings */
.eko-hero h1,
.eko-hero h2,
.eko-hero .mw-heading,
.eko-hero .mw-heading1,
.eko-hero .mw-heading2 {
    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}
 
/* Remove ALL pseudo-element dividers */
.eko-hero h1::before,
.eko-hero h1::after,
.eko-hero h2::before,
.eko-hero h2::after,
.eko-hero .mw-heading::before,
.eko-hero .mw-heading::after,
.eko-hero .mw-heading1::before,
.eko-hero .mw-heading1::after,
.eko-hero .mw-heading2::before,
.eko-hero .mw-heading2::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}
 
/* Specifically remove the old divider rules */
.eko-hero .hero-title-main::after,
.eko-hero .hero-title-sub::after {
    content: none !important;
    display: none !important;
}
 
/* Remove actual horizontal rules inside hero */
.eko-hero hr {
    display: none !important;
    height: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
 
/* Remove Chameleon heading separators inside hero */
.eko-hero .mw-heading,
.eko-hero .mw-heading h1,
.eko-hero .mw-heading h2 {
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
 
.eko-hero .mw-heading::before,
.eko-hero .mw-heading::after {
    display: none !important;
    content: none !important;
}
 
/* ==========================================================
  HERO — TIGHTEN H1 / H2 SPACING
========================================================== */
 
.eko-hero .eko-content h1,
.eko-hero .eko-content h2 {
    margin-top: 0 !important;
}
 
.eko-hero .eko-content h1 {
    margin-bottom: 0 !important;
}
 
.eko-hero .eko-content h2 {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
}
}


.hero-search-box button {
/* Remove spacing from MediaWiki heading wrappers */
     width: 52px;
.eko-hero .mw-heading {
    height: 52px;
     margin: 0 !important;
    border: none;
     padding: 0 !important;
     border-radius: 50%;
    background: #295536;
    color: white;
    font-size: 20px;
    cursor: pointer;
    transition: .2s;
}
}


.hero-search-box button:hover {
/* Specifically control the space between H1 and H2 */
     background: #1f4129;
.eko-hero .hero-title-main + .hero-title-sub {
     margin-top: 0 !important;
}
}

Latest revision as of 10:16, 14 August 2026

/* ==========================================================
   EKOLOGOS WIKI DESIGN SYSTEM v2.0
   Foundation
========================================================== */

/* ==========================================================
   1. ROOT VARIABLES
========================================================== */

:root{

    --eko-green:#23492F;
    --eko-accent:#295536;
    --eko-bg:#F8F6F1;
    --eko-white:#ffffff;
    --eko-text:#333333;
    --eko-light:#666666;

    --radius:18px;

    --shadow-sm:0 6px 18px rgba(0,0,0,.08);
    --shadow-md:0 12px 30px rgba(0,0,0,.10);
    --shadow-lg:0 22px 50px rgba(0,0,0,.15);

    --container:1280px;

}

/* ==========================================================
   2. GLOBAL
========================================================== */

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    padding:0;
    background:var(--eko-bg);
    color:var(--eko-text);
    font-family:"Segoe UI",Roboto,Arial,sans-serif;
}

/* ==========================================================
   FULL WIDTH LAYOUT
========================================================== */

body .container,
body .container-fluid,
.col-cmln,
.col-12,
#mw-content-text,
.page-Main_Page .mw-parser-output{

    width:100% !important;
    max-width:100% !important;

}

.page-Main_Page .container{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
}

.page-Main_Page .flex-fill.container{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
}

.page-Main_Page #content,
.page-Main_Page #bodyContent,
.page-Main_Page #mw-content-text,
.page-Main_Page .mw-parser-output{

    margin:0 !important;
    padding:0 !important;

}

/* ==========================================================
   CONTENT PAGES
========================================================== */

body:not(.page-Main_Page) .mw-parser-output{

    max-width:1100px;
    margin:auto;
    padding:40px 30px;

}

/* ==========================================================
   MAIN PAGE CLEANUP
========================================================== */

.page-Main_Page #firstHeading,
.page-Main_Page #contentSub,
.page-Main_Page #toc,
.page-Main_Page .page-tools,
.page-Main_Page .mw-indicators{

    display:none !important;

}

/* ==========================================================
   NAVBAR
========================================================== */

.page-Main_Page .navbar{

    position:absolute;
    top:0;
    left:0;
    right:0;

    z-index:1000;

    background:transparent !important;
    border:none !important;
    box-shadow:none !important;

}

/* Logo */

.navbar-brand{

    display:flex !important;
    align-items:flex-start !important;
    justify-content:center;

    height:70px;

    padding:0 8px !important;
    margin-top:-30px;

}

.navbar-brand img,
.navbar-brand .mw-wiki-logo,
#p-logo img{

    display:block;

    height:70px;
    width:auto;

}

/* Navigation */

.page-Main_Page .navbar-nav>li>a{

    color:#ffffff !important;
    font-weight:500;

}

.page-Main_Page .navbar-nav>li>a:hover{

    color:#d8ead8 !important;

}
/* ==========================================================
   HERO
========================================================== */

.eko-hero {
    position: relative;

    width: 100%;
    min-height: 720px;
    height: 80vh;
    max-height: 900px;

    background:
        linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)),
        url("https://wiki.highlanderpress.org/images/thumb/2/26/Hero.jpg/800px-Hero.jpg?20260703054727");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* CENTRE EVERYTHING */
    display: flex;
    justify-content: center;
    align-items: center;

    text-align: center;

    overflow: hidden;
}


/* HERO OVERLAY */

.eko-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.30);
}


/* HERO CONTENT */

.eko-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 950px;

    margin: 0 auto !important;
    padding: 0 30px;

    box-sizing: border-box;

    text-align: center !important;
}


/* ==========================================================
   HERO TYPOGRAPHY
========================================================== */

.eko-content .hero-title-main {
    font-family: Georgia, "Times New Roman", serif;

    font-size: 78px;
    font-weight: 700;
    line-height: 1;

    color: #ffffff !important;

    margin: 0 0 -5px !important;

    text-align: center !important;
}


.eko-content .hero-title-sub {
    font-family: Georgia, "Times New Roman", serif;

    font-size: 52px;
    font-weight: 500;
    line-height: 1.15;

    color: #ffffff !important;

    margin: 0 0 0px !important;

    text-align: center !important;
}


/* Divider */

.eko-content .hero-title-sub::after {
    display: none !important;
    content: none !important;
}


/* HERO DESCRIPTION */

.eko-content > p {
    max-width: 720px;

    margin: 28px auto 0 !important;

    font-family: Arial, sans-serif;
    font-size: 20px;
    line-height: 1.6;

    color: #ffffff !important;

    text-align: center !important;
}/* ==========================================================
   HOMEPAGE SECTION
========================================================== */

.homepage-section{

    max-width:var(--container);
    margin:0 auto;
    padding:90px 40px;

}

/* ==========================================================
   SECTION HEADER
========================================================== */

.section-header{

    display:flex;
    justify-content:space-between;
    align-items:center;

    width:100%;

    margin-bottom:2px;

}

/* Left side */

.section-title-left{

    display:flex;
    align-items:center;

    gap:16px;

    flex:1;

}

/* Remove MediaWiki image wrappers */

.section-title-left span,
.section-title-left a{

    display:flex;
    align-items:center;

    margin:0;
    padding:0;

}

/* Globe icon */

.section-title-left .mw-file-element,
.section-title-left img,
.section-icon,
.section-icon img{

    width:32px !important;
    height:32px !important;

    min-width:32px;
    min-height:32px;

    display:block;

    object-fit:contain;

    margin:0;
    padding:0;

    border:none;
    box-shadow:none;

}

/* Heading */

.section-heading{

    margin:0;
    padding:0;

    font-family:Georgia,"Times New Roman",serif;
    font-size:46px;
    font-weight:500;
    line-height:1;

    color:var(--eko-green);

}

/* Remove default MediaWiki heading spacing */

.section-heading::before,
.section-heading::after{

    display:none !important;
    content:none !important;

}

.section-title-left h2{

    margin:0 !important;
    padding:0 !important;
    border:none !important;

}

/* Right side */

.section-title-right{

    margin-left:auto;

    white-space:nowrap;

    font-size:18px;
    font-weight:600;

    display:flex;
    align-items:center;

}

.section-title-right a{

    color:var(--eko-green);
    text-decoration:none;

    transition:.25s;

}

.section-title-right a:hover{

    color:var(--eko-accent);
    text-decoration:none;

}

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

@media (max-width:768px){

    .section-header{

        flex-direction:column;
        align-items:flex-start;
        gap:20px;

    }

    .section-heading{

        font-size:34px;

    }

    .section-title-right{

        margin-left:0;

    }

}

@media (max-width:480px){

    .section-heading{

        font-size:28px;

    }

    .section-title-left .mw-file-element,
    .section-title-left img{

        width:26px !important;
        height:26px !important;

        min-width:26px;
        min-height:26px;

    }

    .section-title-right{

        font-size:16px;

    }

}

/* ==========================================================
   GRID
========================================================== */

.homepage-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:34px;
}

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

.eko-card{
    width:100%;
    display:block;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    transition:.3s;
}

.eko-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-lg);

}

.eko-card img,
.eko-card .mw-file-element{

    width:100%;
    height:260px;

    object-fit:cover;

    display:block;

    transition:transform .35s ease;

}

.eko-card:hover img,
.eko-card:hover .mw-file-element{

    transform:scale(1.05);

}

.eko-card-body{

    padding:18px;

}

.eko-card-title{

    margin:0;

    text-align:center;

    font-family:Georgia,serif;

    font-size:24px;

    color:var(--eko-green);

}

.eko-card-text{

    display:none !important;

}

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

@media (max-width:1000px){

    .homepage-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width:768px){

    .eko-hero{
        min-height:600px;
        height:auto;
        padding:100px 25px 80px;
    }

    .hero-title-main{
        font-size:54px;
        line-height:1.05;
        margin-bottom:10px;
    }

    .hero-title-sub{
        font-size:36px;
        line-height:1.2;
        margin-bottom:24px;
    }

    .hero-title-sub::after{
        width:320px;
        margin:24px auto 0;
    }

    .eko-content p{
        max-width:620px;
        font-size:18px;
        line-height:1.6;
        margin-top:28px;
    }

    .section-header{
        flex-direction:column;
        align-items:flex-start;
        gap:15px;
    }

    .homepage-section{
        padding:70px 25px;
    }

    .homepage-grid{
        grid-template-columns:1fr;
    }

    .navbar-brand img,
    .navbar-brand .mw-wiki-logo{
        height:50px;
    }

}

@media (max-width:480px){

    .eko-hero{
        min-height:500px;
        height:auto;
        padding:80px 18px 60px;
    }

    .hero-title-main{
        font-size:40px;
        line-height:1.1;
        margin-bottom:8px;
    }

    .hero-title-sub{
        font-size:28px;
        line-height:1.25;
        margin-bottom:20px;
    }

    .hero-title-sub::after{
        width:220px;
        margin:20px auto 0;
    }

    .eko-content p{
        max-width:100%;
        font-size:17px;
        line-height:1.6;
        margin-top:24px;
    }

    .homepage-section{
        padding:50px 18px;
    }

    .eko-card img,
    .eko-card .mw-file-element{
        height:200px;
    }

}

/* ==========================================================
   ANIMATION
========================================================== */

@keyframes fadeInUp{

from{

opacity:0;
transform:translateY(30px);

}

to{

opacity:1;
transform:translateY(0);

}

}

.animate-in{

animation:fadeInUp .6s ease forwards;

}

.eko-card:nth-child(1){animation-delay:.1s;}
.eko-card:nth-child(2){animation-delay:.2s;}
.eko-card:nth-child(3){animation-delay:.3s;}
.eko-card:nth-child(4){animation-delay:.4s;}

/* ==========================================================
   UTILITIES
========================================================== */

.text-center{text-align:center;}
.mt-20{margin-top:20px;}
.mt-40{margin-top:40px;}
.mb-20{margin-bottom:20px;}
.mb-40{margin-bottom:40px;}
/* Make both texts the same size */
.homepage-section .section-heading,
.homepage-section .section-title-right a {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}
.section-title-right a,
.section-title-right a:visited {
    color: var(--eko-green) !important;
}
/* Show all six region cards in one row on desktop */

@media (min-width: 1001px) {

    .homepage-grid {
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 18px !important;
    }

    .eko-card img,
    .eko-card .mw-file-element {
        height: 150px !important;
    }

    .eko-card-body {
        padding: 12px 8px !important;
    }

    .eko-card-title {
        font-size: 17px !important;
    }
}
/* Region titles inside images — compact version */

.eko-card {
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Remove MediaWiki spacing around images */

.eko-card > p,
.eko-card > figure,
.eko-card > span,
.eko-card > a,
.eko-card .mw-file-description {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    background: transparent !important;
}

.eko-card > p > span,
.eko-card > p > span > a,
.eko-card > figure > a,
.eko-card > span > a {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

/* Image fills the card without a white border */

.eko-card img,
.eko-card .mw-file-element {
    display: block !important;
    width: 100% !important;
    height: 150px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    object-fit: cover !important;
}

/* Small title overlay */

.eko-card-body {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 10px 4px 4px !important;
    background: linear-gradient(
    to bottom,
    transparent,
    var(--eko-green)
) !important;
    box-sizing: border-box !important;
}

.eko-card-title {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
/* Final fix: space between region heading and cards */

.page-Main_Page .homepage-section > .section-header {
    margin-bottom: 8px !important;
}

.page-Main_Page .homepage-section > .section-header + p {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.page-Main_Page .homepage-section > .homepage-grid {
    margin-top: 0 !important;
}

/* Move region cards closer to the heading */
.page-Main_Page .homepage-section .homepage-grid {
    margin-top: 0px !important;
}

/* ==========================================================
   EXPLORE BY THEME
========================================================== */

.theme-section {
    max-width: var(--container);
    margin: 0 auto;
    padding: 25px 40px 55px;
    box-sizing: border-box;
}

/* Theme heading row */

.theme-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 14px;
}

.theme-title-left {
    display: flex;
    align-items: center;
    gap: 9px;
}

.theme-title-left span,
.theme-title-left a {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.theme-title-left img,
.theme-title-left .mw-file-element {
    display: block;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    object-fit: contain;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.theme-heading,
.theme-title-right a {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px !important;
    font-weight: 500;
    line-height: 1.2;
    color: var(--eko-green) !important;
}

.theme-title-right {
    margin-left: auto;
    white-space: nowrap;
}

.theme-title-right a {
    text-decoration: none !important;
}

.theme-title-right a:hover {
    color: var(--eko-accent) !important;
}

/* Ten theme cards in one row */

.theme-grid {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}

/* Individual theme card */

.theme-card {
    min-height: 115px;
    padding: 12px 5px 10px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: #f5f3ed;
    border: 1px solid rgba(35, 73, 47, 0.12);
    border-radius: 14px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);

    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.theme-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 16px rgba(0, 0, 0, 0.08);
}

/* Icon */

.theme-icon {
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    margin-bottom: 5px;
}

.theme-icon span,
.theme-icon a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
}

.theme-icon img,
.theme-icon .mw-file-element {
    display: block;
    width: 52px !important;
    height: 52px !important;
    object-fit: contain;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Theme title */

.theme-name {
    color: var(--eko-green);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.15;
}

/* Responsive layout */

@media (max-width: 1000px) {
    .theme-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 600px) {
    .theme-section {
        padding: 25px 18px 40px;
    }

    .theme-header {
        align-items: flex-start;
        gap: 12px;
    }

    .theme-heading,
    .theme-title-right a {
        font-size: 15px !important;
    }

    .theme-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}
/* Remove vertical gaps around Explore by Theme */

.page-Main_Page .homepage-section {
    padding-bottom: 0 !important;
}

.page-Main_Page .theme-section {
    padding-top: 0 !important;
}

.page-Main_Page .theme-header {
    margin-bottom: 0 !important;
}

.page-Main_Page .theme-grid {
    margin-top: 0 !important;
}
/* ==========================================================
   FEATURED KNOWLEDGE COLLECTIONS
========================================================== */

.collections-section {
    max-width: var(--container);
    margin: 0 auto;
    padding: 30px 40px 70px;
    box-sizing: border-box;
}

/* Section heading */

.collections-heading {
    margin: 0 0 14px;
    color: var(--eko-green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}

/* Four cards in one row */

.collections-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
}

/* Individual card */

.collection-card {
    background: #ffffff;
    border: 1px solid rgba(35, 73, 47, 0.12);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.collection-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 9px 20px rgba(0, 0, 0, 0.09);
}

/* Remove MediaWiki image spacing */

.collection-image {
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
}

.collection-image p,
.collection-image span,
.collection-image a {
    display: block;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0;
}

/* Main card image */

.collection-image img,
.collection-image .mw-file-element {
    display: block;
    width: 100% !important;
    height: 170px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover;
    border: none !important;
    box-shadow: none !important;
}

/* Text area */

.collection-body {
    min-height: 135px;
    padding: 16px 16px 18px;
    box-sizing: border-box;
}

/* Card title */

.collection-title {
    margin: 0 0 7px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.1;
}

.collection-title a,
.collection-title a:visited {
    color: var(--eko-green) !important;
    text-decoration: none !important;
}

.collection-title a:hover {
    color: var(--eko-accent) !important;
}

/* Description */

.collection-text {
    color: var(--eko-text);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
}

/* Tablet */

@media (max-width: 900px) {
    .collections-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile */

@media (max-width: 600px) {
    .collections-section {
        padding: 25px 18px 45px;
    }

    .collections-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================
   HOMEPAGE LOWER SECTIONS
========================================================== */

.home-lower-section {
    max-width: var(--container);
    margin: 0 auto;
    padding: 20px 40px 25px;
    box-sizing: border-box;
}


/* ==========================================================
   FEATURED ARTICLES AND COMMUNITY
========================================================== */

.home-upper-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 24px;
    align-items: stretch;
    width: 100%;
}

.home-articles-panel {
    border-top: 1px solid rgba(35, 73, 47, 0.15);
    padding-top: 12px;
}

.home-lower-heading {
    margin: 0 0 14px;
    color: var(--eko-green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}

.home-articles-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
    row-gap: 12px;
}

.home-article-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.home-article-thumb {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    line-height: 0;
    border-radius: 50%;
    overflow: hidden;
}

.home-article-thumb span,
.home-article-thumb a {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.home-article-thumb img,
.home-article-thumb .mw-file-element {
    display: block;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover;
    border-radius: 50%;
    border: none !important;
    box-shadow: none !important;
}

.home-article-copy {
    min-width: 0;
}

.home-article-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
}

.home-article-title a,
.home-article-title a:visited {
    color: var(--eko-green) !important;
    text-decoration: none !important;
}

.home-article-title a:hover {
    color: var(--eko-accent) !important;
}

.home-article-place {
    margin-top: 2px;
    color: var(--eko-light);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 11px;
    line-height: 1.2;
}

.home-browse-articles {
    margin-top: 12px;
    text-align: right;
}

.home-browse-articles a,
.home-browse-articles a:visited {
    color: var(--eko-green) !important;
    font-size: 12px;
    text-decoration: none !important;
}


/* Community card */

.home-community-card {
    padding: 22px 26px;
    box-sizing: border-box;
    background: #eeece4;
    border: 1px solid rgba(35, 73, 47, 0.08);
    border-radius: 14px;
}

.home-community-title {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--eko-green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
}

.home-community-symbol {
    font-size: 26px;
    line-height: 1;
}

.home-community-text {
    max-width: 330px;
    margin: 16px auto 12px;
    color: var(--eko-text);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}

.home-community-people {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 10px;
    margin: 12px 0;
    color: var(--eko-green);
    font-size: 34px;
    line-height: 1;
}

.home-community-button {
    text-align: center;
}

.home-community-button a,
.home-community-button a:visited {
    display: inline-block;
    padding: 8px 20px;
    background: var(--eko-green);
    color: #ffffff !important;
    border-radius: 4px;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
}

.home-community-button a:hover {
    background: var(--eko-accent);
}


/* ==========================================================
   ABOUT AND PROJECT
========================================================== */

.home-about-project {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 20px;
    background: #f1efe8;
    border: 1px solid rgba(35, 73, 47, 0.08);
    border-radius: 14px;
    overflow: hidden;
}

.home-about-box,
.home-project-box {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 14px;
    padding: 25px;
    box-sizing: border-box;
}

.home-project-box {
    border-left: 1px solid rgba(35, 73, 47, 0.16);
}

.home-info-icon {
    width: 70px;
    line-height: 0;
}

.home-info-icon span,
.home-info-icon a {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
}

.home-info-icon img,
.home-info-icon .mw-file-element {
    display: block;
    width: 70px !important;
    height: 70px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain;
    border: none !important;
    box-shadow: none !important;
}

.home-info-title {
    margin-bottom: 9px;
    color: var(--eko-green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}

.home-info-text {
    color: var(--eko-text);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}

.home-info-link {
    margin-top: 12px;
}

.home-info-link a,
.home-info-link a:visited {
    color: var(--eko-green) !important;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none !important;
}


/* ==========================================================
   HOMEPAGE FOOTER
========================================================== */

.home-footer {
    display: grid;
    grid-template-columns: 220px 1fr 120px;
    align-items: center;
    gap: 20px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(35, 73, 47, 0.18);
}

.home-footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.home-footer-brand > span,
.home-footer-brand > a {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0;
}

.home-footer-brand img,
.home-footer-brand .mw-file-element {
    display: block;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain;
    border: none !important;
    box-shadow: none !important;
}

.home-footer-brand-main {
    color: var(--eko-green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    letter-spacing: 3px;
    line-height: 1;
}

.home-footer-brand-small {
    margin-top: 4px;
    color: var(--eko-green);
    font-size: 8px;
    letter-spacing: 5px;
    line-height: 1;
}

.home-footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    flex-wrap: wrap;
}

.home-footer-links a,
.home-footer-links a:visited {
    color: var(--eko-text) !important;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 10px;
    text-decoration: none !important;
}

.home-footer-social {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 17px;
    color: var(--eko-green);
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
}


/* ==========================================================
   RESPONSIVE LOWER SECTIONS
========================================================== */

@media (max-width: 900px) {

    .home-upper-grid {
        grid-template-columns: 1fr;
    }

    .home-about-project {
        grid-template-columns: 1fr;
    }

    .home-project-box {
        border-left: none;
        border-top: 1px solid rgba(35, 73, 47, 0.16);
    }

    .home-footer {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .home-footer-brand,
    .home-footer-social {
        justify-content: center;
    }

}

@media (max-width: 600px) {

    .home-lower-section {
        padding: 20px 18px;
    }

    .home-articles-grid {
        grid-template-columns: 1fr;
    }

    .home-about-box,
    .home-project-box {
        grid-template-columns: 1fr;
    }

    .home-footer-links {
        gap: 12px;
    }

}
/* Keep Featured Articles and Communities side by side */

.home-upper-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr) !important;
    gap: 24px !important;
    align-items: stretch !important;
}

/* Stack them only on small screens */

@media (max-width: 400px) {
    .home-upper-grid {
        grid-template-columns: 1fr !important;
    }
}
/* Featured Articles left — Communities right */

.page-Main_Page .home-upper-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) !important;
    gap: 24px !important;
    align-items: stretch !important;
    width: 100% !important;
}

.page-Main_Page .home-articles-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
}

.page-Main_Page .home-community-card {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
}
/* About Ekologos left — Ekologos Project right */

.page-Main_Page .home-about-project {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
}

.page-Main_Page .home-about-box,
.page-Main_Page .home-project-box {
    width: 50% !important;
    flex: 0 0 50% !important;
    box-sizing: border-box !important;
}

.page-Main_Page .home-project-box {
    border-left: 1px solid rgba(35, 73, 47, 0.16) !important;
    border-top: none !important;
}

/* Stack only on very small screens */

@media (max-width: 500px) {

    .page-Main_Page .home-about-project {
        flex-direction: column !important;
    }

    .page-Main_Page .home-about-box,
    .page-Main_Page .home-project-box {
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    .page-Main_Page .home-project-box {
        border-left: none !important;
        border-top: 1px solid rgba(35, 73, 47, 0.16) !important;
    }

}
/* More space between footer links */
.page-Main_Page .home-footer-links {
    gap: 32px !important;
}
/* Correct spacing between footer links */

.page-Main_Page .home-footer-links > p {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 28px !important;

    margin: 0 !important;
    padding: 0 !important;
}

.page-Main_Page .home-footer-links > p > a {
    display: inline-block !important;
    margin: 0 !important;
}
/* More space between social symbols */

.page-Main_Page .home-footer-social > p {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 18px !important;

    margin: 0 !important;
    padding: 0 !important;
}

.page-Main_Page .home-footer-social > p > span {
    display: inline-block !important;
    margin: 0 !important;
}
/* Keep the Contribute button permanently green */

.page-Main_Page .home-community-button a,
.page-Main_Page .home-community-button a:visited,
.page-Main_Page .home-community-button a.new {
    display: inline-block !important;
    padding: 8px 20px !important;

    background-color: var(--eko-green) !important;
    color: #ffffff !important;

    border-radius: 4px !important;
    text-decoration: none !important;
}

/* Keep it green when hovering */

.page-Main_Page .home-community-button a:hover,
.page-Main_Page .home-community-button a.new:hover {
    background-color: var(--eko-accent) !important;
    color: #ffffff !important;
}

/* Resize MediaWiki header logo */
.mw-logo {
    background-size: contain !important;
}

/* ==========================================================
   HERO — REMOVE ALL DIVIDERS
========================================================== */

.eko-hero .hero-title-main::before,
.eko-hero .hero-title-main::after,
.eko-hero .hero-title-sub::before,
.eko-hero .hero-title-sub::after,
.eko-hero .eko-content h1::before,
.eko-hero .eko-content h1::after,
.eko-hero .eko-content h2::before,
.eko-hero .eko-content h2::after {
    content: none !important;
    display: none !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

/* ==========================================================
   REMOVE ALL HERO DIVIDERS — FINAL OVERRIDE
========================================================== */

/* Remove borders from headings */
.eko-hero h1,
.eko-hero h2,
.eko-hero .mw-heading,
.eko-hero .mw-heading1,
.eko-hero .mw-heading2 {
    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Remove ALL pseudo-element dividers */
.eko-hero h1::before,
.eko-hero h1::after,
.eko-hero h2::before,
.eko-hero h2::after,
.eko-hero .mw-heading::before,
.eko-hero .mw-heading::after,
.eko-hero .mw-heading1::before,
.eko-hero .mw-heading1::after,
.eko-hero .mw-heading2::before,
.eko-hero .mw-heading2::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

/* Specifically remove the old divider rules */
.eko-hero .hero-title-main::after,
.eko-hero .hero-title-sub::after {
    content: none !important;
    display: none !important;
}

/* Remove actual horizontal rules inside hero */
.eko-hero hr {
    display: none !important;
    height: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove Chameleon heading separators inside hero */
.eko-hero .mw-heading,
.eko-hero .mw-heading h1,
.eko-hero .mw-heading h2 {
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.eko-hero .mw-heading::before,
.eko-hero .mw-heading::after {
    display: none !important;
    content: none !important;
}

/* ==========================================================
   HERO — TIGHTEN H1 / H2 SPACING
========================================================== */

.eko-hero .eko-content h1,
.eko-hero .eko-content h2 {
    margin-top: 0 !important;
}

.eko-hero .eko-content h1 {
    margin-bottom: 0 !important;
}

.eko-hero .eko-content h2 {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
}

/* Remove spacing from MediaWiki heading wrappers */
.eko-hero .mw-heading {
    margin: 0 !important;
    padding: 0 !important;
}

/* Specifically control the space between H1 and H2 */
.eko-hero .hero-title-main + .hero-title-sub {
    margin-top: 0 !important;
}
Retrieved from "https://wiki.highlanderpress.org/index.php?title=MediaWiki:Common.css&oldid=283"
Powered by MediaWiki