/** * wyg-css-programs-workshops * * WHAT: the Programs & Workshops page's own residue -- the two head grids, the * workshop card (which is a NEW component, not a variant of the publication * plate), and the photograph carousel's arrows. * * 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. * * NOT HERE, DELIBERATELY: .wyg-sec-label, .wyg-sec-title and .wyg-prose. They * live in wyg-css-shared (60), which loads site-wide on purpose (HO-49; they * used to be filed in wyg-css-homepage, which loaded everywhere by accident). .wyg-prose already carries its own 60ch measure and last-paragraph * reset there. Do not restate them. * * RESOLVED BY HO-49: .wyg-wk__type was character-for-character .wyg-plate-essay__chip * in wyg-css-publication-card. Both are now aliases on one declaration block in * wyg-css-shared (60). Nothing about the chip is defined in this file any more. */ /* ========================================================================== 0. SPECIFICITY ON THIS PAGE -- the same three layers as Research & Publications, and for the same reasons. See snippet 42 section 0 in full; the short version is: a) container flex beat 0,2,0 -- `.e-con` plus a doubled class b) a control on a container inside the loop template beat 0,4,0 c) a BOUND typography global on a widget beat 0,5,0 d) `#uc_ue_listing_grid_elementor_ .ue-grid-item` 1,1,0 -- !important only e) the kit's own link rule `.elementor-kit-6 a` 0,1,1 (e) is new here: this page is the first with anchors INSIDE a loop item (the workshop location, the contact line, the download). A single class on the anchor loses to the kit. Every anchor rule below is written at 0,3,0. AND THE VERIFICATION TRAP: busting the Fluent Snippets cache by appending a fresh to the end of also moves this sheet last in load order, so a rule that merely TIES wins during the test and loses in production. Verify on a normal page load. ========================================================================== */ /* ========================================================================== 1. The two head grids ========================================================================== */ .e-con.wyg-pw-current__headcol.wyg-pw-current__headcol, .e-con.wyg-pw-past__headcol.wyg-pw-past__headcol { flex: 0 0 clamp( 220px, 30%, 400px ); min-inline-size: 0; } .e-con.wyg-pw-current__bodycol.wyg-pw-current__bodycol, .e-con.wyg-pw-past__bodycol.wyg-pw-past__bodycol { flex: 1 1 0%; min-inline-size: 0; } /* The one external link in the page's own prose. Elementor's text editor has a link color control but no border-bottom and no trailing glyph, and the glyph must not be typed into the content field -- it is derived from the link's own target. */ .wyg-pw-current.wyg-pw-current .wyg-prose a { text-decoration: none; border-block-end: 1px solid var( --e-global-color-5f8039f0 ); } .wyg-pw-current.wyg-pw-current .wyg-prose a:hover, .wyg-pw-current.wyg-pw-current .wyg-prose a:focus-visible { border-block-end-color: var( --e-global-color-accent ); } .wyg-pw-current .wyg-prose a[target="_blank"]::after { content: "\2197"; font-size: 0.85em; margin-inline-start: 0.2em; } /* ========================================================================== 1a. Section head spacing -- and a cross-page bleed this page has to answer 🚨 `.wyg-sec-label` and `.wyg-sec-title` are shared classes, and TWO snippets style them at the same 0,3,0 specificity: 37-wyg-css-homepage .wyg-sec-title.wyg-sec-title .elementor-heading-title { margin: 0 } 52-wyg-css-about .wyg-sec-title.wyg-sec-title .elementor-heading-title { margin-block-end: 1.75rem } Neither snippet carries a condition, so both load on every page, they tie, and 52 wins on file order. The About page's spacing therefore governs the homepage, Research & Publications and this page. Measured on this page 2026-08-21: the label carried a 12px bottom margin and the section title a 28px one that nothing here asked for, on top of this page's own container gaps -- so the gap Todd measured as 18px was really 24px (label) and 46px (title). Reported as #8244819 and #8244823. FIXED HERE ONLY, at 0,4,0, scoped to this page's two sections. The real fix is for the shared components to live in one file with one owner -- flagged in the HO-47 build log, not solved by a page handoff reaching into About's snippet. ========================================================================== */ .wyg-pw-current .wyg-sec-label.wyg-sec-label .elementor-heading-title, .wyg-pw-past .wyg-sec-label.wyg-sec-label .elementor-heading-title, .wyg-pw-current .wyg-sec-title.wyg-sec-title .elementor-heading-title, .wyg-pw-past .wyg-sec-title.wyg-sec-title .elementor-heading-title { /* The container gap is the only thing that should space these. */ margin-block-end: 0; } /* 🚨 8244789, SECOND ATTEMPT. The first was `align-items: flex-end`, which put the last line of the prose level with the last line of the title. Todd's annotation asks for something else: the prose's FIRST line level with the title's first line, so a two-line title lines up with the prose's second line. The label sits above the title in the same column, so the body column has to drop by exactly the label's own height plus the column gap. Composed from the token rather than measured to a literal, so it follows 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 -- verified as 20.8px on a 13px label. */ @media ( min-width: 1025px ) { .e-con.wyg-pw-current__bodycol.wyg-pw-current__bodycol, .e-con.wyg-pw-past__bodycol.wyg-pw-past__bodycol { margin-block-start: calc( 1.6 * var( --e-global-typography-1c3ea07a-font-size ) * var( --wyg-label-size-scale, 1 ) + 0.75rem ); } } /* ========================================================================== 2. The workshop card Two top-level containers in loop template 519 -- the plate and the body -- made side by side by turning their shared parent into a flex row. Same mechanism as the publication library card, and the flex parent is `.e-loop-item` rather than `.elementor-519` because the template ID changes per language once this page is translated. ========================================================================== */ .wyg-pw-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 ); /* Load-bearing, not a micro-optimization -- see wyg-css-research-publications for the measurement. The boxed shell lands the card's inline-start edge on a half pixel at most widths, so translating it 2px on hover re-rasterises its 1px border at a different weight unless the card is already its own layer. */ will-change: transform; } /* Unlimited Elements' wrapper clips the lift and the shadow, and eases every property on its own 0.2s curve against this card's 0.22s one. The overflow is set from an ID selector at 1,1,0, so !important is the only thing that reaches it; the transition is a plain per-element rule. */ .wyg-pw-grid.wyg-pw-grid .ue-grid-item.ue-grid-item { overflow: visible !important; transition: none; } .wyg-pw-grid .e-loop-item:hover, .wyg-pw-grid .e-loop-item:focus-within { box-shadow: 0 12px 30px rgba( 38, 54, 63, 0.10 ); transform: translate3d( 0, -2px, 0 ); } .wyg-pw-grid .e-loop-item .wyg-wk-plate.wyg-wk-plate.wyg-wk-plate { flex: 0 0 44%; min-inline-size: 0; } .wyg-pw-grid .e-loop-item .wyg-wk-body.wyg-wk-body.wyg-wk-body { flex: 1 1 56%; min-inline-size: 0; } /* ========================================================================== 2a. Inside the plate ========================================================================== */ /* The status marker. A shortcode widget has no text-color and no typography control, so unlike the headings beside it this treatment cannot go on the widget. It renders EMPTY on a past workshop and is deliberately left in the flow: it is the first child of a space-between row, and removing it would let the type chip fall back to the start. */ .wyg-wk__marker.wyg-wk__marker .elementor-shortcode { font-size: calc( var( --e-global-typography-1c3ea07a-font-size ) * var( --wyg-label-size-scale, 1 ) ); font-family: var( --wyg-mono ); font-weight: var( --wyg-label-weight, 600 ); line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var( --e-global-color-83bd7746 ); } .wyg-wk__marker .wyg-wk__dot { letter-spacing: 0; } /* THE CHIP LIVES IN `wyg-css-shared` (60) -- HO-49, 23 August 2026. It was character-for-character `.wyg-plate-essay__chip` in `wyg-css-publication-card`; both names are now aliases on one declaration block in the shared file, so `.wyg-wk__type` still works and there is only one place to change it. */ /* 0,6,0: the title binds WYG / Heading, which emits the whole typography group on the widget's own per-element selector at 0,5,0. 2.5rem is right for a section heading and wrong for six cards in a column. */ .wyg-pw-grid .e-loop-item .wyg-wk__title.wyg-wk__title.wyg-wk__title .elementor-heading-title { font-size: 1.875rem; line-height: 1.12; letter-spacing: -0.018em; margin: 0; } /* Location and dates. One widget renders one or two

, so their spacing belongs here rather than to a container gap. */ .wyg-wk__wherewrap.wyg-wk__wherewrap .wyg-wk__where { font-size: calc( var( --e-global-typography-fd54d4a4-font-size ) * var( --wyg-label-size-scale, 1 ) ); margin: 0; font-family: var( --wyg-mono ); /* 400, NOT the 600 the publication card's byline uses. The mockup sets no font-weight on `.wk-plate .where`, so it renders at 400 -- Todd caught this as "link was not bold on mockups" (#8244815). The Hebrew/Arabic token still applies, because there the mono texture is gone and weight is what is left. */ font-weight: var( --wyg-label-weight, 400 ); line-height: 1.5; letter-spacing: 0.03em; color: var( --e-global-color-83bd7746 ); } .wyg-wk__wherewrap.wyg-wk__wherewrap .wyg-wk__where + .wyg-wk__where { margin-block-start: 0.3rem; } /* 0,3,0 to clear the kit's own `.elementor-kit-6 a` at 0,1,1. */ .wyg-wk__wherewrap.wyg-wk__wherewrap .wyg-wk__where a { color: inherit; text-decoration: none; border-block-end: 1px solid rgba( 225, 194, 154, 0.45 ); } .wyg-wk__wherewrap.wyg-wk__wherewrap .wyg-wk__where a:hover, .wyg-wk__wherewrap.wyg-wk__wherewrap .wyg-wk__where a:focus-visible { border-block-end-color: var( --e-global-color-83bd7746 ); } .wyg-wk__wherewrap .wyg-wk__where a[target="_blank"]::after { content: "\2197"; font-size: 0.85em; margin-inline-start: 0.2em; } /* The series line. Its color is on the widget; only the mono texture is here. The widget is omitted entirely when `series` is empty -- Elementor's heading returns early on an empty title -- so no collapse rule is needed. */ .wyg-wk__series.wyg-wk__series .elementor-heading-title { font-size: calc( var( --e-global-typography-1c3ea07a-font-size ) * var( --wyg-label-size-scale, 1 ) ); margin: 0; font-family: var( --wyg-mono ); font-weight: var( --wyg-label-weight, 600 ); line-height: 1.5; letter-spacing: 0.1em; text-transform: uppercase; } /* The optional contact line. A shortcode widget always renders its wrapper, so an absent line would still take a container gap; :has() removes the widget rather than its contents. Same device as wyg-css-masthead's empty eyebrow. */ .wyg-wk__contactwrap:has( .elementor-shortcode:empty ), .wyg-wk__downloadwrap:has( .elementor-shortcode:empty ) { display: none; } /* 1rem on top of the plate body's own 0.75rem gap = the mockup's 1.75rem. */ .wyg-wk__contactwrap.wyg-wk__contactwrap { margin-block-start: 1rem; } .wyg-wk__contactwrap.wyg-wk__contactwrap .wyg-wk__contact { font-size: calc( var( --e-global-typography-1c3ea07a-font-size ) * var( --wyg-label-size-scale, 1 ) ); font-family: var( --wyg-mono ); font-weight: var( --wyg-label-weight, 600 ); line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; color: var( --e-global-color-83bd7746 ); text-decoration: none; display: inline-flex; align-items: center; gap: 0.45rem; } /* The arrow trails the label and is decoration, so it is generated rather than typed into a translatable string. */ .wyg-wk__contactwrap .wyg-wk__contact::after { content: "\25B8"; } .wyg-wk__contactwrap.wyg-wk__contactwrap .wyg-wk__contact:hover, .wyg-wk__contactwrap.wyg-wk__contactwrap .wyg-wk__contact:focus-visible { color: var( --e-global-color-a5f61243 ); text-decoration: underline; text-underline-offset: 4px; } /* ========================================================================== 2b. Inside the body ========================================================================== */ .elementor-widget.wyg-wk__desc.wyg-wk__desc p { margin-block-end: 0.75rem; } .elementor-widget.wyg-wk__desc.wyg-wk__desc p:last-child { margin-block-end: 0; } .wyg-wk__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; padding-block-start: 1.75rem; } .wyg-wk__downloadwrap.wyg-wk__downloadwrap .wyg-wk__pdf { font-size: calc( var( --e-global-typography-1c3ea07a-font-size ) * var( --wyg-label-size-scale, 1 ) ); font-family: var( --wyg-mono ); font-weight: var( --wyg-label-weight, 600 ); line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; color: var( --e-global-color-primary ); text-decoration: none; border-block-end: 1px solid var( --e-global-color-5f8039f0 ); min-block-size: 36px; display: inline-flex; align-items: center; } .wyg-wk__downloadwrap .wyg-wk__pdf::after { content: "\2193"; margin-inline-start: 0.55rem; font-size: 1.1em; line-height: 1; } .wyg-wk__downloadwrap.wyg-wk__downloadwrap .wyg-wk__pdf:hover, .wyg-wk__downloadwrap.wyg-wk__downloadwrap .wyg-wk__pdf:focus-visible { color: var( --e-global-color-accent ); border-block-end-color: var( --e-global-color-accent ); } .wyg-wk__fmt { font-size: calc( var( --e-global-typography-1c3ea07a-font-size ) * var( --wyg-label-size-scale, 1 ) ); font-family: var( --wyg-mono ); letter-spacing: 0.06em; color: var( --e-global-color-d89acb7d ); } /* ========================================================================== 3. The photograph carousel Elementor's own Image Carousel, stock. Its slides-per-view, spacing and arrows are all controls; what has no control is the 4:3 crop, the Brown edge under each frame, and the arrows sitting as a pair at the bottom end of the row rather than floating at its vertical center. 0,4,0 THROUGHOUT, and measured rather than assumed: e-swiper.min.css ships `.elementor-element .swiper .elementor-swiper-button` at 0,3,0 and loads AFTER the snippet stylesheets, so a two-class rule ties and loses. The widget's Arrows Position was also moved off `outside`, whose own rules sit at 0,4,0 and would tie this file in turn -- one fewer contestant beats one more class. ========================================================================== */ .wyg-pw-carousel .swiper-slide img { inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; border-block-end: 6px solid var( --e-global-color-0e573e58 ); } .wyg-pw-carousel .elementor-image-carousel-wrapper { padding-block-end: 3.75rem; } .wyg-pw-carousel.wyg-pw-carousel.wyg-pw-carousel .elementor-swiper-button { inset-block-start: auto; top: auto; inset-block-end: 0; transform: none; inline-size: 44px; block-size: 44px; display: inline-flex; align-items: center; justify-content: center; background-color: var( --e-global-color-dbfd062c ); color: var( --e-global-color-primary ); border: 1px solid var( --e-global-color-5f8039f0 ); border-radius: 5px; font-size: 0.7rem; transition: background-color 0.18s cubic-bezier( 0.2, 0.6, 0.3, 1 ), color 0.18s cubic-bezier( 0.2, 0.6, 0.3, 1 ); } .wyg-pw-carousel.wyg-pw-carousel.wyg-pw-carousel .elementor-swiper-button-prev { inset-inline-start: auto; inset-inline-end: 52px; } .wyg-pw-carousel.wyg-pw-carousel.wyg-pw-carousel .elementor-swiper-button-next { inset-inline-start: auto; inset-inline-end: 0; } .wyg-pw-carousel.wyg-pw-carousel.wyg-pw-carousel .elementor-swiper-button:hover:not( .swiper-button-disabled ) { background-color: var( --e-global-color-primary ); color: var( --e-global-color-a5f61243 ); border-color: var( --e-global-color-primary ); } /* The glyph. Elementor ships a chevron SVG inside each button; the mockup uses a solid triangle at 0.7rem. Swapped in CSS rather than through the widget's icon controls so the RTL pair can be mirrored -- Elementor moves the buttons in RTL but does not turn the glyph around, and a triangle pointing the wrong way is worse than a chevron. Todd, #8244807. */ .wyg-pw-carousel.wyg-pw-carousel.wyg-pw-carousel .elementor-swiper-button svg { display: none; } .wyg-pw-carousel.wyg-pw-carousel .elementor-swiper-button-prev::before { content: "\25C0"; } .wyg-pw-carousel.wyg-pw-carousel .elementor-swiper-button-next::before { content: "\25B6"; } [dir="rtl"] .wyg-pw-carousel.wyg-pw-carousel .elementor-swiper-button-prev::before { content: "\25B6"; } [dir="rtl"] .wyg-pw-carousel.wyg-pw-carousel .elementor-swiper-button-next::before { content: "\25C0"; } .wyg-pw-carousel.wyg-pw-carousel.wyg-pw-carousel .elementor-swiper-button.swiper-button-disabled { opacity: 0.3; cursor: default; } /* ========================================================================== 4. Responsive Elementor's own breakpoints (1024 / 767), not the mockups' 1000 / 720. The widgets' responsive controls fire on Elementor's, and two sets a few dozen pixels apart is how a layout ends up half stacked. ========================================================================== */ @media ( max-width: 1024px ) { /* The head grid switches to a column on its own control at this width. Its two children still carry a main-axis basis from section 1, which in a column is a HEIGHT -- measured 2026-08-21, it pinned the label column to 220px tall and squeezed the prose into a 130px measure. Reset both. */ .e-con.wyg-pw-current__headcol.wyg-pw-current__headcol, .e-con.wyg-pw-past__headcol.wyg-pw-past__headcol, .e-con.wyg-pw-current__bodycol.wyg-pw-current__bodycol, .e-con.wyg-pw-past__bodycol.wyg-pw-past__bodycol { flex: 0 0 auto; inline-size: 100%; } .wyg-pw-grid .e-loop-item.e-loop-item { flex-direction: column; } .wyg-pw-grid .e-loop-item .wyg-wk-plate.wyg-wk-plate.wyg-wk-plate, .wyg-pw-grid .e-loop-item .wyg-wk-body.wyg-wk-body.wyg-wk-body { flex: 0 0 auto; } } @media ( max-width: 767px ) { /* 44px is the tap target; 36px is only enough for a pointer. */ .wyg-wk__downloadwrap.wyg-wk__downloadwrap .wyg-wk__pdf { min-block-size: 44px; } } /* --------------------------------------------------------------------------- RTL: the external-link arrows turn around. Both `\2197` glyphs on this page -- the one after an outbound link in the current-programs prose, and the one after the venue link on a workshop card -- were shipped without an RTL pair. Found in the same site-wide arrow sweep as the News & Media card arrow, 2026-08-27 (HO-85). The carousel arrows in section 3 already mirror; these did not. ------------------------------------------------------------------------ */ [dir="rtl"] .wyg-pw-current .wyg-prose a[target="_blank"]::after { content: "\2196"; } [dir="rtl"] .wyg-wk__wherewrap .wyg-wk__where a[target="_blank"]::after { content: "\2196"; } /* --------------------------------------------------------------------------- RTL: the carousel's arrow pair moves to the left edge. Todd's ticket z92046mxtj, and the cause is worth keeping because the CSS above looks like it should already handle it. The buttons are positioned with `inset-inline-end`, which is correct -- but Elementor sets `direction: ltr` on `.elementor-image-carousel-wrapper`, and a logical property resolves against the direction of the element it is on, not the page. Measured 2026-08-27 (HO-85) on /he/programs-workshops/: page `dir=rtl`, wrapper `direction: ltr`, both buttons sitting at x 1281 and 1333 against an inner right edge of 1377. So the glyphs mirrored -- that rule keys off `[dir="rtl"]` on , which the inner `direction` cannot touch -- while the buttons did not move. Arrows pointing the right way on the wrong side is the harder half of this bug to notice. Physical properties are therefore the correct tool here, and the only place on this site where that is true. `next` keeps the outer position and `prev` the inner one, so the pair reads outward from the edge exactly as it does in English. 0,5,0, one above the base rules. ------------------------------------------------------------------------ */ [dir="rtl"] .wyg-pw-carousel.wyg-pw-carousel.wyg-pw-carousel .elementor-swiper-button-prev { right: auto; left: 52px; } [dir="rtl"] .wyg-pw-carousel.wyg-pw-carousel.wyg-pw-carousel .elementor-swiper-button-next { right: auto; left: 0; }