never had the 1em (elements.css * reset → 0). Scoped per-CPT on purpose — tiny pages' posters DID have the 1em (poster inside the wrapper) and keep it. Design-intent match: news sets poster p bottom to 0 too. */ .ex--applications .poster--content p { margin-bottom: 0; } /* Same exception for the career page (remaster M7-3): its ex-poster description
sat outside the old gb--styles wrapper → never had the 1em. Scoped via the template-about_us content class (.poster--company) — among wp-blocks consumers only /career/ carries it. */ .poster--company .poster--content p { margin-bottom: 0; } /* (p--limited retired at U2 — DB-proven ZERO usage; the width job is done by the global .width--small util in elements.css.) */ /** * WP BLOCKS */ /** * wp-block-columns * * X.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 * X.columns--text_list, .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 */ :is(.ex--page, .ex--post) .wp-block-columns { gap: 80px; } :is(.ex--page, .ex--post) .wp-block-columns.columns--text_image, :is(.ex--page, .ex--post) .wp-block-columns.columns--image_text { gap: 50px; } :is(.ex--page, .ex--post) .wp-block-columns > .wp-block-column { flex-basis: 30% !important; } @media (max-width: 1024px) { :is(.ex--page, .ex--post) .wp-block-columns.columns--text_image, :is(.ex--page, .ex--post) .wp-block-columns.columns--image_text { flex-wrap: wrap !important; gap: 48px; } :is(.ex--page, .ex--post) .wp-block-columns.columns--text_table, :is(.ex--page, .ex--post) .wp-block-columns.columns--table_text, :is(.ex--page, .ex--post) .wp-block-columns.columns--table_table { flex-wrap: wrap !important; gap: 24px; } :is(.ex--page, .ex--post) .columns--text_image .wp-block-column, :is(.ex--page, .ex--post) .columns--image_text .wp-block-column, :is(.ex--page, .ex--post) .columns--text_table .wp-block-column, :is(.ex--page, .ex--post) .columns--table_text .wp-block-column, :is(.ex--page, .ex--post) .columns--table_table .wp-block-column { flex-basis: 100% !important; } :is(.ex--page, .ex--post) .wp-block-columns.columns--text_image.columns--swap { gap: 24px; } :is(.ex--page, .ex--post) .wp-block-columns.columns--swap .wp-block-column:last-child { order: 1; } :is(.ex--page, .ex--post) .wp-block-columns.columns--swap .wp-block-column:first-child { order: 2; } } @media (max-width: 768px) { :is(.ex--page, .ex--post) .wp-block-columns { flex-wrap: wrap !important; gap: 0; } :is(.ex--page, .ex--post) .wp-block-columns > .wp-block-column { flex-basis: 100% !important; } :is(.ex--page, .ex--post) .wp-block-columns.columns--list_list, :is(.ex--page, .ex--post) .wp-block-columns.columns--table_table { gap: 54px; } :is(.ex--page, .ex--post) .wp-block-columns.columns--text_image, :is(.ex--page, .ex--post) .wp-block-columns.columns--image_text { gap: 32px; } :is(.ex--page, .ex--post) .wp-block-columns.columns--double_list, :is(.ex--page, .ex--post) .wp-block-columns.columns--double_text { gap: 0; } :is(.ex--page, .ex--post) .wp-block-columns.columns--double_list .wp-block-column:last-child, :is(.ex--page, .ex--post) .wp-block-columns.columns--double_text .wp-block-column:last-child { padding-top: 0; } } @media (max-width: 450px) { :is(.ex--page, .ex--post) .wp-block-columns.columns--text_image, :is(.ex--page, .ex--post) .wp-block-columns.columns--image_text { gap: 24px; } } :is(.ex--page, .ex--post) li ul { margin-top: 0.4em; margin-bottom: 1em; } :is(.ex--page, .ex--post) li ul li { padding-left: 48px; } :is(.ex--page, .ex--post) li ul li::before { height: 2px; width: 10px; left: 24px; top: 0.75em; border-radius: 1px; } /** * Features lists/columns — site-wide content component (user ruling 2026-07-11, * U1-c: features--* is a site-wide feature and lives with the wp-columns * redefinitions). Born in old products.css; the products CPT keeps its own * .ex--products-scoped copies (higher specificity — no conflict if co-loaded). * Self-contained (metrics + coloring); nested-list variants deliberately NOT * carried — only products content uses them, covered by library/products css. */ .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); } /** * Legacy block exceptions — markup of not-yet-remastered blocks that the generics above must * NOT restyle. The rules below pin the values those blocks had before wp-blocks.css; they * resolve equal-specificity ties by in-file source order, so they stay last in the file. * Each rule goes when its block is remastered. * ⚠ A pin records what the OLD markup did — never copy its value into a remaster. */ /* `.section-stories-intro .story-item :is(h3, p) { margin-bottom: 0 }` dropped 2026-09-11: EX Stories Intro was its only emitter and its remaster (EX Stories Front) states the card's h3 and p margins on its own P70 selectors instead — card-scoped at (0,2,0), so they beat the `:is(.ex--page, .ex--post) h3 / p` generics above on weight rather than on band order. */ /* cta paragraphs were reset-0; the real gap comes from higher-specificity .section--cta .box p:not(:last-child). `.awards-item p` dropped 2026-09-10 with the AG Awards remaster — no emitter left, and the block now carries `.ag_awards--text p { margin-bottom: 0 }` in its own P70 sheet. */ .section--cta .box p { margin-bottom: 0; } /* ex-about-s block wrapper (frozen legacy block php emits product-flavored classes; the old products.css owned this rule — library/products css now loads only on product views): restore the section's closing gap, values byte-equal to the old file. Products carry their own identical copies. Dies at the ex-about-s E-slot. */ .section--product_content { margin-bottom: 100px; } @media (max-width: 630px) { .section--product_content { margin-bottom: 80px; } } /* ex-applications */ /** * Applications CPT styles (catalog L0/L1 + category L2 + single L3 views). * Remaster M8-applications (2026-07-11): relocated from css/, re-banded P60. * The ~210-line .content--product copy (old lines 116-325) was DEAD -- no * applications page ever had that class (no push, no markup; grep+DOM-proven) * -- stripped at the move. Live rules kept byte-identical; they are component- * scoped (.section--app_content etc.), so no .ex--applications prefix needed. * CODE-11 (2026-08-23): the legacy view css retired with the legacy apps branch -- * the retired article view rules (app_content_legacy, app_siblings, apps_pager) and * the dead catalog presentation: section--catalog_header, the catalog header, * subtitle and title rule families, and every products_catalog rule * (zero emitters anywhere, page-scope dead on this CPT). * CODE-12 audit (2026-08-23): the remaining unproven families resolved -- extinct * accordition rules, app_category, apps_catalog + has_tabs + section_spacer, and the * whole legacy product-single styling block (product hero, path breadcrumbs, * product_head, product_content, product_footer -- live copies are in products.css, * this file never loads on products pages). Emitter-proven per family. */ .ex--applications .ag_ctrl--block .ag_ctrl--title { font-size: 24px; } /** * APPLICATIONS ITEM */ .section--app_content { background: var(--Neutrals-White-Sand); } .section--app_content .cite--item { background-color: var(--Neutrals-White); } .section--app_content .cite--item .button--white { background-color: var(--Neutrals-White-Sand); } .section--app_content .cite--item .button--white::after { background-color: var(--Neutrals-Light-Sand); } @media (hover: hover) { .section--app_content .cite--item .button--white:hover:after { background-color: var(--Neutrals-Sand); } } /* ag-link */ /* AG Link (acf/ag-link) — a single themed button. * * The button itself is styled ENTIRELY by the `.button--item` component in css/elements.css; * this file owns only the block wrapper. Three additive rules were added to elements.css for * this block (`.button--icon_left`, `button_icon--arrow_left`/`_right`, `.button--green`) — * see the comment block there. Nothing about the button belongs here, or the component would * end up with two homes. * * Registered `['shared' => true, 'block' => true]` at priority 70 (the block band). * * ⚠ Editor parity: the canvas iframe has no elements.css. The button restatements for the * editor live in library/blocks/assets/admin-assets.css beside the ones that were already * there (`.acf-block-component .button--item`), so every ACF block with a button benefits — * not just this one. → [[editor-iframe-lacks-elements-css]] */ /* Block alignment. WP's align support stores left/center/right and styles it itself in the editor canvas, but an ACF block renders its own markup on the front, so ag-link.php emits the class and it is handled here. * * text-align, NOT float: core's float-based .alignleft/.alignright never load — wp-block-library * is dequeued in WpCleanup — and floating a button would pull it out of the flow and collapse * the wrapper's height. `float: none` is belt-and-braces in case core CSS ever returns. * Scoped to .ag_link--container so these can never leak onto anything else. */ .ag_link--container.alignleft { text-align: left; float: none; } .ag_link--container.aligncenter { text-align: center; float: none; } .ag_link--container.alignright { text-align: right; float: 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 css/poster-section.css into the ag_poster--* namespace. The legacy EX Poster * keeps that file and its own markup — the two blocks share nothing: * * 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 gets it from `.button--item` in both contexts, so this block needs to declare none. */ .ag_poster--container, .ag_poster--container * { box-sizing: border-box; } /* [inherited] elements.css `* { margin: 0 }`, restated ONLY inside the content box. Must come before the typography rules below so their margins still win on a tie. ⚠ Do NOT widen this to `.ag_poster--container *`. That is (0,1,0) — the same specificity as `margin-left/right: auto` on `.section--viewport` in layout.css — and this file combines LATER (band 70 vs band 5), so it wins the tie and un-centres `.ag_poster--inner.section--viewport`. Found on the front, 2026-07-27. */ .ag_poster--content > * { margin: 0; } /** * SECTION HEADER WITH PHOTO */ .ag_poster--container { position: relative; background-size: cover; background-repeat: no-repeat; background-position: center right; } /** Applications */ @media (min-width: 769px) { .single-applications .ag_poster--container { min-height: 320px; } } @media (min-width: 1025px) { .single-applications .ag_poster--container { min-height: 440px; } } @media (min-width: 1281px) { .single-applications .ag_poster--container { min-height: 500px; } } /** Company * * `poster--company` reaches the DOM from TWO different places, so every rule scoped to it * MUST be written in both forms — ancestor (a template pushes it onto #content) and self * (the block's "Additional CSS class(es)" field puts it on the block root). Both forms are * specificity (0,2,0), so they share one declaration block. Writing only one form silently * does nothing on the other half of the pages. → [[poster-company-two-placements]] */ @media (min-width: 769px) { .poster--company .ag_poster--container, .poster--company.ag_poster--container { min-height: 500px; } } /* The mobile ladder is gated on `ag_poster--no_text`, emitted by ag-poster.php when a poster has no title, description or button. Such a banner has no .ag_poster--content inside it, so min-height is the ONLY thing giving it height. Posters WITH text size themselves and must NOT be floored. NB these are (0,3,0), one step above the (0,2,0) rules a page writes in the block's Additional CSS field. That field is injected after the bundle, so it used to win on source order alone; a page that needs its own ladder must match the specificity (include .ag_poster--no_text) rather than rely on order. */ @media (max-width: 768px) { .poster--company .ag_poster--container.ag_poster--no_text, .poster--company.ag_poster--container.ag_poster--no_text { min-height: 350px; } } @media (max-width: 550px) { .poster--company .ag_poster--container.ag_poster--no_text, .poster--company.ag_poster--container.ag_poster--no_text { min-height: 300px; } } @media (max-width: 450px) { .poster--company .ag_poster--container.ag_poster--no_text, .poster--company.ag_poster--container.ag_poster--no_text { min-height: 230px; } } .ag_poster--bg_green { background-image: linear-gradient(320deg, #006432 0%, #3882A6 100%); } .ag_poster--bg_sand { background-image: linear-gradient(140deg, #F7F6F2 0%, #E0E0D1 100%); } .ag_poster--bg_image.ag_poster--text_white { background-color: var(--Secondary-Middle-Electro); } .ag_poster--bg_image.ag_poster--text_black, .ag_poster--bg_image.ag_poster--text_green { background-color: var(--Neutrals-Light-Sand); } .ag_poster--container::before { position: absolute; content: ""; top: 0; bottom: 0; left: 0; width: 70%; background-size: cover; background-repeat: no-repeat; background-position: right center; } .ag_poster--bg_green::before { background-image: url("data:image/svg+xml,%3Csvg width='259' height='198' viewBox='0 0 259 198' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.08' fill-rule='evenodd' clip-rule='evenodd' d='M0 1.18017e-05L259 0L213.505 198L0 198V1.18017e-05Z' fill='%23282819'/%3E%3C/svg%3E"); } .ag_poster--bg_sand::before { background-image: url("data:image/svg+xml,%3Csvg width='259' height='198' viewBox='0 0 259 198' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.08' fill-rule='evenodd' clip-rule='evenodd' d='M0 1.18017e-05L259 0L213.505 198L0 198V1.18017e-05Z' fill='%23B4B4A2'/%3E%3C/svg%3E"); } .ag_poster--bg_image::before { display: none; } .ag_poster--container .ag_poster--inner { position: relative; } .section--viewport_small .ag_poster--inner { width: 1072px; max-width: 100%; } .ag_poster--wrapper { padding: 56px 0 64px; } .ag_poster--has_image .ag_poster--wrapper { padding: 56px 0; } .ag_poster--content { width: 70%; } .ag_poster--bg_image .ag_poster--content { width: 50%; } .section--viewport_small .ag_poster--bg_image .ag_poster--content { width: 70%; } .section--viewport_small .ag_poster--image_object .ag_poster--content { width: 50%; } .ag_poster--textbg_white .ag_poster--content { padding: 32px 46px 42px; background: var(--Neutrals-White); } .ag_poster--textbg_blur .ag_poster--content { padding: 32px 46px 42px; backdrop-filter: blur(60px); } .ag_poster--bg_image.ag_poster--textbg_blur .ag_poster--content { background: rgba(255, 255, 255, 0.05); } .ag_poster--bg_green.ag_poster--textbg_blur .ag_poster--content { background: rgba(255, 255, 255, 0.08); } .ag_poster--bg_sand.ag_poster--textbg_blur .ag_poster--content { background: rgba(255, 255, 255, 0.3); } /* [inherited] elements.css h1 — font-size/line-height/letter-spacing/weight. The line-height is overridden right below, exactly as on the frontend. ⚠ Keyed on `.ag_poster--title`, NOT on `h1`, since the owner's `seo_level` field (2026-08-02) lets the title print as h1/h2/h3/div. Because this block restates the complete set of properties elements.css gives a heading, every level renders identically — the tag is an outline decision only, never a visual one. Do not "simplify" these selectors back to a tag. */ .ag_poster--content .ag_poster--title { font-size: 56px; font-style: normal; font-weight: 300; letter-spacing: -0.05em; } /* [inherited] elements.css p */ .ag_poster--content p { font-size: 16px; font-style: normal; font-weight: 400; line-height: 1.5em; } .ag_poster--content .ag_poster--title { color: var(--Neutrals-White); line-height: 1.1; } .ag_poster--content p { margin-top: 28px; color: var(--Neutrals-White-Sand); } .ag_poster--text_black .ag_poster--content .ag_poster--title { color: var(--Neutrals-Black); } .ag_poster--text_black .ag_poster--content p { color: var(--Neutrals-Dark-Grey); } .ag_poster--text_green .ag_poster--content .ag_poster--title { color: var(--Primary-Green); } .ag_poster--text_green .ag_poster--content p { color: var(--Neutrals-Dark-Grey); } .ag_poster--content .buttons--container { margin-top: 42px; } /* [inherited] elements.css .button--send_request + ::after — the round arrow badge on the request button (markup from library/mailer/forms/send_button.twig). `.button--item` itself needs nothing here: admin-assets.css already restates it as `.acf-block-component .button--item` for every ACF block preview, and elements.css owns it on the front. Only this pair has no editor counterpart, so without it the preview button loses its 58px right padding and the badge. Better long-term home is admin-assets.css beside the other ACF button rules — it would fix every block that renders a send button, not just this one. */ .ag_poster--content .button--send_request { padding-right: 58px; } .ag_poster--content .button--send_request::after { position: absolute; content: ""; top: 9px; right: 9px; width: 30px; height: 30px; border: none; border-radius: 15px; background-color: var(--Primary-Green-40); background-position: center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;%7D .st1%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E"); } @media (max-width: 1512px) { .section--viewport_small .ag_poster--inner { width: 1072px; margin: 0 auto; } } @media (max-width: 1280px) { .ag_poster--container .ag_poster--content { width: 75%; } .ag_poster--textbg_no .ag_poster--content { width: 100%; } .ag_poster--image_object .ag_poster--content { width: 50%; } } @media (max-width: 1024px) { .ag_poster--content .ag_poster--title br { display: none; } .ag_poster--textbg_white .ag_poster--content, .ag_poster--textbg_blur .ag_poster--content { padding: 28px 36px 36px; } .ag_poster--container .ag_poster--content { width: 100%; } .ag_poster--image_object .ag_poster--content { width: 60%; } } @media (max-width: 768px) { .ag_poster--container .ag_poster--inner { padding-left: 0; padding-right: 0; width: 100%; } .ag_poster--container .ag_poster--wrapper { padding-top: 0; padding-bottom: 0; } .ag_poster--container .ag_poster--content { padding-top: 38px; padding-bottom: 46px; padding-left: 32px; padding-right: 32px; } .ag_poster--content .ag_poster--title { font-size: 52px; } .ag_poster--content .buttons--container { margin-top: 36px; } .ag_poster--container.ag_poster--scenario_gradient { background-image: linear-gradient(320deg, #006432 0%, #3882A6 100%); } .ag_poster--container.ag_poster--scenario_gradient::before { background-image: url("data:image/svg+xml,%3Csvg width='259' height='198' viewBox='0 0 259 198' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.08' fill-rule='evenodd' clip-rule='evenodd' d='M0 1.18017e-05L259 0L213.505 198L0 198V1.18017e-05Z' fill='%23282819'/%3E%3C/svg%3E"); display: block; } .ag_poster--container.ag_poster--scenario_gradient .ag_poster--content { background: none; backdrop-filter: none; } .ag_poster--container { background-position: center bottom; } .ag_poster--has_image .ag_poster--content { width: 100%; padding-bottom: 36px; } .section--viewport_small .ag_poster--has_image .ag_poster--content { width: 100%; } .ag_poster--has_image.ag_poster--scenario_object .ag_poster--wrapper { padding-bottom: 300px; } } @media (max-width: 450px) { .ag_poster--container .ag_poster--content { padding-top: 36px; padding-bottom: 42px; padding-left: 24px; padding-right: 24px; } .ag_poster--content .ag_poster--title { font-size: 46px; } .ag_poster--content p { font-size: 14px; line-height: 1.7em; } .ag_poster--has_image .ag_poster--content { padding-bottom: 32px; } .ag_poster--has_image.ag_poster--scenario_object .ag_poster--wrapper { padding-bottom: 260px; } } /** Sustainability — `poster--viewport_large` is a page marker typed into the block's Additional CSS class(es) field, so it keeps its legacy spelling. */ .section--viewport_small .poster--viewport_large .ag_poster--inner { width: 1512px; }