/* ===================================================== PRI · TUM overrides on top of StudyPress (Bootstrap 5) Loaded LAST. Brand: green #097b3e / dark #097B3E / gold #d89837 ===================================================== */ :root { --pri-green: #097b3e; --pri-green-dark: #097B3E; --pri-gold: #d89837; } /* overflow-x: clip (not hidden) keeps `position: sticky` working — `hidden` on turns it into a scroll container and breaks the sticky navbar. */ body { font-family: "Manrope", -apple-system, "Segoe UI", system-ui, sans-serif; overflow-x: clip; } /* Full-screen layout — containers span the viewport with comfortable gutters */ .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 100% !important; width: 100%; padding-left: clamp(1rem, 4vw, 4.5rem); padding-right: clamp(1rem, 4vw, 4.5rem); } /* ---- Top utility bar -------------------------------------------------- */ .header-top { background: var(--pri-green-dark); color: rgba(255, 255, 255, .82); font-size: 13px; } .header-top a { color: #fff; } .header-top .contact-info { margin: 0; padding: 8px 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 22px; } .header-top .contact-info li { color: rgba(255, 255, 255, .82); } .header-top .contact-info i { color: var(--pri-gold); margin-right: 6px; } .header-top .styled-icons { margin: 0; padding: 6px 0; list-style: none; display: inline-flex; gap: 8px; } .header-top .styled-icons a { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: #fff; } .header-top .styled-icons a:hover { background: var(--pri-gold); border-color: var(--pri-gold); color: var(--pri-green-dark); } .header-top-mainlink { font-weight: 600; color: var(--pri-gold) !important; white-space: nowrap; } .header-top-mainlink:hover { color: #fff !important; } /* ---- Bootstrap 5 navbar (replaces menuzord) -------------------------- */ .pri-navbar { background: #fff; box-shadow: 0 2px 14px rgba(5, 45, 23, .07); border-bottom: 3px solid var(--pri-gold); position: sticky; top: 0; z-index: 1030; transition: box-shadow .25s ease, padding .25s ease; } .pri-navbar.is-stuck { box-shadow: 0 6px 22px rgba(5, 45, 23, .14); } .pri-navbar .navbar-brand { display: flex; align-items: center; gap: 12px; padding: 10px 0; } .pri-navbar .brand-mark { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--pri-green), var(--pri-green-dark)); color: var(--pri-gold); font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 600; font-size: 22px; } .pri-navbar .brand-logo { height: 52px; width: 52px; max-width: 220px; object-fit: contain; flex-shrink: 0; border-radius: 50%; padding: 4px; background: #fff; border: 2px solid var(--pri-gold); box-shadow: 0 0 0 2px rgba(216, 152, 55, .25); } .pri-navbar .brand-name { font-family: "Fraunces", Georgia, serif; font-size: 18px; line-height: 1.05; color: var(--pri-green-dark); display: block; } .pri-navbar .brand-sub { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8a9a90; display: block; } .pri-navbar .navbar-nav .nav-link { font-weight: 600; font-size: 14.5px; color: #1d2a22; text-transform: uppercase; letter-spacing: .02em; padding: 28px 14px; position: relative; } .pri-navbar .navbar-nav .nav-link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 18px; height: 2px; background: var(--pri-gold); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; } .pri-navbar .navbar-nav .nav-link:hover, .pri-navbar .navbar-nav .nav-link.active { color: var(--pri-green); } .pri-navbar .navbar-nav .nav-link:hover::after, .pri-navbar .navbar-nav .nav-link.active::after { transform: scaleX(1); } .pri-navbar .nav-cta-btn { background: var(--pri-green); color: #fff; border-radius: 999px; padding: 10px 22px; font-weight: 600; font-size: 14px; } .pri-navbar .nav-cta-btn:hover { background: var(--pri-green-dark); color: #fff; } /* dropdown affordance (caret) — replaces the underline bar on toggle items */ .pri-navbar .navbar-nav .nav-link.dropdown-toggle { padding-right: 28px; } .pri-navbar .navbar-nav .nav-link.dropdown-toggle::after { content: ""; position: absolute; left: auto; right: 13px; bottom: auto; top: 50%; width: 7px; height: 7px; margin-top: -6px; background: none; border: 2px solid currentColor; border-top: 0; border-left: 0; transform: rotate(45deg); transition: transform .2s ease; } .pri-navbar .navbar-nav .nav-item.dropdown.show .nav-link.dropdown-toggle::after { transform: rotate(225deg); margin-top: -2px; } /* dropdown panel */ .pri-navbar .dropdown-menu { border: 0; border-radius: 12px; padding: 8px; margin-top: 0; box-shadow: 0 14px 38px rgba(5, 45, 23, .16); min-width: 210px; } .pri-navbar .dropdown-menu .dropdown-item { font-weight: 600; font-size: 14px; color: #1d2a22; text-transform: uppercase; letter-spacing: .02em; padding: 10px 14px; border-radius: 8px; } .pri-navbar .dropdown-menu .dropdown-item:hover, .pri-navbar .dropdown-menu .dropdown-item.active { background: var(--pri-green); color: #fff; } @media (max-width: 991.98px) { .pri-navbar .navbar-nav .nav-link { padding: 10px 0; border-bottom: 1px solid #eee; } .pri-navbar .navbar-nav .nav-link::after { display: none; } .pri-navbar .navbar-nav .nav-link.dropdown-toggle::after { display: block; right: 4px; } .pri-navbar .dropdown-menu { box-shadow: none; padding: 0 0 0 12px; min-width: 0; } .pri-navbar .dropdown-menu .dropdown-item { border-bottom: 1px solid #eee; border-radius: 0; } .pri-navbar .navbar-collapse { padding-bottom: 14px; } } /* ---- Section rhythm + titles ----------------------------------------- */ section { padding-block: 70px; } .section-title h2, h2.line-bottom { font-family: "Fraunces", Georgia, serif; } .bg-silver-light { background: #f5f2eb; } /* ---- Research / focus cards (course-item reused) --------------------- */ .pri-focus-card { background: #fff; border: 1px solid #e9efe9; border-radius: 10px; height: 100%; padding: 34px 28px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .pri-focus-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(5,45,23,.1); border-color: var(--pri-gold); } .pri-focus-card .icon { font-size: 46px; color: var(--pri-gold); line-height: 1; margin-bottom: 18px; display: block; } .pri-focus-card h4 { font-family: "Fraunces", Georgia, serif; margin: 0 0 10px; } .pri-focus-card p { color: #5a655d; margin: 0; } /* ---- Mandate / numbered list ---------------------------------------- */ .pri-num { font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 30px; color: var(--pri-gold); line-height: 1; } /* ---- Partner logo / name tiles -------------------------------------- */ .pri-partner-tile { background: #fff; border: 1px solid #e9efe9; border-radius: 8px; height: 100%; min-height: 110px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 18px; font-family: "Fraunces", Georgia, serif; color: var(--pri-green-dark); line-height: 1.25; transition: border-color .2s ease, box-shadow .2s ease; } .pri-partner-tile:hover { border-color: var(--pri-gold); box-shadow: 0 10px 24px rgba(5,45,23,.08); } .pri-partner-tile img { max-height: 70px; width: auto; object-fit: contain; } /* ---- Staff placeholder thumb ---------------------------------------- */ .staff-thumb.pri-initials { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--pri-green), var(--pri-green-dark)); color: var(--pri-gold); font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 56px; } /* Staff cards: keep the role/title on a single line (ellipsis) for uniform card heights with long titles. Applies everywhere staff cards are used (home, about team grid, profile suggestions). min-width:0 lets grid cells shrink so the ellipsis can engage. */ .staff-item, .staff-content { min-width: 0; } .staff-item { overflow: hidden; } .staff-content > p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* ---- Downloads list (compact cards) ---------------------------------- */ .pri-file-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid #e9efe9; border-radius: 7px; background: #fff; margin-bottom: 7px; transition: box-shadow .2s ease, border-color .2s ease; } .pri-file-row:hover { box-shadow: 0 6px 16px rgba(5,45,23,.07); border-color: #cfe3d6; } .pri-file-row .fi { width: 34px; height: 34px; flex-shrink: 0; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: #e5f1ea; color: var(--pri-green); font-size: 16px; } .pri-file-row .name { font-size: 14px; line-height: 1.3; } .pri-file-row .meta { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #97a39a; margin-top: 1px; } .pri-file-row .btn { padding: 5px 12px; font-size: 12px; } /* ---- Downloads filter + search toolbar ------------------------------- */ .dl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; } .dl-search { position: relative; flex: 1 1 260px; max-width: 380px; } .dl-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #9aa79e; font-size: 18px; pointer-events: none; } .dl-search input { width: 100%; height: 44px; padding: 0 16px 0 42px; border: 1px solid #dde6df; border-radius: 999px; background: #fff; font-size: 14px; color: #1d2a22; outline: none; transition: border-color .2s ease, box-shadow .2s ease; } .dl-search input:focus { border-color: var(--pri-green); box-shadow: 0 0 0 3px rgba(9,123,62,.12); } .dl-select { height: 44px; min-width: 200px; padding: 0 38px 0 16px; border: 1px solid #dde6df; border-radius: 999px; background: #fff; font-size: 14px; color: #1d2a22; cursor: pointer; outline: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23097b3e' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; } .dl-select:focus { border-color: var(--pri-green); box-shadow: 0 0 0 3px rgba(9,123,62,.12); } .dl-reset { font-size: 13px; color: #97a39a; text-decoration: underline; align-self: center; } .dl-reset:hover { color: var(--pri-green); } .dl-summary { font-size: 13px; color: #7a857c; margin-bottom: 14px; } .filter-chips { display: flex; flex-wrap: wrap; gap: 8px; } .filter-chips .chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid #dde6df; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; color: #3a443c; cursor: pointer; transition: all .18s ease; line-height: 1; } .filter-chips .chip:hover { border-color: var(--pri-green); color: var(--pri-green); } .filter-chips .chip.is-active { background: var(--pri-green); border-color: var(--pri-green); color: #fff; } .filter-chips .chip .dl-count { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #e5f1ea; color: var(--pri-green); } .filter-chips .chip.is-active .dl-count { background: rgba(255,255,255,.22); color: #fff; } /* ---- Pagination (green) ---------------------------------------------- */ .pri-pagination { gap: 4px; } .pri-pagination .page-link { color: var(--pri-green); border-color: #e0e6e0; border-radius: 6px; min-width: 38px; text-align: center; } .pri-pagination .page-link:hover { background: #e5f1ea; color: var(--pri-green-dark); border-color: #cfe3d6; } .pri-pagination .page-item.active .page-link { background: var(--pri-green); border-color: var(--pri-green); color: #fff; } .pri-pagination .page-item.disabled .page-link { color: #c2cbc4; } /* ---- Notices / ledger rows ------------------------------------------ */ .pri-ledger { border-top: 1px solid #e6e0d4; } .pri-ledger .row-item { display: grid; grid-template-columns: 70px 1fr 1.2fr; gap: 24px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid #e6e0d4; } .pri-ledger .row-item .num { font-size: 13px; color: var(--pri-gold); } .pri-ledger .row-item .name { font-family: "Fraunces", Georgia, serif; font-size: 17px; } .pri-ledger .row-item .partners { color: #5a655d; font-size: 14px; } @media (max-width: 640px){ .pri-ledger .row-item { grid-template-columns: 1fr; gap: 4px; } } /* ---- scrollToTop ----------------------------------------------------- */ .scrollToTop { position: fixed; right: 24px; bottom: 24px; width: 44px; height: 44px; z-index: 1000; background: var(--pri-green); color: #fff; border-radius: 50%; display: none; align-items: center; justify-content: center; opacity: .9; } .scrollToTop.show { display: inline-flex; } .scrollToTop:hover { background: var(--pri-green-dark); color: #fff; } /* ---- Empty state ----------------------------------------------------- */ .pri-empty { text-align: center; padding: 60px 20px; color: #97a39a; } .pri-empty i { font-size: 46px; color: #d9d2c4; margin-bottom: 14px; display: block; } /* ---- Event cards (shared: events listing + home upcoming) ------------ */ .pri-event-card{display:flex;flex-direction:column;width:100%;background:#fff;border:1px solid #e3ece6;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(5,45,23,.06);transition:transform .2s ease,box-shadow .2s ease;} .pri-event-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(5,45,23,.12);} .pri-event-card .pec-thumb{position:relative;display:block;height:170px;background:#e5f1ea;overflow:hidden;} .pri-event-card .pec-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;} .pri-event-card:hover .pec-thumb img{transform:scale(1.05);} .pri-event-card .pec-thumb-ph{display:flex;width:100%;height:100%;align-items:center;justify-content:center;color:#097b3e;} .pri-event-card .pec-thumb-ph i{font-size:44px;} .pri-event-card .pec-date{position:absolute;left:12px;bottom:12px;background:#097b3e;color:#fff;border-radius:8px;padding:8px 12px;text-align:center;line-height:1;box-shadow:0 6px 16px rgba(5,45,23,.35);} .pri-event-card .pec-date strong{display:block;font-size:22px;font-family:'Fraunces',serif;} .pri-event-card .pec-date small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;margin-top:2px;} .pri-event-card .pec-body{display:flex;flex-direction:column;flex:1;padding:18px;} .pri-event-card .pec-title{margin:0 0 12px;font-size:17px;line-height:1.35;} .pri-event-card .pec-title a{color:#1d2a22;} .pri-event-card .pec-title a:hover{color:#097b3e;} .pri-event-card .pec-meta{margin:0;font-size:13px;color:#7a857c;} .pri-event-card .pec-meta li{display:flex;align-items:flex-start;gap:8px;margin-bottom:6px;} .pri-event-card .pec-meta li:last-child{margin-bottom:0;} .pri-event-card .pec-meta i{color:#d89837;font-size:15px;flex-shrink:0;margin-top:1px;} .pri-event-card .pec-foot{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-top:1px solid #e3ece6;background:#f6faf8;color:#097b3e;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.03em;} .pri-event-card .pec-foot i{transition:transform .2s ease;} .pri-event-card:hover .pec-foot{background:#097b3e;color:#fff;} .pri-event-card:hover .pec-foot i{transform:translateX(4px);} /* ---- Notices ticker (below hero) ------------------------------------- */ .pri-notice-ticker{display:flex;align-items:stretch;background:#097b3e;color:#fff;overflow:hidden;} .pri-notice-ticker .pnt-label{display:flex;align-items:center;gap:8px;background:var(--pri-gold);color:#1d2a22;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:13px;padding:0 18px;white-space:nowrap;flex-shrink:0;} .pri-notice-ticker .pnt-label i{font-size:16px;} .pri-notice-ticker .pnt-viewport{position:relative;flex:1;overflow:hidden;} .pri-notice-ticker .pnt-track{display:inline-flex;align-items:center;white-space:nowrap;will-change:transform;animation:pntScroll 40s linear infinite;} .pri-notice-ticker:hover .pnt-track{animation-play-state:paused;} .pri-notice-ticker .pnt-item{display:inline-flex;align-items:center;color:#fff;font-size:14px;padding:11px 26px;text-decoration:none;} .pri-notice-ticker .pnt-item::before{content:"\f0a1";font-family:"Font Awesome 5 Free";font-weight:900;color:var(--pri-gold);margin-right:9px;font-size:12px;} .pri-notice-ticker .pnt-item:hover{color:var(--pri-gold);} @keyframes pntScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}} /* ---- Partner / collaboration auto-slider (above footer) -------------- */ .pri-partner-slider{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);} .pri-partner-slider .pps-track{display:inline-flex;align-items:stretch;gap:18px;will-change:transform;animation:ppsScroll 45s linear infinite;} .pri-partner-slider:hover .pps-track{animation-play-state:paused;} .pri-partner-slider .pps-item{flex:0 0 auto;width:200px;display:flex;align-items:center;justify-content:center;text-align:center;background:#fff;border:1px solid #eef3ef;border-radius:12px;padding:22px 18px;min-height:104px;box-shadow:0 6px 18px rgba(5,45,23,.05);transition:border-color .2s,box-shadow .2s;color:#1d2a22;font-weight:600;font-size:14px;text-decoration:none;} .pri-partner-slider .pps-item:hover{border-color:var(--pri-gold);box-shadow:0 12px 26px rgba(5,45,23,.1);color:#097b3e;} .pri-partner-slider .pps-item img{max-height:60px;max-width:100%;width:auto;object-fit:contain;} @keyframes ppsScroll{from{transform:translateX(0);}to{transform:translateX(calc(-50% - 9px));}} @media (prefers-reduced-motion: reduce){.pri-notice-ticker .pnt-track,.pri-partner-slider .pps-track{animation:none;}} /* ---- Staff cards (shared: about team + home team) -------------------- */ #team .row > [class*="col-"]{min-width:0;} .pri-staff-card{background:#fff;border:1px solid #eef3ef;border-radius:12px;padding:18px 12px;box-shadow:0 6px 18px rgba(5,45,23,.05);transition:transform .2s,box-shadow .2s;min-width:0;} .pri-staff-card .staff-content{min-width:0;} .pri-staff-card .staff-content p{max-width:100%;} .pri-staff-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(5,45,23,.1);} .pri-staff-socials{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;} .pri-staff-socials a{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#f1f6f2;color:#097b3e;font-size:13px;transition:background .2s,color .2s;} .pri-staff-socials a:hover{background:#097b3e;color:#fff;} .pri-staff-view{display:inline-block;font-size:12.5px;font-weight:600;color:#d89837;text-decoration:none;} .pri-staff-view:hover{color:#a8741f;} /* Partner cards (shared by PRI partnerships + centre pages) */ .pri-partner-card{background:#fff;border:1px solid #e3ece6;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(5,45,23,.06);transition:transform .2s ease,box-shadow .2s ease;display:flex;flex-direction:column;width:100%;text-decoration:none;color:inherit;} a.pri-partner-card:hover{color:inherit;} .pri-partner-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(5,45,23,.12);} .pri-partner-card .ppc-logo{position:relative;height:120px;display:flex;align-items:center;justify-content:center;padding:16px;background:#f4f8f5;border-bottom:1px solid #eef3ef;} .pri-partner-card .ppc-logo img{max-width:100%;max-height:88px;object-fit:contain;} .pri-partner-card .ppc-initials{font-size:28px;font-weight:700;color:#097b3e;letter-spacing:1px;width:62px;height:62px;border-radius:50%;background:#e5f1ea;display:flex;align-items:center;justify-content:center;} .pri-partner-card .ppc-type{position:absolute;left:10px;top:10px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-radius:6px;padding:3px 8px;color:#fff;} .pri-partner-card .ppc-type-local{background:rgba(9,123,62,.85);} .pri-partner-card .ppc-type-international{background:rgba(196,148,18,.9);} .pri-partner-card .ppc-body{padding:14px 16px;display:flex;flex-direction:column;flex:1;} .pri-partner-card .ppc-name{margin:0 0 6px;font-size:15px;line-height:1.35;color:#1d2a22;} .pri-partner-card .ppc-desc{margin:0 0 8px;font-size:12.5px;line-height:1.5;color:#5a655d;} .pri-partner-card .ppc-link{margin-top:auto;font-size:12px;font-weight:600;color:#097b3e;} /* News cards (shared by PRI news + centre pages) */ .pri-news-card{display:flex;flex-direction:column;width:100%;background:#fff;border:1px solid #e3ece6;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(5,45,23,.06);transition:transform .2s ease,box-shadow .2s ease;} .pri-news-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(5,45,23,.12);} .pri-news-card .pnc-thumb{position:relative;display:block;height:170px;background:#e5f1ea;overflow:hidden;} .pri-news-card .pnc-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;} .pri-news-card:hover .pnc-thumb img{transform:scale(1.05);} .pri-news-card .pnc-thumb-ph{display:flex;width:100%;height:100%;align-items:center;justify-content:center;color:#097b3e;} .pri-news-card .pnc-thumb-ph i{font-size:46px;} .pri-news-card .pnc-body{display:flex;flex-direction:column;flex:1;padding:16px 16px 14px;} .pri-news-card .pnc-date{color:#097b3e;font-size:12px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;} .pri-news-card .pnc-link{margin-top:auto;}