.elementor-kit-4{--e-global-color-primary:#1D5FD2;--e-global-color-secondary:#16223C;--e-global-color-text:#333333;--e-global-color-accent:#9E1B1E;--e-global-color-ckblued:#1A4FB0;--e-global-color-cklive:#0757EE;--e-global-color-ckorng:#E87722;--e-global-color-cknavyd:#070D18;--e-global-color-cknavyc:#141D31;--e-global-color-ckgreen:#1B7A45;--e-global-color-ckteal:#0D5C50;--e-global-color-ckgold:#8A6400;--e-global-color-ckpurp:#57408F;--e-global-color-cklight:#EEF0F2;--e-global-color-ckink:#CFD6E4;--e-global-color-ckinkd:#93A0B8;--e-global-color-ckwhite:#FFFFFF;--e-global-color-ckhead:#1C1C1C;--e-global-color-ckbody:#5B6472;--e-global-color-ckmeta:#6D7686;--e-global-color-ckmutd:#8A94A4;--e-global-color-ckline:#E3E9F2;--e-global-color-ckfield:#D7E1F2;--e-global-color-cktrack:#DFE3EA;--e-global-color-ckband:#F7F9FC;--e-global-color-ckcream:#FFF8E6;--e-global-color-ckpale:#E8F0FE;--e-global-color-ckbluel:#5B9BFF;--e-global-color-cknavym:#14325E;--e-global-color-ckovl:#0A1120;--e-global-color-ckblack:#000000;--e-global-color-ckinkl:#E6ECF7;--e-global-color-ckinkb:#DCE4F2;--e-global-color-ckquote:#2B3243;--e-global-color-ckphbg:#DCDCDC;--e-global-color-ckphfg:#9A9A9A;--e-global-color-ckchrt2:#2F9E63;--e-global-color-ckchrt3:#97A6BC;--e-global-typography-primary-font-family:"Playfair Display";--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1.15em;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-line-height:1.25em;--e-global-typography-text-font-family:"Open Sans";--e-global-typography-text-font-size:15px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.7em;--e-global-typography-accent-font-family:"Poppins";--e-global-typography-accent-font-weight:600;--e-global-typography-accent-letter-spacing:0.5px;--e-global-typography-ckscript-font-family:"Caveat";--e-global-typography-ckscript-font-size:32px;--e-global-typography-ckscript-font-weight:700;--e-global-typography-ckscript-line-height:1.1em;--e-global-typography-ckkicker-font-family:"Poppins";--e-global-typography-ckkicker-font-size:11px;--e-global-typography-ckkicker-font-weight:700;--e-global-typography-ckkicker-text-transform:uppercase;--e-global-typography-ckkicker-letter-spacing:2px;--e-global-typography-cknav-font-family:"Poppins";--e-global-typography-cknav-font-size:12px;--e-global-typography-cknav-font-weight:600;--e-global-typography-cknav-text-transform:uppercase;--e-global-typography-cknav-letter-spacing:1px;background-color:var( --e-global-color-ckwhite );}.elementor-kit-4 button,.elementor-kit-4 input[type="button"],.elementor-kit-4 input[type="submit"],.elementor-kit-4 .elementor-button{background-color:var( --e-global-color-primary );font-family:"Poppins", Sans-serif;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;color:var( --e-global-color-ckwhite );border-radius:8px 8px 8px 8px;padding:13px 24px 13px 24px;}.elementor-kit-4 e-page-transition{background-color:#FFBC7D;}.elementor-kit-4 a{color:var( --e-global-color-ckblued );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1320px;}.e-con{--container-max-width:1320px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* ========================================================================== Cayacoa Kinship — site CSS (LAYOUT ONLY — see the colour note below) Lives in Elementor ▸ hamburger ▸ Site Settings ▸ Custom CSS (an Elementor Pro feature). It used to be shipped by the `ck-elementor-kit` plugin; moving it here is what let that plugin be retired, and it means the client can edit it in the Elementor editor like everything else. Opt-in helper classes: add them in Elementor via Advanced ▸ CSS Classes. ── COLOUR POLICY (2026-08-19) ──────────────────────────────────────────── There is exactly ONE place colour is defined on this site: Elementor ▸ Site Settings ▸ Global Colors. This file no longer declares a palette. Where a colour is unavoidable here (a pseudo-element, an nth-child, a gradient, a rule that has to beat the kit's own link colour) it is written as `var(--e-global-color-)` — the variable Elementor itself publishes for each Global Colour on the `.elementor-kit-4` wrapper. So editing a Global Colour moves these rules too, and nothing in here can go stale against the palette. The only literal colour values left are translucent scrims / drop shadows (`rgba(...)`) and one build-time placeholder marker. Elementor's Global Colours cannot express alpha, and none of these are brand colours. They are each commented where they appear. Global Colour ids used below: primary CK Blue secondary CK Navy text Body Text ckblued CK Blue Dark ckwhite White ckhead Heading Ink ckbody Body Grey ckmeta Meta Grey ckmutd Muted Grey ckline Border Line ckfield Field Border cktrack Progress Track ckink Ink on Navy ckinkd Ink Dim ckinkl Ink Light ckovl Photo Overlay ckblack Black cknavyd Navy Deep cknavym Navy Mid ckbluel Light Blue on Navy ckphbg Placeholder Fill ckphfg Placeholder Label ckchrt2 Chart Green ckchrt3 Chart Grey ── ─────────────────────────────────────────────────────────────────────── NOTE for maintainers: Elementor substitutes the CSS keyword that means "this document's wrapper" (the one Elementor's per-element Custom CSS box uses) for the real wrapper class before writing this text out. Never use that keyword as a bare word here — plain class rules like the ones below are fine. ========================================================================== */ :root{ /* Non-colour tokens only. The colour palette that used to live here is gone: it duplicated Global Colors and the two could drift apart. */ --ck-radius:10px; --ck-sans:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --ck-body:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --ck-serif:"Playfair Display",Georgia,serif; --ck-script:"Caveat",cursive; } /* ---------- typography helpers ---------- */ .ck-kicker,.ck-kicker *{font-family:var(--ck-sans)!important;font-weight:700;font-size:11px;letter-spacing:2px; text-transform:uppercase;color:var(--e-global-color-primary)} /* .ck-script / .ck-storycard__name now also carry Caveat on the widget itself, so Elementor enqueues the Google font. These rules stay as the safety net. */ .ck-script,.ck-script *{font-family:var(--ck-script)!important;color:var(--e-global-color-primary); line-height:1.1;font-weight:700} /* two-tone headline: the blue phrase is a inside a Heading widget, and Elementor has no per-span colour control — hence CSS. */ .ck-accent{color:var(--e-global-color-primary)} .ck-hero-panel .ck-accent{color:var(--e-global-color-ckbluel)} /* ---------- hero ---------- The panel's translucent navy is set on the container itself (Style ▸ Background), because Global Colours cannot carry an alpha channel. */ .ck-hero-panel{backdrop-filter:blur(2px)} .ck-hero-panel h1,.ck-hero-panel h2,.ck-hero-panel p{color:var(--e-global-color-ckwhite)} /* Their Stories mini card: photo left, quote right */ .ck-storycard{border:1px solid var(--e-global-color-ckline);border-radius:8px;overflow:hidden; background:var(--e-global-color-ckwhite)} .ck-storycard .ck-storycard__name,.ck-storycard .ck-storycard__name *{font-family:var(--ck-script)!important; color:var(--e-global-color-primary);line-height:1;margin:0 0 4px} /* ---------- How You Can Help colour tiles ---------- The four tile COLOURS are no longer here. Each tile container carries a real Background ▸ Color bound to Card Green / Teal / Gold / Purple, so the client changes it by clicking the tile (or once, in Global Colors). */ .ck-tile{border-radius:8px;overflow:hidden} /* The tile heading links, and the kit's global link colour beats the Heading widget's own colour, which has no link-colour control. This is the one thing that cannot move onto the widget. */ .ck-tile a{color:var(--e-global-color-ckwhite)!important} /* ---------- header ---------- */ .ck-header{border-bottom:1px solid var(--e-global-color-ckline); position:sticky;top:0;z-index:100; box-shadow:0 1px 4px rgba(0,0,0,.06)} /* shadow, not a palette colour */ .ck-badge-box .elementor-icon-box-wrapper{display:flex;align-items:center;gap:8px; text-align:left} .ck-badge-box .elementor-icon-box-icon{margin:0!important;flex:0 0 auto} .ck-badge-box .elementor-icon-box-title{margin:0!important;white-space:nowrap} .ck-badge-box .elementor-icon-box-description{margin:0} @media (max-width:1200px){.ck-badge-box{display:none}} /* Header cluster: the nav widget otherwise claims a percentage of the row and squeezes the Donate button off-screen at tablet/mobile. Make both the nav and the button size to their own content. */ .ck-header .elementor-widget-nav-menu{width:auto!important;flex:0 1 auto!important; min-width:0} /* the Donate button must never be the thing that shrinks */ .ck-header .elementor-widget-button{width:auto!important;flex:0 0 auto!important} @media (max-width:1024px){ /* keep the hamburger next to Donate rather than floating mid-row */ .ck-header .elementor-menu-toggle{margin:0 0 0 auto} } /* Elementor Pro WordPress Menu widget, tightened to brand. Item / dropdown COLOURS are set on the widget (Style ▸ Main / Dropdown), so only the metrics are here. */ .ck-nav .elementor-nav-menu--main .elementor-item{font-family:var(--ck-sans);font-weight:600; font-size:12px;letter-spacing:1px;text-transform:uppercase} .ck-nav .elementor-nav-menu--dropdown .elementor-item, .ck-nav .elementor-nav-menu--dropdown .elementor-sub-item{text-transform:none;letter-spacing:.2px; font-size:13px} /* Pro has no "dropdown width" control; the reference panel is 230px wide. */ .ck-nav .elementor-nav-menu--dropdown{min-width:230px} .ck-nav .elementor-nav-menu .sub-arrow{margin-inline-start:4px} /* ---------- Who We Are: media carousel + film strip ---------- */ /* wide/short crop so the gallery column height matches the text column */ /* Elementor ships `.elementor-skin-carousel .elementor-main-swiper{height:230px}`. Overriding only the height is not enough: with a definite height an aspect-ratio box also derives a definite *width*, and as a stretch-aligned flex item it then stops filling the column. width + height:auto pins it. */ .ck-gal .elementor-main-swiper{width:100%;height:auto!important;aspect-ratio:7/3; border-radius:8px;overflow:hidden} .ck-gal .swiper-slide,.ck-gal .elementor-carousel-image{height:100%;border-radius:8px} /* Arrow glyph colour is the widget's own `arrows_color`; only the round pill behind it is here, and it is a translucent white scrim. */ .ck-gal .elementor-swiper-button,.ck-locgal .elementor-swiper-button{ background:rgba(255,255,255,.88);border-radius:50%;width:38px;height:38px; display:flex;align-items:center;justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.15)} .ck-gal .elementor-swiper-button:hover,.ck-locgal .elementor-swiper-button:hover{ background:var(--e-global-color-ckwhite)} .ck-gal .swiper-pagination-bullet{background:var(--e-global-color-ckwhite);opacity:.55} .ck-gal .swiper-pagination-bullet-active{opacity:1;background:var(--e-global-color-primary)} /* film strip: 6 individually linked Image widgets + a "See all photos" tile */ .ck-strip{display:flex;gap:12px;align-items:stretch;flex-wrap:nowrap;overflow-x:auto; scrollbar-width:thin} .ck-strip > .elementor-widget-image{flex:1 1 0;min-width:0} /* the image widget's /
are shrink-to-fit, so a square photo would collapse to its aspect width instead of filling the thumbnail slot */ .ck-strip .elementor-widget-container, .ck-strip .elementor-image, .ck-strip figure, .ck-strip a{display:block;width:100%} .ck-btn-full .elementor-button{width:100%;justify-content:center} .ck-strip img{width:100%!important;height:62px;object-fit:cover;border-radius:6px;display:block; cursor:pointer;transition:transform .15s} .ck-strip img:hover{transform:translateY(-2px)} .ck-strip__all .elementor-button,.ck-strip__all a{white-space:nowrap;font-family:var(--ck-sans);font-size:11px;font-weight:700;letter-spacing:1px; text-transform:uppercase;color:var(--e-global-color-primary)} /* ---------- Current Location: media carousel, Slideshow skin ---------- The thumbnail strip below the big slide is Elementor Pro's own `.elementor-thumbnails-swiper` (click-to-navigate is native), styled here to match the reference: small thumbs, blue border on the active one. The black bar itself is the widget's own Advanced ▸ Background (Global Colour Black). */ .ck-locgal{border-radius:8px;overflow:hidden} .ck-locgal .elementor-main-swiper:not(.elementor-thumbnails-swiper){width:100%; height:auto!important;aspect-ratio:4/3.1;border-radius:8px 8px 0 0;overflow:hidden} /* Swiper sizes the thumbs from its own container width, so the reference's small 62px thumbs come from narrowing the container — not from overriding slide widths, which would desynchronise Swiper's translate maths. */ .ck-locgal .elementor-thumbnails-swiper{width:196px;max-width:calc(100% - 20px); margin:8px 10px;height:auto!important} .ck-locgal .elementor-thumbnails-swiper .swiper-slide{cursor:pointer; border:2px solid transparent;border-radius:3px;overflow:hidden; transition:transform .15s,border-color .15s} .ck-locgal .elementor-thumbnails-swiper .swiper-slide:hover{transform:translateY(-2px)} .ck-locgal .elementor-thumbnails-swiper .swiper-slide-active{border-color:var(--e-global-color-primary)} .ck-locgal .elementor-thumbnails-swiper .elementor-carousel-image{aspect-ratio:4/3; background-size:cover;background-position:center} /* ---------- Life at Cayacoa video tiles ---------- */ .ck-videotile .elementor-wrapper{aspect-ratio:16/9;border-radius:6px;overflow:hidden; background:var(--e-global-color-ckovl)} .ck-videotile .elementor-custom-embed-image-overlay img{width:100%;height:100%;object-fit:cover} .ck-videotile .elementor-custom-embed-play i, .ck-videotile .elementor-custom-embed-play svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))} /* ---------- Current Needs progress bars ---------- Bar and track colours are the Progress widget's own `bar_color` / `bar_bg_color`; only the geometry and the repositioned % label are here. */ .ck-needs .elementor-widget-container{position:relative} .ck-needs .elementor-progress-wrapper{border-radius:99px;height:7px;overflow:visible} .ck-needs .elementor-progress-bar{border-radius:99px;height:7px; font-size:0;overflow:visible} .ck-needs .elementor-title{display:block;font-family:var(--ck-body)!important;font-size:13px; color:var(--e-global-color-text);margin-bottom:7px} .ck-needs .elementor-progress-wrapper,.ck-needs .elementor-progress-bar{position:static} .ck-needs .elementor-progress-percentage{position:absolute!important;top:0!important; right:0!important;left:auto!important;bottom:auto!important;height:auto!important; font-family:var(--ck-sans)!important;font-size:12px!important;font-weight:600; color:var(--e-global-color-text);line-height:1.45} /* ---------- Testimonials (Elementor Pro Testimonial Carousel) ---------- Bullet colours are the widget's own pagination controls. */ .ck-tmn .elementor-testimonial__image img{width:140px;height:140px;object-fit:cover; background:var(--e-global-color-ckpale)} .ck-tmn .elementor-testimonial__text{font-family:var(--ck-serif)!important;font-style:italic} .ck-tmn .elementor-testimonial__name{font-family:var(--ck-body)!important} .ck-tmn .swiper-pagination-bullet{opacity:1} @media (max-width:1024px){.ck-tmn .elementor-testimonial__image img{width:110px;height:110px}} @media (max-width:767px){.ck-tmn .elementor-testimonial__image img{width:120px;height:120px}} /* ---------- Blog row (Elementor Pro Posts widget, Classic skin) ---------- */ .ck-blogrow .elementor-post{border:0;background:transparent;padding:0;box-shadow:none} .ck-blogrow .elementor-post__thumbnail__link{flex:0 0 auto} .ck-blogrow .elementor-post__title{margin:0 0 2px} .ck-blogrow .elementor-post__meta-data{margin:0 0 4px} .ck-blogrow .elementor-post__read-more{font-family:var(--ck-sans)} /* ---------- footer ---------- The navy band and the darker bottom bar are set on their containers (Style ▸ Background). What is left here is the link/heading cascade, which has to beat the kit's global link colour. */ .ck-footer{color:var(--e-global-color-ckink)} .ck-footer h1,.ck-footer h2,.ck-footer h3,.ck-footer h4{color:var(--e-global-color-ckwhite)} .ck-footer a{color:var(--e-global-color-ckink)} .ck-footer a:hover{color:var(--e-global-color-ckwhite)} .ck-footer .ck-colhead,.ck-footer .ck-colhead *{font-family:var(--ck-sans)!important;font-size:11px;font-weight:700; letter-spacing:1.6px;text-transform:uppercase;color:var(--e-global-color-ckwhite)} /* Accreditation seals — 3 across x 2 rows, as on live. Every seal gets an identical white rounded tile and is letterboxed inside it with object-fit:contain, so a wide logo reads as the same size box as the square seals and nothing is stretched or cropped. Change the tile size here and all six follow. */ .ck-seals{display:grid!important;grid-template-columns:repeat(3,1fr);gap:8px;max-width:246px} .ck-seals>.elementor-widget{width:100%;max-width:100%} .ck-seals .elementor-widget-container,.ck-seals figure,.ck-seals a{display:block;width:100%} .ck-seals img{display:block;width:100%;height:70px;object-fit:contain; background:var(--e-global-color-ckwhite); border-radius:5px;padding:4px;box-sizing:border-box;transition:transform .15s ease} .ck-seals a:hover img{transform:scale(1.06)} /* WhatsApp glyph on the footer phone number (matches live's .ck-whatsapp-link) */ .ck-contact-phone{align-items:center} .ck-contact-phone .elementor-widget-icon-list{width:auto!important} .ck-whatsapp-link{width:auto!important;flex:0 0 auto} .ck-whatsapp-link .elementor-icon{padding:0;line-height:1} .ck-whatsapp-link svg,.ck-whatsapp-link i{width:18px;height:18px;font-size:18px} .ck-footer-bar{color:var(--e-global-color-ckinkd);font-size:11px} .ck-legal .elementor-icon-list-items{justify-content:flex-end} .ck-footlinks .elementor-icon-list-icon{display:none} .ck-footlinks .elementor-icon-list-text{padding-left:0!important} .ck-footer-bar a{color:var(--e-global-color-ckinkd)} /* Newsletter — Elementor Pro Form widget (replaced Contact Form 7). Colours and sizes are set on the widget itself; only the bits Elementor has no control for live here (::placeholder is a pseudo-element). */ .ck-newsletter-form .elementor-field-group{margin-bottom:0} .ck-newsletter-form input::placeholder{color:var(--e-global-color-ckinkd);opacity:1} .ck-newsletter-form .elementor-message{font-size:11px;line-height:1.5} .ck-newsletter-form .elementor-button{cursor:pointer} /* ---------- child / project grid cards ---------- `.ck-photo-ph` is a plain
inside a Text Editor widget (the stand-in for a photo the client has not supplied yet), so it has no widget controls. */ .ck-gridcard{border:1px solid var(--e-global-color-ckline);border-radius:8px;overflow:hidden; background:var(--e-global-color-ckwhite)} .ck-photo-ph{background:var(--e-global-color-ckphbg);aspect-ratio:4/3;display:flex;align-items:center; justify-content:center;font-family:var(--ck-sans);font-weight:600;font-size:22px; color:var(--e-global-color-ckphfg)} /* `.ck-avatar-ph` — the round head-shot stand-in on /testimonies/. Layout only: the grey, the size and the radius are container controls on the widget, this just keeps it square and centred inside a stretched card column. */ .ck-avatar-ph{aspect-ratio:1/1;flex:0 0 auto;align-self:center;overflow:hidden} .ck-banner-black h1,.ck-banner-black h2{color:var(--e-global-color-ckwhite)} /* ========================================================================== DETAIL POPUPS — Elementor Pro Popup Builder Each child / project is its own popup document (Templates ▸ Popups). The only thing Pro has no control for is popup-to-popup ‹ › navigation, so those two buttons are floated over the popup edges here, mirroring the previous modal. The popup document's own padding is 0 and `.ck-pop-root` carries it instead — that is what makes the negative offsets below land on the box edge. ========================================================================== */ .ck-pop-root{position:relative} .ck-pop-nav{position:absolute;top:50%;transform:translateY(-50%); left:-50px;right:-50px;width:auto;pointer-events:none;z-index:5;margin:0;padding:0} .ck-pop-nav .elementor-widget-button{pointer-events:auto} .ck-pop-nav .elementor-button{width:38px;height:38px;min-width:0;padding:0; display:flex;align-items:center;justify-content:center;line-height:1; box-shadow:none;border:0} /* Let the arrows sit outside the white box. `ck-pop` comes from each popup's Advanced ▸ CSS Classes, so this is scoped to these popups. !important because Elementor's own popup stylesheet sets `overflow:auto` at equal specificity and loads after this file. */ .ck-pop .dialog-message{overflow:visible!important} /* round close button, matching the arrows */ .ck-pop .dialog-close-button{width:38px;height:38px;border-radius:50%; align-items:center;justify-content:center;top:10px;inset-inline-end:10px} .ck-profile{align-items:flex-start} .ck-profile .ck-photo-ph{min-height:300px} @media (max-width:1040px){ /* no room to float outside — put the arrows back inside, bottom corners, and restore scrolling for tall stacked content */ .ck-pop .dialog-message{overflow:auto!important} .ck-pop-nav{position:static;transform:none;left:auto;right:auto;width:100%; pointer-events:auto;margin-top:18px} } /* ================= interior pages (build/interior.py) ================= Only the handful of things Elementor has no control for. Heroes, cards, bands, icon boxes, forms, galleries and the stat cells are all styled on the widgets themselves, so the client changes them in the editor, not here. */ /* Page hero — keep the lead line to a readable measure over the photo. */ .ck-pagehero-copy .elementor-widget-text-editor{max-width:600px} /* ⚠️ SPECIFICITY, read before adding a rule here. Elementor writes each widget's own styling into the PAGE's stylesheet (`uploads/elementor/css/post-.css`) as `.elementor- .elementor-element.elementor-element- ` — four classes plus an element, i.e. (0,4,1). This file is the KIT's stylesheet (`post-4.css`), and it is enqueued BEFORE the page's. So a rule here that merely ties on specificity LOSES on source order. Anything that overrides a value Elementor also sets on the widget (colour, fill, align-items, margin, …) needs `!important`. Rules for properties Elementor never writes (the rail border below, object-fit, conic-gradient) do not. */ /* Timeline (Icon List, `ck-tl`). Live draws a rail with a dot per year; the dot IS the list icon, so only the rail and the year's own line need CSS. */ .ck-tl .elementor-icon-list-items{border-left:2px solid var(--e-global-color-ckfield);padding-left:4px} .ck-tl .elementor-icon-list-item{align-items:flex-start!important} .ck-tl .elementor-icon-list-icon{margin-top:6px!important;margin-left:-11px; background:var(--e-global-color-ckwhite);border-radius:50%} .ck-tl .elementor-icon-list-text strong{display:block;color:var(--e-global-color-ckblued); font-family:var(--ck-sans);font-size:15px;font-weight:600;margin-bottom:2px} /* Checklist / legend share the Icon List shell; only the legend's per-row dot colours need CSS, because one Icon List paints every icon the same colour — and these four dots have to match the four donut slices below. */ .ck-checklist .elementor-icon-list-item,.ck-legend .elementor-icon-list-item{align-items:flex-start!important} .ck-checklist .elementor-icon-list-icon,.ck-legend .elementor-icon-list-icon{margin-top:4px!important} .ck-legend .elementor-icon-list-text strong{color:var(--e-global-color-ckhead);font-weight:700} .ck-legend .elementor-icon-list-item:nth-child(2) .elementor-icon-list-icon svg{fill:var(--e-global-color-ckchrt2)!important} .ck-legend .elementor-icon-list-item:nth-child(3) .elementor-icon-list-icon svg{fill:var(--e-global-color-ckchrt3)!important} .ck-legend .elementor-icon-list-item:nth-child(4) .elementor-icon-list-icon svg{fill:var(--e-global-color-cknavym)!important} /* Donut. Elementor has no pie/donut widget; this is the same conic-gradient live uses, held by a stock HTML widget. The four slice colours are Global Colours; the percentages live in that widget's inline style (--p1/--p2/--p3), and the widget carries a comment explaining which number is which. README §6a. */ .ck-pie{width:220px;max-width:100%;aspect-ratio:1;border-radius:50%;margin:0 auto; background:conic-gradient( var(--e-global-color-ckblued) 0 calc(var(--p1,50) * 1%), var(--e-global-color-ckchrt2) 0 calc((var(--p1,50) + var(--p2,25)) * 1%), var(--e-global-color-ckchrt3) 0 calc((var(--p1,50) + var(--p2,25) + var(--p3,15)) * 1%), var(--e-global-color-cknavym) 0)} /* Financial-integrity / donate seal tiles: same equal-box treatment as the footer. */ .ck-fi-seal img{width:100%!important;height:96px;object-fit:contain;background:var(--e-global-color-ckwhite)} /* Donate page's "Donate with Confidence" row. Same equal-box treatment as the footer's .ck-seals: a 6-up grid of identical tiles with each logo letterboxed (object-fit:contain), so the square BBB seal occupies exactly the same box as the wide ones and nothing is stretched or cropped. The flex row the builder emits is overridden to a grid, which is what makes the boxes equal — a flex row sizes each tile to its own image. Change the tile height here and all six follow. */ .ck-confseals{display:grid!important;grid-template-columns:repeat(6,1fr);gap:12px; max-width:660px;margin:0 auto} .ck-confseals>.elementor-widget{width:100%;max-width:100%} .ck-confseals .elementor-widget-container,.ck-confseals figure,.ck-confseals a{display:block;width:100%} .ck-confseal img{display:block;width:100%;height:70px;object-fit:contain; background:var(--e-global-color-ckwhite);border-radius:6px;padding:5px;box-sizing:border-box; border:1px solid var(--e-global-color-ckline);transition:transform .15s ease} .ck-confseals a:hover img{transform:scale(1.06)} /* ================= Single Post template (build/single.py) ================= The Post Content widget renders raw WordPress post HTML, so its child headings, lists, links, quotes and images have no Elementor controls of their own — these rules are the only styling they can get. The widget's own colour, family, size and line-height ARE Elementor controls (Style tab); only the children are here. Every colour reads a Global Colour. */ .ck-postbody p{margin:0 0 1.15em} .ck-postbody>*:first-child{margin-top:0} .ck-postbody>*:last-child{margin-bottom:0} .ck-postbody h2,.ck-postbody h3,.ck-postbody h4{color:var(--e-global-color-ckhead); line-height:1.25;margin:1.7em 0 .5em} .ck-postbody h2{font-family:var(--ck-serif);font-size:24px;font-weight:700} .ck-postbody h3{font-family:var(--ck-sans);font-size:19px;font-weight:600} .ck-postbody h4{font-family:var(--ck-sans);font-size:16px;font-weight:600} .ck-postbody ul,.ck-postbody ol{margin:0 0 1.15em;padding-left:1.35em} .ck-postbody li{margin-bottom:.4em} .ck-postbody a{color:var(--e-global-color-primary);text-decoration:underline} .ck-postbody blockquote{margin:1.6em 0;padding:2px 0 2px 18px;font-style:italic; border-left:3px solid var(--e-global-color-ckline);color:var(--e-global-color-ckquote)} .ck-postbody img{max-width:100%;height:auto;border-radius:10px} .ck-postbody figure{margin:1.5em 0} .ck-postbody figcaption{font-size:12.5px;color:var(--e-global-color-ckmeta);margin-top:6px} /* Short posts (the three field stories are one line until the ministry sends copy) would otherwise leave the article band looking clipped. */ .ck-postwrap{min-height:150px} /* The hero's date row sits under a left-aligned H1, so keep it left. */ .ck-postmeta .elementor-icon-list-items{justify-content:flex-start} /* "More Stories & News" is a 3-up row, but the current post is excluded from the query, so while only three demo posts exist it renders two cards and Elementor's `repeat(3,1fr)` grid leaves a hole on the right. Capping the track width and centring makes a short row read as deliberate; once the ministry publishes a fourth post the row fills and this changes nothing. Elementor writes grid-template-columns on the widget itself, so !important is required (see the specificity note above). ⚠️ DESKTOP ONLY, and it has to stay that way. `elib.boxed()` sets `flex-wrap: wrap` at tablet and below; on a *column* flex container that makes Chrome size the container from its children's max-content height, and an `auto-fit`/`minmax` grid child reports a much taller max-content height than it actually renders — 813px against 402px here, i.e. ~410px of empty band under the cards at 768/1024. Elementor's own tablet layout is 2 columns, which two cards fill exactly, so there is nothing to centre below 1025px anyway. */ @media (min-width:1025px){ .ck-related .elementor-grid{grid-template-columns:repeat(auto-fit,minmax(240px,300px))!important; justify-content:center} } /* Placeholder markers. Deliberately loud so nothing ships unnoticed. The amber is a BUILD-TIME marker, not part of the brand palette, so it is not a Global Colour — every `.ck-todo` widget is deleted before go-live. */ .ck-todo .elementor-widget-container{border-left:3px solid #E0A800} /* Pro Gallery filter bar — centre it, as live centres its filter pills. */ .ck-photogrid .elementor-gallery-title{cursor:pointer} .ck-photogrid .elementor-gallery-titles-container{justify-content:center!important; margin-bottom:22px;flex-wrap:wrap;gap:4px 6px} /* Google Maps widget */ .ck-map iframe{border:0;border-radius:12px;display:block} /* Pro Form (contact / prayer / email sign-up pages) */ .ck-form .elementor-field-group>label{margin-bottom:5px} .ck-form .elementor-field-textual{padding:11px 12px} /* ---------- responsive ---------- */ @media (max-width:767px){ .ck-hero-panel{text-align:center} .ck-hero-panel .elementor-widget-container{text-align:center} .ck-seals{max-width:246px} .ck-pie{width:190px} .ck-confseals{grid-template-columns:repeat(3,1fr)!important;max-width:none} } /* Active thumbnail in the Current Location slideshow. The `.swiper-slide-active` rule further up highlights Swiper's OWN active class, which tracks the thumbnail STRIP's scroll position rather than which photo is on screen. With three thumbnails the strip never scrolls, so that highlight is stuck on the first thumbnail forever — and alongside the picker it produced TWO highlighted thumbnails at once (measured 2026-09-02). Retire it, and hand the highlight to `.ck-thumb-on`, which the Custom Code picker sets from the photo actually showing. Same 2px border the design already uses, so nothing shifts. */ .ck-locgal .elementor-thumbnails-swiper .swiper-slide-active{border-color:transparent} .ck-locgal .elementor-thumbnails-swiper .swiper-slide{opacity:.62; transition:opacity .18s ease,transform .15s,border-color .15s} .ck-locgal .elementor-thumbnails-swiper .swiper-slide:hover{opacity:.85} .ck-locgal .elementor-thumbnails-swiper .swiper-slide.ck-thumb-on{opacity:1; border-color:var(--e-global-color-primary)}/* End custom CSS */