/* Glue layer on top of the vetted legacy stylesheets. Keep minimal: legacy CSS handles the look; this covers what the rewritten vanilla JS / fresh markup needs (mobile menu, cookie bar, rebuilt footer). */ /* WCAG font-size switcher scale: template.js adds .fsizeNN to ; our custom font-sizes use calc(base * var(--fz)) so they enlarge/shrink with A-/A/A+ (legacy font_switcher.css only covers stock elements, not our menu/stats/footer). */ body { --fz: 1; } body.fsize70 { --fz: .7; } body.fsize80 { --fz: .8; } body.fsize90 { --fz: .9; } body.fsize110 { --fz: 1.1; } body.fsize120 { --fz: 1.2; } body.fsize130 { --fz: 1.3; } /* burger button (legacy used DJ-MegaMenu's own mobile menu) */ .jm-burger { display: none; background: transparent; border: 0; padding: 10px; cursor: pointer; position: absolute; right: 10px; top: 6px; z-index: 500; } .jm-burger span { display: block; width: 26px; height: 3px; margin: 5px 0; background: #fff; transition: transform .2s ease, opacity .2s ease; } .jm-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .jm-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .jm-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } @media (max-width: 800px) { .jm-burger { display: block; } #jm-main-nav .dj-megamenu { display: none; } /* legacy `@media(max-width:1199px){#jm-top-menu{display:none}}` hides the menu's parent on mobile, so toggling only .dj-megamenu left it invisible — reveal the parent when open too. */ #jm-main-nav.open #jm-top-menu { display: block !important; } #jm-main-nav.open .dj-megamenu { display: block; } #jm-main-nav.open .dj-megamenu li.dj-up { float: none; display: block; } #jm-main-nav.open .dj-megamenu .dj-subwrap { position: static; visibility: visible; top: auto; } #jm-main-nav.open .dj-megamenu .dj-subwrap-in { width: auto !important; } #jm-main-nav.open .dj-megamenu .dj-subcol { width: auto !important; float: none; } } /* submenu column sizing (DJ JS set inline widths; give sane CSS defaults) */ .dj-megamenu .dj-subwrap { min-width: 260px; } .dj-megamenu .dj-subwrap-in { padding: 8px 0; } .dj-megamenu .dj-submenu { list-style: none; margin: 0; padding: 0; } .dj-megamenu .dj-submenu > li { position: relative; } /* rebuilt footer (live footer was a Smart Slider; this is its clean rebuild) */ .iimcb-footer { display: flex; flex-wrap: wrap; gap: 24px; padding: 36px 0 12px; } .iimcb-footer .f-col { flex: 1 1 200px; } .iimcb-footer h5 { color: #fff; font-family: Montserrat, sans-serif; letter-spacing: .05em; } .iimcb-footer .f-logo { max-width: 140px; height: auto; margin-bottom: 12px; } .iimcb-footer ul { list-style: none; margin: 0; padding: 0; } .iimcb-footer li { margin: 4px 0; } .iimcb-footer a { color: #cfe0f5; text-decoration: none; } .iimcb-footer a:hover { color: #fff; text-decoration: underline; } .f-social a { display: inline-block; margin-right: 10px; font-size: 22px; } .f-copy { flex-basis: 100%; border-top: 1px solid rgba(255,255,255,.25); padding: 10px 0; font-size: 12px; } /* cookie notice — mirrors the abandoned mod_cookiesaccept (#ca_banner) 1:1. Base styles transcribed from the live /modules/mod_cookiesaccept/screen.css; przez.png background tile = solid white @ alpha .9; navy .accept = live customcss override. */ #ca_banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 16777270; width: 100%; min-height: 80px; margin: 0 auto; padding: 10px 0; background: rgba(255, 255, 255, 0.9); border-width: 1px 0; border-style: solid; border-color: #fff; box-shadow: 0 0 40px #444; text-align: center; text-shadow: none; } #ca_banner h2, #ca_banner p { margin: 4px 0; padding: 0; line-height: 1.2; color: #000; float: none; } #ca_banner h2 { display: block !important; font-size: 20px; font-weight: bold; } /* override global h2{display:none} hack */ #ca_banner p { font-size: 14px; } #ca_banner .infoplus a { text-decoration: underline; color: #0089f2; font-weight: bold; cursor: pointer; } #ca_banner .accept { display: block; width: 120px; margin: 5px auto; padding: 3px; font-size: 14px; font-family: inherit; line-height: 1.4; cursor: pointer; color: #fff; text-shadow: none; background: #042963; border: 1px solid #042963; border-radius: 0; } #ca_banner .accept:hover { background: transparent; color: #000; } /* Site Map (replaces the abandoned com_osmap) — nested menu tree. Aggressive, scoped resets: the content area inherits legacy list styling (pseudo-bullets, text-indent, padded/blocked anchors) that misaligns parent items. We neutralize all of it and rebuild a plain indented disc list. */ .sitemap-tree ul { list-style: none !important; margin: 0 0 8px 0 !important; padding: 0 0 0 24px !important; } .sitemap-tree > ul { padding-left: 4px !important; } .sitemap-tree li { display: list-item !important; list-style: disc outside !important; margin: 3px 0 !important; padding: 0 !important; text-indent: 0 !important; background: none !important; float: none !important; clear: none !important; width: auto !important; } .sitemap-tree li::before, .sitemap-tree li::after { content: none !important; display: none !important; } .sitemap-tree li a, .sitemap-tree li .sitemap-group { display: inline !important; float: none !important; padding: 0 !important; margin: 0 !important; text-indent: 0 !important; background: none !important; line-height: 1.6; } .sitemap-tree a { text-decoration: none; } .sitemap-tree a:hover { text-decoration: underline; } .sitemap-tree .sitemap-group { font-weight: 600; } /* items hidden in the live DJ menu (dj-hideitem equivalents) */ .dj-megamenu li.itemid1070, .dj-megamenu li.itemid1088 { display: none; } /* language switcher inline in the header settings bar */ #jm-page-settings .mod-languages { display: inline-block; } #jm-page-settings .mod-languages ul { list-style: none; margin: 0; padding: 0; display: inline; } #jm-page-settings .mod-languages li { display: inline-block; margin-left: 10px; } #jm-page-settings .mod-languages a { color: #fff; font-size: 20px; text-decoration: none; } /* the legacy -370px pull made room for the slider-based footer; our rebuilt footer is normal-flow, so neutralize it (child.css loads last) */ #jm-main { margin-bottom: 0 !important; } #jm-footer { background: #14305c; color: #fff; } /* --- ARCHITECTURE NEUTRALIZER ---------------------------------------------- The legacy custom CSS positions the header absolutely and pulls content/menu up by hundreds of px to interleave with Smart Slider blocks we no longer run. Replace that with a static flow that looks the same. child.css loads last. */ .sticky-bar #jm-bar { position: static !important; max-height: none !important; padding-bottom: 0 !important; background: #123274 !important; /* solid navy, matches live (no globe texture) */ z-index: auto !important; } #jm-main-nav { position: static !important; top: 0 !important; background: transparent !important; border-top: 0 !important; } /* menu strip shares the navy backdrop */ #jm-main-nav, #jm-top-menu { background: transparent !important; } #jm-bar { padding-top: 18px; } #jm-content-top { position: static !important; top: 0 !important; } #jm-main { margin: 0 !important; } #jm-main, #jm-maincontent { position: static !important; } #jm-footer, #jm-footer-in, #jm-copyrights { position: static !important; height: auto !important; min-height: 0 !important; top: 0 !important; margin: 0 !important; } /* keep the navy band behind logo row AND the menu row */ #jm-allpage > header#jm-bar { padding-bottom: 0; } .dj-megamenu li.dj-up a.dj-up_a { color: #fff; border-bottom-color: transparent; } .dj-megamenu li.dj-up:hover a.dj-up_a, .dj-megamenu li.dj-up.active a.dj-up_a { color: #fff; border-bottom-color: #fff; background: transparent; } /* neutralize the slider-era content pulls as well (see header note above) */ #jm-maincontent { position: static !important; top: 0 !important; display: block !important; margin-top: 0 !important; } #jm-content { margin-bottom: 0 !important; margin-top: 0 !important; } #jm-content-top { margin-bottom: 0 !important; } #jm-content-bottom { position: static !important; } /* compact, horizontal WCAG/settings bar like on live (two short rows) */ #jm-page-settings { color: #fff; text-align: right; padding-top: 6px; } #jm-page-settings ul.wcag { list-style: none; margin: 0; padding: 0; } #jm-page-settings ul.wcag > li { display: inline-block; vertical-align: middle; margin-left: 12px; } #jm-page-settings ul.wcag > li.top-bip { display: block; margin-top: 14px; } #jm-page-settings ul.wcag a { color: #fff; text-decoration: none; } #jm-page-settings .resizer-label .separator, #jm-page-settings .contrast-label .separator { font-size: 11px; text-transform: uppercase; color: #cfe0f5; } #jm-page-settings .search { display: inline-block; vertical-align: middle; } #jm-page-settings .search .inputbox { background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.6); color: #fff; width: 150px; } #jm-page-settings .search .btn-search { background: transparent; border: 0; color: #fff; cursor: pointer; } #jm-page-settings .custom, #jm-page-settings .custom p { display: inline-block; margin: 0; vertical-align: middle; } #jm-page-settings .mod-languages { vertical-align: middle; } #jm-bar { padding-top: 6px; } #jm-logo-nav { padding-top: 12px !important; padding-bottom: 8px !important; background: transparent !important; } #jm-logo-nav .jm-logo img, #jm-logo img { max-height: 120px; width: auto; } /* --- HEADER HARD RESET ------------------------------------------------------ The consolidated legacy CSS distorts the logo/settings zone with absolute hacks tuned to slider layers. Reset and lay the header out deliberately. */ #jm-logo-sitedesc #jm-logo img { transform: none !important; position: static !important; padding: 0 !important; margin: 0 !important; top: 0 !important; left: 0 !important; max-width: 330px !important; max-height: 110px !important; width: auto !important; } #jm-logo-nav { min-height: 0 !important; } #jm-logo-nav-in > .row-fluid { display: flex !important; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; } #jm-logo-nav-in > .row-fluid > .span4, #jm-logo-nav-in > .row-fluid > .span8 { float: none !important; width: auto !important; margin: 0 !important; } #jm-logo-nav .nav.menu ul, #jm-logo-nav .nav.menu { position: static !important; right: auto !important; top: 0 !important; } #jm-allpage #jm-page-settings .nav.menu .contrast { top: 0 !important; line-height: 1.6 !important; } #jm-allpage #jm-page-settings .nav.menu li.top-bip { margin-top: 10px !important; border-left: 0 !important; max-height: none !important; line-height: 1.6 !important; } #jm-allpage #jm-page-settings .nav.menu .resizer { line-height: 1.6 !important; } #jm-allpage #jm-page-settings .nav.menu .resizer a, #jm-allpage #jm-page-settings .nav.menu .contrast a { border-color: rgba(255,255,255,.5); color: #fff; } #jm-bar { padding-top: 0 !important; } #jm-logo-nav { padding-top: 14px !important; padding-bottom: 6px !important; } #jm-top-menu { padding: 0 !important; float: none !important; text-align: left; } /* fixed-header compensation not needed (header is static now) */ .sticky-bar #jm-allpage { padding-top: 0 !important; } /* language switcher: plain "PL"/"EN" text link */ #jm-page-settings .mod-languages h3, #jm-page-settings .mod-languages .pretext { display: none; } /* J5 core a11y utilities (we don't load Joomla's system CSS) */ .visually-hidden, .element-invisible { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } .visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } /* header right column: keep one tight right-aligned block, no wrap */ #jm-logo-nav-in > .row-fluid { flex-wrap: nowrap !important; } #jm-logo-nav-in > .row-fluid > .span4 { flex: 0 0 auto; text-align: left; } #jm-logo-nav-in > .row-fluid > .span8 { flex: 1 1 auto; } #jm-page-settings { float: none !important; } #jm-allpage #jm-page-settings .nav.menu li.top-bip { text-align: right; } #jm-logo-nav-in { padding: 0 40px 0 10px; } /* breadcrumbs (J5 markup) styled like live */ #jm-breadcrumbs .breadcrumb { list-style: none; margin: 0 0 10px; padding: 8px 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: 13px; background: transparent; } #jm-breadcrumbs .breadcrumb a { color: #1a3d6d; text-decoration: none; } #jm-breadcrumbs .breadcrumb .divider { margin: 0 6px; color: #999; } #jm-breadcrumbs .jm-module { box-shadow: none !important; background: transparent !important; } /* footer: contain legacy floats/offsets inside our rebuilt block */ #jm-footer .jm-module-raw { float: none !important; margin: 0 !important; width: auto !important; } #jm-footer .row-fluid, #jm-footer [class*="span"], #jm-footer [class*="offset"] { float: none !important; width: auto !important; margin-left: 0 !important; } #jm-footer-in { max-width: 1370px; margin: 0 auto !important; padding: 0 35px; } /* beat the per-page (body.itemid-N) slider-era pulls on specificity */ body[class*="itemid-"] #jm-main, body[class*="itemid-"] #jm-bar + #jm-main { margin-bottom: 0 !important; margin-top: 0 !important; } body[class*="itemid-"] #jm-maincontent, body[class*="itemid-"] #jm-content-top { position: static !important; top: 0 !important; } /* contain floats: main is a BFC, footer always clears */ #jm-main { overflow: hidden; } #jm-footer { clear: both !important; overflow: hidden; } /* footer fades in from transparent on first scroll into view (JS adds .footer-prefade then .footer-in). No JS / no IntersectionObserver -> footer just stays visible. */ #jm-footer.footer-prefade { opacity: 0; transition: opacity .9s ease; } #jm-footer.footer-prefade.footer-in { opacity: 1; } /* footer typography: undo legacy line-height:0 and absolute icon hacks. (line-height + margins are governed by the authoritative footer block at end of file, which scales them in em so the text tracks the band height) */ #jm-footer { padding: 0 !important; margin: 0 !important; } #jm-footer .iimcb-footer * { position: static !important; } #jm-copyrights { float: none !important; } /* BIP scheme: white header, dark controls (style 13) */ body.scheme-bip .sticky-bar #jm-bar, .scheme-bip #jm-bar { background: #fff !important; border-bottom: 1px solid #e2e2e2; } .scheme-bip #jm-page-settings, .scheme-bip #jm-page-settings ul.wcag a, .scheme-bip #jm-page-settings .resizer-label .separator, .scheme-bip #jm-page-settings .contrast-label .separator { color: #444; } .scheme-bip #jm-page-settings .search .inputbox { color: #444; border-bottom-color: #999; } .scheme-bip #jm-page-settings .search .btn-search { color: #444; } .scheme-bip #jm-allpage #jm-page-settings .nav.menu .resizer a, .scheme-bip #jm-allpage #jm-page-settings .nav.menu .contrast a { border-color: #999; color: #444; } .scheme-bip .jm-burger span { background: #444; } .scheme-bip #jm-main-nav { background: #1a3d6d !important; } /* --- HOMEPAGE: tabs + news cards + stats (live look, core modules) -------- */ .jm-homepage #jm-content-top { background: #fff; max-width: 1170px; margin: 0 auto !important; padding: 20px 30px 30px; box-shadow: 0 0 25px rgba(0,0,0,.06); } .home-tabs { list-style: none; margin: 0 0 24px; padding: 0 0 0 40px; display: flex; flex-wrap: wrap; gap: 40px; border-bottom: 1px solid #ececec; } .home-tabs li a { display: inline-block; padding: 14px 2px; font-family: Montserrat, sans-serif; font-size: 22px; color: #9a9a9a; text-decoration: none; border-bottom: 3px solid transparent; } .home-tabs li.active a { color: #042963; border-bottom-color: #042963; font-weight: 600; } .home-tabs li a:hover { color: #042963; } .home-pane { display: none; } .home-pane.active, .jm-module-raw.pane-news.active { display: block; } /* panes rendered via module chrome get the sfx on the wrapper */ [class*="home-pane"] { display: none; } [class*="pane-news"] { display: block; } .news-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } /* homepage news carousel: dot pagination (top-right) + sliding track, like the live NSP slider */ .news-carousel { position: relative; } .news-dots { display: flex; justify-content: flex-end; gap: 9px; margin: 0 0 16px; } .news-dot { width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; background: #cfd6e0; cursor: pointer; transition: background .2s; } .news-dot:hover { background: #9fb0c8; } .news-dot.active { background: #042963; } .news-viewport { overflow: hidden; } .news-track { display: flex; align-items: flex-start; transition: transform .45s ease; } .news-slide { flex: 0 0 100%; min-width: 0; } .news-card { border: 1px solid #ececec; background: #fff; } .news-card a { display: block; text-decoration: none; } .news-card-img { display: block; width: 100%; padding-top: 82%; background-size: cover; background-position: center; } .news-card-noimg { background: #e9eef5; } .news-card-title { display: block; padding: 14px 16px 18px; font-family: Montserrat, sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #042963; line-height: 1.5; } .see-all { text-align: center; margin: 26px 0 4px; } .btn-see-all { display: inline-block; padding: 8px 26px; border: 1px solid #cfcfcf; font-family: Montserrat, sans-serif; font-size: 12px; letter-spacing: .08em; color: #444 !important; text-decoration: none; text-transform: uppercase; } .btn-see-all:hover { border-color: #042963; color: #042963 !important; } /* News listing page (catid 15, layout=news) reached via the homepage "SEE ALL": a clean 3-column grid of cards (title -> intro image -> Read more), like the live site, instead of the default stacked blog + numbered link list + vertical pager. Titles get a 3-line clamp with a fixed min-height so the images line up across each row. */ .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 24px; margin: 4px 0 8px; } .news-tile { display: flex; flex-direction: column; } .news-tile-title { margin: 0 0 10px; font-family: Montserrat, sans-serif; font-size: calc(13px * var(--fz)); font-weight: 700; line-height: 1.4; } /* clamp to 3 lines + "…": the legacy `.jm-subpage #jm-maincontent h2 {display:block!important}` beats a plain class, so match its specificity (id + h2) AND keep !important so display becomes -webkit-box (required for -webkit-line-clamp). min-height = 3 lines so images align. */ .jm-subpage #jm-maincontent h2.news-tile-title { display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 4.2em; font-size: calc(13px * var(--fz)) !important; line-height: 1.4 !important; /* legacy h2 forced ~21px */ } .news-tile-title a { color: #042963 !important; text-decoration: none; } .news-tile-title a:hover { text-decoration: underline; } .news-tile-img { display: block; width: 100%; padding-top: 66%; background-size: cover; background-position: center; background-color: #e9eef5; } .news-tile-noimg { background-color: #e9eef5; } .news-tile-more { margin: 12px 0 0; } @media (max-width: 900px) { .news-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .news-grid { grid-template-columns: 1fr; } } /* horizontal pager (Joomla pagination markup) styled to match the publications pager */ .news-pager { margin: 30px 0 6px; } .news-pager .pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; list-style: none; padding: 0; margin: 0; } .news-pager .pagination li { margin: 0; } .news-pager .pagination a, .news-pager .pagination span { display: inline-block; min-width: 38px; box-sizing: border-box; text-align: center; padding: 9px 11px; border: 1px solid #d3d3d3; color: #36445a; text-decoration: none; font-size: calc(14px * var(--fz)); line-height: 1; } .news-pager .pagination a:hover { border-color: #003576; color: #003576; } .news-pager .pagination .active span, .news-pager .pagination .active a { background: #003576; border-color: #003576; color: #fff !important; font-weight: 700; } .news-pager .pagination .disabled span { color: #bbb; border-color: #e5e5e5; } /* Joomla pagination uses icon-font glyphs for first/prev/next/last; that font isn't loaded on the front end, so render plain chevrons instead of empty boxes. */ .news-pager .pagination .icon-angle-left::before { content: "\2039"; } /* ‹ */ .news-pager .pagination .icon-angle-right::before { content: "\203A"; } /* › */ .news-pager .pagination .icon-angle-double-left::before { content: "\00AB"; } /* « */ .news-pager .pagination .icon-angle-double-right::before { content: "\00BB"; } /* » */ .news-pager .pagination [class^="icon-"] { font-style: normal; font-weight: 700; } /* {gallery} image grids (rebuilt from the abandoned Simple Image Gallery plugin in article/default.php): responsive thumbnail grid; each thumb links to the full image. */ .sig-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 18px 0; } .sig-item { display: block; overflow: hidden; border: 1px solid #eee; } .sig-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; transition: transform .25s ease; } .sig-item:hover img { transform: scale(1.06); } @media (max-width: 600px) { .sig-gallery { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } } /* list panes (seminars/publications/awards) */ [class*="pane-seminars"] ul, [class*="pane-publications"] ul, [class*="pane-awards"] ul { list-style: none; margin: 0; padding: 0; } [class*="pane-seminars"] li, [class*="pane-publications"] li, [class*="pane-awards"] li { padding: 12px 6px; border-bottom: 1px solid #ececec; } [class*="pane-seminars"] a, [class*="pane-publications"] a, [class*="pane-awards"] a { color: #042963; text-decoration: none; font-size: 16px; } /* stats tiles */ .jm-homepage #jm-content-bottom { background: #fff; max-width: 1167px; box-sizing: border-box; margin: 20px auto 0 !important; padding: 30px 24px 50px; /* same 1167px white block as news, separated by a 20px gray strip (body shows) */ } .home-stats { margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 360px)); justify-content: center; gap: 20px; /* 360px tiles, 20px uniform gap (measured from live) */ } .stat-tile { background: #fff; text-align: center; padding: 34px 10px 30px; box-shadow: 0 0 18px rgba(0,0,0,.05); } .stat-num { display: block; font-family: Montserrat, sans-serif; font-size: 44px; font-weight: 600; color: #042963; line-height: 1.1; } .stat-label { display: block; margin-top: 6px; font-family: Montserrat, sans-serif; font-size: 14px; letter-spacing: .06em; color: #042963; text-transform: uppercase; } @media (max-width: 900px) { .news-cards, .home-stats { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .news-cards, .home-stats { grid-template-columns: 1fr; } } /* footer gradient like live */ #jm-footer { background: linear-gradient(180deg, #14305c 0%, #2a5298 100%) !important; } /* homepage: the component area is unused (featured view empty) — remove it entirely so legacy min-heights cannot create a void */ .homeclass .jm-main-row { display: none !important; } .homeclass #jm-main { padding-top: 0 !important; padding-bottom: 0 !important; } /* was 4px: made home content start 4px lower than subpages */ /* --- header refinements per live comparison -------------------------------- */ /* tagline box under the logo (live: slider layer) */ #jm-logo-sitedesc { position: relative; } .jm-tagline { display: inline-flex; align-items: center; gap: 10px; background: #fff; padding: 7px 16px; margin: 10px 0 0 130px; font-family: Montserrat, sans-serif; font-size: 16px; font-weight: 600; color: #042963; white-space: nowrap; } .jm-tagline img { width: 22px; height: 22px; } /* two-row quick bar: search + icons + language, right aligned, one line */ .jm-quickbar { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 12px; flex-wrap: nowrap; } .jm-quickbar .search { display: block; } .jm-quickbar .search form { display: flex; align-items: center; gap: 6px; margin: 0; } .jm-quickbar .custom { display: block; } .jm-quickbar .custom p.unia { margin: 0; display: flex; align-items: center; gap: 8px; white-space: nowrap; } .jm-quickbar .mod-languages { display: block; } .jm-quickbar .mod-languages a { color: #fff; font-size: 22px; text-decoration: none; } #jm-page-settings ul.wcag > li.top-bip { display: none; } /* bigger logo as on live */ #jm-logo-sitedesc #jm-logo img { max-width: 390px !important; max-height: 130px !important; } /* menu spacing like live */ .dj-megamenu li.dj-up { margin: 0 9px !important; } .dj-megamenu li.dj-up:first-child { margin-left: 0 !important; } .dj-megamenu li.dj-up a.dj-up_a { font-size: 16px; letter-spacing: .02em; } /* tabs: single line */ .home-tabs { flex-wrap: wrap; justify-content: center; gap: 28px 48px; padding-left: 0; } .home-tabs li { white-space: nowrap; } .home-tabs li a { font-size: 24px; } @media (max-width: 860px) { .home-tabs { flex-wrap: wrap; gap: 18px; } } /* contrast eye icons need the icomoon font (ikony.css) — ensure visible color */ #jm-allpage #jm-page-settings .nav.menu .contrast a { line-height: 1.2 !important; } /* quickbar internals: beat legacy module CSS on specificity */ #jm-page-settings .jm-quickbar { display: flex !important; } #jm-page-settings .jm-quickbar .search input.inputbox, #jm-page-settings .jm-quickbar .search input#mod-search-searchword { margin: 0 !important; width: 150px !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.7) !important; color: #fff !important; padding: 2px 4px !important; } #jm-page-settings .jm-quickbar .search input::placeholder { color: rgba(255,255,255,.75); } #jm-page-settings .jm-quickbar .search .btn-search { background: transparent !important; border: 0 !important; color: #fff !important; cursor: pointer; padding: 0 4px !important; position: static !important; } #jm-page-settings .jm-quickbar .custom p.unia { margin: 0 !important; position: static !important; } #jm-page-settings .jm-quickbar .custom p.unia img { position: static !important; margin: 0 !important; transform: none !important; } #jm-page-settings .jm-quickbar .mod-languages, #jm-page-settings .jm-quickbar .mod-languages ul, #jm-page-settings .jm-quickbar .mod-languages li { margin: 0 !important; padding: 0 !important; position: static !important; list-style: none; } .scheme-bip #jm-page-settings .jm-quickbar .search input.inputbox { color: #444 !important; border-bottom-color: #999 !important; } .scheme-bip #jm-page-settings .jm-quickbar .search .btn-search { color: #444 !important; } .scheme-bip #jm-page-settings .jm-quickbar .mod-languages a { color: #444; } /* legacy rule hid .search inside #jm-logo-nav — ours is the real one */ #jm-logo-nav #jm-page-settings .jm-quickbar .search { display: block !important; } #jm-logo-nav #jm-page-settings .jm-quickbar .search { position: static !important; right: auto !important; top: auto !important; left: auto !important; width: auto !important; } /* homepage content area: full white, wide, no module boxes (live look) */ .jm-homepage #jm-main { background: #fff !important; } .jm-homepage #jm-main > .container-fluid { max-width: none !important; padding: 0 !important; } /* subpage content: same 1167px column as the menu/homepage, centered (was ~1183px, misaligned) */ .jm-subpage #jm-main > .container-fluid { max-width: 1167px !important; margin: 0 auto !important; } .jm-homepage #jm-content-top { max-width: 1167px; margin: 0 auto !important; padding: 6px 24px 40px; box-shadow: none !important; background: #fff; } .jm-homepage #jm-content-top .jm-module, .jm-homepage #jm-content-top .jm-module-in, .jm-homepage #jm-content-top .jm-module-content { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; } .home-tabs { border-bottom: 0; margin: 26px 0 56px; gap: 52px; } .home-tabs li a { font-size: 26px; padding-bottom: 8px; } .news-cards { gap: 26px; } .jm-homepage #jm-content-bottom { background: #fff !important; } /* continuous white column with #jm-content-top (both 1167px, centered) */ /* --- homepage: white card floating over extended navy backdrop (live look) -- */ body.homeclass #jm-content-top { background: #fff; max-width: 1167px; margin: 0 auto !important; padding: 34px 24px 54px; position: relative; } body.homeclass #jm-content-bottom { position: relative; } /* typography calibration vs live */ .home-tabs { gap: 56px; margin: 6px 0 60px; } .home-tabs li a { font-size: calc(28px * var(--fz)); } .news-cards { gap: 30px; } .news-card-title { font-size: 13.5px; } .dj-megamenu li.dj-up { margin: 0 14px !important; } .dj-megamenu li.dj-up a.dj-up_a { font-size: 16px; } .jm-tagline { font-size: 17px; padding: 8px 18px; } /* desktop menu stays visible down to 801px (rwd.css hides it earlier) */ @media (min-width: 801px) { #jm-main-nav .dj-megamenu { display: block !important; } #jm-main-nav, #jm-top-menu { display: block !important; } } /* navy gutters visible beside the floating card on narrower screens */ body.homeclass #jm-content-top { width: calc(100% - 36px); box-sizing: border-box; } /* must out-specific the neutralizer's "#jm-bar + #jm-main" form */ /* --- header detail calibration (user-reported diffs) ----------------------- */ /* logo size as live */ #jm-logo-sitedesc #jm-logo img { max-width: none !important; max-height: none !important; width: 445px !important; height: auto !important; } /* A- A A+ : no stray borders/lines, live look */ #jm-allpage #jm-page-settings .nav.menu .resizer a { border: 0 !important; text-decoration: none !important; background: transparent !important; padding: 0 3px !important; font-size: 15px; font-weight: 700; line-height: 1 !important; } /* separator before CONTRAST: proper height and breathing room */ #jm-allpage #jm-page-settings .nav.menu li.contrast-label { border-left: 1px solid rgba(255,255,255,.45) !important; padding: 2px 0 2px 16px !important; margin-left: 10px !important; } #jm-allpage #jm-page-settings .nav.menu li.resizer-label { border: 0 !important; } #jm-page-settings ul.wcag > li { margin-left: 10px; } /* quickbar: even spacing and original icon sizes */ .jm-quickbar { gap: 20px !important; } #jm-page-settings .jm-quickbar .custom p.unia img { width: auto !important; height: auto !important; max-height: 30px !important; vertical-align: middle; } #jm-page-settings .jm-quickbar .custom p.unia a { margin: 0 5px; } #jm-page-settings .jm-quickbar .mod-languages a { font-size: 22px !important; letter-spacing: .02em; } /* main menu: live size, spacing and active underline */ .dj-megamenu li.dj-up { margin: 0 16px !important; } .dj-megamenu li.dj-up:first-child { margin-left: 0 !important; } .dj-megamenu li.dj-up a.dj-up_a { font-size: 16px !important; line-height: 46px !important; height: auto !important; border-bottom: 3px solid transparent !important; padding: 0 2px !important; background: transparent !important; } .dj-megamenu li.dj-up:hover a.dj-up_a, .dj-megamenu li.dj-up.active a.dj-up_a, .dj-megamenu li.dj-up.current a.dj-up_a { border-bottom: 3px solid #fff !important; color: #fff !important; } /* news card captions like live */ .news-card-title { font-size: calc(14px * var(--fz)); letter-spacing: .03em; line-height: 1.55; } /* responsive scale: one-line menu and settings row also at ~960px (as live) */ .dj-megamenu li.dj-up { margin: 0 10px !important; } .dj-megamenu li.dj-up a.dj-up_a { font-size: 15px !important; } @media (min-width: 1200px) { .dj-megamenu li.dj-up { margin: 0 16px !important; } .dj-megamenu li.dj-up a.dj-up_a { font-size: 16px !important; } } #jm-page-settings ul.wcag { white-space: nowrap; } #jm-page-settings ul.wcag > li { margin-left: 8px; } #jm-allpage #jm-page-settings .nav.menu li.resizer-label .separator, #jm-allpage #jm-page-settings .nav.menu li.contrast-label .separator { font-size: 10px !important; } #jm-allpage #jm-page-settings .nav.menu .contrast a { padding: 3px 4px !important; } #jm-page-settings { padding-right: 4px; } /* squeeze header below ~1100px: drop only the text labels, keep controls */ @media (max-width: 1100px) { .jm-tagline { font-size: 14px; padding: 6px 12px; margin-left: 90px; } #jm-logo-sitedesc #jm-logo img { max-width: 310px !important; max-height: 104px !important; } #jm-allpage #jm-page-settings .nav.menu li.resizer-label, #jm-allpage #jm-page-settings .nav.menu li.contrast-label { display: none !important; } #jm-page-settings .jm-quickbar { gap: 14px !important; } #jm-page-settings .jm-quickbar .search input.inputbox { width: 130px !important; } #jm-page-settings .jm-quickbar .mod-languages { margin-left: 6px !important; } } /* quickbar items must not shrink below content (PL was bleeding onto EU flag) */ #jm-page-settings .jm-quickbar > * { flex: 0 0 auto !important; min-width: 0; } /* wider navy gutters beside the floating card (visible also ~1000px, as live) */ body.homeclass #jm-content-top { width: calc(100% - 70px) !important; } /* tabs sized as live (~22px, single line at >=1200) */ .home-tabs { gap: 40px !important; margin: 10px 0 48px !important; } .home-tabs li a { font-size: calc(23px * var(--fz)) !important; } /* live .gkTabsWrap.horizontal ol li = 23px */ @media (max-width: 1100px) { .home-tabs li a { font-size: calc(19px * var(--fz)) !important; } .home-tabs { gap: 26px !important; } } /* logo sits lower than the top-aligned settings rows (live geometry) */ #jm-logo-sitedesc { margin-top: 26px; } #jm-page-settings { margin-top: 4px; } /* === RIGHT CONTROL BLOCK: scale down to live proportions ==================== */ #jm-page-settings .nav.menu.wcag { font-size: 11px; } #jm-allpage #jm-page-settings .nav.menu .resizer a { font-size: 14px !important; padding: 0 2px !important; } #jm-page-settings ul.wcag > li { margin-left: 6px !important; } #jm-allpage #jm-page-settings .nav.menu li.resizer-label .separator, #jm-allpage #jm-page-settings .nav.menu li.contrast-label .separator { font-size: 11px !important; } #jm-allpage #jm-page-settings .nav.menu li.contrast-label { padding-left: 10px !important; margin-left: 8px !important; } #jm-allpage #jm-page-settings .nav.menu .contrast a span { font-size: 14px; } /* search field: compact */ #jm-page-settings .jm-quickbar .search input.inputbox, #jm-page-settings .jm-quickbar .search input#mod-search-searchword { width: 120px !important; font-size: 14px !important; } #jm-page-settings .jm-quickbar .search .btn-search i { font-size: 15px !important; } #jm-page-settings .jm-quickbar { gap: 14px !important; } /* icons: smaller like live */ #jm-page-settings .jm-quickbar .custom p.unia img { max-height: 26px !important; } #jm-page-settings .jm-quickbar .custom p.unia a { margin: 0 3px !important; } /* PL: smaller */ #jm-page-settings .jm-quickbar .mod-languages a { font-size: 18px !important; } /* search placeholder a touch smaller; contrast eyes match live */ #jm-page-settings .jm-quickbar .search input.inputbox { width: 110px !important; } #jm-allpage #jm-page-settings .nav.menu .contrast a { padding: 2px 3px !important; } /* tagline tucked tight under the logo (live geometry) */ .jm-tagline { margin: 2px 0 0 132px !important; } #jm-logo-sitedesc { margin-top: 26px !important; } /* push the menu lower so there's generous navy above it, like live */ #jm-main-nav { margin-top: 26px !important; } /* ===== FOOTER: light band with stopkav5-2 DNA image (live look) =========== */ #jm-footer { background: #ffffff url(/images/stopkav5-2.png) right bottom no-repeat !important; background-size: auto 100% !important; color: #1a2b40 !important; margin: 0 !important; padding: 0 !important; } #jm-footer-in { max-width: 1370px; margin: 0 auto !important; padding: 40px 30px 30px !important; } #jm-footer a { color: #1a2b40 !important; text-decoration: none; } #jm-footer a:hover { color: #2374cd !important; text-decoration: underline; } .iimcb-footer { display: grid; grid-template-columns: 150px 1fr; gap: 10px 30px; align-items: start; } .iimcb-footer .f-logo { grid-row: 1 / span 2; align-self: center; } .iimcb-footer .f-logo img { width: 130px; height: auto; } .iimcb-footer .f-grid { display: grid; grid-template-columns: repeat(5, auto) 1fr; gap: 0 34px; } .iimcb-footer h5 { font-family: Montserrat, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #1a2b40; margin: 0 0 12px; text-transform: uppercase; } .iimcb-footer p { margin: 0; font-size: 13px; line-height: 1.7; color: #45556a; } .iimcb-footer ul.unstyled { list-style: none; margin: 0; padding: 0; } .iimcb-footer ul.unstyled li { margin: 0 0 6px; font-size: 13px; } .iimcb-footer .f-bip { width: 46px; height: auto; } .f-social { display: flex; gap: 12px; } .f-social a { font-size: 19px; color: #1a2b40 !important; } .f-social a:hover { color: #2374cd !important; } .iimcb-footer .f-copy { grid-column: 1 / -1; margin-top: 22px; padding-top: 14px; border-top: 1px solid #e2e7ee; font-size: 12px; color: #66738a; } /* kill any legacy/earlier dark footer treatment */ #jm-footer, #jm-footer-in, #jm-copyrights, .jm-footer-legacy { background-image: none; } #jm-footer { background-image: url(/images/stopkav5-2.png) !important; } @media (max-width: 1000px) { .iimcb-footer { grid-template-columns: 1fr; } .iimcb-footer .f-grid { grid-template-columns: 1fr 1fr; gap: 20px; } #jm-footer { background-size: cover !important; } } /* ===== STATS TILES: taller, bigger numbers, 2-line labels (live) ========== */ .home-stats { gap: 20px; } /* live tiles: 360x230, content vertically centered, thin 1px border on a white section. weight 600 = Montserrat's heaviest loaded weight (700 would be faux-bold) */ .stat-tile { height: 230px; box-sizing: border-box; padding: 14px; border: 1px solid #e2e2e2; box-shadow: none; background: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 0; } /* exact live values from slider n2-ss-19 (the rule has font-weight:normal THEN font-weight:700 -> 700 wins): number 293.75%->47px, label 143.75%->23px, both weight 700, #042963, lh1.1; label letter-spacing 1px uppercase */ .stat-num { font-size: calc(47px * var(--fz)); font-weight: 700; line-height: 1.1; } .stat-label { font-size: calc(23px * var(--fz)); font-weight: 700; line-height: 1.1; max-width: none; margin: 12px auto 0; letter-spacing: 1px; } /* footer: 2 stacked columns + logo + DNA bg (final live layout) */ .iimcb-footer { display: grid !important; grid-template-columns: 160px 320px 320px 1fr; grid-template-areas: "logo c1 c2 dna"; gap: 0 40px; align-items: start; } .iimcb-footer .f-logo { grid-area: logo; align-self: center; } .iimcb-footer .f-col1 { grid-area: c1; } .iimcb-footer .f-col2 { grid-area: c2; } .iimcb-footer .f-grid { display: contents; } .iimcb-footer .f-col { display: block; } .iimcb-footer .f-sec { margin-bottom: 26px; } .iimcb-footer .f-sec:last-child { margin-bottom: 0; } .f-social { display: grid; grid-template-columns: repeat(3, 28px); gap: 12px; } .iimcb-footer .f-copy { grid-area: dna; grid-column: 1 / -1; } @media (max-width: 1000px) { .iimcb-footer { grid-template-columns: 1fr 1fr; grid-template-areas: "logo logo" "c1 c2"; } } /* footer copyright at bottom-left; logo sizing; tighter to live */ .iimcb-footer { grid-template-areas: "logo c1 c2 dna" "copy copy copy dna" !important; grid-template-rows: auto auto; align-items: start !important; } .iimcb-footer .f-logo { align-self: start !important; padding-top: 4px; } .iimcb-footer .f-logo img { width: 150px !important; } .iimcb-footer .f-copy { grid-area: copy !important; grid-column: auto !important; margin-top: 24px; padding-top: 0; border-top: 0; font-size: 12px; color: #66738a; } #jm-footer-in { padding: 46px 30px 34px !important; } /* === neutralize legacy .dj-megamenu width/position hacks (consolidated CSS) === */ #jm-top-menu .dj-megamenu { width: auto !important; margin: 0 !important; left: 0 !important; top: 0 !important; position: static !important; background: transparent !important; padding: 0 !important; } #jm-top-menu { padding: 0 !important; background: transparent !important; } /* homepage navy header height: put the gap BELOW the menu (card overlaps), like live */ /* === HOMEPAGE NAVY HEADER: flex column, logo top / menu bottom (robust) ==== */ body.homeclass #jm-main, /* ===== HOMEPAGE NAVY HEADER (simple, robust): gap below tagline via padding === */ body.homeclass #jm-bar { display: block !important; min-height: 0 !important; max-height: none !important; padding-bottom: 7px !important; } body.homeclass #jm-logo-nav { padding-bottom: 60px !important; } body.homeclass #jm-main-nav { margin-top: 0 !important; padding-top: 0 !important; } /* white content starts at the SAME height as subpages: drop the -22px lift so the home card sits below the 22px navy band (like jm-subpage), instead of overlapping the bar 22px higher. */ body.homeclass #jm-main, body.homeclass #jm-bar + #jm-main { margin-top: 0 !important; background: transparent !important; } /* (footer styling consolidated into the single authoritative block at end of file) */ /* ============================================================================ HEADER PARITY PASS (user side-by-side feedback) - solid navy (done above), smaller logo, tagline tight under logo, - menu aligned to content container, PL sized like live ========================================================================== */ /* logo: match live ~390px, positioned higher and a touch left */ #jm-logo-sitedesc #jm-logo img { width: 417px !important; max-width: 417px !important; height: auto !important; } #jm-logo-nav-in { padding: 0 40px 0 12px !important; } body.homeclass #jm-logo-sitedesc, #jm-logo-sitedesc { margin-top: 10px !important; } /* tagline tucked tight directly under the logo (live geometry) */ .jm-tagline { margin: -24px 0 0 157px !important; font-size: 16px !important; padding: 7px 16px !important; } /* homepage navy gap smaller so menu sits right under tagline (like live) */ body.homeclass #jm-logo-nav { padding-bottom: 6px !important; } /* MENU aligned with the content card (indent to container, not page edge) */ #jm-top-menu .dj-megamenu { width: 100% !important; max-width: 1167px !important; /* align HOME with the 1167px content column left edge (x=137), like live */ margin: 0 auto !important; padding: 0 !important; box-sizing: border-box; } #jm-top-menu { width: 100% !important; } .dj-megamenu li.dj-up:first-child { margin-left: 0 !important; } /* language link (PL/EN, top-right): live = `.mod-languages a {font-size:28px;font-family:Montserrat}` (was 23px). --fz keeps WCAG resizer working */ #jm-page-settings .jm-quickbar .mod-languages a { font-size: calc(28px * var(--fz)) !important; font-weight: 400 !important; font-family: Montserrat, sans-serif !important; } #jm-page-settings { margin-top: 4px !important; } /* menu item spacing matched to live (wider spread) */ #jm-top-menu .dj-megamenu li.dj-up { margin: 0 17px !important; } #jm-top-menu .dj-megamenu li.dj-up:first-child { margin-left: 0 !important; } #jm-top-menu .dj-megamenu li.dj-up a.dj-up_a { font-size: calc(17px * var(--fz)) !important; padding: 0 2px !important; } /* live .dj-up_a = 17px */ /* constrain the logo link box width to ~427px (block; tagline stays below it) */ #jm-logo-sitedesc #jm-logo { width: 427px !important; max-width: 427px !important; display: block !important; } /* gap between menu item text and its active underline = 22px (was ~19px) */ #jm-top-menu .dj-megamenu li.dj-up a.dj-up_a { padding-bottom: 3px !important; } /* ============================================================================ HIGH-CONTRAST (highcontrast3): full yellow #ff0 + black text, like live. Overrides our navy/white !important rules and styles the new home elements. ========================================================================== */ body.highcontrast3, body.highcontrast3 #jm-allpage, body.highcontrast3 #jm-allpage section, body.highcontrast3 #jm-bar, body.highcontrast3 #jm-main-nav, body.highcontrast3 #jm-top-menu, body.highcontrast3 #jm-main, body.highcontrast3 #jm-maincontent, body.highcontrast3.homeclass #jm-content-top, body.highcontrast3 #jm-content-top, body.highcontrast3 #jm-content-bottom, body.highcontrast3 .home-stats, body.highcontrast3 .stat-tile, body.highcontrast3 .news-card, body.highcontrast3 .news-card a, body.highcontrast3 #jm-footer, body.highcontrast3 #jm-footer-in { background: #ff0 !important; background-image: none !important; color: #000 !important; } /* all text black */ body.highcontrast3, body.highcontrast3 a, body.highcontrast3 p, body.highcontrast3 span, body.highcontrast3 li, body.highcontrast3 h1, body.highcontrast3 h2, body.highcontrast3 h3, body.highcontrast3 h4, body.highcontrast3 h5, body.highcontrast3 h6, body.highcontrast3 .home-tabs li a, body.highcontrast3 .news-card-title, body.highcontrast3 .stat-num, body.highcontrast3 .stat-label, body.highcontrast3 .iimcb-footer h5, body.highcontrast3 .iimcb-footer p, body.highcontrast3 #jm-page-settings, body.highcontrast3 #jm-page-settings a, body.highcontrast3 #jm-page-settings .separator, body.highcontrast3 .dj-megamenu li.dj-up a.dj-up_a { color: #000 !important; } /* logo: white wordmark needs a black box on the yellow page (as on live). Keep the normal block + 427px width (inline-block breaks the flex row / search). padding is cancelled by an equal negative margin so the logo does NOT shift position when toggling contrast — the black box just grows around it. */ body.highcontrast3 #jm-logo-sitedesc #jm-logo { background: #000 !important; padding: 6px 8px !important; margin: -6px -8px !important; } /* tagline stays a white box with black text */ body.highcontrast3 .jm-tagline { background: #fff !important; color: #000 !important; } body.highcontrast3 .jm-tagline span, body.highcontrast3 .jm-tagline { color: #000 !important; } /* menu + tabs underline black */ body.highcontrast3 .dj-megamenu li.dj-up.active a.dj-up_a, body.highcontrast3 .dj-megamenu li.dj-up:hover a.dj-up_a { border-bottom-color: #000 !important; } body.highcontrast3 .home-tabs li.active a { color: #000 !important; border-bottom-color: #000 !important; } /* black separators/borders for cards, tiles, tabs (so structure is visible on yellow) */ body.highcontrast3 .news-card { border: 1px solid #000 !important; } body.highcontrast3 .stat-tile { border: 1px solid #000 !important; box-shadow: none !important; } body.highcontrast3 .home-tabs { border-bottom: 1px solid #000 !important; } body.highcontrast3 [class*="pane-"] li { border-bottom-color: #000 !important; } /* search field + icons: black on yellow */ body.highcontrast3 #jm-page-settings .search input.inputbox, body.highcontrast3 #jm-page-settings .jm-quickbar .search input { color: #000 !important; border-bottom-color: #000 !important; } body.highcontrast3 #jm-page-settings .btn-search { color: #000 !important; } body.highcontrast3 #jm-page-settings .nav.menu .resizer a, body.highcontrast3 #jm-page-settings .nav.menu .contrast a { color: #000 !important; border-color: #000 !important; } body.highcontrast3 #jm-page-settings .mod-languages a { color: #000 !important; } /* footer DNA image off in high-contrast */ body.highcontrast3 #jm-footer { background-image: none !important; } body.highcontrast3 .iimcb-footer a, body.highcontrast3 .f-social a { color: #000 !important; } /* SEE ALL button */ body.highcontrast3 .btn-see-all { color: #000 !important; border-color: #000 !important; } /* tagline is a link (to /en/race) like on live — whole box clickable, dark text */ .jm-tagline a { display: inline-flex; align-items: center; gap: 10px; color: #14233b !important; text-decoration: none; } .jm-tagline a:hover { color: #2374cd !important; } .jm-tagline a:hover span { text-decoration: underline; } body.highcontrast3 .jm-tagline a { color: #000 !important; } /* ============================================================================ SUBPAGES (body.jm-subpage): sidebar vertical menu, breadcrumbs, article. The homepage polish was only on #jm-content-top; subpages use legacy markup + J5 module markup that needs styling to match live. ========================================================================== */ /* --- left sidebar: white card --- */ .jm-subpage #jm-right .jm-module, .jm-subpage #jm-left .jm-module { background: #fff; box-shadow: 0 0 18px rgba(0,0,0,.05); margin-bottom: 24px; } .jm-subpage #jm-right .jm-module-in, .jm-subpage #jm-left .jm-module-in { padding: 8px 0; } /* sidebar module title (e.g. INSTYTUT) — hide, live shows just the items */ .jm-subpage #jm-right .jm-title, .jm-subpage #jm-left .jm-title { display: none; } /* --- vertical menu: arrows, spacing, indentation (like live mod_vertical_menu) --- */ .jm-subpage #jm-right .mod-menu, .jm-subpage #jm-left .mod-menu, .jm-subpage #jm-right .mod-menu .mod-menu__sub, .jm-subpage #jm-left .mod-menu .mod-menu__sub { list-style: none; margin: 0; padding: 0; } .jm-subpage #jm-right .mod-menu > li, .jm-subpage #jm-left .mod-menu > li { border-bottom: 1px solid #e8e8e8; } .jm-subpage #jm-right .mod-menu li a, .jm-subpage #jm-left .mod-menu li a { display: block; position: relative; padding: 11px 14px 11px 28px; color: #14233b; text-decoration: none; font-size: 14px; line-height: 1.35; } .jm-subpage #jm-right .mod-menu li a::before, .jm-subpage #jm-left .mod-menu li a::before { content: "\203A"; position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #2374cd; font-weight: 700; font-size: 16px; } .jm-subpage #jm-right .mod-menu li a:hover, .jm-subpage #jm-left .mod-menu li a:hover { color: #2374cd; background: #f4f7fb; } .jm-subpage #jm-right .mod-menu li.active > a, .jm-subpage #jm-left .mod-menu li.active > a { font-weight: 700; color: #042963; } /* nested sub-items indented further */ .jm-subpage #jm-right .mod-menu .mod-menu__sub li a, .jm-subpage #jm-left .mod-menu .mod-menu__sub li a { padding-left: 44px; } .jm-subpage #jm-right .mod-menu .mod-menu__sub li a::before, .jm-subpage #jm-left .mod-menu .mod-menu__sub li a::before { left: 28px; } /* --- breadcrumbs (J5 mod-breadcrumbs) --- */ .jm-subpage #jm-breadcrumbs .jm-module-in { padding: 0 !important; } .jm-subpage #jm-breadcrumbs .jm-module { box-shadow: none !important; background: transparent !important; } /* drop the duplicate (second) breadcrumb module */ .jm-subpage #jm-breadcrumbs .jm-module + .jm-module { display: none; } .jm-subpage #jm-breadcrumbs .mod-breadcrumbs, .jm-subpage #jm-breadcrumbs .breadcrumb { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 16px; padding: 6px 0; background: transparent; font-size: 13px; } .jm-subpage #jm-breadcrumbs .mod-breadcrumbs__divider { color: #2374cd; } .jm-subpage #jm-breadcrumbs .mod-breadcrumbs__item a { color: #14233b; text-decoration: none; } .jm-subpage #jm-breadcrumbs .mod-breadcrumbs__item a:hover { color: #2374cd; } .jm-subpage #jm-breadcrumbs .mod-breadcrumbs__item.active span { color: #777; } .jm-subpage #jm-breadcrumbs .mod-breadcrumbs__item:not(.active)::after { content: "|"; margin-left: 6px; color: #ccc; } /* keep the breadcrumb a single tight line: legacy `.breadcrumb>li{margin-bottom:20px}` bloated it to ~54px and the module added ~30px more, so the article floated ~100px below the breadcrumb — misaligned with the left menu, and the start varied per page (different first-element margins). Collapse the item margins + module gap, and zero the article's first-child top margin, so the article starts right under the breadcrumb at the SAME height on every subpage. */ .jm-subpage #jm-breadcrumbs .breadcrumb > li, .jm-subpage #jm-breadcrumbs .breadcrumb .mod-breadcrumbs__item { margin-bottom: 0 !important; } .jm-subpage #jm-breadcrumbs .jm-module { margin-bottom: 10px !important; } .jm-subpage #jm-maincontent .com-content-article__body > *:first-child { margin-top: 0 !important; } /* --- article: visible navy headings (were white-on-white), hide redundant page-header --- */ .jm-subpage #jm-content .page-header h1, .jm-subpage #jm-maincontent .page-header { display: none; } /* live shows breadcrumb instead */ .jm-subpage #jm-content h1, .jm-subpage #jm-content h2, .jm-subpage #jm-content h3, .jm-subpage #jm-maincontent h1, .jm-subpage #jm-maincontent h2, .jm-subpage #jm-maincontent h3, .jm-subpage #jm-maincontent .com-content-article__body h2 { color: #042963 !important; } .jm-subpage #jm-maincontent .com-content-article__body h2 { font-size: 24px; font-weight: 700; margin: 0 0 18px; } .jm-subpage #jm-maincontent p { color: #333; } /* --- content card: white only INSIDE the 1px frame (#jm-maincontent), so the white stops at the border line and the page's grey (#jm-main) shows around it, like the live site --- */ .jm-subpage #jm-maincontent { background: #fff; padding: 24px 34px 30px; } /* override legacy .breadcrumb (was position:absolute; top:230px; color:#fff) */ .jm-subpage #jm-breadcrumbs .breadcrumb, .jm-subpage .breadcrumb { position: static !important; top: auto !important; left: auto !important; color: #14233b !important; } .jm-subpage #jm-breadcrumbs .breadcrumb a, .jm-subpage .breadcrumb a { color: #14233b !important; text-shadow: none !important; } .jm-subpage #jm-breadcrumbs .breadcrumb span { color: inherit !important; text-shadow: none !important; } /* un-hide the article heading killed by a legacy nth-child(3) display:none hack */ .jm-subpage #jm-maincontent h2, .jm-subpage #jm-maincontent > div > div:nth-child(3) > h2, .jm-subpage #jm-maincontent .com-content-article__body h2 { display: block !important; } /* news/teaming articles route under the News/Teaming menu items (itemid-721/601/801/212), whose legacy CSS `body.itemid-... #jm-maincontent p { display:none }` (meant to strip stray

from the old slider *listings*) also blanked the real article body text — restore the paragraphs. */ .jm-subpage #jm-maincontent .com-content-article__body p { display: block !important; } /* breadcrumb: force ALL text dark (active item was a white ) */ .jm-subpage #jm-breadcrumbs .breadcrumb, .jm-subpage #jm-breadcrumbs .breadcrumb a, .jm-subpage #jm-breadcrumbs .breadcrumb span, .jm-subpage #jm-breadcrumbs .breadcrumb li { color: #14233b !important; text-shadow: none !important; } .jm-subpage #jm-breadcrumbs .breadcrumb li.active span { color: #777 !important; } /* legacy hid all breadcrumb items: .breadcrumb > li { display:none } — restore */ .jm-subpage #jm-breadcrumbs .breadcrumb > li, .jm-subpage #jm-breadcrumbs .breadcrumb > li.mod-breadcrumbs__item { display: inline-flex !important; align-items: center; } .jm-subpage #jm-breadcrumbs .breadcrumb > li.mod-breadcrumbs__divider { display: inline-flex !important; } /* force the (EN) breadcrumb fully visible + dark, max specificity */ body.jm-subpage #jm-breadcrumbs .jm-module:first-child .breadcrumb, body.jm-subpage #jm-breadcrumbs .jm-module:first-child .mod-breadcrumbs__wrapper { display: block !important; position: static !important; visibility: visible !important; } body.jm-subpage #jm-breadcrumbs .breadcrumb { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px; position: static !important; } body.jm-subpage #jm-breadcrumbs .breadcrumb > li { display: inline-flex !important; align-items: center; visibility: visible !important; } body.jm-subpage #jm-breadcrumbs .breadcrumb a, body.jm-subpage #jm-breadcrumbs .breadcrumb span, body.jm-subpage #jm-breadcrumbs .breadcrumb li { color: #14233b !important; font-size: 13px !important; visibility: visible !important; } body.jm-subpage #jm-breadcrumbs .breadcrumb li.active span { color: #777 !important; } /* tighten top gap */ body.jm-subpage #jm-maincontent { padding-top: 14px !important; } /* subpages: extend navy below the menu so the white content floats on it (live) */ /* align the menu to the homepage's vertical position (homeclass forces margin-top:0; the generic rule pushed subpage nav 26px lower, so HOME and subpages were misaligned) */ body.jm-subpage #jm-main-nav { margin-top: 0 !important; } body.jm-subpage #jm-bar { padding-bottom: 7px !important; } /* navy band below the menu, like the homepage (raised the white content ~15px closer to the active-item underline) */ /* keep the white content BELOW that navy band: a negative margin equal to the padding used to cancel it out, so the active item's underline sat flush on the white. margin-top:0 lets the 22px navy gap show, matching HOME (the underline no longer touches the white). */ body.jm-subpage #jm-bar + #jm-main, body.jm-subpage #jm-main { margin-top: 0 !important; background: transparent !important; } /* ============================================================================ FOOTER — SINGLE AUTHORITATIVE SOURCE OF TRUTH (overrides all earlier blocks) Faithful to the live footer, which is Smart Slider n2-ss-18 configured with sliderHeightBasedOn:"real" — i.e. the footer height is CONTENT-DRIVEN (not a fixed aspect ratio), with fixed ~13/15px Montserrat text at line-height 1.5 and ~30px top padding. The stopkav5-2.png DNA artwork is a COVER background anchored at "73% 100%" (live's exact background-position) so the helix sits on the right and is never stretched/distorted. ========================================================================== */ #jm-footer { background: #ffffff url(/images/stopkav5-2.png) 73% 100% / cover no-repeat !important; color: #1a2b40 !important; display: block !important; /* content-driven height, like live's "real" mode */ overflow: hidden !important; padding: 0 !important; margin: 0 !important; } #jm-footer-in { max-width: 1370px !important; width: 100% !important; margin: 0 auto !important; padding: 30px 35px 14px !important; /* ~30px top (live's cell is 30px 0 0 60px), tight bottom */ box-sizing: border-box; position: relative; } .iimcb-footer { max-width: none !important; width: 100% !important; padding: 0 !important; /* kill legacy .iimcb-footer padding:36px 0 12px */ margin: 0 !important; display: grid !important; grid-template-columns: 255px minmax(200px, 240px) minmax(220px, 280px) 1fr !important; grid-template-areas: "logo c1 c2 dna" "copy copy copy dna" !important; grid-template-rows: auto auto !important; gap: 6px 44px !important; align-items: start !important; /* fixed sizes (live footer text does NOT scale with width — "real" height mode) */ font-size: 13px !important; line-height: 1.5 !important; } .iimcb-footer .f-logo { grid-area: logo !important; align-self: center !important; } /* live centers the logo vertically in the column block */ .iimcb-footer .f-logo img { width: 240px !important; max-width: 240px !important; height: auto !important; } /* matches live's ~245px rendered footer logo */ .iimcb-footer .f-col1 { grid-area: c1 !important; } .iimcb-footer .f-col2 { grid-area: c2 !important; } .iimcb-footer .f-sec { margin: 0 0 18px !important; } .iimcb-footer .f-sec:last-child { margin-bottom: 0 !important; } /* live colors: headers #042963 (navy), body/links/copyright #000000 (Montserrat normal) */ .iimcb-footer h5 { font-size: calc(15px * var(--fz)) !important; line-height: 1.3 !important; color: #042963 !important; font-weight: 400 !important; /* live footer headers are normal weight, not bold */ letter-spacing: .5px !important; /* live spaces the uppercase headers out */ text-transform: uppercase !important; margin: 0 0 7px !important; } /* contact icons (map-marker / phone / envelope) before address-phone-email, like live */ .iimcb-footer .f-ico { display: inline-block !important; width: 15px !important; margin-right: 8px !important; color: #6c7686 !important; font-size: 13px !important; text-align: center !important; } /* force our size/rhythm onto p+li (legacy custom CSS pins these to 13px/1.7) */ .iimcb-footer p { margin: 0 !important; color: #000000 !important; font-size: calc(13px * var(--fz)) !important; line-height: 1.55 !important; } .iimcb-footer ul.unstyled { list-style: none !important; margin: 0 !important; padding: 0 !important; } .iimcb-footer ul.unstyled li { margin: 0 0 3px !important; color: #000000 !important; font-size: calc(13px * var(--fz)) !important; line-height: 1.5 !important; } .iimcb-footer a { color: #000000 !important; text-decoration: none !important; } .iimcb-footer a:hover { color: #2374cd !important; text-decoration: underline !important; } .iimcb-footer .f-bip { width: 44px !important; height: auto !important; margin-top: 2px; } /* social icons: wider spacing to match live (was too cramped) */ .f-social { display: grid !important; grid-template-columns: repeat(3, 24px) !important; gap: 15px 20px !important; margin-top: 5px; } .f-social a { font-size: 23px !important; color: #042963 !important; line-height: 1 !important; display: flex !important; align-items: center; justify-content: center; } .f-social a:hover { color: #2374cd !important; } .f-social .f-bsky { width: 21px !important; height: 21px !important; fill: #1185fe !important; display: block; } /* bluesky butterfly (no FA4 glyph) */ /* copyright: under the logo (left), wraps to 2 lines like live, dark text */ .iimcb-footer .f-copy { grid-area: copy !important; grid-column: 1 / 2 !important; align-self: start !important; max-width: 152px !important; /* wrap after "IIMCB." -> 2 lines under the logo, like live (EN+PL) */ margin-top: 16px !important; color: #000000 !important; font-size: 12px !important; line-height: 1.5 !important; } /* the DNA grid column stays empty: the helix is the #jm-footer cover background */ @media (max-width: 1100px) { #jm-footer-in { padding: 28px 25px !important; } .iimcb-footer { grid-template-columns: 1fr 1fr !important; grid-template-areas: "logo logo" "c1 c2" "copy copy" !important; } #jm-footer { background-position: right center !important; } } /* phones/narrow: the DNA cover background scaled up and sat under the stacked text columns, so the (dark) footer text was unreadable over the dark helix. Drop the image -> clean light footer with dark text. Stack the columns one-per-row for a tidy narrow layout. */ @media (max-width: 900px) { #jm-footer { background-image: none !important; background-color: #eef2f7 !important; } .iimcb-footer { grid-template-columns: 1fr !important; grid-template-areas: "logo" "c1" "c2" "copy" !important; } } /* ===== HOMEPAGE HERO: "Best Papers Awards" banner (live slider n2-ss-121 EN / n2-ss-120 PL) Values are exact from the live slider CSS, not guessed: - slide pad 10px 30px 0 (n-uc-8nM8P7mr6Jkn), row pad 10px (n-uc-gQ1IJsQJjMJX-inner), bordered column 1px #e2e2e2 pad 20px 10px (n-uc-WvwDg5qfvurH-inner) - heading: Montserrat #042963 200%(32px) lh1.8 bold uppercase center ls1px (a66d5d82) - paragraph: Roboto/Arial #042963 137.5%(22px) lh1.5 w400 (0356b17c) - button: bg #008344 pad 10/30 radius5 (b243ccdc); label Roboto #fff 93.75%(15px) w900 center (8fa0aee0) - button layer self-aligned center w/ 20px top margin (n-uc-PlywNjhcx9tx) All px scaled by --fz for the WCAG A-/A/A+ resizer. */ .home-hero { padding: 10px 30px 0; box-sizing: border-box; } .home-hero .home-hero-row { padding: 10px; } .home-hero .home-hero-card { border: 1px solid #e2e2e2; padding: 20px 10px; box-sizing: border-box; } .home-hero .hero-title { margin: 10px 0 0; font-family: Montserrat, sans-serif; color: #042963; font-size: calc(32px * var(--fz)); line-height: 1.8; font-weight: 700; text-transform: uppercase; text-align: center; letter-spacing: 1px; } .home-hero .hero-desc { margin: 0; font-family: 'Roboto', Arial, sans-serif; color: #042963; font-size: calc(22px * var(--fz)); line-height: 1.5; font-weight: 400; } .home-hero .hero-cta { text-align: center; margin-top: 20px; } .home-hero .hero-btn { display: inline-block; background: #008344; color: #fff; font-family: 'Roboto', Arial, sans-serif; font-size: calc(15px * var(--fz)); font-weight: 900; line-height: normal; text-transform: none; text-decoration: none; padding: 10px 30px; border-radius: 5px; } .home-hero .hero-btn:hover { color: #fff; text-decoration: none; } /* "Seminars" tab — the live look already lives in custom-consolidated.css (.seminar float cards 27%, navy #042963 date badge floated top-right + FA calendar icon, mission_background.png, hover scale + background_main_mirror.jpg, navy strong). We only patch the legacy bugs so it renders correctly with our markup: - contain the floated .seminar cards (legacy never clears them) - restate the invalid legacy `transform: scale (1.05)` (space) and point the hover image local - undo the legacy `.readmore2 { top: -1900px }` off-screen hack so SEE ALL sits under the grid */ /* 3-col grid (legacy float widths render only 2/row); the date badge keeps its own float:right inside each card */ .seminars-wrapper .seminars-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } /* card height: legacy fixed it at 358px content-box (= 380px visual w/ 22px padding+border) via custom-all.css `.seminar{height:358px}` + custom-consolidated `min-height:360px`. User asked for 60px shorter -> 298px content-box (= 320px visual). Tallest real card content is ~218px, so it fits with headroom. min-height:0 neutralises the legacy 350/360 mins (min-height would beat height). */ .seminars-wrapper .seminar { width: auto !important; float: none !important; margin: 0 !important; height: 298px !important; min-height: 0 !important; } .seminars-wrapper .seminar:hover { transform: scale(1.03); background-color: #042963; background-image: url(/images/background_main_mirror.jpg); } /* on hover the card turns navy; force ALL its text white — legacy `#jm-maincontent p{color:#000}` (and our `.jm-subpage #jm-maincontent p{color:#333}`) otherwise leave the affiliation/host black. */ .seminars-wrapper .seminar:hover, .seminars-wrapper .seminar:hover * { color: #fff !important; } .seminars-wrapper .readmore2 { position: static !important; top: auto !important; clear: both; text-align: center; margin: 16px 0 26px !important; } .seminars-wrapper .readmore2 a { display: inline-block; } @media (max-width: 900px) { .seminars-wrapper .seminars-list { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .seminars-wrapper .seminars-list { grid-template-columns: 1fr; } } /* card text 14px (was inheriting too large); date box text 13px so "onsite: Hankiewicza 2" fits the 90px navy box instead of overflowing onto its border */ .seminars-wrapper .seminar-content p { font-size: 14px !important; line-height: 1.45; } .seminars-wrapper .seminar-date p { font-size: 13px !important; line-height: 1.35; overflow-wrap: break-word; word-break: normal; } .seminars-wrapper .seminar-date .date span { font-size: 24px !important; font-weight: 700; line-height: 1.1; } /* Seminars LISTING page (catid 401, layout=seminars, reached via "SEE ALL"): same cards as the home tab but a 2-column grid and auto height (titles vary), replacing the broken default blog. */ .seminars-wrapper--page .seminars-list { grid-template-columns: repeat(2, 1fr); } .seminars-wrapper--page .seminar { height: auto !important; min-height: 300px !important; } @media (max-width: 700px) { .seminars-wrapper--page .seminars-list { grid-template-columns: 1fr; } } /* ===== "Publications and preprints" home tab — mirrors the live .publication card grid (navy badge + title / authors / journal / year), fed from #__rrrpublications via the mod_articles_category `_:publications` override. Same grid treatment as Seminars. Legacy custom-consolidated set .publication to width:28%/float/min-height:350 with a mission_background.png card + navy .naglowek-p badge (absolute, top-left): we keep the badge + bg + inherited #000 text, drop the float for a clean 3-col grid, and clamp the title/authors so every card stays a uniform height (titles vary a lot in length). ===== */ .publications-wrapper .publications-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .publications-wrapper .publication { width: auto !important; float: none !important; margin: 0 !important; min-height: 0 !important; height: 270px !important; padding: 45px 20px 18px !important; text-decoration: none !important; overflow: hidden; display: block; } .publications-wrapper .publication:hover { transform: scale(1.03); background-image: url(/images/background_main_mirror.jpg); } .publications-wrapper .publication:hover, .publications-wrapper .publication:hover * { color: #fff !important; } .publications-wrapper .pub-ttl { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; line-height: 1.35; margin: 0 0 10px; } .publications-wrapper .pub-auth { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.4; margin: 0 0 8px; } .publications-wrapper .czasopismo { display: block; font-size: 13px; line-height: 1.4; } .publications-wrapper .rok { display: inline-block; font-size: 13px; margin-top: 4px; } .publications-wrapper .readmore2 { position: static !important; top: auto !important; clear: both; text-align: center; margin: 16px 0 26px !important; } .publications-wrapper .readmore2 a { display: inline-block; } @media (max-width: 900px) { .publications-wrapper .publications-list { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .publications-wrapper .publications-list { grid-template-columns: 1fr; } } /* ===== Contact page block (live had it as a Smart Slider; rebuilt as static HTML in the article) ===== */ .contact-block { margin: 0 0 28px; } .contact-block .contact-title { font-family: Montserrat, sans-serif; color: #042963; font-weight: 700; font-size: calc(26px * var(--fz)); text-align: center; margin: 6px 0 26px; line-height: 1.2; } .contact-block .contact-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; } /* each block is a rectangular framed box with centred content, like the live original */ .contact-block .contact-col { border: 1px solid #e3e3e3; padding: 24px 18px; text-align: center; } .contact-block .contact-col .contact-h { font-family: Montserrat, sans-serif; color: #042963; font-weight: 700; font-size: calc(16px * var(--fz)); margin: 0 0 14px; text-align: center; } .contact-block .contact-col p { margin: 0 0 8px; font-size: calc(14px * var(--fz)); line-height: 1.5; color: #333; } .contact-block .contact-col a { color: #042963; text-decoration: none; } .contact-block .contact-col a:hover { color: #2374cd; text-decoration: underline; } .contact-block .contact-social { display: grid; grid-template-columns: repeat(2, max-content); gap: 12px 18px; font-size: 22px; justify-content: center; } /* 2x2 like live, centred in the box */ .contact-block .contact-social a { color: #042963; } .contact-block .contact-social a:hover { color: #2374cd; } /* Communications Office: email dropped a bit lower with a letter icon below it (like live) */ .contact-block .contact-col .contact-mail { margin-top: 26px; } .contact-block .contact-col .contact-mail-icon { margin: 14px 0 0; font-size: 30px; line-height: 1; } .contact-block .contact-col .contact-mail-icon a { color: #042963; } .contact-block .contact-col .contact-mail-icon a:hover { color: #2374cd; } @media (max-width: 900px) { .contact-block .contact-cols { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .contact-block .contact-cols { grid-template-columns: 1fr; } } /* ===== Research groups grid (live com_rrrlabs; rebuilt as a labs category layout) ===== Round leader headshot — face centred via background zoom+position, SAME treatment as the Directors grid; navy lab name + leader; clean hover highlight box. Explicitly overrides the legacy `.laboratories {position;left;display}` from custom-consolidated.css. */ .laboratories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 24px; max-width: 760px; margin: 28px auto; position: static; left: auto; text-align: center; } .laboratories .lab-card { display: block; text-decoration: none; text-align: center; } .laboratories .lab-photo { display: block; width: 175px; height: 175px; margin: 0 auto 14px; border-radius: 50%; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #eef1f6; transition: transform .25s ease; } .laboratories .lab-card:hover .lab-photo { transform: scale(1.06); } .laboratories .lab-info { display: inline-block; padding: 6px 12px 8px; border-radius: 5px; transition: background .2s ease, box-shadow .2s ease; } .laboratories .lab-card:hover .lab-info { background: #f5f7fa; box-shadow: 0 2px 14px rgba(0,0,0,.12); } .laboratories .lab-name { display: block; color: #042963; font-family: Montserrat, sans-serif; font-weight: 700; font-size: calc(14px * var(--fz)); line-height: 1.3; } .laboratories .lab-card:hover .lab-name { color: #2374cd; } .laboratories .lab-leader { display: block; color: #333; font-size: calc(13px * var(--fz)); margin-top: 4px; line-height: 1.3; } @media (max-width: 900px) { .laboratories { grid-template-columns: repeat(2, 1fr); max-width: 520px; } } @media (max-width: 560px) { .laboratories { grid-template-columns: 1fr; max-width: 280px; } } /* ===== Laboratory DETAIL page: live-style tab cards (catid 405 single article) ===== Rebuilds the old com_rrrlabs tabs (Research focus / Group members / Group leader). Fresh .lab-detail-* class names on purpose: the legacy .laboratories-tabs rules in custom-consolidated.css paint an orange table-bar; we want the public-site look — white tabs, navy uppercase labels, active = navy underline, hover = light grey, content in a light-grey card — which also matches our navy palette (#042963). */ .lab-detail { max-width: 980px; margin: 0 auto; } .lab-detail-tabs { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid #e4e8ee; } .lab-detail-tabs li { margin: 0; } .lab-detail-tab { appearance: none; background: transparent; border: 0; font-family: 'Montserrat', sans-serif; font-size: calc(15px * var(--fz)); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: #042963; cursor: pointer; padding: 14px 22px; margin-bottom: -1px; border-bottom: 3px solid transparent; transition: background .15s ease, border-color .15s ease; } .lab-detail-tab:hover { background: #f1f3f6; } .lab-detail-tab.active { border-bottom-color: #042963; } .lab-detail-panel { display: none; background: #f4f5f7; padding: 30px 34px; } .lab-detail-panel.active { display: block; } /* old Group-leader card is a (photo | name + address); keep it readable */ .lab-detail-panel table { border: 0; width: 100%; border-collapse: collapse; } .lab-detail-panel table td { vertical-align: top; padding: 0 18px 0 0; } .lab-detail-panel table td:first-child { width: 170px; } .lab-detail-panel img { max-width: 100%; height: auto; } .lab-detail-panel p { line-height: 1.6; } /* Publications tab card (links to the filtered publications page) */ /* kill a legacy custom-consolidated ::before ("Former laboratories") that misfires on panel divs */ .lab-detail .lab-detail-panel > div::before { content: none !important; } .lab-pubs { text-align: center; padding: 22px 10px; } .lab-pubs p { font-size: calc(16px * var(--fz)); color: #333; margin: 0 0 18px; } .lab-pubs-btn { display: inline-block; background: #042963; color: #fff; font-weight: 600; text-decoration: none; padding: 12px 28px; transition: background .15s ease; } .lab-pubs-btn:hover { background: #2374cd; color: #fff; } .lab-detail-panel h3 { color: #042963; } /* the leader name is an
; defeat the global h2{display:none!important} hack */ .lab-detail-panel h2 { display: block !important; color: #042963; font-weight: 600; font-size: calc(22px * var(--fz)); margin: 0 0 12px; } @media (max-width: 600px) { .lab-detail-tab { padding: 11px 14px; font-size: calc(13px * var(--fz)); } .lab-detail-panel { padding: 20px 16px; } .lab-detail-panel table td:first-child { width: 110px; } } /* ===== "Laboratories" accordion at the bottom of the About page (was a Sprocket-Lists module on live). Two columns of navy boxes; click a box to reveal its lab leader. ===== */ .labacc { margin: 34px 0 6px; } .labacc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; align-items: start; } .labacc-col { display: flex; flex-direction: column; gap: 14px; } .labacc-head { position: relative; cursor: pointer; background: #042963; color: #fff; font-family: Montserrat, sans-serif; font-weight: 600; line-height: 1.3; font-size: calc(15px * var(--fz)); text-align: center; padding: 18px 48px; } .labacc-head::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 400; line-height: 1; } .labacc-item.open .labacc-head::after { content: "\2212"; } /* minus when expanded */ .labacc-body { display: none; padding: 12px 18px 4px; text-align: center; } .labacc-item.open .labacc-body { display: block; } .labacc-body a { color: #042963; font-weight: 600; text-decoration: none; } .labacc-body a:hover { color: #2374cd; text-decoration: underline; } @media (max-width: 700px) { .labacc-cols { grid-template-columns: 1fr; } .labacc-col + .labacc-col { margin-top: 14px; } } /* ===== Publications page (rebuilt com_rrrpublications -> catid 400 layout=publications). Transcribed from the live .publications-* styles (navy #003576). ===== */ .pub-page { margin: 6px 0 0; } .pub-top { position: relative; margin: 8px 0 18px; min-height: 50px; } .pub-allhdr { display: inline-block; background: #003576; padding: 14px 40px; } .pub-allhdr a { color: #fff; font-weight: 700; font-size: calc(16px * var(--fz)); text-transform: uppercase; letter-spacing: 3px; text-decoration: none; } .pub-allhdr.active { background: #042963; } .pub-search { width: 270px; max-width: 100%; position: absolute; top: 0; right: 0; } .pub-search input { height: 40px; width: 100%; box-sizing: border-box; border: 1px solid #d7d7d7; padding: 0 34px 0 14px; background: #fff; color: #27282d; font-size: calc(13px * var(--fz)); } .pub-search button { position: absolute; top: 0; right: 0; height: 40px; width: 34px; border: 0; background: transparent; color: #6b7070; cursor: pointer; } .pub-search button:hover { color: #003576; } .pub-nav { border: 1px solid #d3d3d3; padding: 18px 26px; columns: 2; column-gap: 40px; } .pub-navgrp { margin: 0 0 16px; break-inside: avoid; } .pub-navgrp-name { color: #6b7070; font-weight: 700; font-size: calc(15px * var(--fz)); margin: 0 0 6px; } .pub-navgrp-name.active { color: #003576; } .pub-nav p { margin: 4px 0; font-size: calc(14px * var(--fz)); line-height: 1.4; color: #36445a; } .pub-nav p a { color: #36445a; text-decoration: none; } .pub-nav p a:hover { color: #003576; } .pub-nav p.active a { font-weight: 700; color: #003576; } .pub-years { margin: 22px 0; display: flex; flex-wrap: wrap; gap: 5px; } .pub-yearchip { background: #003576; color: #fff; font-weight: 600; font-size: calc(14px * var(--fz)); line-height: 1; padding: 7px 9px; text-decoration: none; } .pub-yearchip:hover { background: #ea9200; color: #fff; } .pub-list { margin: 10px 0 0; } .pub-yearbar { background: #003576; padding: 7px 24px; margin: 16px 0 10px; scroll-margin-top: 150px; } .pub-yearbar p { margin: 0; color: #fff; font-weight: 700; font-size: calc(16px * var(--fz)); letter-spacing: 3px; } .pub { display: block; position: relative; border: 1px solid #e7e7e2; padding: 14px 70px 14px 20px; margin: 9px 0; text-decoration: none; transition: box-shadow .15s ease, border-color .15s ease; } .pub:hover { border-color: #c9d3e2; box-shadow: 0 2px 12px rgba(0,0,0,.08); } .pub::after { content: "+"; position: absolute; right: 0; bottom: 0; width: 30px; height: 30px; line-height: 30px; text-align: center; background: #eef0f2; color: #3e444a; font-size: 20px; } .pub-type { display: inline-block; background: #eef2f8; color: #003576; font-size: calc(11px * var(--fz)); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 2px 8px; margin: 0 0 6px; } .pub-title { display: block; color: #1c2530; font-weight: 600; font-size: calc(15px * var(--fz)); line-height: 1.45; margin: 0 0 4px; } .pub-authors { display: block; color: #404040; font-weight: 300; font-size: calc(14px * var(--fz)); line-height: 1.5; margin: 0 0 4px; } .pub-authors p { margin: 0; display: inline; } .pub-cite { display: block; color: #404040; font-size: calc(14px * var(--fz)); } .pub-cite .pub-yr { color: #003576; font-weight: 700; } .pub-none { color: #6b7070; font-size: calc(15px * var(--fz)); margin: 24px 0; } /* pagination (the full list now shows 30 per page instead of all ~1400 at once) */ .pub-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 30px 0 8px; } .pub-pg { display: inline-block; min-width: 38px; box-sizing: border-box; text-align: center; padding: 9px 11px; border: 1px solid #d3d3d3; color: #36445a; text-decoration: none; font-size: calc(14px * var(--fz)); line-height: 1; } .pub-pg:hover { border-color: #003576; color: #003576; } .pub-pg.active { background: #003576; border-color: #003576; color: #fff; font-weight: 700; } .pub-pg-nav { font-weight: 700; } .pub-pg-gap { padding: 0 4px; color: #9aa1a9; } .pub-back { margin: 6px 0 18px; } .pub-back a { color: #003576; text-decoration: none; font-weight: 600; } .pub-detail-title { color: #042963; font-weight: 600; font-size: calc(22px * var(--fz)); margin: 0 0 18px; line-height: 1.3; } .pub-detail-table { width: 100%; border-collapse: collapse; } /* th has a global navy bg + white text (custom-consolidated) — keep it readable as a navy label column */ .pub-detail-table th { text-align: left; vertical-align: top; width: 190px; color: #fff !important; background: #042963 !important; font-weight: 700; padding: 11px 16px !important; border: 0; border-bottom: 2px solid #fff !important; font-size: calc(14px * var(--fz)); } .pub-detail-table td { vertical-align: top; padding: 11px 0 11px 18px; border-bottom: 1px solid #eee; color: #333; font-size: calc(14px * var(--fz)); line-height: 1.5; } .pub-detail-table td p { margin: 0; } .pub-detail-table a { color: #003576; } @media (max-width: 700px) { .pub-nav { columns: 1; } .pub-search { position: static; width: 100%; margin: 0 0 12px; } .pub-detail-table th { width: 120px; } } /* beat the global "#jm-maincontent p {color:#000;margin:15px 0}" rule on our
elements */ #jm-maincontent .pub-yearbar p { color: #fff; margin: 0; } #jm-maincontent .pub-navgrp-name { color: #6b7070; margin: 0 0 6px; } #jm-maincontent .pub-navgrp-name.active { color: #003576; } #jm-maincontent .pub-nav p { color: #36445a; margin: 4px 0; } #jm-maincontent .pub-nav p.active a { color: #003576; } #jm-maincontent .pub-none { color: #6b7070; margin: 24px 0; } #jm-maincontent .pub-detail-table td p { margin: 0; color: #333; } /* ===== Institute sub-pages recovered from live ===== */ /* Mission: 3 goal boxes */ .mission-intro { line-height: 1.6; } .mission-goals-h { color: #042963; font-weight: 600; font-size: calc(18px * var(--fz)); margin: 26px 0 14px; } .goal-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 6px 0; } /* navy "goal" tiles — now clickable links to the goal sub-articles (live Smart Slider tiles), with the hover the live tiles had (n2-has-hover): lighten + lift. */ .goal-box { background: #042963; color: #fff !important; text-decoration: none !important; text-align: center; padding: 30px 18px; font-weight: 600; font-size: calc(16px * var(--fz)); line-height: 1.4; display: flex; align-items: center; justify-content: center; min-height: 120px; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; } .goal-box:hover, .goal-box:focus { background: #0a47ad; color: #fff !important; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(4,41,99,.28); } @media (max-width: 700px) { .goal-boxes { grid-template-columns: 1fr; } } /* goal sub-articles (Scientific excellence / Institutional development / Organizational culture): a left image + the goals as white shadow cards in a 2-column masonry, like the live Smart Slider (which the migration dropped). break-inside:avoid keeps each card/image whole across columns. */ .jm-subpage #jm-maincontent .goal-cards { column-count: 2; column-gap: 26px; margin: 10px 0 4px; } .goal-cards-img, .goal-card { break-inside: avoid; margin: 0 0 26px; } .goal-cards-img { display: block; } .goal-cards-img img { width: 100%; height: auto; display: block; } .goal-card { background: #fff; box-shadow: 0 3px 16px rgba(0,0,0,.13); text-align: center; padding: 26px 24px; line-height: 1.55; color: #333; font-size: calc(15px * var(--fz)); } /* few-goal pages: image floats left, the cards stack in a single right column (live 4-tile look) */ .jm-subpage #jm-maincontent .goal-cards--split { column-count: auto; overflow: hidden; } .goal-cards--split .goal-cards-img { float: left; width: 47%; margin: 0; } .goal-cards--split .goal-card { width: 47%; margin-left: 53%; } @media (max-width: 700px) { .jm-subpage #jm-maincontent .goal-cards { column-count: 1; } .goal-cards--split .goal-cards-img { float: none; width: 100%; margin: 0 0 26px; } .goal-cards--split .goal-card { width: 100%; margin-left: 0; } } /* Organizational structure: accordion (reuses .labacc-head/.labacc-body toggle JS) */ .orgacc { max-width: 780px; } .orgacc .labacc-item { margin: 0 0 10px; } .orgacc .org-units { list-style: none; margin: 0; padding: 2px 0; } .orgacc .org-units li { padding: 6px 2px; font-size: calc(14px * var(--fz)); color: #333; border-bottom: 1px solid #f1f3f6; line-height: 1.4; } .orgacc .org-units li:last-child { border-bottom: 0; } /* International Advisory Board: member photo cards */ .iab h3 { color: #042963; font-size: calc(20px * var(--fz)); font-weight: 600; margin: 0 0 14px; } .iab .iab-h { font-weight: 700; color: #042963; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 16px; } .iab .iab-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 18px; margin: 0 0 28px; } .iab .iab-card { text-align: center; } .iab .iab-ph { width: 120px; height: 120px; border-radius: 50%; background-size: cover; background-position: center 28%; background-color: #eef0f3; margin: 0 auto 10px; } .iab .iab-name { font-weight: 600; color: #042963; font-size: calc(14px * var(--fz)); line-height: 1.3; } .iab .iab-aff { color: #555; font-size: calc(12px * var(--fz)); line-height: 1.35; margin-top: 3px; } .iab .iab-role { color: #008344; font-weight: 600; font-size: calc(12px * var(--fz)); margin-top: 3px; } .iab .iab-photo { margin: 18px 0 0; } .iab .iab-photo img { max-width: 100%; height: auto; } .iab .iab-photo figcaption { color: #555; font-size: calc(13px * var(--fz)); margin-top: 8px; font-style: italic; } @media (max-width: 900px) { .iab .iab-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .iab .iab-grid { grid-template-columns: repeat(2, 1fr); } } /* Researchers' councils landing: logo boxes */ .council-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 18px 0; } .council-cards a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 28px 18px; border: 1px solid #e4e8ee; text-decoration: none; transition: box-shadow .15s ease; } .council-cards a:hover { box-shadow: 0 3px 16px rgba(0,0,0,.10); } .council-cards img { max-width: 140px; max-height: 120px; height: auto; } .council-cards span { color: #042963; font-weight: 600; font-size: calc(15px * var(--fz)); } @media (max-width: 700px) { .council-cards { grid-template-columns: 1fr; } } /* Council pages */ .council { line-height: 1.6; } .council .council-logo { float: right; max-width: 170px; margin: 0 0 14px 24px; } .council .council-contacts { list-style: none; padding: 0; margin: 14px 0; } .council .council-contacts li { padding: 4px 0; } .council .council-contacts a { color: #042963; font-weight: 600; } .council .council-photos { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0 0; } .council .council-photos img { width: 100%; height: auto; } @media (max-width: 600px) { .council .council-photos { grid-template-columns: 1fr; } } /* Legal Acts: 3 boxes */ .legal-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 18px 0; } .legal-box { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 28px 18px; border: 1px solid #e4e8ee; text-decoration: none; transition: box-shadow .15s ease; } .legal-box:hover { box-shadow: 0 3px 16px rgba(0,0,0,.10); } .legal-box .legal-pdf { display: inline-block; background: #b00; color: #fff; font-weight: 700; font-size: calc(13px * var(--fz)); padding: 8px 14px; letter-spacing: 1px; } .legal-box .legal-title { color: #042963; font-weight: 600; font-size: calc(14px * var(--fz)); line-height: 1.4; } @media (max-width: 700px) { .legal-boxes { grid-template-columns: 1fr; } } /* Director detail (catid 409) */ .person-detail table { border: 0; border-collapse: collapse; width: 100%; } .person-detail td { vertical-align: top; padding: 0 18px 0 0; } .person-detail td:first-child { width: 170px; } .person-detail img { max-width: 100%; height: auto; } .person-detail h2 { display: block !important; color: #042963; font-weight: 600; font-size: calc(22px * var(--fz)); margin: 0 0 12px; } .person-detail h3 { color: #042963; } /* beat legacy #jm-maincontent overrides (li:nth-child{padding:0 120px}, p color/margin) */ #jm-maincontent .orgacc .org-units li { padding: 6px 2px !important; } #jm-maincontent .iab .iab-aff, #jm-maincontent .iab .iab-role, #jm-maincontent .iab .iab-name { margin-top: 3px; } #jm-maincontent .council .council-contacts li { padding: 4px 0 !important; } /* ===== People grid (Directors / Authorities — catid 409) ===== Own class names (.people-*) deliberately avoid the tangled legacy .person-* / body.itemid-140 rules in custom-consolidated.css that broke the layout. Round photo with the FACE centred (object-position), caption in exactly two lines (name + position), clean hover (no stray highlight box). Layout target = live Directors page. */ .people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px 24px; max-width: 760px; margin: 30px auto; } .people-card { text-align: center; min-width: 0; } .people-photo { display: block; width: 180px; height: 180px; margin: 0 auto 16px; border-radius: 50%; overflow: hidden; } .people-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; display: block; transition: transform .25s ease; } .people-card:hover .people-photo img { transform: scale(1.06); } .people-info { display: inline-block; text-align: center; padding: 6px 14px 8px; border-radius: 5px; transition: background .2s ease, box-shadow .2s ease; } .people-card:hover .people-info { background: #f5f7fa; box-shadow: 0 2px 14px rgba(0,0,0,.12); } .people-name { margin: 0 0 2px; line-height: 1.3; white-space: nowrap; } .people-name a { color: #042963; font-family: Montserrat, sans-serif; font-weight: 700; font-size: calc(15px * var(--fz)); text-decoration: none; } .people-card:hover .people-name a { color: #2374cd; } .people-pos { margin: 0; color: #333; font-size: calc(13px * var(--fz)); line-height: 1.35; } @media (max-width: 900px) { .people-grid { grid-template-columns: repeat(2, 1fr); max-width: 520px; } } @media (max-width: 560px) { .people-grid { grid-template-columns: 1fr; max-width: 280px; } } /* ===== Grants accordion (live com_rrrgrants — collapsible groups by funding agency) ===== */ .grants details.grants-group { border-bottom: 1px solid #e2e2e2; } .grants summary.grants-title { cursor: pointer; padding: 14px 8px; font-family: Montserrat, sans-serif; font-weight: 700; color: #042963; font-size: calc(16px * var(--fz)); letter-spacing: .02em; text-transform: uppercase; list-style: none; } .grants summary.grants-title::-webkit-details-marker { display: none; } .grants summary.grants-title::before { content: '\f0d7'; font-family: FontAwesome; margin-right: 10px; color: #042963; } .grants details[open] > summary.grants-title::before { content: '\f0d8'; } .grants .grants-count { color: #9aa3b0; font-weight: 400; font-size: .85em; } .grants .grants-list { padding: 0 8px 14px; } .grants .grants-row { display: grid; grid-template-columns: 38px 1fr 190px; gap: 12px; padding: 9px 0; border-top: 1px solid #eef1f5; font-size: calc(13px * var(--fz)); line-height: 1.45; } .grants .grants-num { color: #9aa3b0; } .grants .grants-desc { color: #333; } .grants .grants-pi { color: #042963; font-weight: 600; } @media (max-width: 700px) { .grants .grants-row { grid-template-columns: 28px 1fr; } .grants .grants-pi { grid-column: 2; color: #555; font-weight: 400; } } /* ===== Annual Reports grid (live com_rrrcatalogues — report covers linking to PDFs) ===== */ .annual-reports { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 34px 24px; margin: 18px 0; } .annual-reports .report-item a { display: block; text-decoration: none; text-align: center; } /* covers displayed at 320x460. .image-wrapper is an inline AND legacy body.itemid-477 .image-wrapper{width:23%} shrinks it -> force block + 320px. */ .annual-reports .image-wrapper { display: block !important; width: 320px !important; max-width: 100% !important; margin: 0 auto; } .annual-reports .image-wrapper img.resize { display: block; width: 100%; aspect-ratio: 320 / 460; object-fit: cover; height: auto; border: 1px solid #e2e2e2; box-shadow: 0 1px 10px rgba(0,0,0,.06); transition: box-shadow .2s ease; } .annual-reports .report-item a:hover img.resize { box-shadow: 0 2px 22px rgba(0,0,0,.18); } .annual-reports .report-title { display: block; margin-top: 10px; color: #042963; font-family: Montserrat, sans-serif; font-weight: 600; font-size: calc(14px * var(--fz)); line-height: 1.25; }