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-pages */ /** * pages.css — general .ex--page overrides + page-type layers (target band 50). * Born in remaster M6 from the live parts of page-default.css (deleted). * Enqueued by template-default.php only for now; grows as page templates migrate. * `.ex--document` = tier-1 marker for the plain document pages * (template-default.php — support / legal / info docs), emitted by ContentClasses. * Layering note: `.ex--document h2` deliberately TIES wp-blocks' h2 (0,1,1) and * wins by band order (50 > 30) — the page-type layer overriding the generic * layer is the band system working as designed. */ /* Scroll anchoring off — carried from page-default.css (body-level rule; applies wherever this file loads). */ body { overflow-anchor: none; } /** Document pages — h2 keeps the wider 56px rhythm (wp-blocks default is 42px) */ .ex--document h2 { margin-bottom: 56px; } @media (max-width: 768px) { .ex--document h2 { margin-bottom: 42px; } } /* (Spacing + width utils fully retired here: U1 renamed margin--0p5em/start/end content to the global bottom--0p5em / top--start / bottom--end utils; U2 promoted width--small to the global util set. Single source for all of them: elements.css. NB U1 adopted the posts start/end values: 56px→60px, @768 42px→48px.) */ /** Support page columns (wp-block-columns.columns--support). * The flex-basis guard undoes wp-blocks' generic 30%/100% !important on these * columns — they have always sized by content. Keep the guard ABOVE the @1024 * last-child rule: same specificity + !important, source order decides. */ .ex--document .wp-block-columns.columns--support { gap: 50px 40px; } .ex--document .wp-block-columns.columns--support > .wp-block-column { flex-basis: auto !important; } .ex--document .wp-block-columns.columns--support h4 { margin-bottom: 18px; font-size: 14px; font-weight: 600; line-height: 24px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--Neutrals-Black); } .ex--document .wp-block-columns.columns--support h5 { margin-bottom: 10px; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; color: var(--Neutrals-Grey); text-transform: uppercase; } .ex--document .wp-block-columns.columns--support p { margin-bottom: 20px; } .ex--document .wp-block-columns.columns--support a { font-weight: 400; } @media (max-width: 1024px) { .ex--document .wp-block-columns.columns--support { flex-wrap: wrap !important; } .ex--document .wp-block-columns.columns--support > .wp-block-column:last-child { flex-basis: 100% !important; } } /** Warranty / Sales-conditions document rules (user decision 2026-07-11: * this trio stays live; the old group max-width was dropped — the pages' * own `width--small` markup covers the narrowing). Scoped by content classes * that live in those pages' Gutenberg markup. Their nested-list styling * (.gb--warranty li ul) is NOT duplicated here — wp-blocks' identical li ul * rules cover it. */ .gb--warranty h3, .gb--sale_conditions h3 { margin-top: 1.7em; } .gb--sale_conditions .group--shift { margin-left: 2em; } .gb--sale_conditions ul.list--none li::before { 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 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; }