MediaWiki:Common.css
From Ekologos Wiki
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* ==========================================================
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 */
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;
}
/* Other pages */
body:not(.page-Main_Page) .mw-parser-output{
max-width:1100px;
margin:auto;
padding:40px 30px;
}
/* ==========================================================
3. 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;
}
.page-Main_Page #content,
.page-Main_Page .mw-body{
margin:0;
padding:0;
}
/* ==========================================================
4. 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;
}
.navbar-brand{
padding:8px !important;
}
.navbar-brand img,
.navbar-brand .mw-wiki-logo,
#p-logo img{
height:60px;
width:auto;
}
.navbar-nav>li>a{
color:white !important;
font-weight:500;
}
.navbar-nav>li>a:hover{
color:#d8ead8 !important;
}
/* ==========================================================
5. HERO
========================================================== */
.eko-hero{
position:relative;
width:100%;
height:850px;
background:
linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),
url("/wiki/images/2/26/Hero.jpg?20260703054727");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
overflow:hidden;
}
.eko-overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.30);
}
.eko-content{
position:relative;
z-index:2;
width:100%;
max-width:950px;
padding:0 30px;
}
.eko-content h1{
font-family:Georgia,"Times New Roman",serif;
font-size:86px;
line-height:1.08;
font-weight:600;
color:#fff;
margin:0 auto 28px;
}
.eko-content h1::after{
content:"";
display:block;
width:620px;
max-width:100%;
height:1px;
background:rgba(255,255,255,.7);
margin:28px auto 0;
}
.eko-content p{
max-width:700px;
margin:35px auto 0;
font-size:22px;
line-height:1.7;
color:rgba(255,255,255,.95);
}
/* ==========================================================
6. SECTION LAYOUT
========================================================== */
.homepage-section{
max-width:var(--container);
margin:auto;
padding:90px 40px;
}
.section-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:40px;
}
.section-title-left{
display:flex;
align-items:center;
gap:12px;
font-family:Georgia,serif;
font-size:40px;
color:var(--eko-green);
}
.section-title-right{
color:var(--eko-accent);
font-weight:600;
cursor:pointer;
}
.section-title-right:hover{
text-decoration:underline;
}
/* ==========================================================
7. GRID
========================================================== */
.homepage-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:32px;
}
/* ==========================================================
8. RESPONSIVE
========================================================== */
@media(max-width:1000px){
.homepage-grid{
grid-template-columns:repeat(2,1fr);
}
}
@media(max-width:768px){
.eko-hero{
height:600px;
}
.eko-content h1{
font-size:48px;
}
.section-header{
flex-direction:column;
align-items:flex-start;
gap:15px;
}
.homepage-section{
padding:70px 25px;
}
.homepage-grid{
grid-template-columns:1fr;
}
}
@media(max-width:480px){
.eko-hero{
height:500px;
}
.eko-content h1{
font-size:38px;
}
.eko-content p{
font-size:17px;
}
.homepage-section{
padding:50px 18px;
}
}
