/** * wyg-css-research-publications * * WHAT: The Research & Publications page's own residue -- the two column grids, * the filter rail, and the modifier that turns the shared publication card on * its side for the library. * * WHY SO LITTLE OF IT: color, spacing, borders and type that an Elementor * control can express are on the controls (page-build-conventions.md §5-i). * What is left here is what no control reaches. * * NOT HERE, DELIBERATELY: `.wyg-sec-label`, `.wyg-sec-title` and `.wyg-prose`. * They live in `wyg-css-homepage`, which carries NO condition and so loads on * every page -- measured here 2026-08-19, the label already computes IBM Plex * Mono 13px / uppercase / 1.56px / 600 with nothing added. That file's comment * calls them "this page only", which is now true of where they are FILED, not * where they LOAD. Flagged for a shared-components handoff. */ /* ========================================================================== 0. 🚨 SPECIFICITY ON THIS PAGE -- MEASURED, NOT ASSUMED. READ BEFORE EDITING. Three separate Elementor layers outrank a plain component class here. Every number below was read out of the live cascade on 2026-08-19 after a first cut that sat in the stylesheet, matched its element, and did not paint. a) CONTAINER FLEX -- beat 0,2,0. Elementor ships `.e-con.e-flex { flex: var(--flex-grow) var(--flex-shrink) var(--flex-basis) }` AND redefines `--flex-basis: auto` on that same selector. So setting the custom property does NOT help by itself: the property is redefined at 0,2,0 and a single component class at 0,1,0 loses to it. A DOUBLED class ties at 0,2,0 and loses on load order, because Elementor's frontend CSS enqueues after the snippets. Use `.e-con` plus a doubled class -- 0,3,0 -- and set `flex` directly, which is explicit about what is being overridden. b) PER-ELEMENT CONTAINER STYLE -- beat 0,4,0. A control set on a container in the loop template emits `.elementor-370 .elementor-element.elementor-element-:not(.elementor-motion-effects-element-type-background)`. Overriding one from this page needs 0,5,0. c) A BOUND TYPOGRAPHY GLOBAL -- beat 0,5,0. The plate title binds WYG / Heading, which emits `.elementor-370 .elementor-element.elementor-element- .elementor-heading-title` carrying the whole group. Overriding the size needs 0,6,0, which is the ceiling this project has already found ([[elementor-per-post-css-outguns-components]]). 🚨 AND THE VERIFICATION TRAP THAT HID ALL OF THIS: busting the Fluent Snippets cache by appending a fresh to the end of ALSO MOVES THIS SHEET LAST IN LOAD ORDER, so every rule that merely TIES starts winning during the test and loses again in production. Two of the rules below were signed off that way and shipped broken. Verify on a normal page load -- the enqueued ?ver does change when the snippet's updated_at changes, so a plain reload is enough. (HO-35 §7i documents the opposite failure, a stale sheet making a good change look broken. Both directions are live; this one is worse, because it fails silently in the direction of "looks fixed".) ========================================================================== */ /* ========================================================================== 1. The two column grids ========================================================================== */ .e-con.wyg-rp-intro__head.wyg-rp-intro__head { flex: 0 0 clamp( 220px, 30%, 400px ); min-inline-size: 0; } .e-con.wyg-rp-intro__body.wyg-rp-intro__body { flex: 1 1 0%; min-inline-size: 0; } .e-con.wyg-rp-library__head.wyg-rp-library__head { flex: 0 0 clamp( 220px, 30%, 400px ); min-inline-size: 0; } .e-con.wyg-rp-library__body.wyg-rp-library__body { flex: 1 1 0%; min-inline-size: 0; } /* ========================================================================== 2. The filter rail ========================================================================== */ .e-con.wyg-rp-fgroup.wyg-rp-fgroup { flex: 0 0 auto; inline-size: auto; min-inline-size: 0; } .e-con.wyg-rp-fgroup--grow.wyg-rp-fgroup--grow { flex: 1 1 240px; inline-size: auto; } /* Mono is a texture, and font-family is §5-i's own stated exception: no Elementor control can point at a custom property, and `--wyg-mono` is what wyg-css-global §5 substitutes per language -- Heebo in Hebrew, Noto Sans Arabic in Arabic, where a Latin-only mono reads as a telex. */ .wyg-rp-pills .ue_taxonomy_item, .wyg-rp-rcount .uc-query-summary, .wyg-rp-clear .uc-button-clear, .wyg-rp-achips .ue-active-filters { font-family: var( --wyg-mono ); } /* The 44px tap target. Unlimited Elements has a padding control but no min-height, and the mockup's pill is 44px so a thumb can hit it. The PADDING is on the widget's controls, not here -- item_padding for the term pills and item_padding_child for "All", which UE styles separately through `.ue_taxonomy_item:not(.uc-is-parent)` at 0,4,0. */ .wyg-rp-pills .ue_taxonomy_item { min-block-size: 44px; } /* The selected pill is Dark Blue on three sides and Tan underneath. Elementor's border control carries ONE color for all four sides. */ .wyg-rp-pills .ue_taxonomy_item.uc-selected { border-block-end-color: var( --e-global-color-83bd7746 ); } .wyg-rp-select select { inline-size: 100%; } /* The count sits hard against the end of the result bar. No container control emits margin-inline-start:auto on one child. */ .wyg-rp-rcount { margin-inline-start: auto; } /* ========================================================================== 3. The library card -- the horizontal variant of the shared plate §11a: this page CONSUMES templates 370/371, it does not build its own card. Everything below is the modifier that rule asks for. Todd's call, 19 August: the homepage keeps its own values and the library overrides them here rather than changing 370 for both. The flex parent is `.e-loop-item`, NOT `.ue-grid-item`. Unlimited Elements wraps each result in `.ue-grid-item`; Elementor then wraps the loop item in `.elementor.elementor-.e-loop-item`. Measured chain: .ue-grid-item > .elementor-370.e-loop-item > .wyg-plate-essay. `.e-loop-item` rather than `.elementor-370` because the template ID changes per language (382 ar, 384 he -- §11b). ========================================================================== */ .wyg-rp-grid .e-loop-item.e-loop-item { display: flex; align-items: stretch; background-color: var( --e-global-color-dbfd062c ); border: 1px solid var( --e-global-color-3e660e4c ); transition: box-shadow 0.22s cubic-bezier( 0.2, 0.6, 0.3, 1 ), transform 0.22s cubic-bezier( 0.2, 0.6, 0.3, 1 ); /* 🚨 will-change is load-bearing, not a micro-optimisation. The boxed shell centres 1400px in the viewport, so at most widths the card's left edge lands on a HALF pixel -- measured 151.5px at 1718px wide. Its 1px border is therefore antialiased across two device pixels, and translating the card 2px on hover moves it to a different subpixel phase, so the border is re-rasterised at a different weight and visibly changes as you hover. Todd caught it on screen 2026-08-20. Promoting the card to its own compositor layer means the border is rasterised ONCE and the layer is moved, so it cannot change weight mid-transition. The layer is created at rest rather than on :hover -- promoting during the animation causes the flash it is meant to prevent. Six cards is a cheap number of layers; if the library ever paginates past ~30, revisit. */ will-change: transform; } /* 🚨 UNLIMITED ELEMENTS' OWN WRAPPER FIGHTS THIS HOVER TWO WAYS. `.ue-grid-item` ships `overflow: hidden` and `transition: 0.2s ease-in-out`. The overflow is the one that shows: the lift and the drop shadow are painted on `.e-loop-item` INSIDE that wrapper, so the wrapper clipped both -- the shadow never reached the page and the 2px lift was cut off at the top edge, which is why the movement read as roughly half of the design's and looked muddy beside the mockup, where the card is a free-standing element. The transition is the second: a blanket 0.2s ease-in-out on EVERY property, easing against this card's own 0.22s cubic-bezier. Two nested elements animating the same interaction on different curves is what "less smooth" actually is. It also animates layout while the filters re-flow the grid. Measured 2026-08-20 against Todd's screen recordings of mockup vs staging. */ .wyg-rp-grid.wyg-rp-grid .ue-grid-item.ue-grid-item { /* !important is the only thing that reaches the overflow: Unlimited Elements sets it from `#uc_ue_listing_grid_elementor_ .ue-grid-item`, an ID selector at 1,1,0 that no number of classes can outrank. The transition is a plain 0,3,0 per-element rule, so 0,4,0 is enough for that one. */ overflow: visible !important; transition: none; } /* :focus-within so a keyboard user gets the affordance a mouse user gets. */ .wyg-rp-grid .e-loop-item:hover, .wyg-rp-grid .e-loop-item:focus-within { box-shadow: 0 12px 30px rgba( 38, 54, 63, 0.10 ); /* translate3d, not translateY: it guarantees the compositor path on every engine rather than relying on will-change alone. */ transform: translate3d( 0, -2px, 0 ); } /* 44 / 56, and the plate's padding drops from the homepage's 44px to the library's 36px. Both through Elementor's own properties -- see section 0. */ .wyg-rp-grid .e-loop-item .wyg-plate-essay.wyg-plate-essay.wyg-plate-essay { flex: 0 0 44%; padding: 2.25rem; min-inline-size: 0; } /* 🚨 The card body is WHITE in the library, not Off White. Template 370 sets Off White because on the homepage the essays band is white and the card has to separate from it. Here the library band is white too, so inheriting that value made the card read as two different materials -- a dark plate stuck to a beige panel. Todd caught it on the built page; the mockup has card and band both white, told apart only by the hairline border above. */ .wyg-rp-grid .e-loop-item .wyg-essay-under.wyg-essay-under.wyg-essay-under { flex: 1 1 56%; padding: 2.25rem; background-color: var( --e-global-color-dbfd062c ); min-inline-size: 0; } /* The plate title is 30px here against the homepage feature card's 40px. Six cards at 40px read as six headlines rather than a list. Doubled because post-.css ties every heading to the Primary global at 0,2,0 and loads last -- [[elementor-per-post-css-outguns-components]]. */ .wyg-rp-grid .e-loop-item .wyg-plate-essay__title.wyg-plate-essay__title.wyg-plate-essay__title .elementor-heading-title { font-size: 1.875rem; line-height: 1.12; letter-spacing: -0.018em; } /* The designed hover: a Tan underline clear of the baseline. The plate title is a linked heading, so the anchor inside it is what takes the decoration. */ .wyg-rp-grid .wyg-plate-essay__title a { text-decoration: none; } .wyg-rp-grid .wyg-plate-essay__title a:hover, .wyg-rp-grid .wyg-plate-essay__title a:focus-visible { text-decoration: underline; text-decoration-color: var( --e-global-color-83bd7746 ); text-underline-offset: 5px; } /* The season and project line, added to template 370 by HO-41. Mono, like the plate's chips. The size reads the WYG / Micro token's own variable rather than binding a size-only typography global, which would emit every other typography property against an undefined variable and destroy them (build-log 2026-08-19-HO-35 §5a). */ .wyg-essay-under__meta.wyg-essay-under__meta .elementor-heading-title { font-family: var( --wyg-mono ); font-size: var( --e-global-typography-1c3ea07a-font-size ); font-weight: var( --wyg-label-weight, 600 ); text-transform: uppercase; letter-spacing: 0.08em; margin: 0; } /* The foot row sits on the floor of the card whatever the abstract does, with the PDF link at the start and the call to action hard against the end. Elementor's margin control has no `auto`. */ .wyg-rp-grid .wyg-essay-under__foot { margin-block-start: auto; } .wyg-rp-grid .wyg-essay-under__cta { margin-inline-start: auto; } /* ========================================================================== 4. Mobile The card becomes the stacked homepage card again, which is what the mobile mockup shows: one shape, two layouts, no second template. ========================================================================== */ @media ( max-width: 767px ) { .e-con.wyg-rp-intro__head.wyg-rp-intro__head, .e-con.wyg-rp-library__head.wyg-rp-library__head { flex: 0 1 auto; } .e-con.wyg-rp-fgroup.wyg-rp-fgroup, .e-con.wyg-rp-fgroup--grow.wyg-rp-fgroup--grow { flex: 0 1 auto; inline-size: 100%; } .wyg-rp-rcount { margin-inline-start: 0; inline-size: 100%; } .wyg-rp-grid .e-loop-item.e-loop-item { flex-direction: column; } .wyg-rp-grid .e-loop-item .wyg-plate-essay.wyg-plate-essay.wyg-plate-essay, .wyg-rp-grid .e-loop-item .wyg-essay-under.wyg-essay-under.wyg-essay-under { flex: 0 1 auto; } /* No lift on touch -- a hover state that cannot be dismissed reads as a bug. */ .wyg-rp-grid .e-loop-item:hover, .wyg-rp-grid .e-loop-item:focus-within { transform: none; } } /* ========================================================================== 6. Userback round, 2026-08-20 ========================================================================== */ /* #8241117 -- the plate's language and type chips were too tight vertically. They matched the mockup exactly at .22rem; Todd asked for more than the mockup, so this is a deliberate divergence rather than a correction. Scoped to the library: the homepage card uses the same chips and its own design was signed off at the tighter height. */ .wyg-rp-grid .e-loop-item .wyg-plate-essay__chip.wyg-plate-essay__chip .elementor-heading-title { padding-block: 0.45rem; } /* #8241121 -- the PDF link was never styled at all, so it inherited the body face at 17px. The mockup has it as quiet mono apparatus beside the loud CTA. */ .wyg-essay-under__pdf { font-family: var( --wyg-mono ); font-size: var( --e-global-typography-1c3ea07a-font-size ); font-weight: var( --wyg-label-weight, 600 ); text-transform: uppercase; letter-spacing: 0.1em; color: var( --e-global-color-d89acb7d ); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; min-block-size: 44px; } .wyg-essay-under__pdf:hover, .wyg-essay-under__pdf:focus-visible { color: var( --e-global-color-accent ); text-decoration: underline; text-underline-offset: 4px; } /* #8241141 -- the active-filter chips. The filter name is added by wyg-js-research-publications from each chip's data-key, because UE has no setting for it and CSS cannot know which taxonomy a chip belongs to. The label stays mono caps; the VALUE goes back to natural case, because author names set in capitals read badly -- "FR. JOHN PAUL". */ .wyg-rp-achips .wyg-rp-chip__label { font-weight: 700; margin-inline-end: 0.4rem; opacity: 0.75; } .wyg-rp-achips .wyg-rp-chip__value { text-transform: none; letter-spacing: 0.02em; } @media ( max-width: 767px ) { /* #8241201 -- the call to action is oversized on a 430px card. */ /* 0,4,0: the loop template's per-element button rule is 0,3,0 and loads after the snippets, so a matching 0,3,0 ties and loses. */ .wyg-rp-grid .e-loop-item .wyg-essay-under__cta.wyg-essay-under__cta .elementor-button { font-size: var( --e-global-typography-1c3ea07a-font-size ); padding: 0.75rem 1.15rem; } /* #8241195 -- the count sits at the start of the bar on mobile, not pushed to the end of an otherwise empty row. The widget's own align control sets this on its inner element, so the override has to reach that. */ /* !important because UE emits the align from `#uc_query_summary_filter_`, an ID selector at 1,1,0. Same situation as the grid item's overflow. */ .wyg-rp-rcount, .wyg-rp-rcount .uc-query-summary { text-align: start !important; } } /* ========================================================================== 5. Section-head alignment -- the rollout, HO-49, 23 August 2026 Todd, 21 August, after approving this treatment on Programs & Workshops: "section-head alignment should be updated everywhere, but I'll leave that to the manager conversation to handle." HO-47 scanned every English document rather than guessing at the scope and found exactly ONE container left -- this one. About's .wyg-about-history (copy beside a figure) and the homepage's .wyg-essays__grid (cards) are different components and are not in scope. NO ELEMENTOR EDIT WAS NEEDED. The container was already row / wrap / align-items: flex-start with a 0.75rem head-column gap -- structurally identical to Programs & Workshops. The whole treatment is these two rules. THE READING OF TODD'S ANNOTATION, which took HO-47 two attempts: the prose's FIRST line starts level with the title's FIRST line. Not align-items: flex-end, which lines up the LAST lines; not top alignment, which leaves the paragraph floating level with the label. So the columns stay flex-start and the body column is pushed down past the label instead. THE OFFSET IS COMPOSED FROM THE LABEL'S OWN TYPE TOKEN, never a measured literal -- that is what makes it follow the Hebrew/Arabic label bump (wyg-css-global 5g) instead of drifting away from it. 1.6 is the kit's body line-height, which the label inherits; 0.75rem is the head column's own row gap. Desktop only: below 1025px the grid stacks and there is nothing to align to. Recipe in page-build-conventions 2a. ========================================================================== */ /* 0,4,0. The shared 12px / 28px come from wyg-css-shared (60) at 0,3,0 and are the site default; this section spaces its head from the container gap alone, so they have to go or the offset below is wrong by exactly their sum. Same device as wyg-css-programs-workshops section 1a. */ .wyg-rp-intro .wyg-sec-label.wyg-sec-label .elementor-heading-title, .wyg-rp-intro .wyg-sec-title.wyg-sec-title .elementor-heading-title { margin-block-end: 0; } @media ( min-width: 1025px ) { .e-con.wyg-rp-intro__body.wyg-rp-intro__body { margin-block-start: calc( 1.6 * var( --e-global-typography-1c3ea07a-font-size ) * var( --wyg-label-size-scale, 1 ) + 0.75rem ); } } /* The Library head is the same component, added HO-71 (ticket z92046jnnu). Its left column keeps the __head name it already had before the body column existed, so this page reads row = __headrow, columns = __head / __body, matching .wyg-rp-intro's column names one level down. Scoped to __headrow so the filter rail's own .wyg-sec-label instances keep their spacing. */ .wyg-rp-library__headrow .wyg-sec-label.wyg-sec-label .elementor-heading-title, .wyg-rp-library__headrow .wyg-sec-title.wyg-sec-title .elementor-heading-title { margin-block-end: 0; } @media ( min-width: 1025px ) { .e-con.wyg-rp-library__body.wyg-rp-library__body { margin-block-start: calc( 1.6 * var( --e-global-typography-1c3ea07a-font-size ) * var( --wyg-label-size-scale, 1 ) + 0.75rem ); } }