/* ============================================================ Mountains ADAPT — premium banner + landing page (v2) Native HTML hero, UNEP-grade. 2026-08-12 ============================================================ */ :root{ --ma-blue:#009EDB; --ma-blue-deep:#00679A; --ma-blue-ink:#005F86; --ma-navy:#12313F; --ma-glacier:#EAF7FC; --ma-mist:#F4F8FA; --ma-border:#D7E6EC; --ma-text:#172A33; --ma-muted:#637884; --ma-sans:'IBM Plex Sans',-apple-system,Segoe UI,Roboto,Arial,sans-serif; --ma-serif:'Noto Serif',Georgia,'Times New Roman',serif; } /* ============================================================ SHARED HERO/BANNER COMPONENT ============================================================ */ .sdc-ma-banner{ width:100%; max-width:1240px; margin:8px auto 34px; padding:0 24px; box-sizing:border-box; font-family:var(--ma-sans); } .sdc-ma-banner *{box-sizing:border-box;} .sdc-ma-banner__link{display:block;text-decoration:none;color:#fff;} .sdc-ma-banner__inner{ position:relative; display:flex; min-height:360px; border-radius:10px; overflow:hidden; background:linear-gradient(135deg,#0aa6e6 0%,var(--ma-blue) 42%,var(--ma-blue-deep) 100%); box-shadow:0 18px 45px rgba(0,64,92,.18); border:1px solid rgba(255,255,255,.10); transition:transform .4s ease, box-shadow .4s ease; } .sdc-ma-banner__link:hover .sdc-ma-banner__inner{ transform:translateY(-3px); box-shadow:0 26px 60px rgba(0,64,92,.26); } /* photo, right side, diagonal left edge */ .sdc-ma-banner__photo{ position:absolute;top:0;right:0;bottom:0; width:60%; background-size:cover; background-position:58% 38%; /* centre on the presenter's face */ clip-path:polygon(6% 0,100% 0,100% 100%,0% 100%); z-index:1; transition:transform .5s ease; } .sdc-ma-banner__photo::after{ /* subtle blend only near the seam */ content:"";position:absolute;inset:0; background:linear-gradient(100deg,rgba(0,103,154,.55) 0%,rgba(0,103,154,0) 26%); } /* bottom scrim so the caption stays legible over the busy photo */ .sdc-ma-banner__photo::before{ content:"";position:absolute;inset:auto 0 0 0;height:44%;z-index:1;pointer-events:none; background:linear-gradient(to top,rgba(0,18,32,.62),rgba(0,18,32,0)); } .sdc-ma-banner__link:hover .sdc-ma-banner__photo{transform:scale(1.015);} /* caption — sits at the bottom of the photo (nested inside __photo) on every breakpoint */ .sdc-ma-banner__cap{ position:absolute;left:16px;right:16px;bottom:10px;z-index:3; text-align:right; font-size:11.5px;line-height:1.45;font-style:italic;color:rgba(255,255,255,.95); text-shadow:0 1px 3px rgba(0,0,0,.7); } /* content, left side */ .sdc-ma-banner__content{ position:relative;z-index:3; width:48%; padding:38px 40px; display:flex;flex-direction:column;align-items:flex-start; justify-content:center; } .sdc-ma-banner__logo{height:52px;width:auto;margin:0 0 22px;display:block;} .sdc-ma-banner__eyebrow{ font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:rgba(255,255,255,.92);margin:0 0 14px; } .sdc-ma-banner__title{ font-family:var(--ma-sans); font-size:clamp(26px,2.6vw,38px);line-height:1.1;font-weight:700; margin:0;color:#fff;max-width:480px;letter-spacing:-.01em;text-transform:none !important; } .sdc-ma-banner__sub{ font-size:clamp(15px,1.4vw,18px);font-weight:500;color:rgba(255,255,255,.9); margin:12px 0 0;max-width:440px; } .sdc-ma-banner__date{ display:inline-block;margin:20px 0 0; font-size:16px;font-weight:600;color:#fff; padding-top:14px;border-top:1px solid rgba(255,255,255,.28); } .sdc-ma-banner__cta{ display:inline-flex;align-items:center;gap:9px;margin-top:26px; background:#fff;color:var(--ma-blue-ink);font-weight:700;font-size:15px; padding:13px 22px;border-radius:5px; box-shadow:0 6px 18px rgba(0,0,0,.14); transition:background .2s ease, transform .2s ease, box-shadow .2s ease; } .sdc-ma-banner__cta em{font-style:normal;transition:transform .2s ease;} .sdc-ma-banner__link:hover .sdc-ma-banner__cta{background:var(--ma-glacier);} .sdc-ma-banner__link:hover .sdc-ma-banner__cta em{transform:translateX(4px);} /* homepage banner: match the "Our Partners" content width (1140). The adjacent sections each add ~72px, so -12px top/bottom nets an equal ~60px visual gap above and below the card. */ .sdc-ma-home-banner{margin:-12px auto !important;max-width:1188px;} .sdc-ma-banner__static{display:block;color:#fff;} /* 60/40 blue-to-photo split; tighter content; photo cover with the right (white shelf) cropped out */ .sdc-ma-home-banner .sdc-ma-banner__content{width:60%;padding:28px 40px;} .sdc-ma-home-banner .sdc-ma-banner__logo{height:80px;margin-bottom:16px;} .sdc-ma-home-banner .sdc-ma-banner__eyebrow{margin-bottom:8px;} .sdc-ma-home-banner .sdc-ma-banner__title{font-size:26px;} .sdc-ma-home-banner .sdc-ma-banner__sub{margin-top:8px;} .sdc-ma-home-banner .sdc-ma-banner__date{margin-top:14px;padding-top:12px;} .sdc-ma-home-banner .sdc-ma-banner__photo{width:42%;background-position:20% 30%;} /* landing hero = the homepage "Call" card, but its blue box is set to the SAME width as the content/text below it (no side padding, max-width 1180 like .sdc-ma-wrap) so the edges align. */ .sdc-ma-hero-card{margin:50px auto 0 !important;max-width:1180px !important;padding-left:0 !important;padding-right:0 !important;} /* live only: TheGem's overlay header pulls content up, so the card needs a bigger top offset to clear it */ body.wp-theme-thegem-elementor .sdc-ma-hero-card{margin:138px auto 0 !important;} /* ============================================================ LANDING PAGE ============================================================ */ /* keep the site nav + header band; hide ONLY the duplicate page-title text (d82020d) */ body.page-id-36929 .elementor-element-d82020d, body.page-id-36929 .elementor-widget-theme-page-title{display:none !important;} /* CSS fallback so header sub-menus open on hover even if the widget JS is late/absent here */ body.page-id-36929 .menu-item-has-children:hover > .sub-menu, body.page-id-36929 li.menu-item-has-children:hover > ul.sub-menu{ display:block !important;visibility:visible !important;opacity:1 !important; pointer-events:auto !important;z-index:99999 !important; width:max-content !important;min-width:200px !important;max-width:320px !important; overflow:visible !important; } /* let each sub-menu row use the full auto width (default fixed 156px clips long labels) */ body.page-id-36929 .sub-menu > li{width:100% !important;overflow:visible !important;} body.page-id-36929 .sub-menu > li > a{white-space:nowrap !important;width:auto !important;overflow:visible !important;} /* #page/#main have overflow:clip which kills position:sticky — allow it on this page only */ body.page-id-36929 #page, body.page-id-36929 #content, body.page-id-36929 #main, body.page-id-36929 .site-main{overflow:visible !important;} .sdc-ma-page{ background:#fff;color:var(--ma-text); font-family:var(--ma-serif);font-size:18px;line-height:1.75; } .sdc-ma-page *{box-sizing:border-box;} .sdc-ma-wrap{max-width:1180px;margin:0 auto;padding:0 24px;} /* full-bleed hero variant */ .sdc-ma-banner.is-hero{max-width:none;margin:0;padding:0;} .sdc-ma-banner.is-hero .sdc-ma-banner__inner{ min-height:720px;border-radius:0;border:0;box-shadow:none; /* tall enough that the content never overflows/clips at narrow widths */ } .sdc-ma-banner.is-hero .sdc-ma-banner__content{ width:44%;padding:96px 48px 72px calc((100% - 1180px)/2 + 24px); justify-content:flex-start; /* top-align so padding-top acts as a real top margin for the logo */ } /* keep the title + sub inside the blue zone (don't run under the diagonal photo seam) */ .sdc-ma-banner.is-hero .sdc-ma-banner__title{font-size:clamp(26px,2.2vw,34px);max-width:340px;} .sdc-ma-banner.is-hero .sdc-ma-banner__sub{max-width:400px;} .sdc-ma-banner.is-hero .sdc-ma-banner__date, .sdc-ma-banner.is-hero .sdc-ma-banner__actions{max-width:400px;} @media(max-width:1240px){ /* TheGem's overlay header pulls #main (and this hero) up under it at narrower widths; give the content extra top padding so the UN logo always clears the header band. */ .sdc-ma-banner.is-hero .sdc-ma-banner__content{padding-left:5%;padding-top:150px;} } .sdc-ma-banner.is-hero .sdc-ma-banner__photo{width:60%;} .sdc-ma-banner.is-hero .sdc-ma-banner__logo{height:86px;margin-bottom:24px;} .sdc-ma-banner__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px;} /* buttons (hero has real links) */ .sdc-ma-btn{ display:inline-flex;align-items:center;gap:9px;justify-content:center; font-family:var(--ma-sans);font-weight:700;font-size:15px;text-decoration:none; padding:14px 26px;border-radius:5px;cursor:pointer; transition:background .2s ease, transform .2s ease, box-shadow .2s ease, color .2s ease; } .sdc-ma-btn--white{background:#fff;color:var(--ma-blue-ink);box-shadow:0 6px 18px rgba(0,0,0,.14);} .sdc-ma-btn--white:hover{background:var(--ma-glacier);color:var(--ma-blue-ink);transform:translateY(-2px);} .sdc-ma-btn--ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.7);} .sdc-ma-btn--ghost:hover{background:rgba(255,255,255,.12);color:#fff;} .sdc-ma-btn--blue{background:var(--ma-blue);color:#fff;box-shadow:0 8px 22px rgba(0,158,219,.32);} .sdc-ma-btn--blue:hover{background:var(--ma-blue-ink);color:#fff;transform:translateY(-2px);} .sdc-ma-btn em{font-style:normal;transition:transform .2s ease;} .sdc-ma-btn:hover em{transform:translateX(4px);} /* non-clickable label variant — the homepage banner links nowhere */ .sdc-ma-btn--nolink{cursor:default;} .sdc-ma-btn--nolink:hover{transform:none;background:#fff;color:var(--ma-blue-ink);} .sdc-ma-btn--nolink:hover em{transform:none;} /* body typography */ .sdc-ma-eyebrow-dark{ font-family:var(--ma-sans);font-size:13px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--ma-blue-ink);margin:0 0 14px;display:block; } .sdc-ma-page h1{ font-family:var(--ma-sans);font-size:clamp(30px,4vw,46px);line-height:1.12; font-weight:700;color:var(--ma-navy);margin:0 0 16px;letter-spacing:-.015em;text-transform:none; } .sdc-ma-page h2{ font-family:var(--ma-sans);font-size:clamp(24px,2.4vw,30px);font-weight:700; color:var(--ma-navy);margin:0 0 18px;letter-spacing:-.01em;text-transform:none; } .sdc-ma-row h4,.sdc-ma-card .v,.sdc-ma-banner__sub{text-transform:none;} .sdc-ma-main p{margin:0 0 20px;color:var(--ma-text);} .sdc-ma-main strong{color:var(--ma-navy);font-weight:600;} /* intro */ .sdc-ma-intro{padding:64px 0 8px;} .sdc-ma-lede{font-family:var(--ma-serif);font-size:22px;line-height:1.6;color:var(--ma-muted);margin:0;max-width:820px;} /* two-column body */ .sdc-ma-grid{ display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:80px; padding:56px 0; } /* aside stretches full height so the sticky card can travel (no empty gap on scroll) */ .sdc-ma-grid > aside{height:100%;} .sdc-ma-main{max-width:760px;} .sdc-ma-main section{margin-bottom:64px;} .sdc-ma-main section:last-child{margin-bottom:0;} /* sticky sidebar card */ .sdc-ma-card{ position:sticky;top:28px; background:var(--ma-mist);border:1px solid var(--ma-border);border-radius:8px; padding:30px 28px;font-family:var(--ma-sans); } .sdc-ma-card h3{margin:0 0 20px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--ma-muted);font-weight:700;} .sdc-ma-facts{list-style:none;margin:0 0 24px;padding:0;} .sdc-ma-facts li{padding:14px 0;border-top:1px solid var(--ma-border);} .sdc-ma-facts li:first-child{border-top:0;padding-top:0;} .sdc-ma-facts .k{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ma-muted);margin-bottom:4px;font-weight:700;} .sdc-ma-facts .v{display:block;font-size:16px;color:var(--ma-text);font-weight:600;line-height:1.4;} .sdc-ma-status{color:#12924e;} .sdc-ma-card .sdc-ma-btn{width:100%;} /* numbered activity rows */ .sdc-ma-rows{margin:8px 0 0;border-top:1px solid var(--ma-border);} .sdc-ma-row{display:grid;grid-template-columns:64px 1fr;gap:24px;padding:28px 0;border-bottom:1px solid var(--ma-border);} .sdc-ma-row .n{font-family:var(--ma-sans);font-size:26px;font-weight:700;color:var(--ma-blue);line-height:1;} .sdc-ma-row h4{font-family:var(--ma-sans);font-size:20px;font-weight:700;color:var(--ma-navy);margin:0 0 8px;} .sdc-ma-row p{margin:0;font-size:16px;color:var(--ma-muted);line-height:1.65;} /* evidence photo block */ .sdc-ma-evidence{margin:8px 0 0;border-radius:10px;overflow:hidden;position:relative;} .sdc-ma-evidence img{display:block;width:100%;height:auto;aspect-ratio:12/8;object-fit:cover;object-position:center 20%;} .sdc-ma-evidence figcaption{font-family:var(--ma-sans);font-size:13px;color:var(--ma-muted);font-style:italic;padding:12px 4px 0;margin:0;} /* funders chips */ .sdc-ma-funders{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;font-family:var(--ma-sans);} .sdc-ma-chip{background:var(--ma-glacier);border:1px solid var(--ma-border);border-radius:8px;padding:12px 16px;font-size:13.5px;color:var(--ma-text);} .sdc-ma-chip b{color:var(--ma-blue-ink);} /* final CTA band */ .sdc-ma-cta-band{ margin-top:16px; background:linear-gradient(120deg,var(--ma-navy) 0%,var(--ma-blue-ink) 100%); color:#fff; } .sdc-ma-cta-band .sdc-ma-wrap{ display:flex;align-items:center;justify-content:space-between;gap:28px; padding:64px 24px;flex-wrap:wrap; } .sdc-ma-cta-band h2{color:#fff;margin:0 0 6px;font-size:28px;} .sdc-ma-cta-band p{margin:0;color:rgba(255,255,255,.82);font-family:var(--ma-sans);font-size:16px;} /* landing: hide TheGem/Elementor title-area date + title meta (they bleed over the hero logo) */ body.page-id-36929 .elementor-widget-post-info, body.page-id-36929 .elementor-post-info, body.page-id-36929 .elementor-widget-theme-post-info{display:none !important;} /* general Overview info (shown directly above the tabs, NOT a tab) */ .sdc-ma-overview{padding:60px 0 4px;font-family:var(--ma-serif);font-size:18px;line-height:1.75;color:var(--ma-text);} .sdc-ma-overview p{margin:0 0 20px;max-width:900px;} .sdc-ma-overview a{color:var(--ma-blue-ink);text-decoration:underline;} /* ============================================================ UNEP-STYLE TABS (Application guideline / FAQs / Booklets) Pure CSS (radio-hack) — no JS dependency. ============================================================ */ .sdc-ma-tabsec{padding:20px 0 76px;} .sdc-ma-tabs{position:relative;} .sdc-ma-tabin{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;} .sdc-ma-tablist{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--ma-border);margin:0 0 34px;} .sdc-ma-tab{ font-family:var(--ma-sans);font-size:18px;font-weight:600;color:var(--ma-muted); padding:14px 22px;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px; transition:color .15s ease,border-color .15s ease;user-select:none;white-space:nowrap; } .sdc-ma-tab:hover{color:var(--ma-blue-ink);} .sdc-ma-panel{display:none;font-family:var(--ma-serif);font-size:18px;line-height:1.75;color:var(--ma-text);} .sdc-ma-panel p{margin:0 0 20px;} .sdc-ma-panel h2{font-family:var(--ma-sans);color:var(--ma-navy);margin:0 0 20px;} .sdc-ma-panel a{color:var(--ma-blue-ink);text-decoration:underline;} /* active tab + matching panel */ #sdc-ma-t1:checked ~ .sdc-ma-tablist label[for=sdc-ma-t1], #sdc-ma-t2:checked ~ .sdc-ma-tablist label[for=sdc-ma-t2], #sdc-ma-t3:checked ~ .sdc-ma-tablist label[for=sdc-ma-t3], #sdc-ma-t4:checked ~ .sdc-ma-tablist label[for=sdc-ma-t4], #sdc-ma-t5:checked ~ .sdc-ma-tablist label[for=sdc-ma-t5], #sdc-ma-t6:checked ~ .sdc-ma-tablist label[for=sdc-ma-t6]{color:var(--ma-blue-ink);border-bottom-color:var(--ma-blue);} #sdc-ma-t1:checked ~ .sdc-ma-panels .sdc-ma-panel--1, #sdc-ma-t2:checked ~ .sdc-ma-panels .sdc-ma-panel--2, #sdc-ma-t3:checked ~ .sdc-ma-panels .sdc-ma-panel--3, #sdc-ma-t4:checked ~ .sdc-ma-panels .sdc-ma-panel--4, #sdc-ma-t5:checked ~ .sdc-ma-panels .sdc-ma-panel--5, #sdc-ma-t6:checked ~ .sdc-ma-panels .sdc-ma-panel--6{display:block;} .sdc-ma-tabin:focus-visible ~ .sdc-ma-tablist label{outline:2px solid var(--ma-blue);outline-offset:2px;} /* the application link is intentionally NOT a link yet (Caucasus call not open) */ .sdc-ma-applink{color:var(--ma-blue-ink);font-weight:600;text-decoration:underline;text-decoration-style:dotted;cursor:help;} /* multilingual "apply in your language" links (Armenian / Georgian / Azerbaijani) — each language is its OWN separated card */ .sdc-ma-applangs{margin:0 0 24px;max-width:900px;display:flex;flex-direction:column;gap:14px;font-family:var(--ma-sans);} .sdc-ma-applangs p{margin:0;padding:16px 20px;background:var(--ma-mist);border:1px solid var(--ma-border);border-left:3px solid var(--ma-blue-ink);border-radius:6px;font-size:16px;line-height:1.55;} .sdc-ma-applangs a{color:var(--ma-blue-ink);font-weight:600;text-decoration:underline;} .sdc-ma-contact{color:var(--ma-muted);} /* PDF download rows */ .sdc-ma-doc{display:flex;align-items:center;gap:16px;padding:16px 20px;border:1px solid var(--ma-border);border-radius:8px;background:var(--ma-mist);text-decoration:none !important;color:var(--ma-text);margin:0 0 12px;transition:border-color .15s,box-shadow .15s;font-family:var(--ma-sans);} .sdc-ma-doc:hover{border-color:var(--ma-blue);box-shadow:0 6px 18px rgba(0,158,219,.12);} .sdc-ma-doc__ic{flex:0 0 auto;font-size:12px;font-weight:700;color:#fff;background:#d0342c;border-radius:4px;padding:6px 8px;letter-spacing:.02em;} .sdc-ma-doc__label{flex:1;font-size:16px;font-weight:600;color:var(--ma-navy);} .sdc-ma-doc__dl{flex:0 0 auto;font-size:14px;font-weight:700;color:var(--ma-blue-ink);} .sdc-ma-doc-empty{font-family:var(--ma-sans);color:var(--ma-muted);font-size:16px;background:var(--ma-mist);border:1px dashed var(--ma-border);border-radius:8px;padding:20px 22px;margin:0;} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:960px){ /* homepage banner: drop the desktop -60px pull-up, add clean vertical rhythm */ .sdc-ma-home-banner{margin:18px auto 46px !important;padding:0 14px;} .sdc-ma-banner__inner, .sdc-ma-banner.is-hero .sdc-ma-banner__inner{flex-direction:column;min-height:0;} .sdc-ma-home-banner .sdc-ma-banner__content, .sdc-ma-banner__content, .sdc-ma-banner.is-hero .sdc-ma-banner__content{width:100%;padding:30px 24px 30px;} .sdc-ma-home-banner .sdc-ma-banner__photo, .sdc-ma-banner__photo, .sdc-ma-banner.is-hero .sdc-ma-banner__photo{ position:relative;width:100%;height:250px;clip-path:none;order:-1; background-position:center 26%; } .sdc-ma-banner__photo::after{background:linear-gradient(100deg,rgba(0,103,154,.35),transparent 55%);} .sdc-ma-home-banner .sdc-ma-banner__logo{height:52px;margin-bottom:16px;} .sdc-ma-grid{grid-template-columns:1fr;gap:40px;} .sdc-ma-card{position:static;} .sdc-ma-intro{padding:44px 22px 4px;} .sdc-ma-cta-band .sdc-ma-wrap{padding:44px 24px;} /* these sections zero-out the wrap's side padding for desktop edge-alignment; on narrow screens that leaves the text jammed against the viewport — restore it */ .sdc-ma-overview{padding-left:22px;padding-right:22px;} .sdc-ma-tabsec{padding-left:22px;padding-right:22px;} } @media(max-width:600px){ .sdc-ma-page{font-size:17px;} .sdc-ma-home-banner{padding:0 12px;} .sdc-ma-banner__title{font-size:23px;line-height:1.16;} .sdc-ma-banner__sub{font-size:15px;} .sdc-ma-banner__date{font-size:15px;margin-top:16px;} .sdc-ma-banner__cap{font-size:11px;} .sdc-ma-row{grid-template-columns:44px 1fr;gap:16px;} .sdc-ma-tab{font-size:16px;padding:12px 14px;} .sdc-ma-doc{flex-wrap:wrap;gap:10px;} .sdc-ma-tabsec{padding:40px 22px 56px;} } @media(prefers-reduced-motion:reduce){ .sdc-ma-banner__inner,.sdc-ma-banner__photo,.sdc-ma-btn,.sdc-ma-banner__cta,.sdc-ma-banner__cta em,.sdc-ma-btn em{transition:none !important;} .sdc-ma-banner__link:hover .sdc-ma-banner__inner{transform:none;} .sdc-ma-banner__link:hover .sdc-ma-banner__photo{transform:none;} } /* Post 36932 "Mountains ADAPT Small Grants" — theme default, EXCEPT restore standard bullets on the content list (the theme resets list markers to none, so the pasted