`, because a Text Editor's inherited * colour loses to the kit's own per-widget declaration (see §11). */ .irg-newsletter-cta .irg-newsletter-cta__lead, .irg-newsletter-cta .irg-newsletter-cta__lead p { margin: 15px 0; font-family: var(--irg-font-bold), "Century Gothic Bold", sans-serif; font-size: 30px; line-height: 35px; color: #010050; text-align: center; } /* * `legacy.css:3631-3635`. Chained under the section so the generic * `.elementor-button` pill added in §7 cannot re-inflate the padding — the same * trap the filter's Clear button hit in §11. */ .irg-newsletter-cta .elementor-button { margin-top: 5px; padding: 7px 25px; border: none; border-radius: 25px; background: #000050; color: #fff; font-size: 15px; font-weight: 600; } @media (max-width: 780px) { .irg-newsletter-cta .irg-newsletter-cta__lead, .irg-newsletter-cta .irg-newsletter-cta__lead p { font-size: 24px; line-height: 29px; } } /* ---- Shared reveal panel behaviour ------------------------------------ */ /* * Hidden with opacity rather than `display: none` so the link inside stays in * the accessibility tree and remains focusable — that is what lets keyboard * focus open the panel. `pointer-events: none` keeps the invisible panel from * swallowing clicks meant for the card beneath it. * * Legacy revealed this on `:hover` alone, which left the content unreachable * on touch devices. Keeping it reachable is a deliberate deviation recorded in * docs/adr/0009-featured-webinar-hover-reveal-is-tap-accessible.md — do not * revert it to hover-only while chasing legacy parity. */ /* * Chained under the section class deliberately. Both panels are Elementor * Containers, and `.e-con { position: relative }` in frontend.min.css has the * same specificity as a bare `.irg-loop-card__reveal` — and loads after this * file, so it would win the tie and the panel would sit below the card * instead of over it. */ .irg-featured-conversations .irg-featured-row__reveal, .irg-conversation-grid .irg-loop-card__reveal { position: absolute; inset: 0; opacity: 0; pointer-events: none; text-align: center; cursor: pointer; color: #fff; background-image: var(--irg-reveal-gradient); font-size: 17px; transition: opacity 0.25s ease; } .irg-featured-conversations .irg-featured-row:hover .irg-featured-row__reveal, .irg-featured-conversations .irg-featured-row:focus-within .irg-featured-row__reveal, .irg-featured-conversations .irg-featured-row.is-revealed .irg-featured-row__reveal, .irg-conversation-grid .irg-loop-card:hover .irg-loop-card__reveal, .irg-conversation-grid .irg-loop-card:focus-within .irg-loop-card__reveal, .irg-conversation-grid .irg-loop-card.is-revealed .irg-loop-card__reveal { opacity: 1; pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .irg-featured-conversations .irg-featured-row__reveal, .irg-conversation-grid .irg-loop-card__reveal { transition: none; } } /* * White is repeated on the widgets rather than only inherited from the panel. * Two of them — Post Excerpt, and a Text Editor fed by a dynamic tag — emit * their text with no
wrapper, so the old `p`-scoped rule missed them; and * Elementor's kit CSS colours those wrappers directly * (`.elementor-widget-theme-post-excerpt { color: var(--e-global-color-text) }`). * An inherited colour loses to any direct declaration no matter how specific the * ancestor's selector is, which is why the pull-quote and the host's name were * left in body navy on the navy-to-coral gradient. */ .irg-featured-conversations .irg-featured-row__reveal .elementor-widget, .irg-conversation-grid .irg-loop-card__reveal .elementor-widget { color: #fff; } /* ---- "Available on" icon strip ---------------------------------------- */ .irg-availability { margin-top: 45px; text-align: center; } .irg-availability__heading { margin: 0; color: #fff; font-family: var(--irg-font); font-size: 22px; } .irg-availability__list { margin: 15px 0 0; padding: 0; list-style: none; } .irg-availability__item { display: inline-block; margin: 0 6px 0 0; padding: 0; } .irg-availability__item img { width: 35px; height: auto; margin: 0; } /* ---- Standard card ----------------------------------------------------- */ /* * Elementor ships every container with `--padding-*: 10px`. The card and its * face are both containers, so the default framed each portrait in 20px of * white and shrank it to 430px. Legacy runs the image flush to the card edge * at the full 470px, so zero the variables rather than the padding itself — * Elementor feeds them through `padding-inline-*`, which keeps RTL working. */ .irg-conversation-grid .irg-loop-card, .irg-conversation-grid .irg-loop-card__face { --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; } .irg-conversation-grid .irg-loop-card { position: relative; height: 100%; overflow: hidden; } .irg-conversation-grid .irg-loop-card__face { height: 100%; color: var(--irg-navy); text-decoration: none; } .irg-conversation-grid .irg-loop-card__portrait img { display: block; width: 100%; height: auto; } /* * Cards in a row stretch to the tallest one, but the copy block sized to its * own text, so shorter cards ended on a strip of page background. Growing it * carries the white to the bottom edge the way legacy's fixed-height text box * did. */ .irg-conversation-grid .irg-loop-card .irg-loop-card__copy { flex: 1 1 auto; } .irg-conversation-grid .irg-loop-card__copy { padding: 20px 0; background: #fff; text-align: center; } .irg-conversation-grid .irg-loop-card__name .elementor-heading-title { margin: 0; color: var(--irg-navy); font-family: var(--irg-font-bold); font-size: 26px; } .irg-conversation-grid .irg-loop-card__role p { margin: 5px 0; color: var(--irg-navy); font-size: 15px; } .irg-conversation-grid .irg-loop-card__logo img { width: auto; max-width: 150px; min-height: 40px; max-height: 40px; margin-top: 25px; object-fit: contain; } /* * `gap: 0` for the same reason as the featured row: legacy spaced this panel * with the paragraphs' own margins (blurb 25px, then the host credit as one
* with a
), so Elementor's 20px Container gap added a step to every one of
* those and pushed the icons off shorter cards.
*/
.irg-conversation-grid .irg-loop-card__reveal {
padding: 35px;
gap: 0;
}
.irg-conversation-grid .irg-loop-card__blurb {
font-size: 17px;
}
/*
* Four classes, and the logical property, to restore legacy's 25px under the
* blurb: Elementor's `.e-con .elementor-widget.elementor-widget` zeroes
* `margin-block-end` on every widget inside a Container, and frontend.min.css
* loads after this file — so a plain `.irg-loop-card__blurb { margin-bottom }`
* silently did nothing at all.
*/
.irg-conversation-grid .irg-loop-card__reveal .elementor-widget.irg-loop-card__blurb {
margin-block-end: 25px;
}
.irg-conversation-grid .irg-loop-card__hosted-label p,
.irg-conversation-grid .irg-loop-card__hosted-name p {
margin: 0;
font-size: 17px;
}
/* The small card's strip is tighter and its heading smaller than the row's. */
.irg-conversation-grid .irg-availability {
margin-top: 25px;
}
.irg-conversation-grid .irg-availability__heading {
font-size: 20px;
}
/*
* ---- Grid pagination ---------------------------------------------------
*
* The site-wide `.elementor-pagination .page-numbers` rule further down draws
* 40px navy pills, which is the house style for the publication archives. This
* page predates that: legacy renders flat 14px text, centred, 15px under the
* grid, so scope an override to the conversation grid rather than change the
* shared rule and disturb the other archives.
*
* Values are measured off the live page, not guessed. Note that the active
* page's blue box is Bootstrap's `.page-item.active .page-link` default
* showing through: legacy's own `.demand-pgnatin .pagination li a.active`
* never matches, because the `active` class sits on the `li` and that selector
* asks for it on the `a`. Reproduced as it renders, since that is the page
* readers actually see.
*/
.irg-conversation-grid .elementor-pagination {
width: 100%;
margin-top: 15px;
text-align: center;
}
.irg-conversation-grid .elementor-pagination .page-numbers {
display: inline-block;
min-width: 0;
height: auto;
padding: 0 5px;
border: 0;
border-radius: 0;
color: rgba(1, 0, 80, 0.4);
background: transparent;
font-family: var(--irg-font);
font-size: 14px;
line-height: 17.5px;
text-decoration: none;
}
.irg-conversation-grid .elementor-pagination a.page-numbers:hover,
.irg-conversation-grid .elementor-pagination a.page-numbers:focus-visible {
color: var(--irg-navy);
background: transparent;
}
.irg-conversation-grid .elementor-pagination .page-numbers.current {
border-radius: 4px;
color: #fff;
background: #007bff;
}
/* ---- Featured ("Most viewed") row -------------------------------------- */
.irg-featured-conversations .irg-featured-row {
--padding-top: 0px;
--padding-right: 0px;
--padding-bottom: 0px;
--padding-left: 0px;
position: relative;
overflow: hidden;
background: #fff;
}
/*
* Legacy alternated the portrait's side with two near-identical blocks of PHP
* (`if ($i % 2 == 0)`). One template plus this rule replaces both, so an
* editor's change to the row applies to every variant at once.
*/
.irg-featured-conversations .e-loop-item:nth-child(even) .irg-featured-row {
flex-direction: row-reverse;
}
.irg-featured-conversations .irg-featured-row__copy {
flex: 0 0 41.6667%;
max-width: 41.6667%;
background: #fff;
text-align: center;
}
/*
* The badge is a second widget in this column, so Elementor's default 20px
* container gap opened a white band under the photo. With the gap gone the
* portrait sets the row's height, which is how legacy sizes the row too.
*/
.irg-featured-conversations .irg-featured-row__media {
--gap: 0px;
--row-gap: 0px;
--column-gap: 0px;
position: relative;
flex: 0 0 58.3333%;
max-width: 58.3333%;
overflow: hidden;
}
/*
* Normally a no-op — the portrait is the taller column. It only bites when a
* long name or quote pushes the copy past the photo, and then it crops a few
* pixels instead of letterboxing, which is what legacy shows.
*/
.irg-featured-conversations .irg-featured-row__media .irg-featured-row__portrait {
flex: 1 1 auto;
min-height: 0;
}
.irg-featured-conversations .irg-featured-row__portrait img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.irg-featured-conversations .irg-featured-row__name .elementor-heading-title {
margin: 0;
color: var(--irg-navy);
font-family: var(--irg-font-bold);
font-size: 28px;
}
.irg-featured-conversations .irg-featured-row__role p {
margin: 10px 0 0;
color: var(--irg-navy);
font-size: 16px;
}
.irg-featured-conversations .irg-featured-row__logo img {
width: 180px;
max-width: 100%;
height: auto;
margin: 20px 0 25px;
object-fit: contain;
}
.irg-featured-conversations .irg-featured-row__quote .elementor-heading-title {
margin: 0 0 5px;
padding: 0 40px;
color: var(--irg-navy);
font-family: var(--irg-font-bold);
font-size: 19px;
}
/*
* The corner badge. A 160px square rotated 45° and pulled outside the media
* box, so only the triangle showing through `overflow: hidden` is visible —
* the same trick the legacy `.triangle-1` used.
*/
.irg-featured-conversations .irg-featured-row__badge-wrap {
position: static;
}
.irg-featured-conversations .irg-featured-row__badge {
position: absolute;
top: -80px;
right: -80px;
width: 160px;
height: 160px;
padding-top: 106px;
transform: rotate(45deg);
text-align: center;
background-image: linear-gradient(to right, #ff927e, #000050);
}
.irg-featured-conversations .e-loop-item:nth-child(even) .irg-featured-row__badge {
right: auto;
left: -80px;
transform: rotate(-45deg);
}
.irg-featured-conversations .irg-featured-row__badge p {
margin: 0;
padding: 0;
color: #fff;
font-size: 17px;
line-height: 20px;
}
/*
* Legacy laid this panel out as a Bootstrap row: `col-lg-5` (41.6667%) for the
* quote, then `offset-md-2` (16.6667%) of empty space before the second
* `col-lg-5`. Reproducing those exact fractions — rather than two 45% halves
* with a gap — is what keeps the host block over the portrait's side of the row
* instead of drifting towards the middle.
*/
.irg-featured-conversations .irg-featured-row__reveal {
display: flex;
align-items: center;
padding: 0;
gap: 0;
}
.irg-featured-conversations .irg-featured-row__reveal-left {
flex: 0 0 41.6667%;
max-width: 41.6667%;
padding: 20px 65px;
}
/*
* `gap: 0` because "Hosted by founder" and the host's name were one
with a
*
in legacy, reading as two lines of the same sentence. Here they are two
* widgets in a flex Container, which Elementor spaces with a 20px gap — zero it
* and let `.irg-availability`'s own 45px top margin be this column's only space.
*/
.irg-featured-conversations .irg-featured-row__reveal-right {
flex: 0 0 41.6667%;
max-width: 41.6667%;
margin-left: 16.6667%;
padding: 0;
gap: 0;
}
.irg-featured-conversations .irg-featured-row__reveal p {
margin: 0;
}
/*
* Below the legacy `col-md` breakpoint the row stacks, so the portrait sits
* above the copy on phones. `row-reverse` must be neutralised here too, or
* alternate rows would stack bottom-up.
*/
@media (max-width: 991px) {
/*
* `.e-loop-item` is here only for weight. Elementor's `.e-con.e-flex` sets
* `flex-direction` from a variable at the same specificity and loads after
* this file, so the plain two-class selector lost the tie and only the
* `nth-child(even)` rows — which happen to carry a third class — stacked.
*/
.irg-featured-conversations .e-loop-item .irg-featured-row,
.irg-featured-conversations .e-loop-item:nth-child(even) .irg-featured-row {
flex-direction: column;
}
.irg-featured-conversations .irg-featured-row__copy,
.irg-featured-conversations .irg-featured-row__media,
.irg-featured-conversations .irg-featured-row__reveal-left,
.irg-featured-conversations .irg-featured-row__reveal-right {
flex: 0 0 100%;
max-width: 100%;
}
/* The desktop column's `offset-md-2` equivalent, or it would push a
* full-width stacked panel sideways off the card. */
.irg-featured-conversations .irg-featured-row__reveal-left {
padding: 20px;
}
.irg-featured-conversations .irg-featured-row__reveal-right {
margin-left: 0;
}
.irg-featured-conversations .irg-featured-row__reveal {
flex-direction: column;
justify-content: center;
padding: 20px;
gap: 12px;
overflow-y: auto;
}
.irg-featured-conversations .irg-availability {
margin-top: 18px;
}
.irg-featured-conversations .irg-featured-row__name .elementor-heading-title {
font-size: 24px;
}
}
/* Keep each filter on one scrollable line instead of a wall of wrapped pills. */
.irg-elementor-page .e-filter {
scrollbar-width: thin;
}
/* Newsletter sign-up closes the webinar archive rather than interrupting it. */
.irg-newsletter-cta {
clear: both;
padding-block: 60px 80px;
background: var(--irg-white);
}
.irg-newsletter-cta__inner {
max-width: 640px;
margin-inline: auto;
text-align: center;
}
.irg-newsletter-cta__inner p {
margin: 0 0 22px;
}
.irg-newsletter-cta__inner p:last-child {
margin-bottom: 0;
}
.irg-newsletters-index .newsltrsons > a {
display: block;
color: inherit;
text-decoration: none;
}
.irg-pagination {
padding-block: 30px 60px;
}
.irg-pagination ul {
display: flex;
padding: 0;
gap: 8px;
list-style: none;
}
.irg-pagination a,
.irg-pagination .current {
display: block;
min-width: 40px;
padding: 8px 12px;
border: 1px solid var(--irg-navy);
text-align: center;
text-decoration: none;
}
.irg-pagination .current {
color: var(--irg-white);
background: var(--irg-navy);
}
.irg-people-index .irg-paricipnt-maindv {
padding-block: 0;
margin-top: 30px;
}
.irg-people-index .container {
max-width: 970px;
}
.irg-people-index .team-heading-irgprt {
padding-top: 25px;
background: var(--irg-white);
}
.irg-people-index .prt-inner-head {
margin-bottom: 20px;
}
.irg-people-index .team-slides {
padding: 30px 0 50px;
}
.irg-people-index .irg-cohort--mist .team-slides {
background: var(--irg-mist);
}
.irg-people-index .irg-cohort--lavender .team-slides {
background: var(--irg-lavender);
}
.irg-people-index .fclty-dv > a {
display: block;
color: inherit;
text-decoration: none;
}
.irg-people-index .fclty-img img {
display: block;
width: 100%;
height: auto;
aspect-ratio: auto;
margin-bottom: 10px;
}
.irg-people-index .fclty-text {
min-height: 100px;
padding: 0;
text-align: center;
}
.irg-people-index .fclty-text h3 {
min-height: 40px;
margin: 7px 0 0;
font-size: 12px;
line-height: 16px;
}
.irg-people-index .fclty-text p {
margin: 7px 0 0;
font-size: 10px;
line-height: 12px;
}
.irg-people-index .get-out-more {
display: inline-block;
padding: 3px 10px;
margin-top: 10px;
border-radius: 25px;
color: var(--irg-white);
background: var(--irg-navy);
font-size: 12px;
}
.irg-community-partners {
padding: 50px 0;
background: var(--irg-mist);
}
.irg-community-partners__logos {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
gap: 30px;
}
.irg-community-partners__logos a {
display: grid;
min-height: 90px;
padding: 12px;
place-items: center;
}
.irg-community-partners__logos img {
width: auto;
max-width: 100%;
max-height: 72px;
}
.irg-community-partners__cta {
margin: 35px 0 0;
text-align: center;
}
.irg-legacy-content .more-bxes h2::before {
content: "“";
font-family: Georgia, serif;
}
.irg-legacy-content .more-bxes h2::after {
content: "”";
font-family: Georgia, serif;
}
.irg-person-profile {
padding-block: clamp(48px, 7vw, 90px);
}
.irg-person-profile__portrait img {
display: block;
width: 100%;
aspect-ratio: 1;
object-fit: cover;
}
.irg-person-profile__copy {
max-width: 720px;
}
.irg-person-profile__role {
font-size: 20px;
}
.irg-contact-details,
.irg-contact-form-section,
.irg-event-directory__content {
padding-block: 25px;
}
.irg-contact-details h2,
.irg-contact-form-section h2 {
margin: 0 0 20px;
font-size: 28px;
}
.irg-contact-details .irg-shell,
.irg-contact-form-section .irg-shell {
max-width: 808px;
}
.irg-contact-details__grid {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: start;
gap: 40px;
}
.irg-contact-details__grid img {
display: block;
width: 100%;
}
.irg-contact-form-section {
padding-block: 30px;
background: var(--irg-lavender);
}
.irg-contact-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 24px;
}
.irg-contact-form label {
display: grid;
gap: 6px;
font-size: 14px;
}
.irg-contact-form input,
.irg-contact-form textarea {
width: 100%;
padding: 12px;
border: 1px solid transparent;
border-radius: 0;
color: var(--irg-navy);
background: var(--irg-white);
font: inherit;
}
.irg-contact-form input:focus,
.irg-contact-form textarea:focus {
border-color: var(--irg-navy);
outline: 2px solid transparent;
}
.irg-contact-form__wide,
.irg-contact-form__privacy,
.irg-contact-form .irg-button {
grid-column: 1 / -1;
}
.irg-contact-form__honeypot,
.irg-honeypot {
position: absolute;
left: -10000px;
}
.irg-contact-form__privacy {
margin: 0;
font-size: 13px;
}
.irg-contact-form .irg-button {
width: fit-content;
cursor: pointer;
}
.irg-form-message {
padding: 14px 18px;
margin-bottom: 24px;
border-left: 4px solid var(--irg-navy);
background: var(--irg-white);
}
.irg-form-message--error {
border-left-color: #a0001a;
}
.irg-directory-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
}
.irg-directory-card {
background: #f4f3f8;
}
.irg-directory-card__photo img {
display: block;
width: 100%;
aspect-ratio: 1;
object-fit: cover;
}
.irg-directory-card__copy {
padding: 20px;
}
.irg-directory-card__copy h2 {
margin: 0 0 12px;
font-size: 21px;
}
.irg-directory-card__copy p {
margin: 6px 0;
}
.irg-access-warning,
.irg-password-gate {
max-width: 720px;
padding: 30px;
border-left: 5px solid var(--irg-coral);
background: #f4f3f8;
}
.irg-password-gate input[type="password"] {
min-height: 44px;
padding: 8px 12px;
border: 1px solid var(--irg-navy);
font: inherit;
}
.irg-password-gate input[type="submit"] {
min-height: 44px;
padding: 8px 20px;
border: 1px solid var(--irg-navy);
color: var(--irg-white);
background: var(--irg-navy);
font: inherit;
}
.irg-legacy-page .irg-header,
.irg-legacy-page .irg-footer {
float: none;
}
.irg-legacy-page .irg-header *,
.irg-legacy-page .irg-footer * {
box-sizing: border-box;
}
.irg-home-hero {
display: flex;
min-height: clamp(228px, 18vw, 360px);
align-items: flex-start;
color: var(--irg-white);
background-color: var(--irg-navy);
background-image: url("../images/home-irg-new-banner.png");
background-position: center;
background-size: cover;
}
.irg-home-hero > .irg-home-hero__title {
width: min(calc(100% - 80px), 859.17px);
margin-top: 100px;
margin-right: 0 !important;
margin-left: max(40px, calc((100% - 1000px) / 2 + 30px)) !important;
padding: 0;
color: inherit;
font-family: var(--irg-font);
font-size: 34px;
font-weight: 300;
line-height: 50px;
}
.irg-home-hero > .irg-home-hero__title strong {
font-family: var(--irg-font-bold);
font-weight: 400;
}
.irg-home-section {
padding-block: 50px;
}
.irg-home-section > .wp-block-columns,
.irg-home-section > .irg-home-report,
.irg-growth-opportunity > * {
max-width: 833.33px;
margin-inline: auto;
}
.irg-home-section > .wp-block-columns {
gap: 0;
}
.irg-home-section > .wp-block-columns > .wp-block-column {
padding-inline: 15px;
}
.irg-home-section h2 {
margin-top: 0;
font-size: 32px;
font-weight: 500;
line-height: 38.4px;
}
.irg-home-section h4 {
color: var(--irg-navy);
font-size: 28px;
line-height: 1.25;
}
.irg-home-section p {
font-size: 17px;
}
.irg-home-section--white {
background: var(--irg-white);
}
.irg-home-section--mist {
background: var(--irg-mist);
}
.irg-home-section iframe {
width: 100%;
height: 220px;
min-height: 0;
border: 0;
}
.irg-home-section .wp-block-image {
margin: 0;
}
.irg-home-section .wp-block-image img {
display: block;
width: 100%;
}
.irg-kicker {
padding-top: 50px;
margin: 0 0 20px;
font-size: 28px !important;
letter-spacing: 0;
}
.irg-home-report {
padding-top: 28px;
}
.irg-home-report + .irg-home-report {
padding-top: 42px;
}
.irg-home-report > h2 {
margin-bottom: 20px;
}
.irg-report-title {
margin: 40px 0 20px;
}
.irg-report-cover {
max-width: 600px;
}
.irg-report-cover a,
.irg-report-cover img {
display: block;
}
.irg-growth-opportunity {
padding-inline: 20px;
}
.irg-home-partners {
display: grid;
margin: 45px 0 15px;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
gap: 25px 20px;
}
.irg-home-partners a {
display: grid;
min-height: 96px;
padding: 10px;
place-items: center;
}
.irg-home-partners img {
width: auto;
max-width: 100%;
max-height: 72px;
}
.irg-content {
padding-block: clamp(48px, 7vw, 90px);
}
.irg-page-header {
padding-block: clamp(48px, 7vw, 88px);
color: var(--irg-white);
background: var(--irg-navy);
}
.irg-page-header h1 {
max-width: 900px;
margin: 0;
color: inherit;
font-size: clamp(36px, 6vw, 64px);
line-height: 1.08;
}
.irg-page-header--landing {
padding-block: clamp(64px, 10vw, 132px);
}
.irg-page-header--landing .irg-eyebrow {
color: var(--irg-coral);
}
.irg-page-lead {
max-width: 760px;
margin: 24px 0 0;
color: var(--irg-white);
font-size: clamp(18px, 2.4vw, 24px);
line-height: 1.5;
}
.irg-page-lead--dark {
color: var(--irg-navy);
}
/*
* Legacy-hero variant: the shared swarm-of-birds banner used across the site
* (Press, CMO-CSO Playbook, etc). Title only, ~197px band; eyebrow and lead
* sit below on white via .irg-elementor-hub-intro.
*/
.irg-page-header--legacy-hero {
position: relative;
display: flex;
min-height: 197px;
align-items: center;
padding-block: 0;
overflow: hidden;
background: var(--irg-navy);
}
.irg-page-header__image {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.irg-page-header__content {
position: relative;
z-index: 1;
}
.irg-page-header--legacy-hero h1 {
font-size: 43px;
font-weight: 400;
line-height: 1.1;
}
.irg-block-content {
overflow: hidden;
}
.irg-pattern-section {
padding-block: clamp(56px, 8vw, 96px);
}
.irg-pattern-section > * {
width: min(calc(100% - 40px), var(--irg-shell));
margin-inline: auto;
}
.irg-pattern-intro h2 {
max-width: 840px;
margin-top: 0;
font-size: clamp(32px, 5vw, 54px);
line-height: 1.12;
}
.irg-pattern-intro .is-style-lead {
max-width: 800px;
font-size: clamp(18px, 2.2vw, 23px);
line-height: 1.55;
}
.irg-pattern-card-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.irg-pattern-card {
min-height: 100%;
padding: clamp(24px, 4vw, 38px);
border-top: 4px solid var(--irg-coral);
background: var(--irg-white);
}
.irg-pattern-card h3 {
margin-top: 0;
font-size: 24px;
}
.irg-pattern-card a {
font-weight: 700;
text-underline-offset: 4px;
}
.irg-pattern-stats {
color: var(--irg-white);
background: var(--irg-navy);
}
.irg-pattern-stats h2 {
max-width: 760px;
color: inherit;
}
.irg-pattern-stat-grid {
display: grid;
margin-top: clamp(36px, 6vw, 64px);
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
}
.irg-pattern-stat {
padding-top: 20px;
border-top: 1px solid rgb(255 255 255 / 35%);
}
.irg-pattern-stat strong {
display: block;
margin-bottom: 8px;
color: var(--irg-coral);
font-size: clamp(40px, 6vw, 72px);
line-height: 1;
}
.irg-pattern-cta {
color: var(--irg-navy);
background: var(--irg-lavender);
}
.irg-pattern-cta__inner {
display: grid;
grid-template-columns: minmax(0, 2fr) auto;
align-items: end;
gap: 40px;
}
.irg-pattern-cta h2 {
max-width: 760px;
margin-top: 0;
font-size: clamp(30px, 5vw, 50px);
}
.irg-eyebrow {
margin: 0 0 12px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.irg-card-grid {
display: grid;
padding-block: clamp(48px, 7vw, 90px);
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px;
}
.irg-pagination {
padding-bottom: 56px;
}
.irg-pagination .nav-links {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
}
.irg-pagination .page-numbers {
display: inline-grid;
min-width: 42px;
min-height: 42px;
padding: 8px 12px;
place-items: center;
border: 1px solid var(--irg-navy);
border-radius: 999px;
text-decoration: none;
}
.irg-pagination .page-numbers.current {
color: var(--irg-white);
background: var(--irg-navy);
}
.irg-card {
border-bottom: 1px solid var(--irg-mist);
}
.irg-card h2 {
font-size: 22px;
}
.irg-card img {
aspect-ratio: 4 / 3;
width: 100%;
object-fit: cover;
}
.irg-editorial-article {
padding: 60px 0 90px;
}
.irg-editorial-article figure {
margin: 35px 0;
}
.irg-editorial-article figure img {
display: block;
width: 100%;
}
.irg-editorial-article figcaption,
.irg-editorial-meta {
color: #5f5f73;
font-size: 14px;
}
.irg-editorial-deck {
max-width: 850px;
font-size: 21px;
line-height: 1.55;
}
.irg-editorial-body {
font-size: 17px;
}
.irg-editorial-body > * {
max-width: 850px;
}
.irg-publication-hero {
padding: clamp(64px, 9vw, 120px) 0;
color: var(--irg-white);
background: var(--irg-navy);
}
.irg-publication-hero h1 {
max-width: 920px;
margin: 0;
font-size: clamp(40px, 6vw, 68px);
line-height: 1.08;
}
.irg-publication-layout {
display: grid;
grid-template-columns: minmax(190px, 0.3fr) minmax(0, 1fr);
align-items: start;
gap: 60px;
}
.irg-publication-facts {
position: sticky;
top: 30px;
padding: 24px;
background: var(--irg-mist);
}
.irg-citation {
padding: 24px;
background: var(--irg-lavender);
}
.irg-managed-press {
padding: 70px 0;
background: var(--irg-lavender);
}
.irg-managed-press__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.irg-managed-press__grid article {
padding: 24px;
background: var(--irg-white);
}
.irg-managed-press__grid h3 {
font-size: 21px;
}
.irg-managed-press__grid h3 a {
color: inherit;
}
.irg-elementor-page .irg-entry--elementor,
.irg-elementor-page .elementor {
width: 100%;
}
.irg-elementor-theme-document {
width: 100%;
max-width: none;
overflow-x: clip !important;
}
.irg-elementor-legacy-hero {
color: var(--irg-white);
}
.irg-elementor-legacy-hero .elementor-heading-title {
margin: 0;
color: var(--irg-white);
font-size: 43px;
font-weight: 400;
line-height: 1.1;
}
/*
* No padding-block rule here on purpose: a "boxed" Elementor container's own
* padding setting renders on its nested .e-con-inner, not the outer element
* this class sits on — a class-based override here would only add a second,
* stacked padding on top of whatever each container's own native `padding`
* setting already applies (see tools/seed-editorial-templates.php). Control
* vertical spacing there, per container, instead of here.
*/
.irg-elementor-hub-body > .e-con-inner {
gap: 30px;
}
.irg-elementor-hub-body .elementor-heading-title {
color: var(--irg-navy);
font-weight: 400;
}
.irg-elementor-post-grid .elementor-post {
overflow: hidden;
border: 0;
box-shadow: none;
}
.irg-elementor-post-grid .elementor-post__title a,
.irg-elementor-post-grid .elementor-post__read-more {
color: var(--irg-navy);
}
.irg-elementor-post-grid .elementor-post__read-more {
display: inline-flex;
margin-top: 14px;
font-family: var(--irg-font-bold);
font-weight: 400;
text-decoration: underline;
text-underline-offset: 3px;
}
/*
* Press rows.
*
* These mirror the legacy /press.html treatment rather than the site's newer
* editorial styling: a mist section, white cards with a gradient rule on top,
* a navy gradient header block holding a quoted white headline, and a navy
* pill CTA. Legacy equivalents are .press-section, .press-main,
* .press-head-text, .prss-pera and .more-bxes in the legacy style.css.
*
* Markup comes from the "IRG Press Row" loop-item templates, so everything
* here is presentational only — structure is editable in Theme Builder.
*/
.irg-elementor-hub-body,
.irg-elementor-more-press {
background: var(--irg-mist);
}
.irg-elementor-more-press > .e-con-inner {
width: min(calc(100% - 40px), 970px);
padding-block: 54px 72px;
}
.irg-elementor-more-press h2 {
margin: 0 0 30px;
color: var(--irg-navy);
}
/* The loop item's own container supplies the card; the row widgets sit flush. */
.irg-press-row {
height: 100%;
background: var(--irg-white);
/* Legacy uses border-image for the 5px gradient rule. */
border-top: 5px solid transparent;
border-image: linear-gradient(to right, #638daf, var(--irg-navy)) 1;
box-shadow: 0 3px 0 #d6d6d6;
gap: 0;
}
.irg-elementor-press-grid .elementor-grid,
.irg-elementor-more-press-grid .elementor-grid {
gap: 20px;
}
.irg-elementor-press-grid .e-loop-item {
margin-bottom: 15px;
}
.irg-press-row__title {
padding: 15px 45px;
background: linear-gradient(to left, #638daf, var(--irg-navy));
}
/* Three classes deep so this outranks both Elementor's kit heading colour
(.elementor-widget-theme-post-title .elementor-heading-title) and the hub's
own .irg-elementor-hub-body heading rule, which are each two classes. */
.irg-press-row .irg-press-row__title .elementor-heading-title {
margin: 0;
color: var(--irg-white);
font-family: var(--irg-font-bold);
font-size: 22px;
line-height: 1.35;
}
.irg-press-row .irg-press-row__title .elementor-heading-title a {
color: inherit;
text-decoration: none;
}
.irg-press-row .irg-press-row__title .elementor-heading-title a:hover,
.irg-press-row .irg-press-row__title .elementor-heading-title a:focus-visible {
text-decoration: underline;
text-underline-offset: 3px;
}
/* Legacy renders these as Fontawesome quote glyphs; typographic quotes give
the same result without pulling in the icon font. */
.irg-press-row__title .elementor-heading-title::before {
content: "“";
}
.irg-press-row__title .elementor-heading-title::after {
content: "”";
}
.irg-press-row__deck,
.irg-press-row__excerpt {
padding-inline: 45px;
color: var(--irg-navy);
font-size: 17px;
}
.irg-press-row__deck {
padding-top: 15px;
font-weight: 700;
}
.irg-press-row__excerpt {
padding-top: 10px;
}
.irg-press-row__more {
padding: 20px 45px 25px;
}
.irg-press-row__more .elementor-button {
padding: 7px 25px;
border-radius: 25px;
color: var(--irg-white);
background: var(--irg-navy);
font-size: 15px;
font-weight: 600;
}
.irg-press-row__more .elementor-button:hover,
.irg-press-row__more .elementor-button:focus-visible {
background: #1b2a6b;
}
/*
* Compact tier: three across, tighter type, and — unlike legacy press.html —
* the Coverage Note under the headline.
*
* This is the one deliberate departure from legacy on this page. Legacy shows a
* headline and a CTA here because the tier held ten archived cards, where the
* headline is the whole of what there is to say. The Corpus takes that tier past
* two hundred records, each carrying a Coverage Note that is checked against the
* coverage it describes, and a tier that renders none of them buries the only
* grounded sentence the page has about most of its own contents.
*/
.irg-press-row--compact {
padding-bottom: 5px;
}
.irg-press-row--compact .irg-press-row__title {
padding: 15px 25px;
background: none;
}
.irg-press-row--compact .irg-press-row__title .elementor-heading-title {
color: var(--irg-navy);
font-size: 19px;
}
/*
* Lighter than the full row's deck, which is 17px and bold against a card twice
* this wide. At 19px the compact headline is only 4px larger, so a bold deck
* competes with it instead of sitting under it.
*/
.irg-press-row--compact .irg-press-row__deck {
padding: 4px 25px 0;
font-size: 15px;
font-weight: 400;
line-height: 1.45;
}
/*
* `margin-top: auto` is what keeps the CTA on the card's baseline now that the
* cards no longer have equal content. Without it a two-line note and a
* four-line note put their buttons at different heights across one row.
*/
.irg-press-row--compact .irg-press-row__more {
margin-top: auto;
padding: 10px 25px 20px;
}
.irg-press-row--compact .irg-press-row__more .elementor-button {
padding: 3px 25px;
font-size: 13px;
}
/*
* "Load more".
*
* Legacy equivalent is `.btn-cnt-prss` in legacy.css: a navy-outlined white
* pill, centred on a full-width 1px navy rule that runs behind it. Legacy draws
* the rule as an `::after` on an absolutely positioned wrapper, which only holds
* because `.lst-more` reserves 78px of padding underneath for it; this is the
* same picture expressed as a centred flex row, so the button occupies real
* space and nothing below has to leave a hole for it.
*
* The wrapper and the button are built by assets/js/press-load-more.js, so no
* inert control is ever rendered for a reader without JavaScript — legacy's
* `` sits there dead in that case.
*/
.irg-press-load-more {
position: relative;
display: flex;
justify-content: center;
margin-top: 55px;
}
.irg-press-load-more::before {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: var(--irg-navy);
content: "";
}
.irg-press-load-more__button {
position: relative;
z-index: 1;
padding: 5px 30px;
border: 1px solid var(--irg-navy);
border-radius: 25px;
color: var(--irg-navy);
background: var(--irg-white);
font-family: var(--irg-font-bold);
font-size: 15px;
line-height: 1.6;
cursor: pointer;
}
.irg-press-load-more__button:hover,
.irg-press-load-more__button:focus-visible {
color: var(--irg-white);
background: var(--irg-navy);
}
/*
* bootstrap.min.css:`button:focus` still carries Bootstrap 4's pre-`:focus-visible`
* ring — `outline: -webkit-focus-ring-color auto 5px` — which fires on a *mouse*
* click too. Clicking "Load more" therefore left a thick #005fcc ring hugging the
* pill until the reader clicked elsewhere; live never shows one, because its
* control is an `` inside a form that reloads.
*
* Dropped for pointer focus only. Keyboard focus keeps a ring, redrawn in navy so
* it belongs to this palette rather than Bootstrap's.
*/
.irg-press-load-more__button:focus {
outline: none;
}
.irg-press-load-more__button:focus-visible {
outline: 2px solid var(--irg-navy);
outline-offset: 2px;
}
/*
* Elementor sets no `display` on a loop item, so the `hidden` attribute would
* work on its own — but the loop item root also carries `.elementor`, and a
* future kit rule on that class would silently defeat it. Stated explicitly
* because a collapsed tier failing open shows two hundred cards at once.
*/
.irg-elementor-post-grid .e-loop-item[hidden] {
display: none;
}
.irg-elementor-editorial-hero {
position: relative;
overflow: hidden;
padding-block: 84px;
color: var(--irg-white);
background: linear-gradient(120deg, var(--irg-navy) 0%, #112b7d 58%, #c67695 150%);
}
.irg-elementor-editorial-hero::after {
position: absolute;
right: -110px;
bottom: -160px;
width: 390px;
height: 260px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(244, 146, 112, 0.7), rgba(241, 227, 230, 0.15));
content: "";
transform: rotate(-14deg);
}
.irg-elementor-editorial-hero > .e-con-inner {
position: relative;
z-index: 1;
gap: 12px;
}
.irg-elementor-editorial-hero .elementor-heading-title,
.irg-elementor-editorial-hero p {
color: var(--irg-white);
}
.irg-elementor-editorial-hero h1.elementor-heading-title {
max-width: 920px;
margin: 0;
font-size: clamp(40px, 6vw, 68px);
font-weight: 400;
line-height: 1.08;
}
.irg-elementor-editorial-hero .irg-elementor-current-title {
position: relative;
z-index: 1;
max-width: 920px;
margin: 0;
color: var(--irg-white);
font-family: var(--irg-font);
font-size: clamp(40px, 6vw, 68px);
font-weight: 400;
line-height: 1.08;
}
.irg-elementor-current-image {
margin: 0 0 34px;
}
.irg-elementor-current-image img {
display: block;
width: 100%;
height: auto;
}
.irg-elementor-editorial-hero h5.elementor-heading-title {
font-size: 14px;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.irg-elementor-hub-intro .elementor-heading-title {
color: var(--irg-coral);
font-size: 14px;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.irg-elementor-hub-intro .elementor-widget-text-editor {
max-width: 760px;
margin-top: 8px;
color: var(--irg-navy);
font-size: 20px;
}
/*
* Single column. The metadata used to sit in a sticky left aside, which cost
* the article roughly a third of its measure for three lines of text; it is
* now a horizontal bar above the body instead.
*/
.irg-elementor-publication-layout > .e-con-inner {
display: flex !important;
flex-direction: column;
gap: 0;
}
.irg-elementor-editorial-article {
--container-max-width: 100%;
min-width: 0;
width: 100%;
}
.irg-publication-meta {
margin-bottom: 45px;
padding-bottom: 28px;
color: var(--irg-navy);
border-bottom: 1px solid var(--irg-mist);
}
.irg-publication-meta__line {
margin: 0 0 6px;
font-family: var(--irg-font-bold);
font-size: 15px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.irg-publication-meta__sep {
margin-inline: 8px;
}
.irg-publication-meta__authors {
margin: 0 0 22px;
font-size: 18px;
line-height: 1.5;
}
.irg-publication-meta__source {
margin: 0;
}
/* Publication hero sits on the same murmuration as the Press and Publications
hubs, so the eyebrow and title both need to clear the image. */
.irg-elementor-publication-hero .irg-elementor-current-eyebrow {
margin: 0 0 10px;
color: var(--irg-white);
font-family: var(--irg-font-bold);
font-size: 15px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.irg-elementor-publication-hero .irg-elementor-current-title {
margin: 0;
max-width: 20ch;
color: var(--irg-white);
}
.irg-elementor-editorial-article .elementor-widget-theme-post-featured-image {
max-width: 520px;
margin-bottom: 35px;
}
.irg-elementor-editorial-article img {
width: 100%;
height: auto;
}
.irg-elementor-editorial-article .elementor-widget-theme-post-content {
color: var(--irg-navy);
font-size: 17px;
line-height: 1.65;
}
.irg-elementor-editorial-article h2 {
margin: 48px 0 16px;
color: var(--irg-navy);
font-size: 31px;
font-weight: 400;
}
.irg-elementor-editorial-article h3 {
margin: 28px 0 10px;
color: var(--irg-navy);
font-size: 22px;
}
.irg-publication-lead {
margin-top: 0;
font-size: 22px;
line-height: 1.5;
}
.irg-elementor-editorial-body {
padding-block: 70px 90px;
}
.irg-elementor-editorial-body .irg-press-facts {
max-width: 850px;
}
.irg-publication-filter {
display: grid;
padding: 22px 24px;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 24px;
background: var(--irg-lavender);
}
.irg-publication-filter label {
margin: 0;
color: var(--irg-navy);
font-family: var(--irg-font-bold);
font-size: 16px;
font-weight: 400;
}
.irg-publication-filter__controls {
display: flex;
align-items: center;
gap: 12px;
}
.irg-publication-filter select {
width: min(100%, 320px);
min-height: 46px;
padding: 9px 42px 9px 14px;
border: 1px solid var(--irg-navy);
border-radius: 0;
color: var(--irg-navy);
background: var(--irg-white);
font: inherit;
}
.irg-publication-filter button {
min-height: 46px;
font: inherit;
}
.irg-publication-filter a {
color: var(--irg-navy);
}
/*
* On-demand webinar filters. Four dropdowns matching the legacy page, in place
* of Elementor's pill-button taxonomy filters — see
* irg_conversation_filter_shortcode() for why the widget could not be used.
*/
/*
* One line, no panel: legacy's `.filter-demnd` floated the label and the four
* selects together on a transparent background. An earlier pass here boxed them
* in lavender with the label stacked above, which read as a form panel the rest
* of the site does not have — hence the flex row and the measured legacy values
* below (label 15px regular, selects 160×27 at 14px, 10px apart).
*/
.irg-conversation-filter {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 0;
background: none;
}
.irg-conversation-filter__legend {
margin: 0 15px 0 0;
color: var(--irg-navy);
font-family: var(--irg-font);
font-size: 15px;
}
.irg-conversation-filter__controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
/*
* `appearance: none` plus an inline chevron, because the native control paints a
* platform arrow inside a 25px gutter sized for legacy's drop-arrow.png. The SVG
* is inlined rather than added as an image so the arrow inherits the navy token
* and costs no extra request.
*/
.irg-conversation-filter select {
width: 160px;
max-width: 100%;
padding: 2px 25px 2px 7px;
border: 1px solid var(--irg-deep-navy);
border-radius: 0;
color: var(--irg-navy);
background-color: transparent;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5 7 7.5l6-6' fill='none' stroke='%23000050' stroke-width='1.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center right 5px;
background-size: 14px;
font-family: var(--irg-font);
font-size: 14px;
line-height: 21px;
appearance: none;
}
/*
* Legacy re-ran its AJAX query on every `change`, so it shipped no submit
* button. conversation-filter.js restores that by submitting the form on
* change and tagging it `--auto`; Apply stays in the markup, and visible,
* for anyone without JavaScript.
*/
.irg-conversation-filter--auto .irg-conversation-filter__apply {
display: none;
}
/*
* Both button rules are chained to the form: the shared `.irg-button` pill sets
* `padding: 12px 28px` and sits later in this file, so an unchained rule of
* equal specificity would lose and the pill would tower over a 27px select.
*/
.irg-conversation-filter .irg-conversation-filter__apply,
.irg-conversation-filter .irg-conversation-filter__clear {
padding: 2px 30px;
border-radius: 25px;
color: var(--irg-white);
background: var(--irg-navy);
font-family: var(--irg-font-bold);
font-size: 15px;
line-height: 23px;
}
/*
* Publication card: rendered by the Loop Grid widget from the "IRG Publication
* Card" loop-item template (tools/build-publication-loop-template.php).
* The card's background/border/stretch are set as native container settings
* in that script rather than here, so only the widget-level classes below
* (`__cover`, `__type`, `__title`, `__cta`) are used from this file.
*
* This was previously attributed to Elementor dropping container classes
* inside loop-item documents. That is not what happens: containers register
* the control as `css_classes`, while widgets use `_css_classes`. Passing the
* widget form to a container yields no class and no error. The "IRG Press Row"
* loop item (tools/build-press-loop-template.php) uses `css_classes` and its
* container class reaches the DOM normally.
*/
.irg-publication-card__cover {
display: block;
overflow: hidden;
aspect-ratio: 4 / 3;
}
/*
* Elementor's own `.elementor img { height: auto; ... }` (frontend.min.css)
* ties with a plain `.class img` selector on specificity, and loads after
* site.css, so it was winning the cascade and letting the image render at
* its native aspect ratio — tall enough to spill past the 4:3 box and
* overlap the card copy below. Chaining the ancestor grid class raises
* specificity so this rule always wins regardless of load order; the
* `overflow: hidden` above is a second line of defence.
*/
.irg-elementor-publication-grid .irg-publication-card__cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.irg-publication-card__type {
color: var(--irg-coral);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.irg-publication-card__title .elementor-heading-title {
font-size: 23px;
line-height: 1.3;
}
.irg-publication-card__cta {
margin-top: 8px;
align-self: flex-start;
}
.irg-luma-calendar {
padding: 55px 0 80px;
}
.irg-luma-calendar__intro {
max-width: 760px;
margin: 0 auto 28px;
text-align: center;
}
.irg-luma-calendar__intro h2 {
color: var(--irg-navy);
font-size: 31px;
font-weight: 400;
}
.irg-luma-calendar__embed {
width: min(100%, 970px);
margin-inline: auto;
}
.irg-luma-calendar iframe {
display: block;
width: 100%;
height: 680px;
background: var(--irg-white);
}
.irg-button,
.wp-element-button,
.elementor-button,
.elementor-widget-button .elementor-button,
.e-load-more-button,
.irg-publication-filter button {
display: inline-flex;
padding: 12px 28px;
border: 0;
border-radius: 999px;
color: var(--irg-white);
background: var(--irg-navy);
font-family: var(--irg-font-bold);
font-weight: 400;
text-decoration: none;
transition: background-color 0.15s ease;
}
.irg-button:hover,
.irg-button:focus-visible,
.wp-element-button:hover,
.wp-element-button:focus-visible,
.elementor-button:hover,
.elementor-button:focus-visible,
.e-load-more-button:hover,
.e-load-more-button:focus-visible,
.irg-publication-filter button:hover,
.irg-publication-filter button:focus-visible {
background: var(--irg-deep-navy);
}
/*
* ---- Archive pagination -------------------------------------------------
*
* The pills below are the house style for the publication and press archives.
* They were drawn when Publications ran to five pages; at 23 the row wrapped
* into a ragged second line, because inline-flex pills separated by newline
* whitespace break wherever they happen to run out of room.
*
* Two halves to the fix, and both are needed. Here, the container becomes a
* centred flex row with an explicit gap, so wrapping is even and the collapsed
* whitespace between pills stops setting the spacing. In the widget,
* `pagination_numbers_shorten` caps the run at first + last + a window around
* the current page, which is what keeps it to one line as the corpus grows.
*
* Excluded from the conversation archive by class rather than by scoping the
* selector down: that page renders flat 14px legacy text (see the grid
* pagination block above), and inheriting `display: flex` from here would undo
* it. `irg_conversation_pagination()` in irg-core stamps the class.
*/
.elementor-pagination:not(.irg-conversation-pagination) {
display: flex;
width: 100%;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px;
}
.elementor-pagination .page-numbers {
display: inline-flex;
min-width: 40px;
height: 40px;
align-items: center;
justify-content: center;
border-radius: 999px;
color: var(--irg-navy);
background: var(--irg-white);
border: 1px solid var(--irg-navy);
font-family: var(--irg-font-bold);
text-decoration: none;
}
.elementor-pagination .page-numbers.current {
color: var(--irg-white);
background: var(--irg-navy);
}
/* Prev/Next carry words, not glyphs, so they need room to be a lozenge. */
.elementor-pagination .page-numbers.prev,
.elementor-pagination .page-numbers.next {
padding: 0 20px;
}
/*
* On the first and last page Elementor still emits the step it cannot offer,
* as a `span` instead of an `a`. Left alone it is a pill identical to a live
* one, which invites the click it will not answer, so the element type is what
* the rule keys off. `.current` is a span too and must not be caught by this;
* it never carries `prev`/`next`.
*/
.elementor-pagination span.page-numbers.prev,
.elementor-pagination span.page-numbers.next {
border-color: var(--irg-mist);
color: rgba(0, 0, 80, 0.35);
}
/*
* The gap `pagination_numbers_shorten` introduces. It is punctuation, not a
* destination, so it loses the pill and the pointer affordance.
*/
.elementor-pagination .page-numbers.dots {
min-width: 0;
padding: 0 2px;
border-color: transparent;
background: transparent;
}
.irg-footer {
width: 100%;
clear: both;
color: var(--irg-navy);
background: var(--irg-white);
}
.irg-footer__primary {
padding: 80px 0;
background: var(--irg-white);
}
.home .irg-footer__primary {
padding: 120px 0;
}
/*
* Legacy `.leadr-foot`: a 2px navy-to-coral rule above the footer contact block.
* Top padding is reduced by the rule's own height plus its 68px margin so the
* distance from the section edge to the logo matches the pre-rule layout.
*/
.irg-footer__rule {
height: 2px;
margin-bottom: 68px;
background-image: linear-gradient(to right, var(--irg-navy), var(--irg-coral));
}
.irg-footer__contact {
display: flex;
width: min(100%, 470px);
padding-left: 35px;
align-items: flex-start;
margin-inline: auto;
}
.irg-footer__logo {
display: block;
flex: 0 0 200px;
}
.irg-footer__contact img {
display: block;
width: 165px;
height: auto;
margin-left: 10px;
padding-right: 35px;
}
.irg-footer__contact h2 {
margin: 9px 0 0;
color: var(--irg-navy);
font-size: 19px;
line-height: 23px;
}
.irg-footer__email {
min-width: 270px;
}
.irg-footer__email a {
color: var(--irg-navy);
font-size: 16px;
line-height: 24px;
text-decoration: none;
}
.irg-footer__secondary {
padding-block: 12px;
color: var(--irg-white);
background-image: linear-gradient(to right, #000050, #236ab0, #f1e3e6);
}
.irg-footer__secondary-inner {
display: flex;
min-height: 24px;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.irg-footer__secondary p {
margin: 0;
font-size: 13px;
}
.irg-social {
display: flex;
margin: 0;
padding: 0;
gap: 15px;
list-style: none;
}
.irg-social a {
display: grid;
width: 18px;
height: 24px;
place-items: center;
color: var(--irg-white);
}
.irg-social svg {
display: block;
width: 17px;
height: 17px;
fill: currentcolor;
}
.irg-screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 860px) {
.irg-elementor-hub-body {
padding-block: 48px 65px;
}
.irg-press-row__title {
padding: 18px 20px;
}
.irg-press-row .irg-press-row__title .elementor-heading-title {
font-size: 19px;
}
.irg-press-row__deck,
.irg-press-row__excerpt {
padding-inline: 20px;
font-size: 16px;
}
.irg-press-row__more {
padding: 16px 20px 22px;
}
.irg-elementor-editorial-hero {
padding-block: 60px;
}
/* Padding lives on the container's own setting, not here — see the note in
tools/seed-editorial-templates.php. */
.irg-publication-meta {
margin-bottom: 32px;
}
.irg-publication-filter {
grid-template-columns: 1fr;
gap: 12px;
}
.irg-publication-filter__controls {
align-items: stretch;
flex-direction: column;
}
.irg-publication-filter select {
width: 100%;
}
/*
* Legacy dropped its label onto its own line here and narrowed the selects to
* 151px so two still fitted per row. Same shape, expressed with the flex row's
* own wrapping rather than fixed widths.
*/
.irg-conversation-filter__legend {
flex: 0 0 100%;
margin: 0 0 10px;
}
.irg-conversation-filter select {
width: 151px;
}
.irg-luma-calendar {
padding: 40px 0 60px;
}
.irg-luma-calendar iframe {
height: 600px;
}
.irg-header {
padding-block: 0;
}
.irg-header__inner {
min-height: var(--irg-header-height);
align-items: center;
}
.irg-logo {
margin-left: 0;
}
.irg-nav-toggle {
display: inline-flex;
width: 32px;
height: 40px;
padding: 0;
align-items: center;
justify-content: center;
border: 0;
font-size: 0;
}
.irg-nav-toggle__label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.irg-nav-toggle .irg-icon--bars {
width: 26px;
height: 26px;
}
.irg-nav {
position: absolute;
top: 100%;
right: 0;
left: 0;
display: none;
padding: 20px;
margin: 0;
background: var(--irg-navy);
}
.irg-nav.is-open {
display: block;
}
.irg-nav__list {
align-items: stretch;
flex-direction: column;
gap: 0;
}
.irg-nav .menu-item {
width: 100%;
}
.irg-nav a {
display: block;
padding: 12px 44px 12px 12px;
}
.irg-nav .sub-menu,
.irg-nav .sub-menu .sub-menu {
position: static;
display: none;
width: 100%;
padding: 0 0 0 18px;
box-shadow: none;
}
.irg-nav .menu-item:hover > .sub-menu {
display: none;
}
.irg-nav .menu-item:focus-within > .sub-menu,
.irg-nav .menu-item.is-submenu-open > .sub-menu {
display: block;
}
.irg-nav__submenu-toggle,
.irg-nav .sub-menu .irg-nav__submenu-toggle {
top: 11px;
right: 8px;
display: inline-grid;
width: 32px;
height: 32px;
transform: none;
}
.irg-nav .sub-menu .irg-nav__submenu-toggle span {
transform: translateY(-2px) rotate(45deg);
}
.irg-nav__submenu-toggle[aria-expanded="true"] {
transform: rotate(180deg);
}
.irg-home-hero > .irg-home-hero__title {
width: min(calc(100% - 60px), 940px);
margin-top: 90px;
margin-inline: auto !important;
font-size: 26px;
line-height: 36px;
}
.irg-home-section > .wp-block-columns {
gap: 15px;
}
.irg-home-section > .wp-block-columns > .wp-block-column {
padding-inline: 15px;
}
.irg-home-section h2 {
font-size: 26px;
line-height: 31.2px;
}
.irg-home-hero {
min-height: 360px;
}
.irg-home-hero + .irg-home-section {
padding-top: 62px;
}
.irg-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.irg-pattern-card-grid,
.irg-pattern-stat-grid {
grid-template-columns: 1fr;
}
.irg-publication-layout,
.irg-managed-press__grid {
grid-template-columns: 1fr;
}
.irg-publication-facts {
position: static;
}
.irg-directory-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.irg-pattern-cta__inner {
grid-template-columns: 1fr;
align-items: start;
}
.irg-home-partners {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.irg-community-partners__logos {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.irg-collection-filters {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.irg-shell {
width: min(calc(100% - 30px), var(--irg-shell));
}
.irg-community-tab {
right: 4px;
}
.irg-card-grid {
grid-template-columns: 1fr;
}
.irg-contact-details__grid,
.irg-contact-form,
.irg-directory-grid {
grid-template-columns: 1fr;
}
.irg-contact-form__wide,
.irg-contact-form__privacy,
.irg-contact-form .irg-button {
grid-column: auto;
}
.irg-home-partners {
gap: 15px;
}
.irg-footer__secondary-inner {
min-height: 24px;
padding-block: 0;
align-items: center;
flex-direction: row;
gap: 15px;
}
.irg-footer__primary {
padding-block: 85px;
}
.irg-footer__contact {
width: 100%;
padding-left: 0;
align-items: center;
flex-direction: column;
text-align: center;
}
.irg-footer__logo {
flex-basis: auto;
}
.irg-footer__contact img {
width: 165px;
margin: 0 auto 20px;
padding-right: 0;
}
.irg-footer__email {
min-width: 0;
}
.irg-footer__secondary p {
font-size: 10px;
line-height: 16px;
white-space: nowrap;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
}
.irg-visually-hidden {
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
/*
* Legacy sizes event images with a fill model — `.upcmng-evnt-image-bx` is
* `height: 100%` inside a stretching Bootstrap row, so the image matches the
* adjacent text panel exactly. `object-fit: cover` keeps that from distorting
* the artwork, which is the one place we improve on live rather than copy it.
*/
.irg-events-index .upcmng-evnt-image-bx img {
object-fit: cover;
}
/*
* Live keeps an empty `ul.nav.nav-pills.mb-3` between the section heading and
* the cards, left over from a filter UI that is entirely commented out. We drop
* the empty list and carry its 1rem of spacing here instead.
*/
.irg-events-index .tab-section > .upcoming-head-banner {
margin-bottom: 1rem;
}
/* Live sets these inline on the Past Events heading; keep them in the stylesheet. */
.irg-events-index .irg-past-events-heading {
margin-top: 1.5rem;
}
.irg-events-index .irg-past-events-intro {
padding-bottom: 30px;
}