.
The Elementor stand-in is a link container holding an Image widget and a
.culture-body container. The picture keeps the theme's cover fit and its
hover zoom; the shade becomes a pseudo-element, because a real element would
be caught by the theme's `.culture-card > div` rule and pushed into the
text's position.
Paint order: image (0), shade (1), text (2). */
.km-elementor-main .culture-card>.elementor-widget-image{position:absolute;inset:0;z-index:0;margin:0}
.km-elementor-main .culture-card>.elementor-widget-image figure,
.km-elementor-main .culture-card>.elementor-widget-image .elementor-image{height:100%;margin:0;line-height:0}
.km-elementor-main .culture-card>.elementor-widget-image img{width:100%;height:100%;object-fit:cover;transition:.5s}
.km-elementor-main .culture-card:hover>.elementor-widget-image img{transform:scale(1.045)}
.km-elementor-main .e-con.culture-card:after{
content:'';position:absolute;inset:0;z-index:1;
background:linear-gradient(0deg,rgba(0,0,0,.92),rgba(0,0,0,.05) 70%);
}
.km-elementor-main .culture-card>.culture-body{z-index:2}
/* ---- Cards whose theme rule targets `> div` ----
.pillar-card > div is the copy block: flex:1 and 24px of padding. An image
widget is also a direct child div, so it would be padded and stretched too —
which is what put a white margin round the pillar pictures. */
.km-elementor-main .pillar-card>.elementor-widget-image,
.km-elementor-main .ct-card>.elementor-widget-image{flex:0 0 auto;padding:0}
/* ---- The About collage ----
The theme stacks two ![]()
s: a poster, and a square inset pinned to the
bottom-left. Elementor wraps each in a widget, so `img + img` never matches
and both pictures fell into a plain column. These rules put them back. */
.km-elementor-main .e-con.ab-collage{flex-direction:row;justify-content:flex-end;position:relative}
.km-elementor-main .ab-collage .elementor-widget-image figure,
.km-elementor-main .ab-collage .elementor-widget-image .elementor-image{margin:0;line-height:0}
.km-elementor-main .ab-collage>.ab-collage__poster img{
width:100%;max-width:520px;height:auto;aspect-ratio:4/3;
object-fit:cover;object-position:50% 20%;border-radius:4px;
box-shadow:0 30px 60px rgba(0,71,160,.2);
}
.km-elementor-main .ab-collage>.elementor-widget-image+.elementor-widget-image{position:absolute;left:0;bottom:0;width:46%;z-index:1}
.km-elementor-main .ab-collage>.elementor-widget-image+.elementor-widget-image img{
width:100%;aspect-ratio:1;object-fit:cover;
border:8px solid #fff;box-shadow:0 20px 40px rgba(4,16,35,.2);
}
/* ---- Buttons on light sections ----
The About and Events heroes sit on a pale background, where the theme
re-colours .button.ghost. Without this the ghost button stayed white on
white and read as missing. */
.km-elementor-main .ab-hero .btn-ghost .elementor-button,
.km-elementor-main .ev-hero .btn-ghost .elementor-button{border-color:#9fb6d6;color:var(--blue)}
.km-elementor-main .ab-hero .btn-ghost .elementor-button:hover,
.km-elementor-main .ev-hero .btn-ghost .elementor-button:hover{background:var(--blue);border-color:var(--blue);color:#fff}
/* ---- The join band ----
`.community-inner > div > p` expects the paragraph to be a grandchild of the
band; behind an Elementor widget wrapper it is one level deeper. */
.km-elementor-main .community-inner .community-copy p{color:#e0e5ec;max-width:520px}
/* ---- Images elsewhere ---- */
.km-elementor-main .elementor-widget-image figure,
.km-elementor-main .elementor-widget-image .elementor-image{margin:0}
@media(max-width:980px){
.km-elementor-main .e-con.ab-collage{justify-content:flex-start;padding-left:120px}
.km-elementor-main .ab-collage>.ab-collage__poster img{max-width:560px}
}
@media(max-width:600px){
.km-elementor-main .e-con.ab-collage{padding-left:60px}
.km-elementor-main .ab-collage>.ab-collage__poster img{width:100%}
}
@media(max-width:760px){
.km-elementor-main .e-con.shell{--width:calc(100% - 32px)}
.km-elementor-main .e-con.section-head{align-items:flex-start}
}
/* ---------- About page ----------
The home page's sections are theme widgets now (inc/widgets/) and need
nothing here. */
/* The About band's figures sit across the full width of its grid. */
.km-elementor-main .about-section .e-con.stats{grid-column:1/3}
.km-elementor-main .e-con.about-heading,
.km-elementor-main .e-con.about-copy{align-items:flex-start}
@media(max-width:760px){
.km-elementor-main .about-section .e-con.stats{grid-column:auto}
}
/* ---------- Margins Elementor zeroes ----------
A container arrives with `--margin-top:0px` and `margin-block-start:var(
--margin-top)`. That is the same property as the theme's `margin-top`, at the
same specificity, declared later — so every margin the theme puts on a
section is lost. Each one the conversion relies on is restored here, through
Elementor's own custom properties, with the theme's value. */
.km-elementor-main .e-con.section-head{--margin-bottom:38px}
.km-elementor-main .e-con.stats{--margin-top:20px}
.km-elementor-main .e-con.partners{--margin-top:64px}
.km-elementor-main .e-con.cm-stats{--margin-top:-70px}