|
|
| Line 1: |
Line 1: |
| /* ==========================================================
| |
| 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;
| |
| } | | } |
|
| |
|
| Line 10,342: |
Line 70: |
| } | | } |
| /* ========================================================= | | /* ========================================================= |
| HIMALAYAS — MISSING PAGES / IN DEVELOPMENT | | NAGALAND & INDO–MYANMAR HIGHLANDS — MISSING PAGES / IN DEVELOPMENT |
| ========================================================= */ | | ========================================================= */ |
|
| |
|
| Line 10,375: |
Line 103: |
|
| |
|
| box-shadow: none !important; | | box-shadow: none !important; |
| }
| |
| .region-grid {
| |
| display: grid !important;
| |
| grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
| |
| gap: 24px !important;
| |
| width: 100% !important;
| |
| } | | } |
|
| |
|
| .region-grid .eko-card {
| | /* ========================================================== |
| width: 100% !important;
| | PLACE HUB CARDS — SMALL-SCREEN HEIGHT |
| max-width: none !important;
| | ========================================================== */ |
| min-width: 0 !important; | | @media (max-width: 600px) { |
| }
| | .page-Main_Page .homepage-grid .eko-card img, |
| | | .page-Main_Page .homepage-grid .eko-card .mw-file-element { |
| .region-grid .eko-card img { | | height: 200px !important; |
| width: 100% !important;
| | } |
| height: 210px; | |
| object-fit: cover;
| |
| } | | } |
