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 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;
}
/* 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: 560px;
height: 560px;
max-height: 560px;
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: 1000px;
margin: 0 auto !important;
padding: 40px 30px;
box-sizing: border-box;
text-align: center !important;
}
.eko-content .hero-title-main {
margin: 0 0 8px !important;
}
.eko-content .hero-title-sub {
margin: 0 0 16px !important;
}
.eko-content > p {
margin: 0 auto !important;
}
.eko-search-form {
margin: 24px auto 0 !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: 20px 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;
}
}
@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;
}
/* ==========================================================
EKOLOGOS NAVBAR — OVERLAY HERO
========================================================== */
.page-Main_Page .eko-navbar-overlay {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1000 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
/* ==========================================================
REMOVE CHAMELEON SPACE ABOVE MAIN CONTENT
========================================================== */
.page-Main_Page .flex-fill {
margin-top: 0 !important;
padding-top: 0 !important;
}
.page-Main_Page .flex-fill > .row:first-child {
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
}
.page-Main_Page .flex-fill > .row:first-child > * {
margin: 0 !important;
padding: 0 !important;
}
.page-Main_Page .flex-fill > .row:first-child .siteNotice {
display: none !important;
}
.page-Main_Page .flex-fill > .row:nth-child(2) {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* ==========================================================
EKOLOGOS NAVBAR BRAND — FINAL
========================================================== */
.page-Main_Page .navbar {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 1000 !important;
}
/* Logo + EKOLOGOS WIKI together */
.page-Main_Page .navbar-brand {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
height: 70px !important;
margin: 0 !important;
padding: 0 8px !important;
position: relative !important;
}
/* Logo */
.page-Main_Page .navbar-brand img,
.page-Main_Page .navbar-brand .mw-wiki-logo,
.page-Main_Page #p-logo img {
display: block !important;
height: 70px !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* EKOLOGOS WIKI label */
.page-Main_Page .navbar-brand::after {
content: "EKOLOGOS\A WIKI" !important;
display: block !important;
white-space: pre !important;
margin-left: 10px !important;
font-family: Arial, sans-serif !important;
font-size: 17px !important;
font-weight: 700 !important;
line-height: 0.95 !important;
letter-spacing: 3px !important;
color: #23492F !important;
text-align: left !important;
position: static !important;
}
/* ==========================================================
EKOLOGOS HERO SEARCH — FINAL
Move Chameleon search from navbar into hero
========================================================== */
/* Navbar remains transparent */
.page-Main_Page .navbar {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 1000 !important;
background: transparent !important;
overflow: visible !important;
}
/* Move the EXISTING Chameleon search into the hero */
.page-Main_Page #p-search {
position: absolute !important;
top: 300px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 750px !important;
max-width: calc(100% - 40px) !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
z-index: 2000 !important;
}
/* Search form */
.page-Main_Page #p-search form {
display: flex !important;
width: 100% !important;
height: 54px !important;
margin: 0 !important;
padding: 0 !important;
background: #ffffff !important;
border-radius: 12px !important;
overflow: hidden !important;
box-shadow: 0 4px 15px rgba(0,0,0,.20) !important;
}
/* Search input */
.page-Main_Page #p-search input[type="search"],
.page-Main_Page #p-search input[type="text"] {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
height: 54px !important;
margin: 0 !important;
padding: 0 20px !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
background: #ffffff !important;
color: #333333 !important;
font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 16px !important;
}
/* Placeholder */
.page-Main_Page #p-search input::placeholder {
color: #777777 !important;
opacity: 1 !important;
}
/* Search button */
.page-Main_Page #p-search button,
.page-Main_Page #p-search input[type="submit"] {
flex: 0 0 70px !important;
width: 70px !important;
min-width: 70px !important;
height: 54px !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
border-radius: 0 !important;
background: var(--eko-green) !important;
color: #ffffff !important;
cursor: pointer !important;
}
/* ==========================================================
HERO — FINAL DESKTOP LAYOUT
========================================================== */
.page-Main_Page .eko-hero {
min-height: 560px !important;
height: 560px !important;
max-height: 560px !important;
box-sizing: border-box !important;
}
.page-Main_Page .eko-content {
max-width: 1000px !important;
padding: 0 30px !important;
}
/* Main title */
.page-Main_Page .eko-content .hero-title-main {
font-size: 60px !important;
font-weight: 700 !important;
line-height: 1.05 !important;
margin: 0 0 4px 0 !important;
padding: 0 !important;
}
/* Subtitle */
.page-Main_Page .eko-content .hero-title-sub {
font-size: 50px !important;
font-weight: 500 !important;
line-height: 1.08 !important;
margin: 0 0 16px 0 !important;
padding: 0 !important;
}
/* Description */
.page-Main_Page .eko-content > p {
max-width: 900px !important;
margin: 0 auto !important;
padding: 0 !important;
font-size: 20px !important;
line-height: 1.45 !important;
}
/* ==========================================================
TABLET
========================================================== */
@media (max-width: 768px) {
.page-Main_Page .eko-hero {
min-height: 300px !important;
height: auto !important;
max-height: none !important;
padding: 80px 24px 42px !important;
}
.page-Main_Page .eko-content .hero-title-main {
font-size: 44px !important;
line-height: 1.05 !important;
margin-bottom: 5px !important;
}
.page-Main_Page .eko-content .hero-title-sub {
font-size: 34px !important;
line-height: 1.1 !important;
margin-bottom: 14px !important;
}
.page-Main_Page .eko-content > p {
max-width: 680px !important;
font-size: 16px !important;
line-height: 1.45 !important;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 480px) {
.page-Main_Page .eko-hero {
min-height: 280px !important;
height: auto !important;
padding: 72px 18px 36px !important;
}
.page-Main_Page .eko-content .hero-title-main {
font-size: 36px !important;
line-height: 1.05 !important;
margin-bottom: 4px !important;
}
.page-Main_Page .eko-content .hero-title-sub {
font-size: 27px !important;
line-height: 1.1 !important;
margin-bottom: 12px !important;
}
.page-Main_Page .eko-content > p {
max-width: 100% !important;
font-size: 15px !important;
line-height: 1.4 !important;
}
}
/* ==========================================================
EKOLOGOS BRAND — UNIVERSAL ON ALL PAGES
========================================================== */
.navbar-brand {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
height: 70px !important;
margin: 0 !important;
padding: 0 8px !important;
position: relative !important;
}
/* Ekologos logo */
.navbar-brand img,
.navbar-brand .mw-wiki-logo {
display: block !important;
height: 70px !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain !important;
background-size: contain !important;
}
/* EKOLOGOS WIKI text */
.navbar-brand::after {
content: "EKOLOGOS\A WIKI" !important;
display: block !important;
white-space: pre !important;
margin-left: 10px !important;
font-family: Arial, sans-serif !important;
font-size: 17px !important;
font-weight: 700 !important;
line-height: 0.95 !important;
letter-spacing: 3px !important;
color: #23492F !important;
text-align: left !important;
position: static !important;
}
/* ==========================================================
EKOLOGOS BRAND — ALL PAGES, FINAL
========================================================== */
/* Logo container */
.navbar #p-logo {
display: flex !important;
align-items: center !important;
height: 70px !important;
margin: 0 !important;
padding: 0 8px !important;
}
/* Logo image */
.navbar #p-logo img,
.navbar #p-logo .mw-wiki-logo,
.navbar .navbar-brand img,
.navbar .navbar-brand .mw-wiki-logo {
display: block !important;
height: 70px !important;
width: auto !important;
max-height: 70px !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain !important;
}
/* EKOLOGOS WIKI text beside logo */
.navbar #p-logo::after,
.navbar .navbar-brand::after {
content: "EKOLOGOS\A WIKI" !important;
display: block !important;
white-space: pre !important;
margin-left: 10px !important;
font-family: Arial, sans-serif !important;
font-size: 17px !important;
font-weight: 700 !important;
line-height: 0.95 !important;
letter-spacing: 3px !important;
color: #23492F !important;
text-align: left !important;
}
/* ==========================================================
POSTGRADUATE CERTIFICATE IN RESEARCH
CLEAN FINAL BASE
========================================================== */
/* ----------------------------------------------------------
PAGE
---------------------------------------------------------- */
.page-Postgraduate_Certificate_in_Research #firstHeading,
.page-Postgraduate_Certificate_in_Research #contentSub {
display: none !important;
}
.page-Postgraduate_Certificate_in_Research .mw-parser-output {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
.page-Postgraduate_Certificate_in_Research #content,
.page-Postgraduate_Certificate_in_Research #bodyContent {
margin: 0 !important;
padding: 0 !important;
}
.page-Postgraduate_Certificate_in_Research .pgcert-page {
width: 100%;
margin: 0;
padding: 0;
background: #f8f6f1;
color: #29352f;
font-family: "Segoe UI", Roboto, Arial, sans-serif;
}
/* ----------------------------------------------------------
REMOVE ACCIDENTAL MEDIAWIKI PREFORMATTING
---------------------------------------------------------- */
.page-Postgraduate_Certificate_in_Research .pgcert-page pre {
display: contents !important;
}
/* ----------------------------------------------------------
HERO
---------------------------------------------------------- */
.page-Postgraduate_Certificate_in_Research .pgcert-hero {
position: relative;
width: 100%;
min-height: 430px;
margin: 0;
padding: 0;
background:
linear-gradient(
90deg,
rgba(12,40,32,.84) 0%,
rgba(17,42,37,.65) 52%,
rgba(17,31,29,.42) 100%
),
url("https://wiki.highlanderpress.org/images/thumb/5/54/FilePGCertR-Hero.jpg/800px-FilePGCertR-Hero.jpg?20260825055157");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
}
.page-Postgraduate_Certificate_in_Research .pgcert-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
to bottom,
rgba(0,0,0,.03),
rgba(0,0,0,.18)
);
pointer-events: none;
}
/* Hero content — ONE COLUMN for now */
.page-Postgraduate_Certificate_in_Research .pgcert-hero-inner {
position: relative;
z-index: 2;
width: 100%;
max-width: 1180px;
min-height: 430px;
margin: 0 auto;
padding: 55px 34px 60px;
display: flex;
align-items: center;
box-sizing: border-box;
}
.page-Postgraduate_Certificate_in_Research .pgcert-hero-copy {
width: 100%;
max-width: 780px;
margin: 0;
padding: 0;
}
/*
Hide the broken/duplicated hero card.
We already have Programme at a glance below.
*/
.page-Postgraduate_Certificate_in_Research .pgcert-hero-card {
display: none !important;
}
/* ----------------------------------------------------------
HERO TYPOGRAPHY
---------------------------------------------------------- */
.page-Postgraduate_Certificate_in_Research .pgcert-kicker {
margin: 0 0 10px;
color: #e0b45b;
font-size: 14px;
font-weight: 700;
letter-spacing: 2px;
}
.page-Postgraduate_Certificate_in_Research .pgcert-title {
margin: 0;
color: #ffffff;
font-family: Georgia, "Times New Roman", serif;
font-size: 58px;
font-weight: 700;
line-height: 1.02;
}
.page-Postgraduate_Certificate_in_Research .pgcert-title-accent {
width: 52px;
height: 3px;
margin: 18px 0 16px;
background: #d9aa4d;
border-radius: 2px;
}
.page-Postgraduate_Certificate_in_Research .pgcert-tagline {
margin: 0 0 11px;
color: #edc46d;
font-family: Georgia, "Times New Roman", serif;
font-size: 21px;
font-weight: 600;
line-height: 1.25;
}
.page-Postgraduate_Certificate_in_Research .pgcert-hero-text {
width: 100%;
max-width: 680px;
margin: 0;
color: rgba(255,255,255,.96);
font-size: 16px;
line-height: 1.55;
}
/* ----------------------------------------------------------
FIVE PROGRAMME FACTS
NO OVERLAP
---------------------------------------------------------- */
.page-Postgraduate_Certificate_in_Research .pgcert-facts {
position: relative;
z-index: 3;
width: calc(100% - 44px);
max-width: 1120px;
margin: 0 auto;
padding: 0;
display: grid;
grid-template-columns: repeat(5, minmax(0,1fr));
background: #ffffff;
border: 1px solid rgba(35,73,47,.10);
border-top: none;
border-radius: 0 0 13px 13px;
box-shadow: 0 9px 25px rgba(0,0,0,.09);
overflow: hidden;
}
.page-Postgraduate_Certificate_in_Research .pgcert-fact {
min-height: 118px;
padding: 18px 15px;
text-align: center;
border-right: 1px solid rgba(35,73,47,.13);
box-sizing: border-box;
}
.page-Postgraduate_Certificate_in_Research .pgcert-fact:last-child {
border-right: none;
}
.page-Postgraduate_Certificate_in_Research .pgcert-fact-icon {
margin: 0 0 7px;
color: #295536;
font-size: 25px;
line-height: 1;
}
.page-Postgraduate_Certificate_in_Research .pgcert-fact-title {
margin: 0 0 5px;
color: #23492f;
font-family: Georgia, "Times New Roman", serif;
font-size: 15px;
font-weight: 700;
line-height: 1.2;
}
.page-Postgraduate_Certificate_in_Research .pgcert-fact-text {
margin: 0;
color: #5a625d;
font-size: 11.5px;
line-height: 1.4;
}
/* ----------------------------------------------------------
MAIN CONTENT
---------------------------------------------------------- */
.page-Postgraduate_Certificate_in_Research .pgcert-main-grid {
width: calc(100% - 44px);
max-width: 1120px;
margin: 42px auto 70px;
padding: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) 310px;
gap: 38px;
align-items: start;
box-sizing: border-box;
}
.page-Postgraduate_Certificate_in_Research .pgcert-main-content {
min-width: 0;
}
/* ----------------------------------------------------------
SECTION HEADINGS
---------------------------------------------------------- */
.page-Postgraduate_Certificate_in_Research .pgcert-section-heading {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 14px;
color: #23492f;
font-family: Georgia, "Times New Roman", serif;
font-size: 23px;
font-weight: 700;
line-height: 1.2;
}
.page-Postgraduate_Certificate_in_Research .pgcert-heading-icon {
width: 34px;
height: 34px;
flex: 0 0 34px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #23492f;
color: #ffffff;
border-radius: 50%;
font-family: Arial, sans-serif;
font-size: 12px;
}
/* ----------------------------------------------------------
OVERVIEW
---------------------------------------------------------- */
.page-Postgraduate_Certificate_in_Research .pgcert-intro {
padding-bottom: 18px;
border-bottom: 1px solid rgba(35,73,47,.15);
}
.page-Postgraduate_Certificate_in_Research .pgcert-intro p {
margin: 0 0 12px !important;
color: #343c38;
font-size: 14px;
line-height: 1.65;
}
.page-Postgraduate_Certificate_in_Research .pgcert-intro p:last-child {
margin-bottom: 0 !important;
}
/* ----------------------------------------------------------
PARTICIPANT SUPPORT
---------------------------------------------------------- */
.page-Postgraduate_Certificate_in_Research .pgcert-support-heading {
margin-top: 22px;
}
.page-Postgraduate_Certificate_in_Research .pgcert-support-grid {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
column-gap: 28px;
}
.page-Postgraduate_Certificate_in_Research .pgcert-support-item {
min-height: 58px;
padding: 11px 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 10px;
align-items: start;
color: #3e4742;
font-size: 12px;
line-height: 1.45;
border-bottom: 1px solid rgba(35,73,47,.11);
}
.page-Postgraduate_Certificate_in_Research .pgcert-support-icon {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
background: #295536;
color: #ffffff;
border-radius: 50%;
font-size: 10px;
font-weight: 700;
}
/* ----------------------------------------------------------
COMPLETION MESSAGE
---------------------------------------------------------- */
.page-Postgraduate_Certificate_in_Research .pgcert-completion {
margin-top: 20px;
padding: 16px 18px;
display: grid;
grid-template-columns: 40px 1fr;
gap: 12px;
align-items: center;
background: #e9eee9;
border: 1px solid rgba(35,73,47,.10);
border-radius: 10px;
color: #3e4742;
font-size: 12px;
line-height: 1.5;
}
.page-Postgraduate_Certificate_in_Research .pgcert-completion-icon {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
background: #23492f;
color: #ffffff;
border-radius: 50%;
}
/* ----------------------------------------------------------
PROGRAMME AT A GLANCE SIDEBAR
---------------------------------------------------------- */
.page-Postgraduate_Certificate_in_Research .pgcert-sidebar {
width: 100%;
padding: 24px;
background: #edf1ed;
border: 1px solid rgba(35,73,47,.09);
border-radius: 14px;
box-sizing: border-box;
}
.page-Postgraduate_Certificate_in_Research .pgcert-sidebar-title {
color: #23492f;
font-family: Georgia, "Times New Roman", serif;
font-size: 21px;
font-weight: 700;
}
.page-Postgraduate_Certificate_in_Research .pgcert-sidebar-line {
width: 34px;
height: 2px;
margin: 11px 0 7px;
background: #d9aa4d;
}
.page-Postgraduate_Certificate_in_Research .pgcert-sidebar-item {
padding: 12px 0;
border-bottom: 1px solid rgba(35,73,47,.13);
}
.page-Postgraduate_Certificate_in_Research .pgcert-sidebar-item:last-child {
border-bottom: none;
}
.page-Postgraduate_Certificate_in_Research .pgcert-sidebar-item strong,
.page-Postgraduate_Certificate_in_Research .pgcert-sidebar-item span {
display: block;
}
.page-Postgraduate_Certificate_in_Research .pgcert-sidebar-item strong {
margin-bottom: 3px;
color: #23492f;
font-size: 12px;
}
.page-Postgraduate_Certificate_in_Research .pgcert-sidebar-item span {
color: #505a54;
font-size: 12px;
line-height: 1.4;
}
/* ----------------------------------------------------------
TABLET
---------------------------------------------------------- */
@media (max-width: 800px) {
.page-Postgraduate_Certificate_in_Research .pgcert-hero,
.page-Postgraduate_Certificate_in_Research .pgcert-hero-inner {
min-height: 400px;
}
.page-Postgraduate_Certificate_in_Research .pgcert-hero-inner {
padding: 45px 24px 50px;
}
.page-Postgraduate_Certificate_in_Research .pgcert-title {
font-size: 46px;
}
.page-Postgraduate_Certificate_in_Research .pgcert-facts {
grid-template-columns: repeat(2,minmax(0,1fr));
width: calc(100% - 30px);
border-radius: 0 0 10px 10px;
}
.page-Postgraduate_Certificate_in_Research .pgcert-fact {
border-bottom: 1px solid rgba(35,73,47,.13);
}
.page-Postgraduate_Certificate_in_Research .pgcert-fact:nth-child(2n) {
border-right: none;
}
.page-Postgraduate_Certificate_in_Research .pgcert-main-grid {
grid-template-columns: 1fr;
width: calc(100% - 34px);
}
}
/* ----------------------------------------------------------
MOBILE
---------------------------------------------------------- */
@media (max-width: 520px) {
.page-Postgraduate_Certificate_in_Research .pgcert-hero,
.page-Postgraduate_Certificate_in_Research .pgcert-hero-inner {
min-height: 380px;
}
.page-Postgraduate_Certificate_in_Research .pgcert-hero-inner {
padding: 38px 20px 44px;
}
.page-Postgraduate_Certificate_in_Research .pgcert-title {
font-size: 38px;
line-height: 1.05;
}
.page-Postgraduate_Certificate_in_Research .pgcert-tagline {
font-size: 18px;
}
.page-Postgraduate_Certificate_in_Research .pgcert-hero-text {
font-size: 14px;
}
.page-Postgraduate_Certificate_in_Research .pgcert-facts {
grid-template-columns: 1fr;
}
.page-Postgraduate_Certificate_in_Research .pgcert-fact {
border-right: none;
}
.page-Postgraduate_Certificate_in_Research .pgcert-support-grid {
grid-template-columns: 1fr;
}
.page-Postgraduate_Certificate_in_Research .pgcert-section-heading {
font-size: 20px;
}
}
/* ==========================================================
PGCertR — REMOVE HERO CARD + SHORTEN HERO
========================================================== */
/* Remove Programme at a Glance from inside the hero */
.page-Postgraduate_Certificate_in_Research .pgcert-hero-card {
display: none !important;
}
/* Shorter hero */
.page-Postgraduate_Certificate_in_Research .pgcert-hero {
height: 360px !important;
min-height: 360px !important;
max-height: 360px !important;
overflow: hidden !important;
}
/* Centre hero text vertically */
.page-Postgraduate_Certificate_in_Research .pgcert-hero-inner {
width: 100% !important;
max-width: 1180px !important;
height: 360px !important;
min-height: 360px !important;
margin: 0 auto !important;
padding: 32px 34px !important;
display: flex !important;
align-items: center !important;
box-sizing: border-box !important;
}
/* Give the text more width now that the right card is gone */
.page-Postgraduate_Certificate_in_Research .pgcert-hero-copy {
width: 100% !important;
max-width: 800px !important;
padding: 0 !important;
}
@media (max-width: 600px) {
.page-Postgraduate_Certificate_in_Research .pgcert-hero {
height: auto !important;
min-height: 330px !important;
max-height: none !important;
}
.page-Postgraduate_Certificate_in_Research .pgcert-hero-inner {
height: auto !important;
min-height: 330px !important;
padding: 38px 20px !important;
}
}
/* ==========================================================
PGCertR — FIX MEDIAWIKI PREFORMATTED TEXT
========================================================== */
.page-Postgraduate_Certificate_in_Research .pgcert-page pre {
display: block !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
color: inherit !important;
white-space: normal !important;
overflow: visible !important;
}
/* Hero title */
.page-Postgraduate_Certificate_in_Research .pgcert-title,
.page-Postgraduate_Certificate_in_Research .pgcert-title pre {
color: #ffffff !important;
font-family: Georgia, "Times New Roman", serif !important;
font-size: 58px !important;
font-weight: 700 !important;
line-height: 1.02 !important;
}
/* Gold subtitle */
.page-Postgraduate_Certificate_in_Research .pgcert-tagline,
.page-Postgraduate_Certificate_in_Research .pgcert-tagline pre {
color: #edc46d !important;
font-family: Georgia, "Times New Roman", serif !important;
font-size: 21px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
}
/* White description */
.page-Postgraduate_Certificate_in_Research .pgcert-hero-text,
.page-Postgraduate_Certificate_in_Research .pgcert-hero-text pre {
color: rgba(255,255,255,.96) !important;
font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.55 !important;
}
/* ==========================================================
PGCertR — HERO TEXT + HEIGHT
========================================================== */
/* Slightly taller hero */
.page-Postgraduate_Certificate_in_Research .pgcert-hero {
height: 410px !important;
min-height: 410px !important;
max-height: 410px !important;
}
/* Keep content vertically centred */
.page-Postgraduate_Certificate_in_Research .pgcert-hero-inner {
height: 410px !important;
min-height: 410px !important;
padding: 45px 34px !important;
display: flex !important;
align-items: center !important;
box-sizing: border-box !important;
}
/* Main title — white */
.page-Postgraduate_Certificate_in_Research .pgcert-title,
.page-Postgraduate_Certificate_in_Research .pgcert-title pre {
color: #ffffff !important;
font-family: Georgia, "Times New Roman", serif !important;
font-size: 58px !important;
font-weight: 700 !important;
line-height: 1.02 !important;
}
/* Subtitle — white */
.page-Postgraduate_Certificate_in_Research .pgcert-tagline,
.page-Postgraduate_Certificate_in_Research .pgcert-tagline pre {
color: #ffffff !important;
font-family: Georgia, "Times New Roman", serif !important;
font-size: 21px !important;
font-weight: 600 !important;
}
/* Description — white */
.page-Postgraduate_Certificate_in_Research .pgcert-hero-text,
.page-Postgraduate_Certificate_in_Research .pgcert-hero-text pre {
color: #ffffff !important;
font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 16px !important;
line-height: 1.55 !important;
}
/* Prevent MediaWiki preformatted styling inside hero */
.page-Postgraduate_Certificate_in_Research .pgcert-hero pre {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
color: inherit !important;
white-space: normal !important;
overflow: visible !important;
}
/* ==========================================================
HIMALAYAS PAGE — EKOLOGOS
========================================================== */
/* ----------------------------------------------------------
PAGE RESET
---------------------------------------------------------- */
.page-Himalayas #firstHeading,
.page-Himalayas #contentSub {
display: none !important;
}
.page-Himalayas .mw-parser-output {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
.page-Himalayas #content,
.page-Himalayas #bodyContent {
margin: 0 !important;
padding: 0 !important;
}
.page-Himalayas .hima-page {
width: 100%;
margin: 0;
padding: 0;
background: #f8f6f1;
color: #303934;
font-family: "Segoe UI", Roboto, Arial, sans-serif;
}
/* ----------------------------------------------------------
HERO
---------------------------------------------------------- */
.page-Himalayas .hima-hero {
position: relative;
width: 100%;
min-height: 360px;
background:
linear-gradient(
90deg,
rgba(10,46,35,.86) 0%,
rgba(20,48,40,.62) 43%,
rgba(8,25,25,.20) 100%
),
url("https://wiki.highlanderpress.org/images/7/79/Himalayas.jpg");
background-size: cover;
background-position: center 48%;
background-repeat: no-repeat;
overflow: hidden;
}
.page-Himalayas .hima-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
to bottom,
rgba(0,0,0,.02),
rgba(0,0,0,.18)
);
}
.page-Himalayas .hima-hero-inner {
position: relative;
z-index: 2;
width: 100%;
max-width: 1160px;
min-height: 360px;
margin: 0 auto;
padding: 58px 32px;
display: flex;
align-items: center;
box-sizing: border-box;
}
.page-Himalayas .hima-hero-copy {
width: 100%;
max-width: 650px;
}
.page-Himalayas .hima-title {
margin: 0;
color: #ffffff;
font-family: Georgia, "Times New Roman", serif;
font-size: 58px;
font-weight: 700;
line-height: 1.05;
}
.page-Himalayas .hima-gold-line {
width: 52px;
height: 4px;
margin: 22px 0 18px;
background: #ddb04d;
border-radius: 3px;
}
.page-Himalayas .hima-hero-intro {
max-width: 620px;
color: #ffffff;
font-size: 17px;
font-weight: 500;
line-height: 1.58;
}
/* ----------------------------------------------------------
MAIN CONTENT CONTAINER
---------------------------------------------------------- */
.page-Himalayas .hima-content {
width: calc(100% - 50px);
max-width: 1160px;
margin: 0 auto;
padding: 42px 0 65px;
box-sizing: border-box;
}
/* ----------------------------------------------------------
KOHIMA + AT A GLANCE
---------------------------------------------------------- */
.page-Himalayas .hima-intro-grid {
display: grid;
grid-template-columns: minmax(0,1.8fr) minmax(280px,.72fr);
gap: 52px;
align-items: start;
margin-bottom: 38px;
}
.page-Himalayas .hima-main-intro p,
.page-Himalayas .hima-section p {
margin: 13px 0 0 !important;
color: #303934;
font-size: 14px;
line-height: 1.65;
}
/* ----------------------------------------------------------
SECTION HEADING
---------------------------------------------------------- */
.page-Himalayas .hima-heading-row {
display: flex;
align-items: center;
gap: 11px;
margin: 0 0 9px;
}
.page-Himalayas .hima-icon {
width: 36px;
height: 36px;
flex: 0 0 36px;
display: flex;
align-items: center;
justify-content: center;
background: #23492f;
color: #ffffff;
border-radius: 50%;
font-family: Georgia, serif;
font-size: 15px;
}
.page-Himalayas .hima-heading {
color: #23492f;
font-family: Georgia, "Times New Roman", serif;
font-size: 22px;
font-weight: 700;
line-height: 1.2;
}
/* ----------------------------------------------------------
AT A GLANCE
---------------------------------------------------------- */
.page-Himalayas .hima-glance {
padding: 25px 24px;
background: #edf0e9;
border: 1px solid rgba(35,73,47,.08);
border-radius: 14px;
box-shadow: 0 7px 20px rgba(0,0,0,.04);
}
.page-Himalayas .hima-glance-title {
margin-bottom: 9px;
color: #23492f;
font-family: Georgia, "Times New Roman", serif;
font-size: 23px;
font-weight: 700;
}
.page-Himalayas .hima-glance-item {
display: grid;
grid-template-columns: 32px 1fr;
gap: 10px;
align-items: start;
padding: 13px 0;
border-bottom: 1px solid rgba(35,73,47,.14);
}
.page-Himalayas .hima-glance-item:last-child {
border-bottom: none;
}
.page-Himalayas .hima-small-icon {
width: 29px;
height: 29px;
display: flex;
align-items: center;
justify-content: center;
background: #23492f;
color: #ffffff;
border-radius: 50%;
font-size: 8px;
}
.page-Himalayas .hima-glance-item strong,
.page-Himalayas .hima-glance-item span {
display: block;
}
.page-Himalayas .hima-glance-item strong {
margin-bottom: 3px;
color: #23492f;
font-size: 12px;
}
.page-Himalayas .hima-glance-item span {
color: #4d5851;
font-size: 12px;
line-height: 1.45;
}
/* ----------------------------------------------------------
TWO-COLUMN SECTIONS
---------------------------------------------------------- */
.page-Himalayas .hima-two-column {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 48px;
padding: 26px 0;
border-top: 1px solid rgba(35,73,47,.18);
}
.page-Himalayas .hima-section {
min-width: 0;
}
.page-Himalayas .hima-subheading {
margin: 8px 0 4px;
color: #293b31;
font-size: 13px;
font-weight: 700;
}
/* ----------------------------------------------------------
LISTS
---------------------------------------------------------- */
.page-Himalayas .hima-list {
margin: 9px 0 0 !important;
padding-left: 22px !important;
color: #303934;
}
.page-Himalayas .hima-list li {
margin: 0 0 7px;
font-size: 13px;
line-height: 1.42;
}
.page-Himalayas .hima-list li:last-child {
margin-bottom: 0;
}
.page-Himalayas .hima-links a,
.page-Himalayas .hima-links a:visited {
color: #245b96;
text-decoration: none;
}
.page-Himalayas .hima-links a:hover {
color: #23492f;
text-decoration: underline;
}
/* Keep MediaWiki red links red */
.page-Himalayas .hima-links a.new,
.page-Himalayas .hima-links a.new:visited {
color: #b63838 !important;
}
/* ----------------------------------------------------------
MAIN ARTICLE
---------------------------------------------------------- */
.page-Himalayas .hima-main-article {
margin-top: 11px;
color: #834246;
font-family: Georgia, "Times New Roman", serif;
font-size: 13px;
font-style: italic;
}
.page-Himalayas .hima-main-article a {
color: #834246 !important;
}
/* ----------------------------------------------------------
PUBLICATIONS
---------------------------------------------------------- */
.page-Himalayas .hima-publications {
padding-top: 27px;
margin-top: 2px;
border-top: 1px solid rgba(35,73,47,.18);
}
/* ----------------------------------------------------------
TABLET
---------------------------------------------------------- */
@media (max-width: 800px) {
.page-Himalayas .hima-hero {
min-height: 330px;
}
.page-Himalayas .hima-hero-inner {
min-height: 330px;
padding: 45px 26px;
}
.page-Himalayas .hima-title {
font-size: 48px;
}
.page-Himalayas .hima-intro-grid {
grid-template-columns: 1fr;
gap: 28px;
}
.page-Himalayas .hima-two-column {
grid-template-columns: 1fr;
gap: 28px;
}
}
/* ----------------------------------------------------------
MOBILE
---------------------------------------------------------- */
@media (max-width: 520px) {
.page-Himalayas .hima-hero {
min-height: 310px;
background-position: 58% center;
}
.page-Himalayas .hima-hero-inner {
min-height: 310px;
padding: 40px 20px;
}
.page-Himalayas .hima-title {
font-size: 40px;
}
.page-Himalayas .hima-hero-intro {
font-size: 14px;
}
.page-Himalayas .hima-content {
width: calc(100% - 34px);
padding-top: 30px;
}
.page-Himalayas .hima-heading {
font-size: 20px;
}
.page-Himalayas .hima-glance {
padding: 20px;
}
}
/* ==========================================================
MYCCLIMATE PROJECT PAGE
Ekologos Wiki
========================================================== */
/* ----------------------------------------------------------
PAGE-SPECIFIC RESET
Uses :has() so we do not depend on MediaWiki page class
---------------------------------------------------------- */
body:has(.mycc-page) #firstHeading,
body:has(.mycc-page) #contentSub {
display: none !important;
}
body:has(.mycc-page) .mw-parser-output {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body:has(.mycc-page) #content,
body:has(.mycc-page) #bodyContent,
body:has(.mycc-page) #mw-content-text {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
.mycc-page {
width: 100%;
margin: 0;
padding: 0 0 65px;
background: #f8f6f1;
color: #303934;
font-family: "Segoe UI", Roboto, Arial, sans-serif;
box-sizing: border-box;
}
/* ----------------------------------------------------------
HERO
---------------------------------------------------------- */
.mycc-hero {
position: relative;
width: 100%;
min-height: 430px;
margin: 0;
padding: 0;
background:
linear-gradient(
90deg,
rgba(9,46,37,.92) 0%,
rgba(16,48,39,.75) 38%,
rgba(18,41,34,.30) 74%,
rgba(0,0,0,.08) 100%
),
url("https://wiki.highlanderpress.org/images/2/21/MyCClimate.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
}
.mycc-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
to bottom,
rgba(0,0,0,.03),
rgba(0,0,0,.20)
);
pointer-events: none;
}
.mycc-hero-inner {
position: relative;
z-index: 2;
width: calc(100% - 60px);
max-width: 1180px;
min-height: 430px;
margin: 0 auto;
padding: 52px 0 88px;
display: flex;
align-items: center;
box-sizing: border-box;
}
.mycc-hero-copy {
width: 100%;
max-width: 700px;
}
.mycc-kicker {
margin: 0;
color: #e4b750;
font-size: 14px;
font-weight: 700;
letter-spacing: 1.8px;
line-height: 1.2;
}
.mycc-kicker-line {
width: 28px;
height: 2px;
margin: 12px 0 13px;
background: #e4b750;
}
.mycc-title {
margin: 0;
color: #ffffff;
font-family: Georgia, "Times New Roman", serif;
font-size: 49px;
font-weight: 500;
line-height: 1.06;
text-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.mycc-hero-subtitle {
max-width: 570px;
margin-top: 22px;
color: #ffffff;
font-size: 17px;
font-weight: 600;
line-height: 1.45;
text-shadow: 0 1px 5px rgba(0,0,0,.35);
}
/* ----------------------------------------------------------
PROJECT INFORMATION STRIP
---------------------------------------------------------- */
.mycc-info-wrap {
position: relative;
z-index: 5;
width: calc(100% - 60px);
max-width: 1180px;
margin: -52px auto 0;
}
.mycc-info-strip {
display: grid;
grid-template-columns:
.85fr
.95fr
1fr
1.65fr
.75fr;
background: #ffffff;
border: 1px solid rgba(35,73,47,.10);
border-radius: 17px;
box-shadow: 0 12px 28px rgba(0,0,0,.11);
overflow: hidden;
}
.mycc-info-item {
min-height: 140px;
padding: 22px 20px;
border-right: 1px solid #e7dfd2;
box-sizing: border-box;
}
.mycc-info-item:last-child {
border-right: 0;
}
.mycc-info-icon {
width: 34px;
height: 34px;
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #23492f;
border: 2px solid #23492f;
border-radius: 50%;
font-size: 19px;
line-height: 1;
}
.mycc-info-label {
margin-bottom: 7px;
color: #23492f;
font-size: 10px;
font-weight: 800;
letter-spacing: .35px;
}
.mycc-info-value {
color: #333b37;
font-size: 12px;
line-height: 1.45;
}
/* ----------------------------------------------------------
MAIN CONTENT
---------------------------------------------------------- */
.mycc-content {
width: calc(100% - 60px);
max-width: 1180px;
margin: 29px auto 0;
box-sizing: border-box;
}
.mycc-panel {
background: rgba(255,255,255,.42);
border: 1px solid #e5dccd;
border-radius: 12px;
box-sizing: border-box;
}
/* ----------------------------------------------------------
SECTION HEADINGS
---------------------------------------------------------- */
.mycc-heading-row {
display: flex;
align-items: center;
gap: 11px;
margin: 0 0 16px;
}
.mycc-section-icon {
width: 39px;
height: 39px;
flex: 0 0 39px;
display: flex;
align-items: center;
justify-content: center;
background: #23492f;
color: #ffffff;
border-radius: 50%;
font-size: 17px;
}
.mycc-heading {
color: #23492f;
font-family: Georgia, "Times New Roman", serif;
font-size: 23px;
font-weight: 500;
line-height: 1.2;
}
/* ----------------------------------------------------------
OVERVIEW
---------------------------------------------------------- */
.mycc-overview {
display: grid;
grid-template-columns: 245px 1fr;
gap: 30px;
padding: 24px 25px;
}
.mycc-overview-text p,
.mycc-outcomes-text p {
margin: 0 0 13px !important;
color: #333a36;
font-size: 13px;
line-height: 1.58;
}
.mycc-overview-text p:last-child,
.mycc-outcomes-text p:last-child {
margin-bottom: 0 !important;
}
/* ----------------------------------------------------------
OBJECTIVES + THEMES
---------------------------------------------------------- */
.mycc-two-column {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 18px;
margin-top: 18px;
}
.mycc-two-column > .mycc-panel {
padding: 22px 24px;
}
/* Objectives */
.mycc-number-list {
position: relative;
}
.mycc-number-item {
display: grid;
grid-template-columns: 27px 1fr;
gap: 12px;
align-items: start;
margin-bottom: 11px;
color: #333a36;
font-size: 12px;
line-height: 1.42;
}
.mycc-number-item:last-child {
margin-bottom: 0;
}
.mycc-number {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: #23492f;
color: #ffffff;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
}
/* Research themes */
.mycc-theme-grid {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 13px 20px;
padding-top: 4px;
}
.mycc-theme {
min-height: 43px;
padding: 8px 12px;
display: flex;
align-items: center;
justify-content: center;
background: #e7ebe6;
border: 1px solid rgba(35,73,47,.05);
border-radius: 24px;
color: #29362f;
font-size: 11.5px;
font-weight: 500;
line-height: 1.25;
text-align: center;
box-sizing: border-box;
}
/* ----------------------------------------------------------
ACTIVITIES
---------------------------------------------------------- */
.mycc-activities {
margin-top: 18px;
padding: 21px 18px 18px;
}
.mycc-activity-grid {
display: grid;
grid-template-columns: repeat(6,minmax(0,1fr));
gap: 13px;
}
.mycc-activity-card {
min-height: 130px;
padding: 17px 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
background: #fffdfa;
border: 1px solid #ded2c0;
border-radius: 6px;
color: #333b37;
font-size: 11px;
line-height: 1.35;
text-align: center;
box-sizing: border-box;
}
.mycc-activity-icon {
height: 37px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #23492f;
font-size: 28px;
line-height: 1;
}
/* ----------------------------------------------------------
OUTCOMES
---------------------------------------------------------- */
.mycc-outcomes {
margin-top: 18px;
padding: 24px 25px;
display: grid;
grid-template-columns: 245px 1fr;
gap: 30px;
background: #edf1ed;
}
/* ----------------------------------------------------------
RESEARCH TEAM
---------------------------------------------------------- */
.mycc-team {
margin-top: 18px;
padding: 21px 18px 18px;
}
.mycc-team-grid {
display: grid;
grid-template-columns: repeat(5,minmax(0,1fr));
gap: 17px;
}
.mycc-person {
min-height: 175px;
padding: 18px 10px;
background: #fffdfa;
border: 1px solid #ded2c0;
border-radius: 6px;
text-align: center;
box-sizing: border-box;
}
.mycc-avatar {
width: 53px;
height: 53px;
margin: 0 auto 12px;
display: flex;
align-items: center;
justify-content: center;
background: #e3ebe4;
color: #7a9b82;
border-radius: 50%;
font-size: 30px;
}
.mycc-person-name {
margin-bottom: 8px;
color: #292f2c;
font-size: 12px;
font-weight: 700;
line-height: 1.3;
}
.mycc-person-role {
color: #3e4742;
font-size: 11px;
line-height: 1.45;
}
/* ----------------------------------------------------------
MEDIAWIKI LINK COLOURS INSIDE PAGE
---------------------------------------------------------- */
.mycc-page a {
color: #295c91;
}
.mycc-page a.new {
color: #b63a3a !important;
}
/* ----------------------------------------------------------
TABLET
---------------------------------------------------------- */
@media (max-width: 900px) {
.mycc-title {
font-size: 42px;
}
.mycc-info-strip {
grid-template-columns: repeat(2,minmax(0,1fr));
}
.mycc-info-item {
min-height: 120px;
border-bottom: 1px solid #e7dfd2;
}
.mycc-info-wide {
grid-column: span 2;
}
.mycc-two-column {
grid-template-columns: 1fr;
}
.mycc-activity-grid {
grid-template-columns: repeat(3,minmax(0,1fr));
}
.mycc-team-grid {
grid-template-columns: repeat(3,minmax(0,1fr));
}
}
/* ----------------------------------------------------------
MOBILE
---------------------------------------------------------- */
@media (max-width: 600px) {
.mycc-hero {
min-height: 410px;
background-position: 58% center;
}
.mycc-hero-inner {
width: calc(100% - 36px);
min-height: 410px;
padding: 50px 0 80px;
}
.mycc-title {
font-size: 34px;
line-height: 1.08;
}
.mycc-hero-subtitle {
font-size: 14px;
}
.mycc-info-wrap,
.mycc-content {
width: calc(100% - 30px);
}
.mycc-info-strip {
grid-template-columns: 1fr;
}
.mycc-info-wide {
grid-column: auto;
}
.mycc-info-item {
min-height: auto;
border-right: none;
}
.mycc-overview,
.mycc-outcomes {
grid-template-columns: 1fr;
gap: 8px;
}
.mycc-theme-grid {
grid-template-columns: 1fr;
}
.mycc-activity-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
.mycc-team-grid {
grid-template-columns: 1fr;
}
}
/* ==========================================================
MYCCLIMATE — OBJECTIVES + RESEARCH THEMES SIDE BY SIDE
========================================================== */
.mycc-page .mycc-two-column {
width: 100% !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 18px !important;
margin-top: 18px !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.mycc-page .mycc-two-column > .mycc-panel {
width: calc(50% - 9px) !important;
flex: 1 1 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
}
/* Mobile — stack only on small screens */
@media (max-width: 700px) {
.mycc-page .mycc-two-column {
flex-direction: column !important;
}
.mycc-page .mycc-two-column > .mycc-panel {
width: 100% !important;
}
}
/* ==========================================================
URBALTOUR KOHIMA
EKOLOGOS WIKI
========================================================== */
/* PAGE */
body:has(.urb-page) #firstHeading,
body:has(.urb-page) #contentSub {
display: none !important;
}
body:has(.urb-page) .mw-parser-output,
body:has(.urb-page) #mw-content-text {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body:has(.urb-page) #content,
body:has(.urb-page) #bodyContent {
margin: 0 !important;
padding: 0 !important;
}
.urb-page {
width: 100%;
margin: 0;
padding: 0 0 65px;
background: #f8f6f1;
color: #303934;
font-family: "Segoe UI", Roboto, Arial, sans-serif;
box-sizing: border-box;
}
/* ==========================================================
HERO
========================================================== */
.urb-hero {
position: relative;
width: 100%;
min-height: 420px;
margin: 0;
padding: 0;
background:
radial-gradient(
circle at 78% 30%,
rgba(208,174,90,.20),
transparent 32%
),
linear-gradient(
110deg,
#173c2d 0%,
#23492f 45%,
#426150 100%
);
overflow: hidden;
}
.urb-hero::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
120deg,
transparent 65%,
rgba(255,255,255,.06) 65%,
rgba(255,255,255,.06) 66%,
transparent 66%
);
pointer-events: none;
}
.urb-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
to bottom,
rgba(0,0,0,.02),
rgba(0,0,0,.18)
);
pointer-events: none;
}
.urb-hero-inner {
position: relative;
z-index: 2;
width: calc(100% - 60px);
max-width: 1180px;
min-height: 420px;
margin: 0 auto;
padding: 55px 0 85px;
display: flex;
align-items: center;
box-sizing: border-box;
}
.urb-hero-copy {
width: 100%;
max-width: 700px;
}
.urb-kicker {
color: #e2b457;
font-size: 14px;
font-weight: 700;
letter-spacing: 1.8px;
}
.urb-kicker-line {
width: 28px;
height: 2px;
margin: 12px 0 15px;
background: #e2b457;
}
.urb-title {
margin: 0;
color: #ffffff;
font-family: Georgia, "Times New Roman", serif;
font-size: 58px;
font-weight: 500;
line-height: 1.02;
}
.urb-hero-subtitle {
max-width: 600px;
margin-top: 23px;
color: #ffffff;
font-size: 17px;
font-weight: 500;
line-height: 1.5;
}
/* ==========================================================
PROJECT INFORMATION
========================================================== */
.urb-info-wrap {
position: relative;
z-index: 5;
width: calc(100% - 60px);
max-width: 1180px;
margin: -50px auto 0;
}
.urb-info-strip {
display: grid;
grid-template-columns:
.9fr
.7fr
1.25fr
1.6fr
.7fr;
background: #ffffff;
border: 1px solid rgba(35,73,47,.10);
border-radius: 17px;
box-shadow: 0 12px 28px rgba(0,0,0,.10);
overflow: hidden;
}
.urb-info-item {
min-height: 140px;
padding: 22px 19px;
border-right: 1px solid #e5ddcf;
box-sizing: border-box;
}
.urb-info-item:last-child {
border-right: 0;
}
.urb-info-icon {
width: 34px;
height: 34px;
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #23492f;
border: 2px solid #23492f;
border-radius: 50%;
font-size: 16px;
}
.urb-info-label {
margin-bottom: 7px;
color: #23492f;
font-size: 10px;
font-weight: 800;
letter-spacing: .4px;
}
.urb-info-value {
color: #343b37;
font-size: 12px;
line-height: 1.45;
}
/* ==========================================================
CONTENT
========================================================== */
.urb-content {
width: calc(100% - 60px);
max-width: 1180px;
margin: 29px auto 0;
box-sizing: border-box;
}
.urb-panel {
background: rgba(255,255,255,.45);
border: 1px solid #e4dacb;
border-radius: 12px;
box-sizing: border-box;
}
/* HEADINGS */
.urb-heading-row {
display: flex;
align-items: center;
gap: 11px;
margin: 0 0 16px;
}
.urb-section-icon {
width: 39px;
height: 39px;
flex: 0 0 39px;
display: flex;
align-items: center;
justify-content: center;
background: #23492f;
color: #ffffff;
border-radius: 50%;
font-size: 16px;
}
.urb-heading {
color: #23492f;
font-family: Georgia, "Times New Roman", serif;
font-size: 23px;
font-weight: 500;
line-height: 1.2;
}
/* ==========================================================
OVERVIEW
========================================================== */
.urb-overview {
display: grid;
grid-template-columns: 235px 1fr;
gap: 30px;
padding: 25px;
}
.urb-overview-text p,
.urb-outcomes-text p {
margin: 0 0 13px !important;
color: #343b37;
font-size: 13px;
line-height: 1.6;
}
.urb-overview-text p:last-child,
.urb-outcomes-text p:last-child {
margin-bottom: 0 !important;
}
/* ==========================================================
OBJECTIVES + THEMES
========================================================== */
.urb-two-column {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 18px;
width: 100%;
margin-top: 18px;
}
.urb-two-column > .urb-panel {
width: calc(50% - 9px);
flex: 1 1 0;
padding: 22px 24px;
}
/* OBJECTIVES */
.urb-number-item {
display: grid;
grid-template-columns: 27px 1fr;
gap: 12px;
align-items: start;
margin-bottom: 11px;
color: #343b37;
font-size: 12px;
line-height: 1.42;
}
.urb-number-item:last-child {
margin-bottom: 0;
}
.urb-number {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: #23492f;
color: #ffffff;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
}
/* THEMES */
.urb-theme-grid {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 13px 20px;
}
.urb-theme {
min-height: 44px;
padding: 8px 12px;
display: flex;
align-items: center;
justify-content: center;
background: #e7ebe6;
border: 1px solid rgba(35,73,47,.05);
border-radius: 24px;
color: #29362f;
font-size: 11.5px;
font-weight: 500;
line-height: 1.3;
text-align: center;
box-sizing: border-box;
}
.urb-theme-wide {
grid-column: span 2;
}
/* ==========================================================
ACTIVITIES
========================================================== */
.urb-activities {
margin-top: 18px;
padding: 21px 18px 18px;
}
.urb-activity-grid {
display: grid;
grid-template-columns: repeat(6,minmax(0,1fr));
gap: 13px;
}
.urb-activity-card {
min-height: 130px;
padding: 17px 10px;
display: flex;
flex-direction: column;
align-items: center;
background: #fffdfa;
border: 1px solid #ddd1bf;
border-radius: 6px;
color: #343b37;
font-size: 11px;
line-height: 1.35;
text-align: center;
box-sizing: border-box;
}
.urb-activity-icon {
height: 38px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #23492f;
font-size: 27px;
}
/* ==========================================================
OUTCOMES
========================================================== */
.urb-outcomes {
display: grid;
grid-template-columns: 235px 1fr;
gap: 30px;
margin-top: 18px;
padding: 25px;
background: #edf1ed;
}
/* ==========================================================
TEAM + PARTNERS
========================================================== */
.urb-lower-grid {
display: grid;
grid-template-columns: 1.65fr .8fr;
gap: 18px;
margin-top: 18px;
}
.urb-team,
.urb-partners {
padding: 21px 18px 18px;
}
/* TEAM */
.urb-team-grid {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 16px;
}
.urb-person {
min-height: 165px;
padding: 18px 10px;
background: #fffdfa;
border: 1px solid #ddd1bf;
border-radius: 7px;
text-align: center;
}
.urb-avatar {
width: 53px;
height: 53px;
margin: 0 auto 12px;
display: flex;
align-items: center;
justify-content: center;
background: #e3ebe4;
color: #7b9a82;
border-radius: 50%;
font-size: 30px;
}
.urb-person-name {
margin-bottom: 8px;
color: #2e3531;
font-size: 12px;
font-weight: 700;
}
.urb-person-role {
color: #4b544f;
font-size: 11px;
line-height: 1.4;
}
/* PARTNERS */
.urb-partner-item {
display: grid;
grid-template-columns: 48px 1fr;
gap: 12px;
align-items: center;
padding: 15px 0;
border-bottom: 1px solid rgba(35,73,47,.13);
}
.urb-partner-item:last-child {
border-bottom: none;
}
.urb-partner-symbol {
width: 43px;
height: 43px;
display: flex;
align-items: center;
justify-content: center;
background: #23492f;
color: #ffffff;
border-radius: 50%;
font-size: 10px;
font-weight: 700;
}
.urb-partner-item strong,
.urb-partner-item span {
display: block;
}
.urb-partner-item strong {
color: #23492f;
font-size: 12px;
}
.urb-partner-item span {
margin-top: 3px;
color: #5b645e;
font-size: 11px;
}
/* ==========================================================
RESPONSIVE
========================================================== */
@media (max-width: 900px) {
.urb-title {
font-size: 48px;
}
.urb-info-strip {
grid-template-columns: repeat(2,minmax(0,1fr));
}
.urb-info-wide {
grid-column: span 2;
}
.urb-activity-grid {
grid-template-columns: repeat(3,minmax(0,1fr));
}
.urb-lower-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
.urb-two-column {
flex-direction: column !important;
}
.urb-two-column > .urb-panel {
width: 100%;
}
.urb-overview,
.urb-outcomes {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.urb-hero {
min-height: 380px;
}
.urb-hero-inner {
width: calc(100% - 36px);
min-height: 380px;
padding: 45px 0 75px;
}
.urb-title {
font-size: 40px;
}
.urb-hero-subtitle {
font-size: 14px;
}
.urb-info-wrap,
.urb-content {
width: calc(100% - 30px);
}
.urb-info-strip {
grid-template-columns: 1fr;
}
.urb-info-wide {
grid-column: auto;
}
.urb-info-item {
min-height: auto;
border-right: none;
border-bottom: 1px solid #e5ddcf;
}
.urb-theme-grid {
grid-template-columns: 1fr;
}
.urb-theme-wide {
grid-column: auto;
}
.urb-activity-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
.urb-team-grid {
grid-template-columns: 1fr;
}
}
/* ==========================================================
URBALTOUR — TEAM + PARTNERS SIDE BY SIDE
========================================================== */
.urb-page .urb-lower-grid {
width: 100% !important;
display: grid !important;
grid-template-columns: 2fr 1fr !important;
gap: 18px !important;
margin-top: 18px !important;
padding: 0 !important;
align-items: stretch !important;
box-sizing: border-box !important;
}
.urb-page .urb-lower-grid > .urb-panel {
width: 100% !important;
margin: 0 !important;
box-sizing: border-box !important;
}
/* Research Team left */
.urb-page .urb-team {
grid-column: 1 !important;
}
/* Partner Institutions right */
.urb-page .urb-partners {
grid-column: 2 !important;
}
/* Keep the three team members in one row */
.urb-page .urb-team-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 16px !important;
}
/* Stack only on smaller screens */
@media (max-width: 750px) {
.urb-page .urb-lower-grid {
grid-template-columns: 1fr !important;
}
.urb-page .urb-team,
.urb-page .urb-partners {
grid-column: 1 !important;
}
}
/* ==========================================================
URBALTOUR — FINAL LOWER PAGE ARRANGEMENT
========================================================== */
/* ----------------------------------------------------------
OUTCOMES
Heading on top, text below across the full width
---------------------------------------------------------- */
.urb-page .urb-outcomes {
display: block !important;
width: 100% !important;
margin-top: 18px !important;
padding: 24px 26px !important;
background: #edf1ed !important;
box-sizing: border-box !important;
}
/* Outcome heading */
.urb-page .urb-outcomes .urb-section-side {
width: 100% !important;
margin: 0 0 16px 0 !important;
}
/* Outcome text full width */
.urb-page .urb-outcomes-text {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
.urb-page .urb-outcomes-text p {
width: 100% !important;
max-width: none !important;
margin: 0 0 14px 0 !important;
padding: 0 !important;
font-size: 13px !important;
line-height: 1.6 !important;
}
.urb-page .urb-outcomes-text p:last-child {
margin-bottom: 0 !important;
}
/* ----------------------------------------------------------
RESEARCH TEAM + PARTNER INSTITUTIONS
---------------------------------------------------------- */
.urb-page .urb-lower-grid {
width: 100% !important;
display: grid !important;
grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr) !important;
gap: 18px !important;
margin: 18px 0 0 0 !important;
padding: 0 !important;
align-items: stretch !important;
box-sizing: border-box !important;
}
/* VERY IMPORTANT:
Force both boxes onto the SAME ROW */
.urb-page .urb-team {
grid-column: 1 !important;
grid-row: 1 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
}
.urb-page .urb-partners {
grid-column: 2 !important;
grid-row: 1 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
}
/* ----------------------------------------------------------
RESEARCH TEAM
---------------------------------------------------------- */
.urb-page .urb-team-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 16px !important;
width: 100% !important;
}
.urb-page .urb-person {
width: 100% !important;
min-height: 150px !important;
margin: 0 !important;
padding: 18px 10px !important;
box-sizing: border-box !important;
}
/* ----------------------------------------------------------
PARTNER INSTITUTIONS
---------------------------------------------------------- */
.urb-page .urb-partners {
padding: 21px 20px !important;
}
.urb-page .urb-partner-item {
width: 100% !important;
box-sizing: border-box !important;
}
/* ----------------------------------------------------------
TABLET / MOBILE
---------------------------------------------------------- */
@media (max-width: 750px) {
.urb-page .urb-lower-grid {
grid-template-columns: 1fr !important;
}
.urb-page .urb-team {
grid-column: 1 !important;
grid-row: 1 !important;
}
.urb-page .urb-partners {
grid-column: 1 !important;
grid-row: 2 !important;
}
}
@media (max-width: 520px) {
.urb-page .urb-team-grid {
grid-template-columns: 1fr !important;
}
}
/* ==========================================================
WAR RESIDUES PROJECT
EKOLOGOS WIKI
========================================================== */
/* PAGE RESET */
body:has(.warres-page) #firstHeading,
body:has(.warres-page) #contentSub {
display: none !important;
}
body:has(.warres-page) .mw-parser-output,
body:has(.warres-page) #mw-content-text {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body:has(.warres-page) #content,
body:has(.warres-page) #bodyContent {
margin: 0 !important;
padding: 0 !important;
}
.warres-page {
width: 100%;
margin: 0;
padding: 0 0 65px;
background: #f8f6f1;
color: #303934;
font-family: "Segoe UI", Roboto, Arial, sans-serif;
box-sizing: border-box;
}
/* ==========================================================
HERO
========================================================== */
.warres-hero {
position: relative;
width: 100%;
min-height: 430px;
margin: 0;
padding: 0;
background:
radial-gradient(
circle at 76% 34%,
rgba(190,145,69,.20),
transparent 34%
),
linear-gradient(
105deg,
#172f27 0%,
#244a35 52%,
#615943 100%
);
overflow: hidden;
}
.warres-hero::after {
content: "";
position: absolute;
inset: 0;
opacity: .20;
background:
repeating-linear-gradient(
115deg,
transparent 0,
transparent 45px,
rgba(255,255,255,.055) 46px,
transparent 47px
);
pointer-events: none;
}
.warres-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(7,31,25,.55),
rgba(0,0,0,.05)
);
pointer-events: none;
}
.warres-hero-inner {
position: relative;
z-index: 2;
width: calc(100% - 60px);
max-width: 1180px;
min-height: 430px;
margin: 0 auto;
padding: 52px 0 82px;
display: flex;
align-items: center;
box-sizing: border-box;
}
.warres-hero-copy {
width: 100%;
max-width: 790px;
}
.warres-kicker {
color: #e1b457;
font-size: 14px;
font-weight: 700;
letter-spacing: 1.8px;
}
.warres-kicker-line {
width: 30px;
height: 2px;
margin: 12px 0 15px;
background: #e1b457;
}
.warres-title {
margin: 0;
color: #ffffff;
font-family: Georgia, "Times New Roman", serif;
font-size: 59px;
font-weight: 500;
line-height: 1.03;
}
.warres-title-sub {
max-width: 760px;
margin-top: 9px;
color: #ffffff;
font-family: Georgia, "Times New Roman", serif;
font-size: 29px;
font-weight: 400;
line-height: 1.15;
}
.warres-hero-description {
max-width: 650px;
margin-top: 23px;
color: rgba(255,255,255,.96);
font-size: 16px;
font-weight: 500;
line-height: 1.5;
}
/* ==========================================================
INFORMATION STRIP
========================================================== */
.warres-info-wrap {
position: relative;
z-index: 5;
width: calc(100% - 60px);
max-width: 1180px;
margin: -50px auto 0;
}
.warres-info-strip {
display: grid;
grid-template-columns:
.95fr
.9fr
1.45fr
1.15fr
.65fr;
background: #ffffff;
border: 1px solid rgba(35,73,47,.10);
border-radius: 17px;
box-shadow: 0 12px 28px rgba(0,0,0,.10);
overflow: hidden;
}
.warres-info-item {
min-height: 140px;
padding: 22px 19px;
border-right: 1px solid #e5ddcf;
box-sizing: border-box;
}
.warres-info-item:last-child {
border-right: none;
}
.warres-info-icon {
width: 34px;
height: 34px;
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #23492f;
border: 2px solid #23492f;
border-radius: 50%;
font-size: 16px;
}
.warres-info-label {
margin-bottom: 7px;
color: #23492f;
font-size: 10px;
font-weight: 800;
letter-spacing: .4px;
}
.warres-info-value {
color: #343b37;
font-size: 12px;
line-height: 1.45;
}
/* ==========================================================
MAIN CONTENT
========================================================== */
.warres-content {
width: calc(100% - 60px);
max-width: 1180px;
margin: 29px auto 0;
box-sizing: border-box;
}
.warres-panel {
background: rgba(255,255,255,.46);
border: 1px solid #e3dacb;
border-radius: 12px;
box-sizing: border-box;
}
/* HEADINGS */
.warres-heading-row {
display: flex;
align-items: center;
gap: 11px;
margin: 0 0 16px;
}
.warres-section-icon {
width: 39px;
height: 39px;
flex: 0 0 39px;
display: flex;
align-items: center;
justify-content: center;
background: #23492f;
color: #ffffff;
border-radius: 50%;
font-size: 16px;
}
.warres-heading {
color: #23492f;
font-family: Georgia, "Times New Roman", serif;
font-size: 23px;
font-weight: 500;
line-height: 1.2;
}
/* ==========================================================
OVERVIEW
========================================================== */
.warres-overview {
display: grid;
grid-template-columns: 235px 1fr;
gap: 30px;
padding: 25px;
}
.warres-overview-text p,
.warres-outcomes-text p {
margin: 0 0 13px !important;
color: #343b37;
font-size: 13px;
line-height: 1.6;
}
.warres-overview-text p:last-child,
.warres-outcomes-text p:last-child {
margin-bottom: 0 !important;
}
/* ==========================================================
OBJECTIVES + RESEARCH THEMES
========================================================== */
.warres-two-column {
width: 100%;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 18px;
margin-top: 18px;
}
.warres-two-column > .warres-panel {
width: calc(50% - 9px);
flex: 1 1 0;
padding: 22px 24px;
}
/* OBJECTIVES */
.warres-number-item {
display: grid;
grid-template-columns: 27px 1fr;
gap: 12px;
align-items: start;
margin-bottom: 12px;
color: #343b37;
font-size: 12px;
line-height: 1.45;
}
.warres-number-item:last-child {
margin-bottom: 0;
}
.warres-number {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: #23492f;
color: #ffffff;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
}
/* RESEARCH THEMES */
.warres-theme-grid {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 13px 20px;
}
.warres-theme {
min-height: 44px;
padding: 8px 12px;
display: flex;
align-items: center;
justify-content: center;
background: #e7ebe6;
border: 1px solid rgba(35,73,47,.06);
border-radius: 24px;
color: #29362f;
font-size: 11.5px;
font-weight: 500;
line-height: 1.3;
text-align: center;
box-sizing: border-box;
}
/* ==========================================================
ACTIVITIES
========================================================== */
.warres-activities {
margin-top: 18px;
padding: 21px 18px 18px;
}
.warres-activity-grid {
display: grid;
grid-template-columns: repeat(6,minmax(0,1fr));
gap: 13px;
}
.warres-activity-card {
min-height: 140px;
padding: 17px 10px;
display: flex;
flex-direction: column;
align-items: center;
background: #fffdfa;
border: 1px solid #ddd1bf;
border-radius: 6px;
color: #343b37;
font-size: 11px;
line-height: 1.4;
text-align: center;
box-sizing: border-box;
}
.warres-activity-icon {
height: 38px;
margin-bottom: 11px;
display: flex;
align-items: center;
justify-content: center;
color: #23492f;
font-size: 27px;
}
/* ==========================================================
EXPECTED OUTCOMES
========================================================== */
.warres-outcomes {
width: 100%;
margin-top: 18px;
padding: 24px 26px;
background: #edf1ed;
}
.warres-outcomes-text {
width: 100%;
}
/* ==========================================================
RESEARCH TEAM
========================================================== */
.warres-team {
margin-top: 18px;
padding: 21px 18px 18px;
}
.warres-team-grid {
display: grid;
grid-template-columns: repeat(4,minmax(0,1fr));
gap: 16px;
}
.warres-person {
min-height: 165px;
padding: 18px 10px;
background: #fffdfa;
border: 1px solid #ddd1bf;
border-radius: 7px;
text-align: center;
box-sizing: border-box;
}
.warres-avatar {
width: 53px;
height: 53px;
margin: 0 auto 12px;
display: flex;
align-items: center;
justify-content: center;
background: #e3ebe4;
color: #78977f;
border-radius: 50%;
font-size: 30px;
}
.warres-person-name {
margin-bottom: 8px;
color: #2e3531;
font-size: 12px;
font-weight: 700;
line-height: 1.3;
}
.warres-person-role {
color: #4b544f;
font-size: 11px;
line-height: 1.4;
}
/* ==========================================================
RESPONSIVE
========================================================== */
@media (max-width: 900px) {
.warres-title {
font-size: 48px;
}
.warres-title-sub {
font-size: 25px;
}
.warres-info-strip {
grid-template-columns: repeat(2,minmax(0,1fr));
}
.warres-info-wide {
grid-column: span 2;
}
.warres-activity-grid {
grid-template-columns: repeat(3,minmax(0,1fr));
}
.warres-team-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
}
@media (max-width: 700px) {
.warres-two-column {
flex-direction: column !important;
}
.warres-two-column > .warres-panel {
width: 100%;
}
.warres-overview {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.warres-hero {
min-height: 430px;
}
.warres-hero-inner {
width: calc(100% - 36px);
min-height: 430px;
padding: 45px 0 75px;
}
.warres-title {
font-size: 39px;
}
.warres-title-sub {
font-size: 21px;
}
.warres-hero-description {
font-size: 14px;
}
.warres-info-wrap,
.warres-content {
width: calc(100% - 30px);
}
.warres-info-strip {
grid-template-columns: 1fr;
}
.warres-info-wide {
grid-column: auto;
}
.warres-info-item {
min-height: auto;
border-right: none;
border-bottom: 1px solid #e5ddcf;
}
.warres-theme-grid {
grid-template-columns: 1fr;
}
.warres-activity-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
.warres-team-grid {
grid-template-columns: 1fr;
}
}
/* ==========================================================
FOOD SECURITY + CLIMATE ADAPTATION PROJECT
EKOLOGOS WIKI
========================================================== */
/* PAGE RESET */
body:has(.foodsec-page) #firstHeading,
body:has(.foodsec-page) #contentSub {
display: none !important;
}
body:has(.foodsec-page) .mw-parser-output,
body:has(.foodsec-page) #mw-content-text {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body:has(.foodsec-page) #content,
body:has(.foodsec-page) #bodyContent {
margin: 0 !important;
padding: 0 !important;
}
.foodsec-page {
width: 100%;
margin: 0;
padding: 0 0 65px;
background: #f8f6f1;
color: #303934;
font-family: "Segoe UI", Roboto, Arial, sans-serif;
box-sizing: border-box;
}
/* ==========================================================
HERO
========================================================== */
.foodsec-hero {
position: relative;
width: 100%;
min-height: 440px;
background:
radial-gradient(
circle at 78% 35%,
rgba(202,173,87,.21),
transparent 35%
),
linear-gradient(
110deg,
#16392a 0%,
#27543b 52%,
#637357 100%
);
overflow: hidden;
}
.foodsec-hero::after {
content: "";
position: absolute;
inset: 0;
opacity: .20;
background:
repeating-linear-gradient(
115deg,
transparent 0,
transparent 55px,
rgba(255,255,255,.05) 56px,
transparent 57px
);
pointer-events: none;
}
.foodsec-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(8,39,28,.62),
rgba(0,0,0,.03)
);
pointer-events: none;
}
.foodsec-hero-inner {
position: relative;
z-index: 2;
width: calc(100% - 60px);
max-width: 1180px;
min-height: 440px;
margin: 0 auto;
padding: 52px 0 84px;
display: flex;
align-items: center;
box-sizing: border-box;
}
.foodsec-hero-copy {
width: 100%;
max-width: 850px;
}
.foodsec-kicker {
color: #e2b650;
font-size: 14px;
font-weight: 700;
letter-spacing: 1.8px;
}
.foodsec-kicker-line {
width: 30px;
height: 2px;
margin: 12px 0 15px;
background: #e2b650;
}
.foodsec-title {
margin: 0;
color: #ffffff;
font-family: Georgia, "Times New Roman", serif;
font-size: 47px;
font-weight: 500;
line-height: 1.08;
text-shadow: 0 2px 8px rgba(0,0,0,.22);
}
.foodsec-hero-description {
max-width: 680px;
margin-top: 23px;
color: #ffffff;
font-size: 16px;
font-weight: 500;
line-height: 1.5;
}
/* ==========================================================
PROJECT INFO STRIP
========================================================== */
.foodsec-info-wrap {
position: relative;
z-index: 5;
width: calc(100% - 60px);
max-width: 1180px;
margin: -50px auto 0;
}
.foodsec-info-strip {
display: grid;
grid-template-columns:
1.8fr
.7fr
1.15fr
.65fr;
background: #ffffff;
border: 1px solid rgba(35,73,47,.10);
border-radius: 17px;
box-shadow: 0 12px 28px rgba(0,0,0,.10);
overflow: hidden;
}
.foodsec-info-item {
min-height: 145px;
padding: 22px 20px;
border-right: 1px solid #e5ddcf;
box-sizing: border-box;
}
.foodsec-info-item:last-child {
border-right: none;
}
.foodsec-info-icon {
width: 34px;
height: 34px;
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #23492f;
border: 2px solid #23492f;
border-radius: 50%;
font-size: 16px;
}
.foodsec-info-label {
margin-bottom: 7px;
color: #23492f;
font-size: 10px;
font-weight: 800;
letter-spacing: .4px;
}
.foodsec-info-value {
color: #343b37;
font-size: 12px;
line-height: 1.48;
}
/* ==========================================================
CONTENT
========================================================== */
.foodsec-content {
width: calc(100% - 60px);
max-width: 1180px;
margin: 29px auto 0;
box-sizing: border-box;
}
.foodsec-panel {
background: rgba(255,255,255,.46);
border: 1px solid #e3dacb;
border-radius: 12px;
box-sizing: border-box;
}
/* HEADINGS */
.foodsec-heading-row {
display: flex;
align-items: center;
gap: 11px;
margin: 0 0 16px;
}
.foodsec-section-icon {
width: 39px;
height: 39px;
flex: 0 0 39px;
display: flex;
align-items: center;
justify-content: center;
background: #23492f;
color: #ffffff;
border-radius: 50%;
font-size: 16px;
}
.foodsec-heading {
color: #23492f;
font-family: Georgia, "Times New Roman", serif;
font-size: 23px;
font-weight: 500;
line-height: 1.2;
}
/* ==========================================================
OVERVIEW
========================================================== */
.foodsec-overview {
display: grid;
grid-template-columns: 235px 1fr;
gap: 30px;
padding: 25px;
}
.foodsec-overview-text p,
.foodsec-outcomes-text p {
margin: 0 0 13px !important;
color: #343b37;
font-size: 13px;
line-height: 1.6;
}
.foodsec-overview-text p:last-child,
.foodsec-outcomes-text p:last-child {
margin-bottom: 0 !important;
}
/* ==========================================================
OBJECTIVES + THEMES
========================================================== */
.foodsec-two-column {
width: 100%;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 18px;
margin-top: 18px;
}
.foodsec-two-column > .foodsec-panel {
width: calc(50% - 9px);
flex: 1 1 0;
padding: 22px 24px;
}
/* OBJECTIVES */
.foodsec-number-item {
display: grid;
grid-template-columns: 27px 1fr;
gap: 12px;
align-items: start;
margin-bottom: 12px;
color: #343b37;
font-size: 12px;
line-height: 1.45;
}
.foodsec-number-item:last-child {
margin-bottom: 0;
}
.foodsec-number {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: #23492f;
color: #ffffff;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
}
/* RESEARCH THEMES */
.foodsec-theme-grid {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 13px 20px;
}
.foodsec-theme {
min-height: 44px;
padding: 8px 12px;
display: flex;
align-items: center;
justify-content: center;
background: #e5ebe4;
border: 1px solid rgba(35,73,47,.06);
border-radius: 24px;
color: #29362f;
font-size: 11.5px;
font-weight: 500;
line-height: 1.3;
text-align: center;
box-sizing: border-box;
}
/* ==========================================================
ACTIVITIES
========================================================== */
.foodsec-activities {
margin-top: 18px;
padding: 21px 18px 18px;
}
.foodsec-activity-grid {
display: grid;
grid-template-columns: repeat(6,minmax(0,1fr));
gap: 13px;
}
.foodsec-activity-card {
min-height: 140px;
padding: 17px 10px;
display: flex;
flex-direction: column;
align-items: center;
background: #fffdfa;
border: 1px solid #ddd1bf;
border-radius: 6px;
color: #343b37;
font-size: 11px;
line-height: 1.4;
text-align: center;
box-sizing: border-box;
}
.foodsec-activity-icon {
height: 38px;
margin-bottom: 11px;
display: flex;
align-items: center;
justify-content: center;
color: #23492f;
font-size: 27px;
}
/* ==========================================================
EXPECTED OUTCOMES
========================================================== */
.foodsec-outcomes {
width: 100%;
margin-top: 18px;
padding: 24px 26px;
background: #edf1ed;
}
.foodsec-outcomes-text {
width: 100%;
}
/* ==========================================================
TEAM + PARTNERS
========================================================== */
.foodsec-lower-grid {
width: 100%;
display: grid !important;
grid-template-columns: minmax(0,2fr) minmax(300px,1fr) !important;
gap: 18px;
margin-top: 18px;
align-items: stretch;
}
.foodsec-team,
.foodsec-partners {
width: 100%;
margin: 0 !important;
padding: 21px 18px 18px;
box-sizing: border-box;
}
.foodsec-team {
grid-column: 1 !important;
grid-row: 1 !important;
}
.foodsec-partners {
grid-column: 2 !important;
grid-row: 1 !important;
}
/* TEAM */
.foodsec-team-grid {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 15px;
}
.foodsec-person {
min-height: 155px;
padding: 17px 8px;
background: #fffdfa;
border: 1px solid #ddd1bf;
border-radius: 7px;
text-align: center;
box-sizing: border-box;
}
.foodsec-avatar {
width: 50px;
height: 50px;
margin: 0 auto 11px;
display: flex;
align-items: center;
justify-content: center;
background: #e3ebe4;
color: #78977f;
border-radius: 50%;
font-size: 28px;
}
.foodsec-person-name {
margin-bottom: 7px;
color: #2e3531;
font-size: 11.5px;
font-weight: 700;
line-height: 1.3;
}
.foodsec-person-role {
color: #4b544f;
font-size: 10.5px;
line-height: 1.4;
}
/* PARTNER INSTITUTIONS */
.foodsec-partner-item {
display: grid;
grid-template-columns: 44px 1fr;
gap: 11px;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid rgba(35,73,47,.13);
}
.foodsec-partner-item:last-child {
border-bottom: none;
}
.foodsec-partner-symbol {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: #23492f;
color: #ffffff;
border-radius: 50%;
font-size: 9px;
font-weight: 700;
}
.foodsec-partner-item strong,
.foodsec-partner-item span {
display: block;
}
.foodsec-partner-item strong {
color: #23492f;
font-size: 11px;
line-height: 1.3;
}
.foodsec-partner-item span {
margin-top: 3px;
color: #5b645e;
font-size: 10px;
}
/* ==========================================================
RESPONSIVE
========================================================== */
@media (max-width: 900px) {
.foodsec-title {
font-size: 40px;
}
.foodsec-info-strip {
grid-template-columns: repeat(2,minmax(0,1fr));
}
.foodsec-info-leads {
grid-column: span 2;
}
.foodsec-activity-grid {
grid-template-columns: repeat(3,minmax(0,1fr));
}
.foodsec-lower-grid {
grid-template-columns: 1fr !important;
}
.foodsec-team {
grid-column: 1 !important;
grid-row: 1 !important;
}
.foodsec-partners {
grid-column: 1 !important;
grid-row: 2 !important;
}
}
@media (max-width: 700px) {
.foodsec-two-column {
flex-direction: column !important;
}
.foodsec-two-column > .foodsec-panel {
width: 100%;
}
.foodsec-overview {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.foodsec-hero {
min-height: 430px;
}
.foodsec-hero-inner {
width: calc(100% - 36px);
min-height: 430px;
padding: 45px 0 75px;
}
.foodsec-title {
font-size: 33px;
}
.foodsec-hero-description {
font-size: 14px;
}
.foodsec-info-wrap,
.foodsec-content {
width: calc(100% - 30px);
}
.foodsec-info-strip {
grid-template-columns: 1fr;
}
.foodsec-info-leads {
grid-column: auto;
}
.foodsec-info-item {
min-height: auto;
border-right: none;
border-bottom: 1px solid #e5ddcf;
}
.foodsec-theme-grid {
grid-template-columns: 1fr;
}
.foodsec-activity-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
.foodsec-team-grid {
grid-template-columns: 1fr;
}
}
/* ==========================================================
NUTRITION DETERMINANTS PROJECT
EKOLOGOS WIKI
========================================================== */
/* PAGE RESET */
body:has(.nutrition-page) #firstHeading,
body:has(.nutrition-page) #contentSub {
display: none !important;
}
body:has(.nutrition-page) .mw-parser-output,
body:has(.nutrition-page) #mw-content-text {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body:has(.nutrition-page) #content,
body:has(.nutrition-page) #bodyContent {
margin: 0 !important;
padding: 0 !important;
}
.nutrition-page {
width: 100%;
margin: 0;
padding: 0 0 65px;
background: #f8f6f1;
color: #303934;
font-family: "Segoe UI", Roboto, Arial, sans-serif;
box-sizing: border-box;
}
/* ==========================================================
HERO
========================================================== */
.nutrition-hero {
position: relative;
width: 100%;
min-height: 430px;
background:
radial-gradient(
circle at 78% 32%,
rgba(213,179,94,.20),
transparent 34%
),
linear-gradient(
110deg,
#163a2c 0%,
#28543d 52%,
#72806a 100%
);
overflow: hidden;
}
.nutrition-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(8,39,28,.62),
rgba(0,0,0,.04)
);
pointer-events: none;
}
.nutrition-hero-inner {
position: relative;
z-index: 2;
width: calc(100% - 60px);
max-width: 1180px;
min-height: 430px;
margin: 0 auto;
padding: 52px 0 84px;
display: flex;
align-items: center;
box-sizing: border-box;
}
.nutrition-hero-copy {
width: 100%;
max-width: 850px;
}
.nutrition-kicker {
color: #e2b650;
font-size: 14px;
font-weight: 700;
letter-spacing: 1.8px;
}
.nutrition-kicker-line {
width: 30px;
height: 2px;
margin: 12px 0 15px;
background: #e2b650;
}
.nutrition-title {
margin: 0;
color: #ffffff;
font-family: Georgia, "Times New Roman", serif;
font-size: 49px;
font-weight: 500;
line-height: 1.08;
text-shadow: 0 2px 8px rgba(0,0,0,.20);
}
.nutrition-hero-description {
max-width: 680px;
margin-top: 23px;
color: #ffffff;
font-size: 16px;
font-weight: 500;
line-height: 1.5;
}
/* ==========================================================
PROJECT INFO
========================================================== */
.nutrition-info-wrap {
position: relative;
z-index: 5;
width: calc(100% - 60px);
max-width: 1180px;
margin: -50px auto 0;
}
.nutrition-info-strip {
display: grid;
grid-template-columns:
.9fr
1fr
.75fr
1.55fr
.7fr;
background: #ffffff;
border: 1px solid rgba(35,73,47,.10);
border-radius: 17px;
box-shadow: 0 12px 28px rgba(0,0,0,.10);
overflow: hidden;
}
.nutrition-info-item {
min-height: 140px;
padding: 22px 19px;
border-right: 1px solid #e5ddcf;
box-sizing: border-box;
}
.nutrition-info-item:last-child {
border-right: none;
}
.nutrition-info-icon {
width: 34px;
height: 34px;
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #23492f;
border: 2px solid #23492f;
border-radius: 50%;
font-size: 16px;
}
.nutrition-info-label {
margin-bottom: 7px;
color: #23492f;
font-size: 10px;
font-weight: 800;
letter-spacing: .4px;
}
.nutrition-info-value {
color: #343b37;
font-size: 12px;
line-height: 1.45;
}
/* ==========================================================
MAIN CONTENT
========================================================== */
.nutrition-content {
width: calc(100% - 60px);
max-width: 1180px;
margin: 29px auto 0;
box-sizing: border-box;
}
.nutrition-panel {
background: rgba(255,255,255,.46);
border: 1px solid #e3dacb;
border-radius: 12px;
box-sizing: border-box;
}
/* HEADINGS */
.nutrition-heading-row {
display: flex;
align-items: center;
gap: 11px;
margin: 0 0 16px;
}
.nutrition-section-icon {
width: 39px;
height: 39px;
flex: 0 0 39px;
display: flex;
align-items: center;
justify-content: center;
background: #23492f;
color: #ffffff;
border-radius: 50%;
font-size: 16px;
}
.nutrition-heading {
color: #23492f;
font-family: Georgia, "Times New Roman", serif;
font-size: 23px;
font-weight: 500;
line-height: 1.2;
}
/* ==========================================================
OVERVIEW
========================================================== */
.nutrition-overview {
display: grid;
grid-template-columns: 235px 1fr;
gap: 30px;
padding: 25px;
}
.nutrition-overview-text p,
.nutrition-outcomes-text p {
margin: 0 0 13px !important;
color: #343b37;
font-size: 13px;
line-height: 1.6;
}
.nutrition-overview-text p:last-child,
.nutrition-outcomes-text p:last-child {
margin-bottom: 0 !important;
}
/* ==========================================================
OBJECTIVES + THEMES
========================================================== */
.nutrition-two-column {
width: 100%;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 18px;
margin-top: 18px;
}
.nutrition-two-column > .nutrition-panel {
width: calc(50% - 9px);
flex: 1 1 0;
padding: 22px 24px;
}
/* OBJECTIVES */
.nutrition-number-item {
display: grid;
grid-template-columns: 27px 1fr;
gap: 12px;
align-items: start;
margin-bottom: 12px;
color: #343b37;
font-size: 12px;
line-height: 1.45;
}
.nutrition-number-item:last-child {
margin-bottom: 0;
}
.nutrition-number {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: #23492f;
color: #ffffff;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
}
/* RESEARCH THEMES */
.nutrition-theme-grid {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 13px 20px;
}
.nutrition-theme {
min-height: 44px;
padding: 8px 12px;
display: flex;
align-items: center;
justify-content: center;
background: #e5ebe4;
border: 1px solid rgba(35,73,47,.06);
border-radius: 24px;
color: #29362f;
font-size: 11.5px;
font-weight: 500;
line-height: 1.3;
text-align: center;
box-sizing: border-box;
}
/* ==========================================================
ACTIVITIES
========================================================== */
.nutrition-activities {
margin-top: 18px;
padding: 21px 18px 18px;
}
.nutrition-activity-grid {
display: grid;
grid-template-columns: repeat(6,minmax(0,1fr));
gap: 13px;
}
.nutrition-activity-card {
min-height: 140px;
padding: 17px 10px;
display: flex;
flex-direction: column;
align-items: center;
background: #fffdfa;
border: 1px solid #ddd1bf;
border-radius: 6px;
color: #343b37;
font-size: 11px;
line-height: 1.4;
text-align: center;
box-sizing: border-box;
}
.nutrition-activity-icon {
height: 38px;
margin-bottom: 11px;
display: flex;
align-items: center;
justify-content: center;
color: #23492f;
font-size: 27px;
}
/* ==========================================================
OUTCOMES
========================================================== */
.nutrition-outcomes {
width: 100%;
margin-top: 18px;
padding: 24px 26px;
background: #edf1ed;
}
.nutrition-outcomes-text {
width: 100%;
}
/* ==========================================================
TEAM + PARTNERS
========================================================== */
.nutrition-lower-grid {
width: 100%;
display: grid !important;
grid-template-columns: minmax(0,2fr) minmax(300px,1fr) !important;
gap: 18px;
margin-top: 18px;
align-items: stretch !important;
}
.nutrition-team {
grid-column: 1 !important;
grid-row: 1 !important;
}
.nutrition-partners {
grid-column: 2 !important;
grid-row: 1 !important;
}
.nutrition-team,
.nutrition-partners {
width: 100%;
margin: 0 !important;
padding: 21px 18px 18px;
box-sizing: border-box;
}
/* TEAM */
.nutrition-team-grid {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 16px;
}
.nutrition-person {
min-height: 165px;
padding: 18px 10px;
background: #fffdfa;
border: 1px solid #ddd1bf;
border-radius: 7px;
text-align: center;
box-sizing: border-box;
}
.nutrition-avatar {
width: 53px;
height: 53px;
margin: 0 auto 12px;
display: flex;
align-items: center;
justify-content: center;
background: #e3ebe4;
color: #78977f;
border-radius: 50%;
font-size: 30px;
}
.nutrition-person-name {
margin-bottom: 8px;
color: #2e3531;
font-size: 12px;
font-weight: 700;
line-height: 1.3;
}
.nutrition-person-role {
color: #4b544f;
font-size: 11px;
line-height: 1.4;
}
/* PARTNER INSTITUTIONS */
.nutrition-partner-item {
display: grid;
grid-template-columns: 45px 1fr;
gap: 11px;
align-items: center;
padding: 13px 0;
border-bottom: 1px solid rgba(35,73,47,.13);
}
.nutrition-partner-item:last-child {
border-bottom: none;
}
.nutrition-partner-symbol {
width: 41px;
height: 41px;
display: flex;
align-items: center;
justify-content: center;
background: #23492f;
color: #ffffff;
border-radius: 50%;
font-size: 9px;
font-weight: 700;
}
.nutrition-partner-item strong,
.nutrition-partner-item span {
display: block;
}
.nutrition-partner-item strong {
color: #23492f;
font-size: 11px;
}
.nutrition-partner-item span {
margin-top: 3px;
color: #5b645e;
font-size: 10px;
}
/* ==========================================================
RESPONSIVE
========================================================== */
@media (max-width: 900px) {
.nutrition-title {
font-size: 41px;
}
.nutrition-info-strip {
grid-template-columns: repeat(2,minmax(0,1fr));
}
.nutrition-info-wide {
grid-column: span 2;
}
.nutrition-activity-grid {
grid-template-columns: repeat(3,minmax(0,1fr));
}
.nutrition-lower-grid {
grid-template-columns: 1fr !important;
}
.nutrition-team {
grid-column: 1 !important;
grid-row: 1 !important;
}
.nutrition-partners {
grid-column: 1 !important;
grid-row: 2 !important;
}
}
@media (max-width: 700px) {
.nutrition-two-column {
flex-direction: column !important;
}
.nutrition-two-column > .nutrition-panel {
width: 100%;
}
.nutrition-overview {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.nutrition-hero {
min-height: 420px;
}
.nutrition-hero-inner {
width: calc(100% - 36px);
min-height: 420px;
padding: 45px 0 75px;
}
.nutrition-title {
font-size: 34px;
}
.nutrition-hero-description {
font-size: 14px;
}
.nutrition-info-wrap,
.nutrition-content {
width: calc(100% - 30px);
}
.nutrition-info-strip {
grid-template-columns: 1fr;
}
.nutrition-info-wide {
grid-column: auto;
}
.nutrition-info-item {
min-height: auto;
border-right: none;
border-bottom: 1px solid #e5ddcf;
}
.nutrition-theme-grid {
grid-template-columns: 1fr;
}
.nutrition-activity-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
.nutrition-team-grid {
grid-template-columns: 1fr;
}
}
/* ==========================================================
NAGA WOMEN'S HEALTH CHANNEL
EKOLOGOS WIKI
========================================================== */
/* PAGE RESET */
body:has(.nwhc-page) #firstHeading,
body:has(.nwhc-page) #contentSub {
display: none !important;
}
body:has(.nwhc-page) .mw-parser-output,
body:has(.nwhc-page) #mw-content-text {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body:has(.nwhc-page) #content,
body:has(.nwhc-page) #bodyContent {
margin: 0 !important;
padding: 0 !important;
}
.nwhc-page {
width: 100%;
margin: 0;
padding: 0 0 65px;
background: #f8f6f1;
color: #303934;
font-family: "Segoe UI", Roboto, Arial, sans-serif;
box-sizing: border-box;
}
/* ==========================================================
HERO
========================================================== */
.nwhc-hero {
position: relative;
width: 100%;
min-height: 430px;
background:
radial-gradient(
circle at 78% 30%,
rgba(218,177,119,.22),
transparent 35%
),
linear-gradient(
110deg,
#183a2e 0%,
#285542 53%,
#747868 100%
);
overflow: hidden;
}
.nwhc-hero::after {
content: "";
position: absolute;
inset: 0;
opacity: .16;
background:
radial-gradient(
circle at 78% 50%,
rgba(255,255,255,.18) 0,
rgba(255,255,255,.18) 1px,
transparent 2px
);
background-size: 25px 25px;
pointer-events: none;
}
.nwhc-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(8,37,29,.65),
rgba(0,0,0,.03)
);
pointer-events: none;
}
.nwhc-hero-inner {
position: relative;
z-index: 2;
width: calc(100% - 60px);
max-width: 1180px;
min-height: 430px;
margin: 0 auto;
padding: 52px 0 84px;
display: flex;
align-items: center;
box-sizing: border-box;
}
.nwhc-hero-copy {
width: 100%;
max-width: 820px;
}
.nwhc-kicker {
color: #e2b650;
font-size: 14px;
font-weight: 700;
letter-spacing: 1.8px;
}
.nwhc-kicker-line {
width: 30px;
height: 2px;
margin: 12px 0 15px;
background: #e2b650;
}
.nwhc-title {
margin: 0;
color: #ffffff;
font-family: Georgia, "Times New Roman", serif;
font-size: 56px;
font-weight: 500;
line-height: 1.04;
text-shadow: 0 2px 8px rgba(0,0,0,.22);
}
.nwhc-hero-description {
max-width: 680px;
margin-top: 23px;
color: #ffffff;
font-size: 16px;
font-weight: 500;
line-height: 1.5;
}
/* ==========================================================
PROJECT INFO
========================================================== */
.nwhc-info-wrap {
position: relative;
z-index: 5;
width: calc(100% - 60px);
max-width: 1180px;
margin: -50px auto 0;
}
.nwhc-info-strip {
display: grid;
grid-template-columns:
.85fr
.95fr
1.35fr
1.4fr
.65fr;
background: #ffffff;
border: 1px solid rgba(35,73,47,.10);
border-radius: 17px;
box-shadow: 0 12px 28px rgba(0,0,0,.10);
overflow: hidden;
}
.nwhc-info-item {
min-height: 140px;
padding: 22px 19px;
border-right: 1px solid #e5ddcf;
box-sizing: border-box;
}
.nwhc-info-item:last-child {
border-right: none;
}
.nwhc-info-icon {
width: 34px;
height: 34px;
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #23492f;
border: 2px solid #23492f;
border-radius: 50%;
font-size: 16px;
}
.nwhc-info-label {
margin-bottom: 7px;
color: #23492f;
font-size: 10px;
font-weight: 800;
letter-spacing: .4px;
}
.nwhc-info-value {
color: #343b37;
font-size: 12px;
line-height: 1.45;
}
/* ==========================================================
CONTENT
========================================================== */
.nwhc-content {
width: calc(100% - 60px);
max-width: 1180px;
margin: 29px auto 0;
box-sizing: border-box;
}
.nwhc-panel {
background: rgba(255,255,255,.46);
border: 1px solid #e3dacb;
border-radius: 12px;
box-sizing: border-box;
}
/* HEADINGS */
.nwhc-heading-row {
display: flex;
align-items: center;
gap: 11px;
margin: 0 0 16px;
}
.nwhc-section-icon {
width: 39px;
height: 39px;
flex: 0 0 39px;
display: flex;
align-items: center;
justify-content: center;
background: #23492f;
color: #ffffff;
border-radius: 50%;
font-size: 16px;
}
.nwhc-heading {
color: #23492f;
font-family: Georgia, "Times New Roman", serif;
font-size: 23px;
font-weight: 500;
line-height: 1.2;
}
/* ==========================================================
OVERVIEW
========================================================== */
.nwhc-overview {
display: grid;
grid-template-columns: 235px 1fr;
gap: 30px;
padding: 25px;
}
.nwhc-overview-text p,
.nwhc-outcomes-text p {
margin: 0 0 13px !important;
color: #343b37;
font-size: 13px;
line-height: 1.6;
}
.nwhc-overview-text p:last-child,
.nwhc-outcomes-text p:last-child {
margin-bottom: 0 !important;
}
/* ==========================================================
OBJECTIVES + THEMES
========================================================== */
.nwhc-two-column {
width: 100%;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 18px;
margin-top: 18px;
}
.nwhc-two-column > .nwhc-panel {
width: calc(50% - 9px);
flex: 1 1 0;
padding: 22px 24px;
}
/* OBJECTIVES */
.nwhc-number-item {
display: grid;
grid-template-columns: 27px 1fr;
gap: 12px;
align-items: start;
margin-bottom: 12px;
color: #343b37;
font-size: 12px;
line-height: 1.45;
}
.nwhc-number-item:last-child {
margin-bottom: 0;
}
.nwhc-number {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: #23492f;
color: #ffffff;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
}
/* THEMES */
.nwhc-theme-grid {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 13px 20px;
}
.nwhc-theme {
min-height: 44px;
padding: 8px 12px;
display: flex;
align-items: center;
justify-content: center;
background: #e7ebe6;
border: 1px solid rgba(35,73,47,.06);
border-radius: 24px;
color: #29362f;
font-size: 11.5px;
font-weight: 500;
line-height: 1.3;
text-align: center;
box-sizing: border-box;
}
.nwhc-theme-wide {
grid-column: span 2;
}
/* ==========================================================
ACTIVITIES
========================================================== */
.nwhc-activities {
margin-top: 18px;
padding: 21px 18px 18px;
}
.nwhc-activity-grid {
display: grid;
grid-template-columns: repeat(5,minmax(0,1fr));
gap: 13px;
}
.nwhc-activity-card {
min-height: 140px;
padding: 17px 10px;
display: flex;
flex-direction: column;
align-items: center;
background: #fffdfa;
border: 1px solid #ddd1bf;
border-radius: 6px;
color: #343b37;
font-size: 11px;
line-height: 1.4;
text-align: center;
box-sizing: border-box;
}
.nwhc-activity-icon {
height: 38px;
margin-bottom: 11px;
display: flex;
align-items: center;
justify-content: center;
color: #23492f;
font-size: 27px;
}
/* ==========================================================
OUTCOMES
========================================================== */
.nwhc-outcomes {
width: 100%;
margin-top: 18px;
padding: 24px 26px;
background: #edf1ed;
}
.nwhc-outcomes-text {
width: 100%;
}
/* ==========================================================
TEAM + PARTNERS
========================================================== */
.nwhc-lower-grid {
width: 100%;
display: grid !important;
grid-template-columns: minmax(0,2fr) minmax(290px,1fr) !important;
gap: 18px;
margin-top: 18px;
align-items: stretch !important;
}
.nwhc-team {
grid-column: 1 !important;
grid-row: 1 !important;
}
.nwhc-partners {
grid-column: 2 !important;
grid-row: 1 !important;
}
.nwhc-team,
.nwhc-partners {
width: 100%;
margin: 0 !important;
padding: 21px 18px 18px;
box-sizing: border-box;
}
/* RESEARCH TEAM */
.nwhc-team-grid {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 15px;
}
.nwhc-person {
min-height: 155px;
padding: 17px 9px;
background: #fffdfa;
border: 1px solid #ddd1bf;
border-radius: 7px;
text-align: center;
box-sizing: border-box;
}
.nwhc-avatar {
width: 50px;
height: 50px;
margin: 0 auto 11px;
display: flex;
align-items: center;
justify-content: center;
background: #e3ebe4;
color: #78977f;
border-radius: 50%;
font-size: 28px;
}
.nwhc-person-name {
margin-bottom: 7px;
color: #2e3531;
font-size: 11.5px;
font-weight: 700;
line-height: 1.3;
}
.nwhc-person-role {
color: #4b544f;
font-size: 10.5px;
line-height: 1.4;
}
/* PARTNERS */
.nwhc-partner-item {
display: grid;
grid-template-columns: 45px 1fr;
gap: 11px;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid rgba(35,73,47,.13);
}
.nwhc-partner-item:last-child {
border-bottom: none;
}
.nwhc-partner-symbol {
width: 41px;
height: 41px;
display: flex;
align-items: center;
justify-content: center;
background: #23492f;
color: #ffffff;
border-radius: 50%;
font-size: 9px;
font-weight: 700;
}
.nwhc-partner-item strong,
.nwhc-partner-item span {
display: block;
}
.nwhc-partner-item strong {
color: #23492f;
font-size: 11px;
}
.nwhc-partner-item span {
margin-top: 3px;
color: #5b645e;
font-size: 10px;
}
/* ==========================================================
RESPONSIVE
========================================================== */
@media (max-width: 900px) {
.nwhc-title {
font-size: 47px;
}
.nwhc-info-strip {
grid-template-columns: repeat(2,minmax(0,1fr));
}
.nwhc-info-wide {
grid-column: span 2;
}
.nwhc-activity-grid {
grid-template-columns: repeat(3,minmax(0,1fr));
}
.nwhc-lower-grid {
grid-template-columns: 1fr !important;
}
.nwhc-team {
grid-column: 1 !important;
grid-row: 1 !important;
}
.nwhc-partners {
grid-column: 1 !important;
grid-row: 2 !important;
}
}
@media (max-width: 700px) {
.nwhc-two-column {
flex-direction: column !important;
}
.nwhc-two-column > .nwhc-panel {
width: 100%;
}
.nwhc-overview {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.nwhc-hero {
min-height: 420px;
}
.nwhc-hero-inner {
width: calc(100% - 36px);
min-height: 420px;
padding: 45px 0 75px;
}
.nwhc-title {
font-size: 38px;
}
.nwhc-hero-description {
font-size: 14px;
}
.nwhc-info-wrap,
.nwhc-content {
width: calc(100% - 30px);
}
.nwhc-info-strip {
grid-template-columns: 1fr;
}
.nwhc-info-wide {
grid-column: auto;
}
.nwhc-info-item {
min-height: auto;
border-right: none;
border-bottom: 1px solid #e5ddcf;
}
.nwhc-theme-grid {
grid-template-columns: 1fr;
}
.nwhc-theme-wide {
grid-column: auto;
}
.nwhc-activity-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
.nwhc-team-grid {
grid-template-columns: 1fr;
}
}
/* ==========================================================
SURGICAL CARE PROJECT
EKOLOGOS WIKI
========================================================== */
/* PAGE RESET */
body:has(.surgical-page) #firstHeading,
body:has(.surgical-page) #contentSub {
display: none !important;
}
body:has(.surgical-page) .mw-parser-output,
body:has(.surgical-page) #mw-content-text {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body:has(.surgical-page) #content,
body:has(.surgical-page) #bodyContent {
margin: 0 !important;
padding: 0 !important;
}
.surgical-page {
width: 100%;
margin: 0;
padding: 0 0 65px;
background: #f8f6f1;
color: #303934;
font-family: "Segoe UI", Roboto, Arial, sans-serif;
box-sizing: border-box;
}
/* ==========================================================
HERO
========================================================== */
.surgical-hero {
position: relative;
width: 100%;
min-height: 430px;
background:
radial-gradient(
circle at 79% 32%,
rgba(184,196,168,.18),
transparent 34%
),
linear-gradient(
110deg,
#16372b 0%,
#28513e 52%,
#66746b 100%
);
overflow: hidden;
}
.surgical-hero::after {
content: "";
position: absolute;
inset: 0;
opacity: .14;
background:
repeating-linear-gradient(
90deg,
transparent 0,
transparent 45px,
rgba(255,255,255,.05) 46px,
transparent 47px
);
pointer-events: none;
}
.surgical-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(7,36,27,.67),
rgba(0,0,0,.03)
);
pointer-events: none;
}
.surgical-hero-inner {
position: relative;
z-index: 2;
width: calc(100% - 60px);
max-width: 1180px;
min-height: 430px;
margin: 0 auto;
padding: 52px 0 84px;
display: flex;
align-items: center;
box-sizing: border-box;
}
.surgical-hero-copy {
width: 100%;
max-width: 880px;
}
.surgical-kicker {
color: #e2b650;
font-size: 14px;
font-weight: 700;
letter-spacing: 1.8px;
}
.surgical-kicker-line {
width: 30px;
height: 2px;
margin: 12px 0 15px;
background: #e2b650;
}
.surgical-title {
margin: 0;
color: #ffffff;
font-family: Georgia, "Times New Roman", serif;
font-size: 48px;
font-weight: 500;
line-height: 1.07;
text-shadow: 0 2px 8px rgba(0,0,0,.22);
}
.surgical-hero-description {
max-width: 690px;
margin-top: 23px;
color: #ffffff;
font-size: 16px;
font-weight: 500;
line-height: 1.5;
}
/* ==========================================================
PROJECT INFO
========================================================== */
.surgical-info-wrap {
position: relative;
z-index: 5;
width: calc(100% - 60px);
max-width: 1180px;
margin: -50px auto 0;
}
.surgical-info-strip {
display: grid;
grid-template-columns:
.8fr
.9fr
1.2fr
1.65fr
.65fr;
background: #ffffff;
border: 1px solid rgba(35,73,47,.10);
border-radius: 17px;
box-shadow: 0 12px 28px rgba(0,0,0,.10);
overflow: hidden;
}
.surgical-info-item {
min-height: 140px;
padding: 22px 19px;
border-right: 1px solid #e5ddcf;
box-sizing: border-box;
}
.surgical-info-item:last-child {
border-right: none;
}
.surgical-info-icon {
width: 34px;
height: 34px;
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #23492f;
border: 2px solid #23492f;
border-radius: 50%;
font-size: 16px;
}
.surgical-info-label {
margin-bottom: 7px;
color: #23492f;
font-size: 10px;
font-weight: 800;
letter-spacing: .4px;
}
.surgical-info-value {
color: #343b37;
font-size: 12px;
line-height: 1.45;
}
/* ==========================================================
MAIN CONTENT
========================================================== */
.surgical-content {
width: calc(100% - 60px);
max-width: 1180px;
margin: 29px auto 0;
box-sizing: border-box;
}
.surgical-panel {
background: rgba(255,255,255,.46);
border: 1px solid #e3dacb;
border-radius: 12px;
box-sizing: border-box;
}
/* HEADINGS */
.surgical-heading-row {
display: flex;
align-items: center;
gap: 11px;
margin: 0 0 16px;
}
.surgical-section-icon {
width: 39px;
height: 39px;
flex: 0 0 39px;
display: flex;
align-items: center;
justify-content: center;
background: #23492f;
color: #ffffff;
border-radius: 50%;
font-size: 16px;
}
.surgical-heading {
color: #23492f;
font-family: Georgia, "Times New Roman", serif;
font-size: 23px;
font-weight: 500;
line-height: 1.2;
}
/* ==========================================================
OVERVIEW
========================================================== */
.surgical-overview {
display: grid;
grid-template-columns: 235px 1fr;
gap: 30px;
padding: 25px;
}
.surgical-overview-text p,
.surgical-outcomes-text p {
margin: 0 0 13px !important;
color: #343b37;
font-size: 13px;
line-height: 1.6;
}
.surgical-overview-text p:last-child,
.surgical-outcomes-text p:last-child {
margin-bottom: 0 !important;
}
/* ==========================================================
OBJECTIVES + THEMES
========================================================== */
.surgical-two-column {
width: 100%;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 18px;
margin-top: 18px;
}
.surgical-two-column > .surgical-panel {
width: calc(50% - 9px);
flex: 1 1 0;
padding: 22px 24px;
}
/* OBJECTIVES */
.surgical-number-item {
display: grid;
grid-template-columns: 27px 1fr;
gap: 12px;
align-items: start;
margin-bottom: 12px;
color: #343b37;
font-size: 12px;
line-height: 1.45;
}
.surgical-number-item:last-child {
margin-bottom: 0;
}
.surgical-number {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: #23492f;
color: #ffffff;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
}
/* THEMES */
.surgical-theme-grid {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 13px 20px;
}
.surgical-theme {
min-height: 44px;
padding: 8px 12px;
display: flex;
align-items: center;
justify-content: center;
background: #e6ebe7;
border: 1px solid rgba(35,73,47,.06);
border-radius: 24px;
color: #29362f;
font-size: 11.5px;
font-weight: 500;
line-height: 1.3;
text-align: center;
box-sizing: border-box;
}
.surgical-theme-wide {
grid-column: span 2;
}
/* ==========================================================
ACTIVITIES
========================================================== */
.surgical-activities {
margin-top: 18px;
padding: 21px 18px 18px;
}
.surgical-activity-grid {
display: grid;
grid-template-columns: repeat(6,minmax(0,1fr));
gap: 13px;
}
.surgical-activity-card {
min-height: 140px;
padding: 17px 10px;
display: flex;
flex-direction: column;
align-items: center;
background: #fffdfa;
border: 1px solid #ddd1bf;
border-radius: 6px;
color: #343b37;
font-size: 11px;
line-height: 1.4;
text-align: center;
box-sizing: border-box;
}
.surgical-activity-icon {
height: 38px;
margin-bottom: 11px;
display: flex;
align-items: center;
justify-content: center;
color: #23492f;
font-size: 27px;
}
/* ==========================================================
OUTCOMES
========================================================== */
.surgical-outcomes {
width: 100%;
margin-top: 18px;
padding: 24px 26px;
background: #edf1ed;
}
.surgical-outcomes-text {
width: 100%;
}
/* ==========================================================
TEAM + PARTNERS
========================================================== */
.surgical-lower-grid {
width: 100%;
display: grid !important;
grid-template-columns: minmax(0,2.25fr) minmax(290px,.9fr) !important;
gap: 18px;
margin-top: 18px;
align-items: stretch !important;
}
.surgical-team {
grid-column: 1 !important;
grid-row: 1 !important;
}
.surgical-partners {
grid-column: 2 !important;
grid-row: 1 !important;
}
.surgical-team,
.surgical-partners {
width: 100%;
margin: 0 !important;
padding: 21px 18px 18px;
box-sizing: border-box;
}
/* TEAM */
.surgical-team-grid {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 14px;
}
.surgical-person {
min-height: 145px;
padding: 16px 8px;
background: #fffdfa;
border: 1px solid #ddd1bf;
border-radius: 7px;
text-align: center;
box-sizing: border-box;
}
.surgical-avatar {
width: 47px;
height: 47px;
margin: 0 auto 10px;
display: flex;
align-items: center;
justify-content: center;
background: #e3ebe4;
color: #78977f;
border-radius: 50%;
font-size: 26px;
}
.surgical-person-name {
margin-bottom: 7px;
color: #2e3531;
font-size: 11px;
font-weight: 700;
line-height: 1.3;
}
.surgical-person-role {
color: #4b544f;
font-size: 10px;
line-height: 1.4;
}
/* PARTNERS */
.surgical-partner-item {
display: grid;
grid-template-columns: 46px 1fr;
gap: 11px;
align-items: center;
padding: 15px 0;
border-bottom: 1px solid rgba(35,73,47,.13);
}
.surgical-partner-item:last-child {
border-bottom: none;
}
.surgical-partner-symbol {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
background: #23492f;
color: #ffffff;
border-radius: 50%;
font-size: 8px;
font-weight: 700;
}
.surgical-partner-item strong,
.surgical-partner-item span {
display: block;
}
.surgical-partner-item strong {
color: #23492f;
font-size: 11px;
line-height: 1.3;
}
.surgical-partner-item span {
margin-top: 3px;
color: #5b645e;
font-size: 10px;
line-height: 1.3;
}
/* ==========================================================
RESPONSIVE
========================================================== */
@media (max-width: 900px) {
.surgical-title {
font-size: 40px;
}
.surgical-info-strip {
grid-template-columns: repeat(2,minmax(0,1fr));
}
.surgical-info-wide {
grid-column: span 2;
}
.surgical-activity-grid {
grid-template-columns: repeat(3,minmax(0,1fr));
}
.surgical-lower-grid {
grid-template-columns: 1fr !important;
}
.surgical-team {
grid-column: 1 !important;
grid-row: 1 !important;
}
.surgical-partners {
grid-column: 1 !important;
grid-row: 2 !important;
}
}
@media (max-width: 700px) {
.surgical-two-column {
flex-direction: column !important;
}
.surgical-two-column > .surgical-panel {
width: 100%;
}
.surgical-overview {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.surgical-hero {
min-height: 430px;
}
.surgical-hero-inner {
width: calc(100% - 36px);
min-height: 430px;
padding: 45px 0 75px;
}
.surgical-title {
font-size: 33px;
}
.surgical-hero-description {
font-size: 14px;
}
.surgical-info-wrap,
.surgical-content {
width: calc(100% - 30px);
}
.surgical-info-strip {
grid-template-columns: 1fr;
}
.surgical-info-wide {
grid-column: auto;
}
.surgical-info-item {
min-height: auto;
border-right: none;
border-bottom: 1px solid #e5ddcf;
}
.surgical-theme-grid {
grid-template-columns: 1fr;
}
.surgical-theme-wide {
grid-column: auto;
}
.surgical-activity-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
.surgical-team-grid {
grid-template-columns: 1fr;
}
}
/* ==========================================================
EKOLOGOS PROJECT PAGE
========================================================== */
body:has(.ekp-page) #firstHeading,
body:has(.ekp-page) #contentSub {
display: none !important;
}
body:has(.ekp-page) .mw-parser-output,
body:has(.ekp-page) #mw-content-text {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body:has(.ekp-page) #content,
body:has(.ekp-page) #bodyContent {
margin: 0 !important;
padding: 0 !important;
}
.ekp-page {
width: 100%;
margin: 0;
padding: 0 0 65px;
background: #f8f6f1;
color: #303934;
font-family: "Segoe UI", Roboto, Arial, sans-serif;
box-sizing: border-box;
}
/* ==========================================================
HERO
========================================================== */
.ekp-hero {
position: relative;
width: 100%;
min-height: 430px;
background:
radial-gradient(
circle at 76% 35%,
rgba(207,177,91,.22),
transparent 34%
),
linear-gradient(
108deg,
#123829 0%,
#24513a 50%,
#65765f 100%
);
overflow: hidden;
}
.ekp-hero::after {
content: "";
position: absolute;
inset: 0;
opacity: .15;
background:
repeating-radial-gradient(
circle at 80% 50%,
rgba(255,255,255,.10) 0,
rgba(255,255,255,.10) 1px,
transparent 2px,
transparent 24px
);
pointer-events: none;
}
.ekp-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(7,36,27,.68),
rgba(0,0,0,.02)
);
pointer-events: none;
}
.ekp-hero-inner {
position: relative;
z-index: 2;
width: calc(100% - 60px);
max-width: 1180px;
min-height: 430px;
margin: 0 auto;
padding: 55px 0 82px;
display: flex;
align-items: center;
box-sizing: border-box;
}
.ekp-hero-copy {
width: 100%;
max-width: 790px;
}
.ekp-kicker {
color: #e2b650;
font-size: 14px;
font-weight: 700;
letter-spacing: 1.8px;
}
.ekp-kicker-line {
width: 30px;
height: 2px;
margin: 12px 0 15px;
background: #e2b650;
}
.ekp-title {
margin: 0;
color: #ffffff;
font-family: Georgia, "Times New Roman", serif;
font-size: 68px;
font-weight: 500;
line-height: 1;
text-shadow: 0 2px 8px rgba(0,0,0,.22);
}
.ekp-hero-subtitle {
max-width: 690px;
margin-top: 23px;
color: #ffffff;
font-size: 17px;
font-weight: 500;
line-height: 1.5;
}
/* ==========================================================
INFO STRIP
========================================================== */
.ekp-info-wrap {
position: relative;
z-index: 5;
width: calc(100% - 60px);
max-width: 1180px;
margin: -50px auto 0;
}
.ekp-info-strip {
display: grid;
grid-template-columns:
1.1fr
.7fr
1.5fr
1.2fr
.7fr;
background: #ffffff;
border: 1px solid rgba(35,73,47,.10);
border-radius: 17px;
box-shadow: 0 12px 28px rgba(0,0,0,.10);
overflow: hidden;
}
.ekp-info-item {
min-height: 140px;
padding: 22px 19px;
border-right: 1px solid #e5ddcf;
box-sizing: border-box;
}
.ekp-info-item:last-child {
border-right: none;
}
.ekp-info-icon {
width: 34px;
height: 34px;
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #23492f;
border: 2px solid #23492f;
border-radius: 50%;
font-size: 16px;
}
.ekp-info-label {
margin-bottom: 7px;
color: #23492f;
font-size: 10px;
font-weight: 800;
letter-spacing: .4px;
}
.ekp-info-value {
color: #343b37;
font-size: 12px;
line-height: 1.45;
}
/* ==========================================================
CONTENT
========================================================== */
.ekp-content {
width: calc(100% - 60px);
max-width: 1180px;
margin: 29px auto 0;
box-sizing: border-box;
}
.ekp-panel {
background: rgba(255,255,255,.46);
border: 1px solid #e3dacb;
border-radius: 12px;
box-sizing: border-box;
}
/* HEADINGS */
.ekp-heading-row {
display: flex;
align-items: center;
gap: 11px;
margin: 0 0 16px;
}
.ekp-section-icon {
width: 39px;
height: 39px;
flex: 0 0 39px;
display: flex;
align-items: center;
justify-content: center;
background: #23492f;
color: #ffffff;
border-radius: 50%;
font-size: 16px;
}
.ekp-heading {
color: #23492f;
font-family: Georgia, "Times New Roman", serif;
font-size: 23px;
font-weight: 500;
line-height: 1.2;
}
/* ==========================================================
OVERVIEW
========================================================== */
.ekp-overview {
display: grid;
grid-template-columns: 220px 1fr;
gap: 30px;
padding: 25px;
}
.ekp-overview-text p,
.ekp-feature-card p {
margin: 0 0 13px !important;
color: #343b37;
font-size: 13px;
line-height: 1.6;
}
.ekp-overview-text p:last-child,
.ekp-feature-card p:last-child {
margin-bottom: 0 !important;
}
/* ==========================================================
OBJECTIVES + COORDINATION
========================================================== */
.ekp-two-column {
width: 100%;
display: grid !important;
grid-template-columns: repeat(2,minmax(0,1fr)) !important;
gap: 18px;
margin-top: 18px;
}
.ekp-two-column > .ekp-panel {
padding: 22px 24px;
}
.ekp-number-item {
display: grid;
grid-template-columns: 27px 1fr;
gap: 12px;
align-items: start;
margin-bottom: 12px;
color: #343b37;
font-size: 12px;
line-height: 1.45;
}
.ekp-number-item:last-child {
margin-bottom: 0;
}
.ekp-number {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: #23492f;
color: #ffffff;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
}
/* COORDINATION DETAILS */
.ekp-detail-item {
padding: 12px 0;
border-bottom: 1px solid rgba(35,73,47,.12);
}
.ekp-detail-item:last-child {
border-bottom: none;
}
.ekp-detail-item strong,
.ekp-detail-item span {
display: block;
}
.ekp-detail-item strong {
margin-bottom: 3px;
color: #23492f;
font-size: 11px;
}
.ekp-detail-item span {
color: #515b55;
font-size: 11.5px;
line-height: 1.4;
}
/* ==========================================================
ACTIVITIES
========================================================== */
.ekp-activities {
margin-top: 18px;
padding: 21px 18px 18px;
}
.ekp-activity-grid {
display: grid;
grid-template-columns: repeat(6,minmax(0,1fr));
gap: 13px;
}
.ekp-activity-card {
min-height: 135px;
padding: 17px 10px;
display: flex;
flex-direction: column;
align-items: center;
background: #fffdfa;
border: 1px solid #ddd1bf;
border-radius: 6px;
color: #343b37;
font-size: 11px;
line-height: 1.4;
text-align: center;
box-sizing: border-box;
}
.ekp-activity-icon {
height: 38px;
margin-bottom: 11px;
display: flex;
align-items: center;
justify-content: center;
color: #23492f;
font-size: 27px;
}
/* ==========================================================
EDUCATION / KNOWLEDGE / PUBLIC ENGAGEMENT
========================================================== */
.ekp-three-grid {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 18px;
margin-top: 18px;
}
.ekp-feature-card {
padding: 22px 22px;
}
/* ==========================================================
PARTNERS + RELATED TOPICS
========================================================== */
.ekp-lower-grid {
display: grid;
grid-template-columns: minmax(0,2fr) minmax(280px,.8fr);
gap: 18px;
margin-top: 18px;
align-items: stretch;
}
.ekp-partners,
.ekp-topics {
padding: 21px 18px 18px;
}
/* PARTNERS */
.ekp-partner-grid {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 0 22px;
}
.ekp-partner-item {
display: grid;
grid-template-columns: 46px 1fr;
gap: 11px;
align-items: center;
padding: 13px 0;
border-bottom: 1px solid rgba(35,73,47,.12);
}
.ekp-partner-symbol {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
background: #23492f;
color: #ffffff;
border-radius: 50%;
font-size: 9px;
font-weight: 700;
}
.ekp-partner-item strong,
.ekp-partner-item span {
display: block;
}
.ekp-partner-item strong {
color: #23492f;
font-size: 11px;
line-height: 1.3;
}
.ekp-partner-item span {
margin-top: 3px;
color: #5b645e;
font-size: 10px;
}
/* RELATED TOPICS */
.ekp-topic-list > div {
margin-bottom: 10px;
}
.ekp-topic-list a,
.ekp-topic-list a:visited {
display: block;
padding: 10px 14px;
background: #e7ebe6;
border-radius: 20px;
color: #23492f !important;
font-size: 11.5px;
font-weight: 500;
text-align: center;
text-decoration: none !important;
}
.ekp-topic-list a:hover {
background: #dce5dc;
}
/* ==========================================================
RESPONSIVE
========================================================== */
@media (max-width: 900px) {
.ekp-title {
font-size: 56px;
}
.ekp-info-strip {
grid-template-columns: repeat(2,minmax(0,1fr));
}
.ekp-info-wide {
grid-column: span 2;
}
.ekp-activity-grid {
grid-template-columns: repeat(3,minmax(0,1fr));
}
.ekp-three-grid {
grid-template-columns: 1fr;
}
.ekp-lower-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
.ekp-two-column {
grid-template-columns: 1fr !important;
}
.ekp-overview {
grid-template-columns: 1fr;
}
.ekp-partner-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.ekp-hero {
min-height: 390px;
}
.ekp-hero-inner {
width: calc(100% - 36px);
min-height: 390px;
padding: 45px 0 75px;
}
.ekp-title {
font-size: 46px;
}
.ekp-hero-subtitle {
font-size: 14px;
}
.ekp-info-wrap,
.ekp-content {
width: calc(100% - 30px);
}
.ekp-info-strip {
grid-template-columns: 1fr;
}
.ekp-info-wide {
grid-column: auto;
}
.ekp-info-item {
min-height: auto;
border-right: none;
border-bottom: 1px solid #e5ddcf;
}
.ekp-activity-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
}
/* ==========================================================
EKOLOGOS PAGE — CLEAN LAYOUT FIX
MediaWiki-safe flex arrangement
========================================================== */
/* Remove MediaWiki-generated empty paragraph elements */
.ekp-page .ekp-two-column > p,
.ekp-page .ekp-three-grid > p,
.ekp-page .ekp-lower-grid > p {
display: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Make sure panels are never floated */
.ekp-page .ekp-panel {
float: none !important;
}
/* ==========================================================
OBJECTIVES + COORDINATION
========================================================== */
.ekp-page .ekp-two-column {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
width: 100% !important;
gap: 18px !important;
margin: 18px 0 0 !important;
padding: 0 !important;
align-items: stretch !important;
box-sizing: border-box !important;
}
.ekp-page .ekp-two-column > .ekp-panel {
flex: 1 1 0 !important;
width: 50% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 22px 24px !important;
box-sizing: border-box !important;
grid-column: auto !important;
grid-row: auto !important;
}
/* ==========================================================
ACTIVITIES
========================================================== */
.ekp-page .ekp-activities {
width: 100% !important;
margin: 18px 0 0 !important;
box-sizing: border-box !important;
}
.ekp-page .ekp-activity-grid {
display: grid !important;
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
gap: 13px !important;
width: 100% !important;
}
/* ==========================================================
EDUCATION + KNOWLEDGE + PUBLIC ENGAGEMENT
========================================================== */
.ekp-page .ekp-three-grid {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
width: 100% !important;
gap: 18px !important;
margin: 18px 0 0 !important;
padding: 0 !important;
align-items: stretch !important;
box-sizing: border-box !important;
}
.ekp-page .ekp-three-grid > .ekp-panel {
flex: 1 1 0 !important;
width: 33.333% !important;
min-width: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 22px !important;
grid-column: auto !important;
grid-row: auto !important;
box-sizing: border-box !important;
}
/* ==========================================================
PARTNERS + RELATED TOPICS
========================================================== */
.ekp-page .ekp-lower-grid {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
width: 100% !important;
gap: 18px !important;
margin: 18px 0 0 !important;
padding: 0 !important;
align-items: stretch !important;
box-sizing: border-box !important;
}
/* Partner Institutions — larger left box */
.ekp-page .ekp-partners {
flex: 2 1 0 !important;
width: auto !important;
min-width: 0 !important;
margin: 0 !important;
grid-column: auto !important;
grid-row: auto !important;
}
/* Related Topics — smaller right box */
.ekp-page .ekp-topics {
flex: 1 1 0 !important;
width: auto !important;
min-width: 260px !important;
margin: 0 !important;
grid-column: auto !important;
grid-row: auto !important;
}
/* Partner institutions within left box */
.ekp-page .ekp-partner-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0 24px !important;
width: 100% !important;
}
/* ==========================================================
TABLET
========================================================== */
@media (max-width: 900px) {
.ekp-page .ekp-activity-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.ekp-page .ekp-three-grid {
flex-wrap: wrap !important;
}
.ekp-page .ekp-three-grid > .ekp-panel {
width: calc(50% - 9px) !important;
flex: 1 1 calc(50% - 9px) !important;
}
.ekp-page .ekp-lower-grid {
flex-direction: column !important;
}
.ekp-page .ekp-partners,
.ekp-page .ekp-topics {
width: 100% !important;
min-width: 0 !important;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 700px) {
.ekp-page .ekp-two-column {
flex-direction: column !important;
}
.ekp-page .ekp-two-column > .ekp-panel {
width: 100% !important;
}
.ekp-page .ekp-three-grid {
flex-direction: column !important;
}
.ekp-page .ekp-three-grid > .ekp-panel {
width: 100% !important;
flex: 0 0 auto !important;
}
.ekp-page .ekp-partner-grid {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 520px) {
.ekp-page .ekp-activity-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
/* Main Page: mark missing pages as In development */
/* =========================================================
MAIN PAGE — INDIVIDUAL "IN DEVELOPMENT" BADGES
Himalayas is intentionally excluded
========================================================= */
/* Badge */
body.page-Main_Page a[href*="Arctic"]::after,
body.page-Main_Page a[href*="Amazonia"]::after,
body.page-Main_Page a[href*="South_India"]::after,
body.page-Main_Page a[href*="Southeast_Asia"]::after,
body.page-Main_Page a[href*="All_Regions"]::after,
body.page-Main_Page a[href*="Biodiversity"]::after,
body.page-Main_Page a[href*="Water_Systems"]::after,
body.page-Main_Page a[href*="Fire_%26_Land_Management"]::after,
body.page-Main_Page a[href*="Forest_Knowledge"]::after,
body.page-Main_Page a[href*="Fisheries"]::after,
body.page-Main_Page a[href*="Animal_Relations"]::after,
body.page-Main_Page a[href*="Climate_Change"]::after,
body.page-Main_Page a[href*="Agriculture"]::after,
body.page-Main_Page a[href*="Traditional_Medicine"]::after,
body.page-Main_Page a[href*="Dreams_%26_Cosmologies"]::after {
content: "In development";
position: absolute;
top: 7px;
right: 7px;
z-index: 10;
padding: 3px 7px;
border-radius: 10px;
background: #eee8d8;
color: #6b5a2b;
font-size: 9px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
}
/* =========================================================
MAIN PAGE — IN DEVELOPMENT BADGES
Applied only to cards explicitly marked in Main Page HTML
========================================================= */
body.page-Main_Page .eko-card,
body.page-Main_Page .theme-card {
position: relative !important;
}
/* Badge */
body.page-Main_Page .eko-card > .dev-badge,
body.page-Main_Page .theme-card > .dev-badge {
position: absolute !important;
top: 7px !important;
right: 7px !important;
left: auto !important;
bottom: auto !important;
z-index: 50 !important;
display: inline-block !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 3px 7px !important;
background: #eee8d8 !important;
color: #6b5a2b !important;
border: 1px solid #e0d7bd !important;
border-radius: 10px !important;
font-family: Arial, sans-serif !important;
font-size: 9px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
text-align: center !important;
text-decoration: none !important;
white-space: nowrap !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
pointer-events: none !important;
}
/* =========================================================
MAIN PAGE — FINAL IN DEVELOPMENT BADGES
========================================================= */
/* Stop old automatic MediaWiki red-link badges causing duplicates */
body.page-Main_Page a.new::after {
content: none !important;
display: none !important;
}
body.page-Main_Page a.new {
opacity: 1 !important;
}
/* Cards which have a badge in the upper-right corner */
body.page-Main_Page .eko-card,
body.page-Main_Page .theme-card,
body.page-Main_Page .collection-card {
position: relative !important;
}
body.page-Main_Page .eko-card > .dev-badge,
body.page-Main_Page .theme-card > .dev-badge,
body.page-Main_Page .collection-card > .dev-badge {
position: absolute !important;
top: 7px !important;
right: 7px !important;
left: auto !important;
bottom: auto !important;
z-index: 50 !important;
display: inline-block !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 3px 7px !important;
background: #eee8d8 !important;
color: #6b5a2b !important;
border: 1px solid #e0d7bd !important;
border-radius: 10px !important;
font-family: Arial, sans-serif !important;
font-size: 9px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
text-align: center !important;
white-space: nowrap !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
pointer-events: none !important;
}
/* Badges beside ordinary text links */
body.page-Main_Page .dev-inline-badge {
display: inline-block !important;
width: auto !important;
margin-left: 5px !important;
padding: 2px 6px !important;
background: #eee8d8 !important;
color: #6b5a2b !important;
border: 1px solid #e0d7bd !important;
border-radius: 10px !important;
font-family: Arial, sans-serif !important;
font-size: 8px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
vertical-align: middle !important;
white-space: nowrap !important;
text-decoration: none !important;
pointer-events: none !important;
}
/* Featured article badges — especially compact */
body.page-Main_Page .dev-article-badge {
margin-left: 4px !important;
padding: 1px 5px !important;
font-size: 7px !important;
}
/* Keep each footer link together with its badge */
body.page-Main_Page .dev-footer-item {
display: inline-flex !important;
align-items: center !important;
gap: 3px !important;
white-space: nowrap !important;
}
/* Footer badges need to be very small */
body.page-Main_Page .dev-footer-badge {
margin-left: 1px !important;
padding: 1px 4px !important;
font-size: 6px !important;
}
/* =========================================================
EKOLOGOS MAIN PAGE — CLEAN IN DEVELOPMENT LABELS
========================================================= */
/* Prevent old automatic red-link labels */
body.page-Main_Page a.new::after {
content: none !important;
display: none !important;
}
body.page-Main_Page a.new {
opacity: 1 !important;
}
/* ---------------------------------------------------------
STANDARD BADGE
--------------------------------------------------------- */
body.page-Main_Page .dev-badge,
body.page-Main_Page .dev-inline-badge {
box-sizing: border-box !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
height: auto !important;
padding: 3px 7px !important;
margin: 0 !important;
background: #f1ead7 !important;
border: 1px solid #ded3b5 !important;
border-radius: 999px !important;
color: #78652d !important;
font-family: Arial, sans-serif !important;
font-size: 8px !important;
font-weight: 600 !important;
line-height: 1 !important;
letter-spacing: 0.15px !important;
text-transform: none !important;
text-decoration: none !important;
white-space: nowrap !important;
box-shadow: none !important;
pointer-events: none !important;
}
/* ---------------------------------------------------------
REGION + THEME + COLLECTION CARDS
Badge floats neatly in top-right corner
--------------------------------------------------------- */
body.page-Main_Page .eko-card,
body.page-Main_Page .theme-card,
body.page-Main_Page .collection-card {
position: relative !important;
}
body.page-Main_Page .eko-card > .dev-badge,
body.page-Main_Page .theme-card > .dev-badge,
body.page-Main_Page .collection-card > .dev-badge {
position: absolute !important;
top: 8px !important;
right: 8px !important;
left: auto !important;
bottom: auto !important;
z-index: 30 !important;
margin: 0 !important;
background: rgba(248, 244, 232, 0.96) !important;
box-shadow:
0 1px 3px rgba(0,0,0,0.10) !important;
}
/* Collection badge slightly stronger over photographs */
body.page-Main_Page .collection-card > .dev-badge {
top: 9px !important;
right: 9px !important;
background: rgba(250, 247, 238, 0.97) !important;
}
/* ---------------------------------------------------------
FEATURED ARTICLES
Small badge sits neatly after title
--------------------------------------------------------- */
body.page-Main_Page .home-article-title {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
column-gap: 5px !important;
row-gap: 3px !important;
}
body.page-Main_Page .home-article-title .dev-article-badge {
flex: 0 0 auto !important;
padding: 2px 5px !important;
font-size: 7px !important;
vertical-align: middle !important;
}
/* ---------------------------------------------------------
BROWSE / ABOUT / PROJECT LINKS
--------------------------------------------------------- */
body.page-Main_Page .section-title-right,
body.page-Main_Page .theme-title-right,
body.page-Main_Page .home-browse-articles,
body.page-Main_Page .home-info-link {
display: flex !important;
align-items: center !important;
gap: 6px !important;
flex-wrap: wrap !important;
}
body.page-Main_Page .section-title-right .dev-inline-badge,
body.page-Main_Page .theme-title-right .dev-inline-badge,
body.page-Main_Page .home-browse-articles .dev-inline-badge,
body.page-Main_Page .home-info-link .dev-inline-badge {
margin-left: 2px !important;
}
/* ---------------------------------------------------------
COMMUNITY BUTTON
Put badge above-right instead of after button text
--------------------------------------------------------- */
body.page-Main_Page .home-community-button {
position: relative !important;
display: inline-block !important;
}
body.page-Main_Page .home-community-button .dev-inline-badge {
position: absolute !important;
top: -12px !important;
right: -10px !important;
z-index: 20 !important;
margin: 0 !important;
font-size: 7px !important;
}
/* ---------------------------------------------------------
FOOTER
Compact badges to avoid visual clutter
--------------------------------------------------------- */
body.page-Main_Page .home-footer-links {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: wrap !important;
gap: 14px 22px !important;
}
body.page-Main_Page .dev-footer-item {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
white-space: nowrap !important;
}
body.page-Main_Page .dev-footer-badge {
padding: 2px 4px !important;
font-size: 6px !important;
opacity: 0.88 !important;
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media (max-width: 700px) {
body.page-Main_Page .dev-badge,
body.page-Main_Page .dev-inline-badge {
font-size: 7px !important;
}
body.page-Main_Page .eko-card > .dev-badge,
body.page-Main_Page .theme-card > .dev-badge,
body.page-Main_Page .collection-card > .dev-badge {
top: 5px !important;
right: 5px !important;
}
body.page-Main_Page .home-footer-links {
gap: 10px 14px !important;
}
}
