.elementor-22720 .elementor-element.elementor-element-f4499cc{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-22720 .elementor-element.elementor-element-365bfa82{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--flex-wrap:wrap;--overlay-opacity:0.7;--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:7%;--padding-bottom:7%;--padding-left:0%;--padding-right:0%;}.elementor-22720 .elementor-element.elementor-element-365bfa82::before, .elementor-22720 .elementor-element.elementor-element-365bfa82 > .elementor-background-video-container::before, .elementor-22720 .elementor-element.elementor-element-365bfa82 > .e-con-inner > .elementor-background-video-container::before, .elementor-22720 .elementor-element.elementor-element-365bfa82 > .elementor-background-slideshow::before, .elementor-22720 .elementor-element.elementor-element-365bfa82 > .e-con-inner > .elementor-background-slideshow::before, .elementor-22720 .elementor-element.elementor-element-365bfa82 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-22720 .elementor-element.elementor-element-8584c74{width:100%;max-width:100%;text-align:center;}.elementor-22720 .elementor-element.elementor-element-72f01aa{--e-filter-direction:row;--e-filter-white-space:nowrap;--e-filter-justify-content:center;--e-filter-item-width:initial;--e-filter-item-flex-grow:0;--e-filter-wrap:nowrap;--e-filter-overflow-x:scroll;width:100%;max-width:100%;--e-filter-normal-text-color:var( --e-global-color-116b926 );--e-filter-hover-text-color:var( --e-global-color-0ca1279 );--e-filter-active-text-color:var( --e-global-color-0ca1279 );}.elementor-22720 .elementor-element.elementor-element-72f01aa .e-filter-item:hover:not( [aria-pressed=true] ){background-color:var( --e-global-color-23872a4 );border-style:solid;border-width:2px 2px 2px 2px;border-color:var( --e-global-color-accent );}.elementor-22720 .elementor-element.elementor-element-72f01aa .e-filter-item[aria-pressed="true"]{background-color:var( --e-global-color-accent );border-style:solid;border-width:2px 2px 2px 2px;border-color:var( --e-global-color-590c0f9 );}.elementor-22720 .elementor-element.elementor-element-72f01aa > .elementor-widget-container{margin:0px 0px 25px 0px;}.elementor-22720 .elementor-element.elementor-element-72f01aa .e-filter-item{font-family:var( --e-global-typography-6e87a78-font-family ), Sans-serif;font-size:var( --e-global-typography-6e87a78-font-size );font-weight:var( --e-global-typography-6e87a78-font-weight );text-transform:var( --e-global-typography-6e87a78-text-transform );text-decoration:var( --e-global-typography-6e87a78-text-decoration );line-height:var( --e-global-typography-6e87a78-line-height );letter-spacing:var( --e-global-typography-6e87a78-letter-spacing );}.elementor-22720 .elementor-element.elementor-element-72f01aa .e-filter-item:not( [aria-pressed=true] ):not( :hover ){border-style:solid;border-width:2px 2px 2px 2px;border-color:var( --e-global-color-829b63b );}.elementor-22720 .elementor-element.elementor-element-a2096ad{--grid-columns:3;}.elementor-22720 .elementor-element.elementor-element-a2096ad .elementor-loop-container{grid-auto-rows:1fr;}.elementor-22720 .elementor-element.elementor-element-a2096ad .e-loop-item > .elementor-section, .elementor-22720 .elementor-element.elementor-element-a2096ad .e-loop-item > .elementor-section > .elementor-container, .elementor-22720 .elementor-element.elementor-element-a2096ad .e-loop-item > .e-con, .elementor-22720 .elementor-element.elementor-element-a2096ad .e-loop-item .elementor-section-wrap > .e-con{height:100%;}.elementor-22720 .elementor-element.elementor-element-a2096ad .elementor-pagination{text-align:center;font-family:var( --e-global-typography-6e87a78-font-family ), Sans-serif;font-size:var( --e-global-typography-6e87a78-font-size );font-weight:var( --e-global-typography-6e87a78-font-weight );text-transform:var( --e-global-typography-6e87a78-text-transform );text-decoration:var( --e-global-typography-6e87a78-text-decoration );line-height:var( --e-global-typography-6e87a78-line-height );letter-spacing:var( --e-global-typography-6e87a78-letter-spacing );margin-top:3em;}.elementor-22720 .elementor-element.elementor-element-a2096ad .elementor-pagination a.page-numbers:hover{color:var( --e-global-color-0ca1279 );}.elementor-22720 .elementor-element.elementor-element-a2096ad .elementor-pagination .page-numbers.current{color:var( --e-global-color-0ca1279 );}body:not(.rtl) .elementor-22720 .elementor-element.elementor-element-a2096ad .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 2em/2 );}body:not(.rtl) .elementor-22720 .elementor-element.elementor-element-a2096ad .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 2em/2 );}body.rtl .elementor-22720 .elementor-element.elementor-element-a2096ad .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 2em/2 );}body.rtl .elementor-22720 .elementor-element.elementor-element-a2096ad .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 2em/2 );}body.elementor-page-22720:not(.elementor-motion-effects-element-type-background), body.elementor-page-22720 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-4eec49f );}@media(max-width:1366px){.elementor-22720 .elementor-element.elementor-element-365bfa82{--padding-top:15%;--padding-bottom:15%;--padding-left:0%;--padding-right:0%;}.elementor-22720 .elementor-element.elementor-element-72f01aa .e-filter-item{font-size:var( --e-global-typography-6e87a78-font-size );line-height:var( --e-global-typography-6e87a78-line-height );letter-spacing:var( --e-global-typography-6e87a78-letter-spacing );}.elementor-22720 .elementor-element.elementor-element-a2096ad .elementor-pagination{font-size:var( --e-global-typography-6e87a78-font-size );line-height:var( --e-global-typography-6e87a78-line-height );letter-spacing:var( --e-global-typography-6e87a78-letter-spacing );}}@media(max-width:1200px){.elementor-22720 .elementor-element.elementor-element-365bfa82{--padding-top:150px;--padding-bottom:150px;--padding-left:0px;--padding-right:0px;}.elementor-22720 .elementor-element.elementor-element-a2096ad{--grid-columns:2;}}@media(max-width:1024px){.elementor-22720 .elementor-element.elementor-element-365bfa82{--padding-top:15%;--padding-bottom:15%;--padding-left:0%;--padding-right:0%;}.elementor-22720 .elementor-element.elementor-element-72f01aa .e-filter-item{font-size:var( --e-global-typography-6e87a78-font-size );line-height:var( --e-global-typography-6e87a78-line-height );letter-spacing:var( --e-global-typography-6e87a78-letter-spacing );}.elementor-22720 .elementor-element.elementor-element-a2096ad{--grid-columns:2;}.elementor-22720 .elementor-element.elementor-element-a2096ad .elementor-pagination{font-size:var( --e-global-typography-6e87a78-font-size );line-height:var( --e-global-typography-6e87a78-line-height );letter-spacing:var( --e-global-typography-6e87a78-letter-spacing );}}@media(max-width:767px){.elementor-22720 .elementor-element.elementor-element-365bfa82{--padding-top:30%;--padding-bottom:30%;--padding-left:0%;--padding-right:0%;}.elementor-22720 .elementor-element.elementor-element-72f01aa .e-filter-item{font-size:var( --e-global-typography-6e87a78-font-size );line-height:var( --e-global-typography-6e87a78-line-height );letter-spacing:var( --e-global-typography-6e87a78-letter-spacing );}.elementor-22720 .elementor-element.elementor-element-a2096ad{--grid-columns:1;}.elementor-22720 .elementor-element.elementor-element-a2096ad .elementor-pagination{font-size:var( --e-global-typography-6e87a78-font-size );line-height:var( --e-global-typography-6e87a78-line-height );letter-spacing:var( --e-global-typography-6e87a78-letter-spacing );}}/* Start custom CSS for container, class: .elementor-element-365bfa82 *//* =================================================================
CENTRE[4]ARTS — WORKSHOPS ARCHIVE (v3)
Native Elementor TAXONOMY FILTER + LOOP GRID, styled to match the
Workshops page above it and the Gallery Archives.
INSTALL:
1. Container holding the heading + Taxonomy Filter + Loop Grid →
Advanced ▸ CSS ID = c4-ws-archive (ID field, no "#")
2. Paste this into that container's Advanced ▸ Custom CSS
3. Set that container's background to #F5F5F5 in Style ▸ Background
and clear any Background Overlay.
CARD TEMPLATE ORDER (loop template):
Image → Post Title → Text Editor (date) → Post Info (time · skill)
→ Text Editor (instructor) → Post Excerpt → Divider → Button
HOVER: the poster image blurs + zooms and a "VIEW WORKSHOP" pill
fades in over the image ONLY — card text stays sharp.
================================================================= */
#c4-ws-archive{
--c4-purple:#4E42B5;
--c4-ink:#111111;
--c4-surface:#F5F5F5;
--c4-line:#d8d6cf;
--c4-muted:#5b584f;
--c4-body:#3a382f;
background-color:#F5F5F5 !important;
scroll-margin-top:90px;
}
#c4-ws-archive > .elementor-background-overlay,
#c4-ws-archive .elementor-background-overlay{
background:transparent !important;opacity:0 !important;
}
/* ---------- section heading ---------- */
#c4-ws-archive > .elementor-widget-heading .elementor-heading-title,
#c4-ws-archive > .e-con-inner > .elementor-widget-heading .elementor-heading-title{
font-family:'League Spartan',sans-serif !important;
font-weight:500;text-transform:uppercase;letter-spacing:.005em;
font-size:clamp(28px,4.2vw,52px) !important;line-height:.98;
color:var(--c4-ink) !important;
}
#c4-ws-archive > .elementor-widget-heading,
#c4-ws-archive > .e-con-inner > .elementor-widget-heading{
padding-bottom:18px;border-bottom:1.5px solid var(--c4-ink);
margin-bottom:clamp(24px,3vw,38px) !important;
}
/* =================================================================
1) TAXONOMY FILTER — the year buttons
================================================================= */
#c4-ws-archive .e-filter{
display:flex;flex-wrap:wrap;gap:12px;border:0;padding:0;
margin-bottom:clamp(30px,4vw,48px);
}
#c4-ws-archive .e-filter-item{
position:relative;overflow:hidden;z-index:0;
font-family:'League Spartan',sans-serif;
font-weight:500;text-transform:uppercase;
font-size:14px;letter-spacing:.12em;line-height:1;
color:var(--c4-ink) !important;background:transparent !important;
border:1.5px solid var(--c4-ink) !important;border-radius:0 !important;
padding:13px 20px;cursor:pointer;transition:color .4s ease;
}
#c4-ws-archive .e-filter-item::before{
content:"";position:absolute;inset:0;z-index:-1;background:var(--c4-ink);
transform:scaleX(0);transform-origin:left center;
transition:transform .5s cubic-bezier(.5,0,.2,1);
}
#c4-ws-archive .e-filter-item > *{position:relative}
#c4-ws-archive .e-filter-item:hover,
#c4-ws-archive .e-filter-item:hover *{color:#fff !important}
#c4-ws-archive .e-filter-item:hover::before{transform:scaleX(1)}
#c4-ws-archive .e-filter-item[aria-pressed="true"],
#c4-ws-archive .e-filter-item[aria-pressed="true"] *,
#c4-ws-archive .e-filter-item.e-active,
#c4-ws-archive .e-filter-item.e-active *,
#c4-ws-archive .e-filter-item.e-filter-item--active,
#c4-ws-archive .e-filter-item.e-filter-item--active *{color:#fff !important}
#c4-ws-archive .e-filter-item[aria-pressed="true"]::before,
#c4-ws-archive .e-filter-item.e-active::before,
#c4-ws-archive .e-filter-item.e-filter-item--active::before{transform:scaleX(1)}
#c4-ws-archive .e-filter-item:focus-visible{outline:2px solid var(--c4-purple);outline-offset:3px}
/* =================================================================
2) LOOP GRID — vertical hairlines between columns
================================================================= */
#c4-ws-archive .elementor-loop-container{
gap:0 !important;background:transparent !important;
border-left:1px solid var(--c4-line);
}
#c4-ws-archive .e-loop-item{
position:relative;
padding:0 clamp(14px,1.6vw,22px) clamp(24px,2.4vw,34px);
border-right:1px solid var(--c4-line);
background:transparent !important;
}
/* =================================================================
3) POSTER IMAGE — image-only blur + VIEW WORKSHOP pill
Targets .elementor-widget-container (the div that actually wraps
the ![]()
), and uses :has(img) so it works for any image widget.
================================================================= */
#c4-ws-archive .e-loop-item .elementor-widget:has(img) > .elementor-widget-container,
#c4-ws-archive .e-loop-item .elementor-widget-image > .elementor-widget-container,
#c4-ws-archive .e-loop-item .elementor-widget-theme-post-featured-image > .elementor-widget-container{
position:relative !important;
overflow:hidden !important;
display:block;
}
#c4-ws-archive .e-loop-item .elementor-widget:has(img),
#c4-ws-archive .e-loop-item .elementor-widget-image,
#c4-ws-archive .e-loop-item .elementor-widget-theme-post-featured-image{
margin-bottom:18px !important;
}
#c4-ws-archive .e-loop-item img{
display:block;width:100% !important;height:100% !important;
object-fit:cover;aspect-ratio:4/5;
transition:transform .8s cubic-bezier(.2,.6,.2,1),filter .5s ease !important;
}
#c4-ws-archive .e-loop-item:hover img,
#c4-ws-archive .e-loop-item:focus-within img{
transform:scale(1.05);
filter:blur(7px) brightness(.72);
}
/* VIEW WORKSHOP pill */
#c4-ws-archive .e-loop-item .elementor-widget:has(img) > .elementor-widget-container::after,
#c4-ws-archive .e-loop-item .elementor-widget-image > .elementor-widget-container::after,
#c4-ws-archive .e-loop-item .elementor-widget-theme-post-featured-image > .elementor-widget-container::after{
content:"VIEW WORKSHOP";
position:absolute;left:50%;top:50%;
transform:translate(-50%,-44%) scale(.95);
z-index:5;pointer-events:none;white-space:nowrap;
font-family:'League Spartan',sans-serif;font-weight:500;
text-transform:uppercase;font-size:14px;letter-spacing:.14em;color:#111;
background:#fff;padding:14px 26px;
opacity:0;
transition:opacity .4s ease,transform .45s cubic-bezier(.2,.6,.2,1);
}
#c4-ws-archive .e-loop-item:hover .elementor-widget:has(img) > .elementor-widget-container::after,
#c4-ws-archive .e-loop-item:hover .elementor-widget-image > .elementor-widget-container::after,
#c4-ws-archive .e-loop-item:hover .elementor-widget-theme-post-featured-image > .elementor-widget-container::after,
#c4-ws-archive .e-loop-item:focus-within .elementor-widget:has(img) > .elementor-widget-container::after{
opacity:1;
transform:translate(-50%,-50%) scale(1);
}
/* keep template backgrounds from leaking onto widgets */
#c4-ws-archive .e-loop-item .elementor-widget-heading,
#c4-ws-archive .e-loop-item .elementor-widget-button,
#c4-ws-archive .e-loop-item .elementor-widget-post-info,
#c4-ws-archive .e-loop-item .elementor-widget-text-editor,
#c4-ws-archive .e-loop-item .elementor-widget-theme-post-excerpt,
#c4-ws-archive .e-loop-item .elementor-widget-theme-post-title,
#c4-ws-archive .e-loop-item .elementor-heading-title{
background:transparent !important;background-color:transparent !important;
}
/* ---------- POST TITLE ---------- */
#c4-ws-archive .e-loop-item .elementor-widget-theme-post-title .elementor-heading-title,
#c4-ws-archive .e-loop-item .elementor-widget-theme-post-title .elementor-heading-title a,
#c4-ws-archive .e-loop-item .elementor-heading-title{
font-family:'League Spartan',sans-serif !important;font-weight:500;
text-transform:uppercase;letter-spacing:.006em;line-height:1.06;
font-size:clamp(19px,1.5vw,24px) !important;color:var(--c4-ink) !important;
text-decoration:none !important;transition:color .3s ease;
}
#c4-ws-archive .e-loop-item:hover .elementor-widget-theme-post-title .elementor-heading-title,
#c4-ws-archive .e-loop-item:hover .elementor-widget-theme-post-title .elementor-heading-title a{
color:var(--c4-purple) !important;
}
#c4-ws-archive .e-loop-item .elementor-widget-theme-post-title{
margin-bottom:10px !important;
}
/* ---------- TEXT EDITORS: 1st = date, 2nd = instructor ---------- */
#c4-ws-archive .e-loop-item .elementor-widget-text-editor,
#c4-ws-archive .e-loop-item .elementor-widget-text-editor *{
font-family:'Montserrat',sans-serif !important;font-weight:600;
font-size:14px !important;letter-spacing:.03em;line-height:1.5;
color:var(--c4-ink) !important;margin:0 !important;
}
#c4-ws-archive .e-loop-item .elementor-widget-text-editor{
margin-bottom:8px !important;
}
/* second text editor = "with instructor …" → purple small-caps */
#c4-ws-archive .e-loop-item .elementor-widget-text-editor ~ .elementor-widget-text-editor,
#c4-ws-archive .e-loop-item .elementor-widget-text-editor ~ .elementor-widget-text-editor *,
#c4-ws-archive .e-loop-item .c4-wcard__inst,
#c4-ws-archive .e-loop-item .c4-wcard__inst *{
font-family:'League Spartan',sans-serif !important;font-weight:500;
text-transform:uppercase;font-size:13px !important;letter-spacing:.12em;
color:var(--c4-purple) !important;
}
#c4-ws-archive .e-loop-item .elementor-widget-text-editor ~ .elementor-widget-text-editor{
margin-bottom:14px !important;
}
/* ---------- POST INFO (time · skill level) ---------- */
#c4-ws-archive .e-loop-item .elementor-widget-post-info .elementor-icon-list-items{
display:flex !important;flex-wrap:wrap;align-items:baseline;
gap:4px 16px;margin:0 !important;padding:0 !important;
}
#c4-ws-archive .e-loop-item .elementor-widget-post-info .elementor-icon-list-item{
margin:0 !important;padding:0 !important;border:0 !important;
}
#c4-ws-archive .e-loop-item .elementor-widget-post-info .elementor-icon-list-icon{display:none !important}
#c4-ws-archive .e-loop-item .elementor-widget-post-info,
#c4-ws-archive .e-loop-item .elementor-widget-post-info *{
font-family:'Montserrat',sans-serif !important;font-weight:500;
font-size:13px !important;letter-spacing:.04em;line-height:1.5;
color:var(--c4-muted) !important;
}
#c4-ws-archive .e-loop-item .elementor-widget-post-info{margin-bottom:12px !important}
/* ---------- POST EXCERPT ---------- */
#c4-ws-archive .e-loop-item .elementor-widget-theme-post-excerpt,
#c4-ws-archive .e-loop-item .elementor-widget-theme-post-excerpt *{
font-family:'Montserrat',sans-serif !important;font-weight:400;
font-size:14px !important;line-height:1.6;letter-spacing:0;
color:var(--c4-body) !important;margin:0 !important;
}
#c4-ws-archive .e-loop-item .elementor-widget-theme-post-excerpt{
margin-bottom:16px !important;
}
/* ---------- DIVIDER ---------- */
#c4-ws-archive .e-loop-item .elementor-widget-divider{
--divider-color:var(--c4-line);
--divider-border-width:1px;
margin:0 0 16px !important;
}
#c4-ws-archive .e-loop-item .elementor-widget-divider .elementor-divider{width:100% !important}
#c4-ws-archive .e-loop-item .elementor-widget-divider .elementor-divider-separator{
border-top-color:var(--c4-line) !important;border-top-width:1px !important;
}
/* ---------- LEARN MORE BUTTON — square outline, wipe fill ---------- */
#c4-ws-archive .e-loop-item .elementor-widget-button .elementor-button{
position:relative;overflow:hidden;z-index:0;
display:inline-flex !important;align-items:center;justify-content:center;
background:transparent !important;background-color:transparent !important;
border:2px solid var(--c4-ink) !important;border-radius:0 !important;
box-shadow:none !important;padding:13px 24px !important;min-height:0 !important;
font-family:'League Spartan',sans-serif !important;font-weight:500;
text-transform:uppercase;font-size:14px !important;letter-spacing:.12em;
color:var(--c4-ink) !important;transition:color .4s ease;
}
#c4-ws-archive .e-loop-item .elementor-widget-button .elementor-button::before{
content:"";position:absolute;inset:0;z-index:-1;background:var(--c4-ink);
transform:scaleX(0);transform-origin:left center;
transition:transform .5s cubic-bezier(.5,0,.2,1);
}
#c4-ws-archive .e-loop-item .elementor-widget-button .elementor-button-text{
position:relative;color:inherit !important;font-family:inherit !important;
letter-spacing:inherit !important;
}
#c4-ws-archive .e-loop-item .elementor-widget-button .elementor-button:hover,
#c4-ws-archive .e-loop-item .elementor-widget-button .elementor-button:hover *{
color:#fff !important;
}
#c4-ws-archive .e-loop-item .elementor-widget-button .elementor-button:hover::before{
transform:scaleX(1);
}
/* =================================================================
PAGINATION
================================================================= */
#c4-ws-archive .elementor-pagination{
display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
gap:10px;border:0 !important;margin-top:clamp(40px,5vw,68px);
}
#c4-ws-archive .elementor-pagination .page-numbers{
position:relative;overflow:hidden;z-index:0;
display:inline-flex;align-items:center;justify-content:center;
min-width:48px;padding:13px 16px;text-decoration:none;
font-family:'League Spartan',sans-serif;font-weight:500;text-transform:uppercase;
font-size:14px;letter-spacing:.1em;line-height:1;
color:var(--c4-ink) !important;background:transparent !important;
border:1.5px solid var(--c4-ink) !important;border-radius:0 !important;
transition:color .4s ease;
}
#c4-ws-archive .elementor-pagination .page-numbers::before{
content:"";position:absolute;inset:0;z-index:-1;background:var(--c4-ink);
transform:scaleX(0);transform-origin:left center;
transition:transform .5s cubic-bezier(.5,0,.2,1);
}
#c4-ws-archive .elementor-pagination a.page-numbers:hover{color:#fff !important}
#c4-ws-archive .elementor-pagination a.page-numbers:hover::before{transform:scaleX(1)}
#c4-ws-archive .elementor-pagination .page-numbers.current{color:#fff !important}
#c4-ws-archive .elementor-pagination .page-numbers.current::before{transform:scaleX(1)}
#c4-ws-archive .elementor-pagination .page-numbers.prev,
#c4-ws-archive .elementor-pagination .page-numbers.next{padding:13px 22px;letter-spacing:.12em}
#c4-ws-archive .elementor-pagination .page-numbers.dots{
border:0 !important;background:transparent !important;min-width:auto;
padding:13px 4px;color:var(--c4-muted) !important;
}
#c4-ws-archive .elementor-pagination .page-numbers.dots::before{display:none}
#c4-ws-archive .elementor-pagination .page-numbers:focus-visible{
outline:2px solid var(--c4-purple);outline-offset:3px;
}
/* =================================================================
RESPONSIVE + MOTION
================================================================= */
@media (max-width:600px){
#c4-ws-archive .e-loop-item{padding:0 clamp(12px,4vw,18px) 26px}
#c4-ws-archive .e-filter-item{padding:11px 16px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
#c4-ws-archive *{transition:none !important}
#c4-ws-archive .e-loop-item:hover img{filter:none;transform:none}
#c4-ws-archive .e-loop-item .elementor-widget:has(img) > .elementor-widget-container::after,
#c4-ws-archive .e-loop-item .elementor-widget-image > .elementor-widget-container::after,
#c4-ws-archive .e-loop-item .elementor-widget-theme-post-featured-image > .elementor-widget-container::after{
display:none;
}
}
/* =================================================================
4) HOVER — background-image container blur + VIEW WORKSHOP pill
The poster is a CONTAINER with the featured image set as its
background (not an ![]()
), so this uses backdrop-filter to blur
whatever renders behind the overlay layer.
⚠ .c4w-img = the class on that image container. Rename if different.
================================================================= */
#c4-ws-archive .c4w-img{
position:relative;
overflow:hidden;
}
/* blur layer over the background image */
#c4-ws-archive .c4w-img::before{
content:"";
position:absolute;
inset:0;
z-index:2;
pointer-events:none;
opacity:0;
backdrop-filter:blur(7px) brightness(.72);
-webkit-backdrop-filter:blur(7px) brightness(.72);
transition:opacity .5s ease;
}
#c4-ws-archive .e-loop-item:hover .c4w-img::before,
#c4-ws-archive .e-loop-item:focus-within .c4w-img::before{
opacity:1;
}
/* VIEW WORKSHOP pill */
#c4-ws-archive .c4w-img::after{
content:"VIEW WORKSHOP";
position:absolute;
left:50%;top:50%;
transform:translate(-50%,-44%) scale(.95);
z-index:3;
pointer-events:none;
white-space:nowrap;
font-family:'League Spartan',sans-serif;
font-weight:500;
text-transform:uppercase;
font-size:14px;
letter-spacing:.14em;
line-height:1;
color:#111;
background:#fff;
padding:14px 26px;
opacity:0;
transition:opacity .4s ease,transform .45s cubic-bezier(.2,.6,.2,1);
}
#c4-ws-archive .e-loop-item:hover .c4w-img::after,
#c4-ws-archive .e-loop-item:focus-within .c4w-img::after{
opacity:1;
transform:translate(-50%,-50%) scale(1);
}
@media (prefers-reduced-motion:reduce){
#c4-ws-archive .c4w-img::before{display:none}
#c4-ws-archive .c4w-img::after{transition:none}
}/* End custom CSS */