/* ========================================================================== KWTRP Overrides 2 — June 2026 round Layered after kwtrp-overrides (mu-plugin) + Elementor. 1. How-We-Work mega menu: single row of 5 columns, enlarged 2. Mega-menu column heading spacing 3. Header: tighten the People -> logo gap 4. Blue Publications/Policy-Briefs band: keep the curve + padding on big screens 5. Cookie-consent banner ========================================================================== */ /* -------------------------------------------------------------------------- 1 + 2. MEGA MENU (desktop) — 5 columns on ONE row, enlarged, with spacing. The panel width/left is set by enhance.js (wider than the mu-plugin's 1180); here we stop the 5th column wrapping and give the columns/headings room. -------------------------------------------------------------------------- */ ul.sub-menu > li.menu-item-has-children > a span { font-weight: 700 !important; } /* Discovery and Development, Vaccines, Ethics, etc. */ ul.sub-menu > li.menu-item-has-children > ul.sub-menu a span { font-weight: 400 !important; } .wpuf-ud-user-details .wpuf-ud-user-name:nth-of-type(3) { display: none !important; } @media (min-width: 1025px) { .jws_main_menu li.menu-item-design-mega_menu_full_width > .sub-menu { flex-wrap: nowrap !important; /* never push a column to a 2nd row */ gap: 0 22px !important; padding: 30px 46px 34px !important; /* enlarge the panel breathing room */ align-items: stretch !important; } /* Each first-level child = one equal column (5 across) */ .jws_main_menu li.menu-item-design-mega_menu_full_width > .sub-menu > li { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; padding: 0 16px !important; } /* (2) Column heading (e.g. "Strategic Focus") -> first item ("Discovery and Development"): add clear margin so the heading isn't crammed onto its list. */ .jws_main_menu li.menu-item-design-mega_menu_full_width > .sub-menu > li > a { margin-bottom: 16px !important; padding-bottom: 12px !important; line-height: 1.3 !important; } .jws_main_menu li.menu-item-design-mega_menu_full_width > .sub-menu > li > .sub-menu { margin-top: 25px !important; } .jws_main_menu li.menu-item-design-mega_menu_full_width > .sub-menu > li > .sub-menu > li { margin-bottom: 9px !important; } .jws_main_menu li.menu-item-design-mega_menu_full_width > .sub-menu > li > .sub-menu > li:last-child { margin-bottom: 0 !important; } } /* -------------------------------------------------------------------------- 3. HEADER — tighten the gap between "People" (end of the left menu) and the centred logo, freeing room on the right of the bar. The left menu sits in an over-wide column; right-aligning its items pulls "People" toward the logo. `:has(+ logo-column)` targets the column immediately before the logo column. -------------------------------------------------------------------------- */ @media (min-width: 1025px) { .elementor-16 .elementor-column:has(+ .elementor-element-3258a9f) ul.nav, .elementor-16 .elementor-column:has(+ .elementor-element-3258a9f) .nav { justify-content: flex-end !important; /* Leaves a tidy ~50px gap to the logo (vs the original ~217px), balancing the logo->How-We-Work gap on the right and freeing space for a new item. */ padding-right: 150px !important; } } /* -------------------------------------------------------------------------- 4. BLUE PUBLICATIONS / POLICY-BRIEFS BAND (.elementor-element-d26a80f) The blue + the wave curve are baked into publications.png (1600x758), applied `background-size: cover`. On wide screens `cover` scales it up and crops the top/bottom waves off, flattening the band to a rectangle. Use `100% 100%` so the whole curved image (both waves) always shows, add a matching blue fallback colour, and give the content comfortable, contained padding on big screens. -------------------------------------------------------------------------- */ @media (min-width: 1025px) { .elementor-element-d26a80f { background-size: 100% 100% !important; /* always show the full curve */ background-repeat: no-repeat !important; background-position: center center !important; background-color: #2b7fb8 !important; /* matches publications.png blue */ } /* Keep the inner content centred and comfortably padded on big screens so the cards clear the top/bottom waves and don't drift to one side. */ .elementor-element-d26a80f > .e-con-inner { max-width: 1240px !important; margin-left: auto !important; margin-right: auto !important; padding-top: 56px !important; padding-bottom: 56px !important; padding-left: 24px !important; padding-right: 24px !important; box-sizing: border-box; } } /* -------------------------------------------------------------------------- 5. COOKIE-CONSENT BANNER (markup injected in the footer by the plugin) -------------------------------------------------------------------------- */ .kwtrp-cookie[hidden] { display: none !important; } .kwtrp-cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483000; /* above sticky header, accessibility widget */ background: #ffffff; box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.18); border-top: 3px solid #00b3e3; transform: translateY(110%); transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); } .kwtrp-cookie.is-visible { transform: translateY(0); } .kwtrp-cookie__inner { max-width: 1240px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: space-between; } .kwtrp-cookie__text { flex: 1 1 460px; min-width: 260px; color: #2a2a2a; } .kwtrp-cookie__text strong { display: block; font-size: 16px; color: #0a3d62; margin-bottom: 4px; } .kwtrp-cookie__text p { margin: 0; font-size: 13.5px; line-height: 1.6; } .kwtrp-cookie__text a { color: #1a9bd7; text-decoration: underline; } .kwtrp-cookie__actions { flex: 0 0 auto; display: flex; gap: 12px; align-items: center; } .kwtrp-cookie__btn { appearance: none; border: 0; cursor: pointer; font-size: 14px; font-weight: 600; padding: 11px 26px; border-radius: 6px; line-height: 1; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .kwtrp-cookie__btn--accept { background: #00b3e3; color: #fff; } .kwtrp-cookie__btn--accept:hover { background: #0098c2; } .kwtrp-cookie__btn--decline { background: transparent; color: #4a4a4a; border: 1px solid #c4c9ce; } .kwtrp-cookie__btn--decline:hover { border-color: #8a9099; color: #1a1a1a; } @media (max-width: 600px) { .kwtrp-cookie__inner { padding: 14px 16px; gap: 12px; } .kwtrp-cookie__actions { width: 100%; } .kwtrp-cookie__btn { flex: 1 1 auto; padding: 12px 16px; } }