— immune to content
rules). */
.news--date {
margin-top: auto;
padding-top: 28px;
margin-bottom: 6px;
font-size: 14px;
line-height: 1;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--Neutrals-Grey);
}
.news--item .button--round {
display: none;
position: absolute;
bottom: 0;
right: 0;
margin: 21px;
}
.ag_section--style_sand .news--item {
background-color: var(--Neutrals-Light-Sand);
}
.ag_section--style_sand .news--excerpt {
color: var(--Neutrals-Black);
}
@media (hover: hover) and (pointer: fine) {
.news--item:hover {
background-color: var(--Neutrals-Light-Sand);
}
.news--item:hover .news--excerpt {
color: var(--Neutrals-Black);
}
.news--item:hover .button--round {
display: block;
}
.ag_section--style_sand .news--item:hover {
background-color: var(--Neutrals-White);
}
.ag_section--style_sand .news--item:hover .news--excerpt {
color: var(--Neutrals-Dark-Grey);
}
.ag_section--style_sand .news--item:hover .button--round {
background-color: var(--Neutrals-Light-Sand);
}
}
@media screen and (max-width: 1024px) {
.news--item {
width: calc(50% - 15px);
}
}
@media screen and (max-width: 768px) {
.news--item {
width: 100%;
}
.news--date {
font-size: 13px;
margin-bottom: 0;
}
.news--item .button--round {
margin: 16px;
}
.section--news_list {
padding: 0 0 60px;
}
}
@media screen and (max-width: 450px) {
.news--text {
padding: 24px;
}
/* listing cards full-bleed — mirrors the collection full_mobile grid */
.news--list {
width: calc(100vw - var(--Scroll-Width));
margin-left: calc((100% - 100vw + var(--Scroll-Width)) / 2);
margin-right: calc((100% - 100vw + var(--Scroll-Width)) / 2);
gap: 46px;
}
.news--item:hover .button--round {
display: none;
}
}
/* Card variants — markers from news-card.twig: news--no_image / news--no_description. */
.news--item.news--no_description .news--text .news--title {
font-weight: 300;
}
.news--item.news--no_description .news--date {
padding-top: 16px;
font-size: 13px;
}
.ex--news .ex--related_news,
.ex--news .wp-block.ex--related_news {
color: var(--Neutrals-Dark-Grey);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-top: 112px;
margin-bottom: 28px;
}
@media screen and (max-width: 450px) {
.ex--news .ex--related_news {
margin-top: 80px;
}
}
/* ex-wp-blocks */
/**
* wp-blocks.css — every rule for the default WordPress blocks. Band 30, loaded on every page by
* Ekspla.php right after layout.css (frontend only). Core-block base (columns, video, spacer, math),
* the theme's extensions of them (columns--* variants, features--*), and the typography rhythm of the
* heading / paragraph / list blocks. That rhythm is scoped to .content — the #content section — so the
* header and footer stay out of it; .content does not exist in the editor canvas.
* Per-CPT overrides come later in the cascade: css/posts.css (news, stories; band 50) and
* library/products/products.css (products; band 60).
* TODO Track H: the columns !importants exist to beat Gutenberg inline flex-basis — re-audit per
* template before dropping any of them.
*/
/** Headings */
.content h2 {
color: var(--Neutrals-Dark-Grey);
margin-bottom: 42px;
}
.content h3 {
margin-bottom: 24px;
}
.content h4 {
margin-bottom: 16px;
}
.content h5 {
margin-bottom: 8px;
}
@media (max-width: 768px) {
.content h2 {
margin-bottom: 36px;
}
}
/** Paragraphs */
.content p {
margin-bottom: 1em;
}
/* Poster exception: the company poster
(/career/, /about-us/ — page marker on #content or on the
block root) never carried the 1em; news sets its poster p to 0 too. */
.poster--company .ag_poster--content p,
.poster--company.ag_poster--container .ag_poster--content p {
margin-bottom: 0;
}
/** Nested lists */
.content li ul {
margin-top: 0.4em;
margin-bottom: 1em;
}
.content li ul li {
padding-left: 48px;
}
.content li ul li::before {
height: 2px;
width: 10px;
left: 24px;
top: 0.75em;
border-radius: 1px;
}
/**
* Columns — core base + the theme's variants (a class on the Columns block)
*
* .columns--text_text - two separate texts side by side
* .columns--table_table - two tables side by side
* .columns--list_list - two lists side by side
* .columns--text_image, .columns--image_text - text & image
* .columns--text_table, .columns--table_text - text & table
* .columns--list_text - text & list (== generic columns;
* NO dedicated rules BY DESIGN — ruling 2026-07-11)
* .columns--double_text - continuous text in two columns
* .columns--double_list - continuous list in two columns
* .columns--swap - swap columns on mobile
* .colums--image_mob - text & image, image 75% on 1024px
*/
.wp-block-columns {
box-sizing: border-box;
display: flex;
flex-wrap: nowrap;
align-items: normal;
}
.wp-block-columns.are-vertically-aligned-top {
align-items: flex-start;
}
.wp-block-columns.are-vertically-aligned-center {
align-items: center;
}
.wp-block-columns.are-vertically-aligned-bottom {
align-items: flex-end;
}
.wp-block-column {
flex-grow: 1;
min-width: 0;
overflow-wrap: break-word;
word-break: break-word;
}
.wp-block-column.is-vertically-aligned-top {
align-self: flex-start;
}
.wp-block-column.is-vertically-aligned-center {
align-self: center;
}
.wp-block-column.is-vertically-aligned-bottom {
align-self: flex-end;
}
.wp-block-column.is-vertically-aligned-stretch {
align-self: stretch;
}
.wp-block-column.is-vertically-aligned-bottom,
.wp-block-column.is-vertically-aligned-center,
.wp-block-column.is-vertically-aligned-top {
width: 100%;
}
.wp-block-columns,
.wp-block-columns.columns--text_text {
gap: 80px;
}
.wp-block-columns.columns--text_image,
.wp-block-columns.columns--image_text {
gap: 50px;
}
.wp-block-columns > .wp-block-column {
flex-basis: 30% !important;
}
@media (max-width: 1024px) {
.wp-block-columns,
.wp-block-columns.columns--text_text {
gap: 64px;
}
.wp-block-columns.columns--text_image,
.wp-block-columns.columns--image_text {
flex-wrap: wrap !important;
gap: 48px;
}
.wp-block-columns.colums--image_mob {
gap: 36px;
}
.wp-block-columns.colums--image_mob .ag_image--figure {
width: 75%;
margin-left: auto;
margin-right: auto;
}
.wp-block-columns.columns--text_table,
.wp-block-columns.columns--table_text,
.wp-block-columns.columns--table_table {
flex-wrap: wrap !important;
gap: 24px;
}
.columns--text_image .wp-block-column,
.columns--image_text .wp-block-column,
.columns--text_table .wp-block-column,
.columns--table_text .wp-block-column,
.columns--table_table .wp-block-column {
flex-basis: 100% !important;
}
.wp-block-columns.columns--text_image.columns--swap {
gap: 24px;
}
.wp-block-columns.columns--swap .wp-block-column:last-child {
order: 1;
}
.wp-block-columns.columns--swap .wp-block-column:first-child {
order: 2;
}
}
@media (max-width: 768px) {
.wp-block-columns,
.wp-block-columns.columns--text_text,
.wp-block-columns.columns--text_image,
.wp-block-columns.columns--image_text {
flex-wrap: wrap !important;
gap: 32px;
}
.wp-block-columns.columns--list_list,
.wp-block-columns.columns--table_table {
gap: 52px;
}
.wp-block-columns.columns--double_list,
.wp-block-columns.columns--double_text {
gap: 0;
}
.wp-block-columns.colums--image_mob .ag_image--figure {
width: 100%;
}
.wp-block-columns > .wp-block-column {
flex-basis: 100% !important;
}
.wp-block-columns.columns--double_list .wp-block-column:last-child,
.wp-block-columns.columns--double_text .wp-block-column:last-child {
padding-top: 0;
}
}
@media (max-width: 450px) {
.wp-block-columns.columns--text_image,
.wp-block-columns.columns--image_text {
gap: 24px;
}
}
/**
* Features lists/columns — site-wide content component (ruling 2026-07-11). Products keep their own
* .ex--products-scoped copies in products.css (higher specificity — no conflict when co-loaded).
* Nested-list variants deliberately NOT carried — only products content uses them.
*/
.features--column h2 {
color: var(--Primary-Green);
}
.features--column ul li,
ul.features--list li {
position: relative;
padding-left: 36px;
margin-bottom: 1em;
color: var(--Primary-Green);
}
.features--column ul li::before,
ul.features--list li::before {
content: "";
height: 14px;
width: 14px;
position: absolute;
left: 0;
top: 5px;
border-radius: 4px;
background-color: var(--Primary-Light-Green);
}
/** Video */
.wp-block-video {
box-sizing: border-box;
}
.wp-block-video video {
height: auto;
vertical-align: middle;
width: 100%;
}
@supports (position: sticky) {
.wp-block-video [poster] {
object-fit: cover;
}
}
.wp-block-video.aligncenter {
text-align: center;
}
.wp-block-video :where(figcaption) {
margin-bottom: 1em;
margin-top: .5em;
}
/** Spacer */
.wp-block-spacer {
clear: both;
}
/** Math */
.wp-block-math {
font-size: 20px;
}
/**
* Legacy block exceptions — markup of not-yet-remastered blocks that the generics above must NOT
* restyle; equal-specificity ties resolve by in-file order, so they stay last. Each goes when its
* block is remastered. ⚠ A pin records what the OLD markup did — never copy its value into a remaster.
*/
/* ex-about-s block wrapper (frozen legacy block emits product-flavored classes; the old products.css
owned this rule): the section's closing gap. Products carry their own identical copies. */
.section--product_content {
margin-bottom: 100px;
}
@media (max-width: 630px) {
.section--product_content {
margin-bottom: 80px;
}
}
/* ex-events */
/**
* Events CPT styles (the /events/ listing + the AG Events block cards).
* Remaster M8-events (2026-07-11): relocated from css/ (byte-copy), re-banded P60.
* Events remaster (2026-07-21): renamed to the `events--*` family so ONE card
* template serves both the listing and the AG Events block — was
* .events-f--section / .events-row / .event-item / .featured / .logo / .location /
* .date. Properties, values and breakpoints are otherwise unchanged.
*
* On the Collection wrapper the card width is decided by collection.css:
* `.ag_collection--columns_N .ag_collection--item` (0,2,0) outranks `.events--item`
* (0,1,0), exactly as it does for news cards — so no override is needed here.
*
* 2026-07-21: listing pagination removed (it could never fire — peak simultaneous
* events in the site's history was 18, and the page now renders the full set), so
* the `.btn-load-more` copy is gone from here. That also settles the duplicate this
* header used to flag: the rule now lives only in news.css, which really paginates.
*
* 2026-07-22: the /events/ listing is an AG Events block in the page content, so the
* template-side loop (and with it `.events--section` / `.events--list`, which nothing
* else emitted) is gone. Card layout on the page is collection.css's grid now, so this
* file is card visuals only. template-events.php + page-events.twig were retired the
* same day (the /events/ Page runs on template-default.php), taking the last
* `.page-template-template-events` scoped rule with them — it was already inert (this
* poster is textbg_no, not blur).
*/
.events--item.events--featured::before {
content: '';
position: absolute;
right: 0;
top: 0;
border-style: solid;
border-width: 0 60px 60px 0;
border-color: transparent var(--Primary-Light-Green) transparent transparent;
}
.events--item {
display: flex;
flex-direction: column;
color: var(--Neutrals-Black);
width: calc(33.33% - 20px);
background: var(--Neutrals-White-Sand);
padding: 20px;
position: relative;
transition: background-color 0.2s ease;
}
.events--item .events--logo {
height: 40px;
display: flex;
margin-bottom: 18px;
align-items: center;
}
.events--item .events--logo img {
height: 40px;
max-width: 100%;
max-height: 40px;
width: auto;
mix-blend-mode: multiply;
display: block;
}
.events--item .events--location,
.events--item .events--date {
font-size: 14px;
text-transform: uppercase;
font-weight: 600;
color: var(--Neutrals-Grey);
line-height: 24px;
letter-spacing: 0.06em;
}
.events--item .events--location {
margin-bottom: 20px;
margin-top: auto;
}
/* Explicit font-size on the title class (not inherited from elements.css `.h4`, which is
frontend-only) keeps the card title visually constant across h2–h6 in the editor iframe
when the block's SEO level changes — the tag varies, the look must not. Mirrors AG News
(library/news/news.css `.news--title`). Frontend is unchanged: 24px == elements.css .h4. */
.events--item .events--title {
margin: 0 0 20px;
font-weight: normal;
letter-spacing: -0.01em;
font-size: 24px;
line-height: 1.33;
}
.events--item:hover {
color: var(--Neutrals-Black);
background: var(--Neutrals-Light-Sand);
}
.events--item .button--round {
display: none;
position: absolute;
bottom: 0;
right: 0;
margin: 16px;
}
.events--item:hover .button--round {
display: block;
}
/* Editor only (.acf-block-component): the card is a link to the organiser's site.
`pointer-events` keeps a click selecting the block instead of navigating away;
`text-decoration` restores the frontend look — the editor never loads
elements.css, so its global `a { text-decoration: none }` reset is missing and
the card text would render underlined. */
.acf-block-component .events--item {
pointer-events: none;
text-decoration: none;
}
@media screen and (max-width: 1024px) {
.events--item {
width: calc(50% - 15px);
}
}
@media screen and (max-width: 768px) {
.events--item .events--title {
font-size: 20px;
line-height: 28px;
}
.events--item {
width: 100%;
}
.events--item:after {
display: none;
}
}
/* ag-poster */
/* AG Poster (acf/ag-poster) — the page/section banner block. Self-contained: this is the
* only stylesheet the block needs, and it depends on no page-level wrapper.
*
* Port of the retired EX Poster's css/poster-section.css into the ag_poster--* namespace.
* The map still reads legacy class names typed into older blocks' CSS fields:
*
* EX (css/poster-section.css) AG (here)
* .section--poster → .ag_poster--container (root)
* .poster--viewport → .ag_poster--inner (carries the width class)
* .poster--container → .ag_poster--wrapper
* .poster--content → .ag_poster--content
* .poster--bg_* → .ag_poster--bg_*
* .poster--textbg_* → .ag_poster--textbg_*
* .poster--text_* → .ag_poster--text_*
* .poster--no_text → .ag_poster--no_text
* .poster--has_image → .ag_poster--has_image
* .poster_image--object → .ag_poster--image_object
* .poster_scenario--* → .ag_poster--scenario_*
*
* Deliberately NOT renamed, because they are global and arrive from outside the block:
* section--full_width / section--viewport / section--viewport_fixed / section--viewport_small
* (layout.css), buttons--container (elements.css), poster--company and
* poster--viewport_large (page markers), single-applications (body class).
*
* Dropped: the `.section--container_width` rules. EX's `container` width mode has no width
* declaration anywhere in the CSS and is used by zero of the 55 live EX Poster instances;
* the AG group replaces it with `viewport`.
*
* Priority 70 — the block band, so this beats the wp-blocks.css content layer at band 30
* (owner ruling 2026-07-11). See conventions.md "Priority bands".
*
* ⚠ EDITOR PARITY. Registered shared+block, so it also loads inside the block editor
* iframe — which does NOT load elements.css or wp-blocks.css
* ([[editor-iframe-lacks-elements-css]]). Everything this block inherits from those on the
* frontend is restated below and marked [inherited]; each restated value is the one that
* actually wins on the front, so the frontend render is unchanged.
*/
/* [inherited] elements.css `* { box-sizing: border-box }`.
NB no font-family anywhere in this file, on purpose: it INHERITS — from `body` on the
front and from `.editor-styles-wrapper` (admin-assets.css) in the editor canvas. The
only elements that must have it stated are form controls (input/textarea/select/button),
which the UA gives its own font instead of inheriting; the request