/* ================================================================== Design tokens The whole palette in one place, every value taken from what the site already paints: the navy of the header, hero and headings, the orange of the "Read more" / "Subscribe" buttons, and the greys already used by the panels, hairlines and captions. --accent the brand orange, exactly as it was (#F3624B). Used for marks, borders, dots and figures - never as the fill of a button that carries white text. --accent-strong the same orange, darkened only as far as it must be for white text on it to pass WCAG AA (4.6:1 at 15px bold). This is the one action colour: every primary button. ================================================================== */ :root { --brand-navy: #172350; --accent: #F3624B; --accent-strong: #CE4430; --accent-strong-hover: #B93D2A; /* neutrals already in use on the site */ --grey-50: #f4f5f7; --grey-100: #eef1f8; --grey-200: #e3e6ea; --grey-300: #D8DCE8; --grey-500: #8A93A3; --grey-700: #495064; --white: #ffffff; /* surfaces */ --card-radius: 14px; --card-shadow: 0 14px 30px rgba(6, 17, 38, 0.16); --card-scrim: rgba(6, 17, 38, 0.78); /* the one primary button */ --btn-radius: 8px; --btn-padding: 12px 28px; } /* ------------------------------------------------------------------ The primary button. One look for every primary action on the site: filled with the action orange, white text, the same radius, the same padding, the same hover. Used by the Featured News "Read more" button (.btn-primary) and by the Opportunities "EXPLORE" buttons (.sbtn.primary, the old medium blue is gone). Secondary buttons (.sbtn.secondary) are untouched. ------------------------------------------------------------------ */ .btn-primary, .sbtn.primary, .sbtn.primary.button { display: inline-block; box-sizing: border-box; padding: var(--btn-padding); border: 0; border-radius: var(--btn-radius); background: var(--accent-strong) !important; color: var(--white) !important; font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.02em; text-align: center; text-decoration: none; text-shadow: none; cursor: pointer; transition: background-color 0.2s ease; } .btn-primary:hover, .btn-primary:focus, .sbtn.primary:hover, .sbtn.primary:focus, .sbtn.primary.button:hover, .sbtn.primary.button:focus { background: var(--accent-strong-hover) !important; color: var(--white) !important; } .btn-primary:focus-visible, .sbtn.primary:focus-visible { outline: 2px solid var(--brand-navy); outline-offset: 3px; } /* ------------------------------------------------------------------ The featured news / notice strip at the very top of the page. A light neutral strip instead of the solid brick red one: the rest of the bar (its 40px height, its fixed position, its "See More" text and its link to the starred news) is exactly as it was, only the colours change. box-sizing keeps the 1px hairline inside the 40px the nav and the page content are pushed down by. ------------------------------------------------------------------ */ .notice-bar { box-sizing: border-box; background: var(--grey-50); border-bottom: 1px solid var(--grey-200); } /* the bar's own colour classes are white ones (.cw) and the framework's utility classes are the most specific thing here, so this one rule is written to win: everything inside the strip reads navy on the light grey */ .notice-bar.cw, .notice-bar, .notice-bar *, .notice-bar .cw { color: var(--brand-navy) !important; } .body-data ul, .body-data ol { padding: 0px; } .body-data { line-height: 30px; } [body] a, [footer] a { text-decoration: underline; } .flexi { max-width: 1300px; } .body-data table { table-layout: fixed; text-align: left; width: 100% !Important; white-space: normal; } .body-data table td { border: 1px solid rgba(0, 0, 0, 0.1); inline-size: 150px; overflow-wrap: break-word; hyphens: manual; padding: 0px 5px; } .body-data a { inline-size: 150px; overflow-wrap: break-word; hyphens: manual; color: #006ca7; } .body-data a div { white-space: normal; } .about-image div { background-color: #fbfbfb; box-shadow: 0 0 15px rgba(0, 0, 0, 0.05); } .fs45 { font-size: 45px; } /* ------------------------------------------------------------------ News photos - the news cards on /news and the Latest News cards on the home page (one card = one /News record, see newsCard() in js). The card gets one fixed-shape photo area at its top: full card width, 16/9, image cropped to fill it - so cards line up whatever shape the original photo is. A record with no photo renders no photo area at all (the class is only put on the markup when the card has a Photo). ------------------------------------------------------------------ */ .news-card__photo { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: #eef1f8; } /* the image fills the box and is cropped to it (never a strip, never a stretched photo, whatever shape the original is) */ .news-card__photo img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* the same box on a browser that does not know aspect-ratio */ @supports not (aspect-ratio: 16 / 9) { .news-card__photo { height: 0; padding-bottom: 56.25%; } } /* the record's date, directly under the photo (was pinned to the card's top-right corner, which the photo area now takes) */ .news-card__date { text-align: right; margin-top: 15px; } /* the single article page's body rules (.news-body) live in news.view's own