/* ========================================================================== 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 6. Home Publications cards: uniform height ========================================================================== */ /* -------------------------------------------------------------------------- 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"): keep the gap under the heading's blue rule equal to the 9px rhythm between the links below it, so each column reads as one even list. The extra 15px padding-top comes from the mu-plugin's override.css; because that rule is also !important and equally specific, zero it explicitly here. */ .jws_main_menu li.menu-item-design-mega_menu_full_width > .sub-menu > li > a { margin-bottom: 9px !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: 0 !important; padding-top: 0 !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; } } /* -------------------------------------------------------------------------- 6. HOME "PUBLICATIONS" CARDS — one uniform card height. The shortcode prints the complete author list, and some citations carry 40+ names. That made the cards range from 150px to 255px tall and pushed the Publications column far below the Policy Briefs panel next to it. Clamping the title and the author line count fixes every card to the same height at any width (a fixed author *count* would still wrap differently per breakpoint). The full text stays in the markup for search engines. `display` needs !important to beat the shortcode's inline `display:block`. -------------------------------------------------------------------------- */ .kwtrp-home-publication__title, .kwtrp-home-publication__authors { display: -webkit-box !important; -webkit-box-orient: vertical; overflow: hidden; } .kwtrp-home-publication__title { -webkit-line-clamp: 2; line-clamp: 2; } .kwtrp-home-publication__authors { -webkit-line-clamp: 1; line-clamp: 1; } /* The first card previously sat flush against the "Publications" heading. 35px both gives the heading room and lines the card stack up exactly with the top of the Policy Briefs panel beside it, whose heading sits ~9px lower. With the author line clamped to 1 the stack is 562px tall vs the panel's 564px, so the two columns now start and finish together. */ .kwtrp-home-publications { margin-top: 35px; }