.elementor-22697 .elementor-element.elementor-element-c328332{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-22697 .elementor-element.elementor-element-917ec12{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-22697 .elementor-element.elementor-element-917ec12:not(.elementor-motion-effects-element-type-background), .elementor-22697 .elementor-element.elementor-element-917ec12 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-4eec49f );}.elementor-22697 .elementor-element.elementor-element-32dc247{width:100%;max-width:100%;text-align:center;}.elementor-22697 .elementor-element.elementor-element-32dc247 > .elementor-widget-container{margin:0px 0px 50px 0px;padding:0px 0px 0px 0px;}.elementor-22697 .elementor-element.elementor-element-32dc247 .elementor-heading-title{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );text-decoration:var( --e-global-typography-text-text-decoration );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );color:var( --e-global-color-116b926 );}.elementor-22697 .elementor-element.elementor-element-fb890de{--grid-columns:1;--grid-row-gap:50px;width:100%;max-width:100%;--grid-column-gap:50px;}.elementor-22697 .elementor-element.elementor-element-7b5913f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-22697 .elementor-element.elementor-element-22929a5{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-22697 .elementor-element.elementor-element-22929a5 .elementor-divider-separator{width:100%;}.elementor-22697 .elementor-element.elementor-element-22929a5 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-22697 .elementor-element.elementor-element-63fa1a6{--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:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:200px;--padding-bottom:200px;--padding-left:0px;--padding-right:0px;}.elementor-22697 .elementor-element.elementor-element-63fa1a6:not(.elementor-motion-effects-element-type-background), .elementor-22697 .elementor-element.elementor-element-63fa1a6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-4eec49f );}.elementor-22697 .elementor-element.elementor-element-63fa1a6::before, .elementor-22697 .elementor-element.elementor-element-63fa1a6 > .elementor-background-video-container::before, .elementor-22697 .elementor-element.elementor-element-63fa1a6 > .e-con-inner > .elementor-background-video-container::before, .elementor-22697 .elementor-element.elementor-element-63fa1a6 > .elementor-background-slideshow::before, .elementor-22697 .elementor-element.elementor-element-63fa1a6 > .e-con-inner > .elementor-background-slideshow::before, .elementor-22697 .elementor-element.elementor-element-63fa1a6 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-22697 .elementor-element.elementor-element-67c3aa0{width:100%;max-width:100%;text-align:center;}.elementor-22697 .elementor-element.elementor-element-67c3aa0 .elementor-heading-title{font-family:"League Spartan", Sans-serif;font-size:16px;font-weight:700;text-transform:none;text-decoration:none;line-height:1.5em;letter-spacing:0em;}.elementor-22697 .elementor-element.elementor-element-6fa3a41{width:100%;max-width:100%;text-align:center;}.elementor-22697 .elementor-element.elementor-element-6fa3a41 .elementor-heading-title{font-family:"League Spartan", Sans-serif;}.elementor-22697 .elementor-element.elementor-element-96b809f{width:100%;max-width:100%;text-align:center;font-family:"Montserrat", Sans-serif;font-size:20px;font-weight:400;}.elementor-22697 .elementor-element.elementor-element-96b809f > .elementor-widget-container{margin:0px 0px 25px 0px;}.elementor-22697 .elementor-element.elementor-element-ef80366{--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:#FFFFFF;--e-filter-active-text-color:var( --e-global-color-0ca1279 );}.elementor-22697 .elementor-element.elementor-element-ef80366 .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-22697 .elementor-element.elementor-element-ef80366 .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-22697 .elementor-element.elementor-element-ef80366 > .elementor-widget-container{margin:0px 0px 25px 0px;}.elementor-22697 .elementor-element.elementor-element-ef80366 .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-22697 .elementor-element.elementor-element-ef80366 .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-22697 .elementor-element.elementor-element-deb7228{--grid-columns:3;--grid-row-gap:50px;width:100%;max-width:100%;--grid-column-gap:50px;}.elementor-22697 .elementor-element.elementor-element-deb7228 > .elementor-widget-container{margin:0px 0px 50px 0px;}.elementor-22697 .elementor-element.elementor-element-deb7228 .elementor-loop-container{grid-auto-rows:1fr;}.elementor-22697 .elementor-element.elementor-element-deb7228 .e-loop-item > .elementor-section, .elementor-22697 .elementor-element.elementor-element-deb7228 .e-loop-item > .elementor-section > .elementor-container, .elementor-22697 .elementor-element.elementor-element-deb7228 .e-loop-item > .e-con, .elementor-22697 .elementor-element.elementor-element-deb7228 .e-loop-item .elementor-section-wrap > .e-con{height:100%;}.elementor-22697 .elementor-element.elementor-element-deb7228 .elementor-pagination{text-align:center;font-family:var( --e-global-typography-9a2e61c-font-family ), Sans-serif;font-size:var( --e-global-typography-9a2e61c-font-size );font-weight:var( --e-global-typography-9a2e61c-font-weight );text-transform:var( --e-global-typography-9a2e61c-text-transform );text-decoration:var( --e-global-typography-9a2e61c-text-decoration );line-height:var( --e-global-typography-9a2e61c-line-height );letter-spacing:var( --e-global-typography-9a2e61c-letter-spacing );margin-top:3em;}.elementor-22697 .elementor-element.elementor-element-deb7228 .elementor-pagination a.page-numbers:hover{color:var( --e-global-color-0ca1279 );}.elementor-22697 .elementor-element.elementor-element-deb7228 .elementor-pagination .page-numbers.current{color:var( --e-global-color-0ca1279 );}body:not(.rtl) .elementor-22697 .elementor-element.elementor-element-deb7228 .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 3em/2 );}body:not(.rtl) .elementor-22697 .elementor-element.elementor-element-deb7228 .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 3em/2 );}body.rtl .elementor-22697 .elementor-element.elementor-element-deb7228 .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 3em/2 );}body.rtl .elementor-22697 .elementor-element.elementor-element-deb7228 .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 3em/2 );}body.elementor-page-22697:not(.elementor-motion-effects-element-type-background), body.elementor-page-22697 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-4eec49f );}@media(max-width:1366px){.elementor-22697 .elementor-element.elementor-element-32dc247 .elementor-heading-title{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-22697 .elementor-element.elementor-element-ef80366 .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-22697 .elementor-element.elementor-element-deb7228{--grid-columns:2;}.elementor-22697 .elementor-element.elementor-element-deb7228 .elementor-pagination{font-size:var( --e-global-typography-9a2e61c-font-size );line-height:var( --e-global-typography-9a2e61c-line-height );letter-spacing:var( --e-global-typography-9a2e61c-letter-spacing );}}@media(max-width:1200px){.elementor-22697 .elementor-element.elementor-element-917ec12{--margin-top:100px;--margin-bottom:60px;--margin-left:0px;--margin-right:0px;}.elementor-22697 .elementor-element.elementor-element-63fa1a6{--padding-top:150px;--padding-bottom:150px;--padding-left:0px;--padding-right:0px;}.elementor-22697 .elementor-element.elementor-element-deb7228{--grid-columns:2;}}@media(max-width:1024px){.elementor-22697 .elementor-element.elementor-element-917ec12{--margin-top:75px;--margin-bottom:50px;--margin-left:0px;--margin-right:0px;}.elementor-22697 .elementor-element.elementor-element-32dc247 .elementor-heading-title{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-22697 .elementor-element.elementor-element-fb890de{--grid-columns:1;}.elementor-22697 .elementor-element.elementor-element-63fa1a6{--padding-top:100px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-22697 .elementor-element.elementor-element-67c3aa0 .elementor-heading-title{font-size:15.04px;}.elementor-22697 .elementor-element.elementor-element-ef80366 .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-22697 .elementor-element.elementor-element-deb7228{--grid-columns:2;}.elementor-22697 .elementor-element.elementor-element-deb7228 .elementor-pagination{font-size:var( --e-global-typography-9a2e61c-font-size );line-height:var( --e-global-typography-9a2e61c-line-height );letter-spacing:var( --e-global-typography-9a2e61c-letter-spacing );}}@media(max-width:767px){.elementor-22697 .elementor-element.elementor-element-32dc247 .elementor-heading-title{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-22697 .elementor-element.elementor-element-fb890de{--grid-columns:1;}.elementor-22697 .elementor-element.elementor-element-67c3aa0 .elementor-heading-title{font-size:14.08px;}.elementor-22697 .elementor-element.elementor-element-ef80366.elementor-element{--align-self:center;}.elementor-22697 .elementor-element.elementor-element-ef80366 .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-22697 .elementor-element.elementor-element-deb7228{--grid-columns:1;}.elementor-22697 .elementor-element.elementor-element-deb7228 .elementor-pagination{font-size:var( --e-global-typography-9a2e61c-font-size );line-height:var( --e-global-typography-9a2e61c-line-height );letter-spacing:var( --e-global-typography-9a2e61c-letter-spacing );margin-top:3em;}body:not(.rtl) .elementor-22697 .elementor-element.elementor-element-deb7228 .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 1em/2 );}body:not(.rtl) .elementor-22697 .elementor-element.elementor-element-deb7228 .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 1em/2 );}body.rtl .elementor-22697 .elementor-element.elementor-element-deb7228 .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 1em/2 );}body.rtl .elementor-22697 .elementor-element.elementor-element-deb7228 .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 1em/2 );}}/* Start custom CSS for container, class: .elementor-element-917ec12 *//* ================================================================= CENTRE[4]ARTS — CURRENTLY SHOWING (featured exhibition card) Image on top, info stacked below — same language as the Archive and Workshop cards. ── TEMPLATE (do this first) ───────────────────────────────────── In the loop template, remove the container's BACKGROUND image, then add a Featured Image widget at the TOP and order the widgets: Image → Post Title → (Divider, optional) → Post Info → (Button, optional) ── INSTALL ────────────────────────────────────────────────────── Container "Main Gallery Currently Showing" → Advanced ▸ CSS ID = c4-current Paste this into that container's Advanced ▸ Custom CSS. Fully scoped to #c4-current — does NOT touch the hero, archive, or page. ================================================================= */ #c4-current{ --purple:#4E42B5; --ink:#111111; --surface:#F5F5F5; --line:#d8d6cf; --muted:#6b6960; --body:#3a382f; background-color:#F5F5F5 !important; position:relative; padding-bottom:clamp(80px,10vw,160px) !important; /* space between content and the bottom line */ } #c4-current > .elementor-background-overlay, #c4-current .elementor-background-overlay{background:transparent !important;opacity:0 !important} /* ---------- heading "Currently Showing" (eyebrow) ---------- */ #c4-current .elementor-widget-heading .elementor-heading-title{ font-family:'League Spartan',sans-serif !important;font-weight:500;text-transform:uppercase; letter-spacing:.18em !important;font-size:clamp(32px,3.8vw,52px) !important; color:var(--purple) !important; } /* ---------- loop grid: single wide card ---------- */ #c4-current .elementor-loop-container{ gap:0 !important;background:transparent !important;grid-template-columns:1fr !important; } #c4-current .e-loop-item{ position:relative;background:transparent !important;padding:0 !important;border:0 !important; } /* strip any dark boxes still sitting behind the widgets */ #c4-current .e-loop-item .elementor-widget-post-title, #c4-current .e-loop-item .elementor-widget-theme-post-title, #c4-current .e-loop-item .elementor-widget-post-info, #c4-current .e-loop-item .elementor-widget-button, #c4-current .e-loop-item .elementor-widget-divider, #c4-current .e-loop-item .elementor-heading-title{ background:transparent !important;background-color:transparent !important; } /* ---------- featured image on top (wide banner) ---------- */ #c4-current .e-loop-item .elementor-widget-image, #c4-current .e-loop-item .elementor-widget-theme-post-featured-image{position:relative;overflow:hidden} #c4-current .e-loop-item img{ display:block;width:100% !important;height:100% !important;object-fit:cover; aspect-ratio:16/9; /* change to 3/2 or 2/1 to taste */ transition:filter .5s ease, transform .9s cubic-bezier(.2,.6,.2,1); } /* hover ONLY over the image: blur it and pop up a View button on top */ #c4-current .e-loop-item .elementor-widget-image:hover img, #c4-current .e-loop-item .elementor-widget-theme-post-featured-image:hover img{ filter:blur(7px) brightness(.7);transform:scale(1.05); } #c4-current .e-loop-item .elementor-widget-image::after, #c4-current .e-loop-item .elementor-widget-theme-post-featured-image::after{ content:"VIEW EXHIBITION"; position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.94); 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;color:#111111;background:#ffffff;padding:14px 28px; opacity:0;transition:opacity .4s ease,transform .45s cubic-bezier(.2,.6,.2,1); } #c4-current .e-loop-item .elementor-widget-image:hover::after, #c4-current .e-loop-item .elementor-widget-theme-post-featured-image:hover::after{ opacity:1;transform:translate(-50%,-50%) scale(1); } /* ---------- exhibition title ---------- */ #c4-current .e-loop-item .elementor-widget-post-title .elementor-heading-title, #c4-current .e-loop-item .elementor-widget-theme-post-title .elementor-heading-title, #c4-current .e-loop-item .elementor-heading-title{ font-family:'League Spartan',sans-serif !important;font-weight:500;text-transform:uppercase; letter-spacing:.008em;line-height:1;color:var(--ink) !important; font-size:clamp(38px,5.6vw,88px) !important;margin:24px 0 0 !important; } /* ---------- divider (optional, matches the line system) ---------- */ #c4-current .e-loop-item .elementor-widget-divider{ --divider-color:var(--line);--divider-border-width:1px;margin:16px 0 14px !important; } #c4-current .e-loop-item .elementor-widget-divider .elementor-divider{width:100% !important} #c4-current .e-loop-item .elementor-widget-divider .elementor-divider-separator{ border-top-color:var(--line) !important;border-top-width:1px !important; } /* ---------- post info: artist + start / end dates → inline meta ---------- */ #c4-current .e-loop-item .elementor-widget-post-info{margin-top:14px} #c4-current .e-loop-item .elementor-widget-post-info .elementor-icon-list-items{ display:flex !important;flex-wrap:wrap;gap:8px 22px;margin:0 !important;padding:0 !important; } #c4-current .e-loop-item .elementor-widget-post-info .elementor-icon-list-item{margin:0 !important} #c4-current .e-loop-item .elementor-widget-post-info .elementor-icon-list-icon{display:none !important} #c4-current .e-loop-item .elementor-widget-post-info, #c4-current .e-loop-item .elementor-widget-post-info *{ font-family:'League Spartan',sans-serif !important;font-weight:500;text-transform:uppercase; letter-spacing:.12em;font-size:clamp(14px,1.3vw,18px) !important; color:var(--muted) !important;line-height:1.4; } /* ---------- optional "View Exhibition" button (borderless, like Workshops) ---------- */ #c4-current .e-loop-item .elementor-widget-button .elementor-button{ display:inline-flex !important;align-items:center;gap:8px; background:transparent !important;border:0 !important;border-radius:0 !important; box-shadow:none !important;padding:0 !important;min-height:0 !important;margin-top:18px; font-family:'League Spartan',sans-serif !important;font-weight:500;text-transform:uppercase; font-size:16px !important;letter-spacing:.12em;color:var(--purple) !important;transition:color .3s ease; } #c4-current .e-loop-item .elementor-widget-button .elementor-button:hover{color:#3d3393 !important} #c4-current .e-loop-item .elementor-widget-button .elementor-button-text::after{ content:"";display:inline-block;width:14px;height:14px;margin-left:8px;vertical-align:middle; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 9 9 3M4.4 3H9V7.6' stroke='%234E42B5' stroke-width='1.4' stroke-linecap='square'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform .35s cubic-bezier(.2,.6,.2,1); } #c4-current .e-loop-item .elementor-widget-button .elementor-button:hover .elementor-button-text::after{ transform:translate(3px,-3px); } #c4-current a:focus-visible{outline:2px solid var(--purple);outline-offset:4px} /* ================================================================= BOTTOM DIVIDER — full-width black line that draws in ON SCROLL. The `.c4cur-in` class is added by the snippet (see message) when the section scrolls into view. ================================================================= */ #c4-current::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#111111; transform:scaleX(0);transform-origin:left center;pointer-events:none; transition:transform 1s cubic-bezier(.5,0,.2,1); } #c4-current.c4cur-in::after{ transform:scaleX(1); } @media (prefers-reduced-motion:reduce){ #c4-current::after{transition:none;transform:scaleX(1)} }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-63fa1a6 *//* ================================================================= CENTRE[4]ARTS — GALLERY ARCHIVES (v2 — fixes dark-theme override) Restyles the native Elementor TAXONOMY FILTER + LOOP GRID to match the Workshops section. This page was built on a DARK background, so this version FORCES the light surface + text colours. INSTALL: 1. Container that holds the headings + filter + loop grid → Advanced ▸ CSS ID = c4-archive 2. Paste this into that container's Advanced ▸ Custom CSS (or Site Settings ▸ Custom CSS). 3. BEST RESULT: also set that container's background to #F5F5F5 in Style ▸ Background, and clear any Background Overlay. The CSS below tries to force it, but the Elementor setting is the clean fix. ================================================================= */ #c4-archive{ --c4-purple:#4E42B5; --c4-ink:#111111; --c4-surface:#F5F5F5; --c4-line:#d8d6cf; --c4-muted:#9b988f; --c4-body:#3a382f; background-color:#F5F5F5 !important; /* force light surface */ } /* kill any dark Background Overlay sitting on top of the container */ #c4-archive > .elementor-background-overlay, #c4-archive .elementor-background-overlay{ background:transparent !important;opacity:0 !important; } /* ---------- headings + intro (force dark text on the light surface) ---------- */ #c4-archive .elementor-heading-title{ font-family:'League Spartan',sans-serif !important; font-weight:500;text-transform:uppercase;letter-spacing:.005em; color:var(--c4-ink) !important; } #c4-archive .elementor-widget-text-editor, #c4-archive .elementor-widget-text-editor *{ font-family:'Montserrat',sans-serif;color:var(--c4-body) !important; letter-spacing:.01em; } /* ================================================================= 1) TAXONOMY FILTER — the year buttons ================================================================= */ #c4-archive .e-filter{ display:flex;flex-wrap:wrap;gap:12px;border:0;padding:0;justify-content:center; } #c4-archive .e-filter-item{ position:relative;overflow:hidden;z-index:0; /* stacking context for the fill */ 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; } /* black fill sits BEHIND the label (z-index:-1) so the text shows and turns white */ #c4-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-archive .e-filter-item > *{position:relative} #c4-archive .e-filter-item:hover, #c4-archive .e-filter-item:hover *{color:#fff !important} #c4-archive .e-filter-item:hover::before{transform:scaleX(1)} /* ACTIVE year = filled black, white text */ #c4-archive .e-filter-item[aria-pressed="true"], #c4-archive .e-filter-item[aria-pressed="true"] *, #c4-archive .e-filter-item.e-active, #c4-archive .e-filter-item.e-active *, #c4-archive .e-filter-item.e-filter-item--active, #c4-archive .e-filter-item.e-filter-item--active *{color:#fff !important} #c4-archive .e-filter-item[aria-pressed="true"]::before, #c4-archive .e-filter-item.e-active::before, #c4-archive .e-filter-item.e-filter-item--active::before{transform:scaleX(1)} #c4-archive .e-filter-item:focus-visible{outline:2px solid var(--c4-purple);outline-offset:3px} /* ================================================================= 2) LOOP GRID — the exhibition cards ================================================================= */ /* VERTICAL LINES ONLY — outer left/right frame + dividers between columns. Container draws the LEFT edge; each card draws its RIGHT edge. No top or bottom borders, so there are no horizontal row lines. Works at any column count. */ #c4-archive .elementor-loop-container{ gap:0 !important;background:transparent !important; border-left:1px solid var(--c4-line); } #c4-archive .e-loop-item{ position:relative; padding:0 clamp(14px,1.6vw,22px); border-right:1px solid var(--c4-line); background:transparent !important; } /* blur the WHOLE card content on hover (the VIEW button + divider stay sharp) */ #c4-archive .e-loop-item > *{transition:filter .5s ease} #c4-archive .e-loop-item:hover > *{filter:blur(7px) brightness(.72)} /* poster image — tall 4:5 like Workshops */ #c4-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); } #c4-archive .e-loop-item:hover img{transform:scale(1.05)} /* VIEW button on hover (card is already a link) */ #c4-archive .e-loop-item::after{ content:"VIEW EXHIBITION"; position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) 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-archive .e-loop-item:hover::after{opacity:1;transform:translate(-50%,-50%) scale(1)} /* ===== CARD INTERIOR (Loop Item template) ============================ Template order: Image → Container( Post Info [Date · Author] → Divider → Post Title → Button ). Styled to match the workshop card. ===== */ /* image — keep the dark template backgrounds from leaking onto widgets */ #c4-archive .e-loop-item .elementor-widget-heading, #c4-archive .e-loop-item .elementor-widget-button, #c4-archive .e-loop-item .elementor-widget-post-info, #c4-archive .e-loop-item .elementor-widget-post-title, #c4-archive .e-loop-item .elementor-heading-title{ background:transparent !important;background-color:transparent !important; } /* ---- POST INFO (Date on the left, Author on the right) ---- */ #c4-archive .e-loop-item .elementor-widget-post-info .elementor-icon-list-items{ display:flex !important;flex-wrap:wrap;justify-content:space-between; align-items:baseline;width:100%;gap:6px 14px;margin:0 !important;padding:0 !important; } #c4-archive .e-loop-item .elementor-widget-post-info .elementor-icon-list-item{ margin:0 !important;padding:0 !important;border:0 !important; } /* hide the little calendar / author icons for the clean MATTE look */ #c4-archive .e-loop-item .elementor-widget-post-info .elementor-icon-list-icon{display:none !important} #c4-archive .e-loop-item .elementor-widget-post-info, #c4-archive .e-loop-item .elementor-widget-post-info *{ font-family:'League Spartan',sans-serif !important;font-weight:500; text-transform:uppercase;letter-spacing:.12em;font-size:13px !important; line-height:1.2;color:var(--c4-muted) !important; } /* ---- DIVIDER (above the title) — matches the grid lines ---- */ #c4-archive .e-loop-item .elementor-widget-divider{ --divider-color:var(--c4-line); --divider-border-width:1px; margin:14px 0 12px !important; } #c4-archive .e-loop-item .elementor-widget-divider .elementor-divider{width:100% !important} #c4-archive .e-loop-item .elementor-widget-divider .elementor-divider-separator{ border-top-color:var(--c4-line) !important;border-top-width:1px !important; } /* ---- POST TITLE ---- */ #c4-archive .e-loop-item .elementor-widget-post-title .elementor-heading-title, #c4-archive .e-loop-item .elementor-widget-theme-post-title .elementor-heading-title, #c4-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(20px,1.7vw,28px) !important;color:var(--c4-ink) !important; } /* ---- BUTTON — borderless "Learn More" text link + arrow (workshop card style) ---- */ #c4-archive .e-loop-item .elementor-widget-button .elementor-button{ display:inline-flex !important;align-items:center;gap:8px; background:transparent !important;border:0 !important;border-radius:0 !important; box-shadow:none !important;padding:0 !important;min-height:0 !important; margin-top:14px; font-family:'League Spartan',sans-serif !important;font-weight:500; text-transform:uppercase;font-size:14px !important;letter-spacing:.12em; color:var(--c4-purple) !important;transition:color .3s ease; } #c4-archive .e-loop-item .elementor-widget-button .elementor-button:hover{ background:transparent !important;color:#3d3393 !important; } /* arrow after the label (matches the workshop arrow) */ #c4-archive .e-loop-item .elementor-widget-button .elementor-button-text::after{ content:"";display:inline-block;width:12px;height:12px;margin-left:7px;vertical-align:middle; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 9 9 3M4.4 3H9V7.6' stroke='%234E42B5' stroke-width='1.4' stroke-linecap='square'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform .35s cubic-bezier(.2,.6,.2,1); } #c4-archive .e-loop-item .elementor-widget-button .elementor-button:hover .elementor-button-text::after{ transform:translate(3px,-3px); } /* ── ALTERNATIVE: want the Button as a SQUARE WIPE-FILL pill instead of a text link? Delete the .elementor-button block above and use this: #c4-archive .e-loop-item .elementor-widget-button .elementor-button{ position:relative;overflow:hidden;display:inline-flex;align-items:center; background:transparent !important;border:1.5px solid var(--c4-ink) !important; border-radius:0 !important;box-shadow:none !important;margin-top:14px; padding:12px 22px !important;color:var(--c4-ink) !important; font-family:'League Spartan',sans-serif !important;font-weight:500; text-transform:uppercase;font-size:12px !important;letter-spacing:.12em; transition:color .4s ease;z-index:0; } #c4-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-archive .e-loop-item .elementor-widget-button .elementor-button:hover{color:#fff !important} #c4-archive .e-loop-item .elementor-widget-button .elementor-button:hover::before{transform:scaleX(1)} ── */ /* ================================================================= PAGINATION — Previous / numbers / Next (matches the year buttons) ================================================================= */ #c4-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-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; } /* black fill sits behind the label so the text turns white on hover */ #c4-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-archive .elementor-pagination a.page-numbers:hover{color:#fff !important} #c4-archive .elementor-pagination a.page-numbers:hover::before{transform:scaleX(1)} /* current page = filled black */ #c4-archive .elementor-pagination .page-numbers.current{color:#fff !important} #c4-archive .elementor-pagination .page-numbers.current::before{transform:scaleX(1)} /* Previous / Next — a little wider */ #c4-archive .elementor-pagination .page-numbers.prev, #c4-archive .elementor-pagination .page-numbers.next{padding:13px 22px;letter-spacing:.12em} /* the … ellipsis — no box, just muted dots */ #c4-archive .elementor-pagination .page-numbers.dots{ border:0 !important;background:transparent !important;min-width:auto; padding:13px 4px;color:var(--c4-muted) !important; } #c4-archive .elementor-pagination .page-numbers.dots::before{display:none} #c4-archive .elementor-pagination .page-numbers:focus-visible{ outline:2px solid var(--c4-purple);outline-offset:3px; } /* ================================================================= /* the bordered grid above auto-adapts to any column count, so no per-breakpoint line rules are needed — just tighten padding on phones */ @media (max-width:600px){ #c4-archive .e-loop-item{padding:0 clamp(12px,4vw,18px)} } @media (prefers-reduced-motion:reduce){ #c4-archive *{transition:none !important} #c4-archive .e-loop-item:hover img{filter:none;transform:none} #c4-archive .e-loop-item::after{display:none} }/* End custom CSS */