inside that wrapper, and a
normally just
inherits — which is why changing typography in the panel usually "just
works".
It stopped working here because the design system, written for the
hand-built prototype, carries descendant rules like `.page-hero p` and
`.story__body p`. Those sit at 0,1,1 and pin the paragraph's size and
colour, so the panel could set the wrapper to 190px and the paragraph
would calmly stay at 22px. That is the bug the church kept hitting.
This rule restores inheritance for every Elementor text widget: the
paragraph takes whatever the widget's own settings say, so the panel is
once again the single place text is styled. Do not add a `p` rule below
that is more specific than this one. */
.elementor-widget-text-editor p{
font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit;
margin:0;
}
/* A church editor pasting several paragraphs into one widget still gets
spacing between them. */
.elementor-widget-text-editor p + p{margin-top:1em}
/* The breadcrumb's separators sit on one line with even gaps. Layout only —
nothing here touches type. */
.elementor-widget-text-editor.crumb p{display:flex; gap:10px; flex-wrap:wrap}
.elementor-widget-text-editor.pullquote{max-width:none}
/* Elementor containers are flex; our component classes assume grid in the
hand-built markup. Where both apply, the container's own layout wins. */
.e-con.story,
.e-con.split,
.e-con.section,
.e-con.section-head,
.e-con.measure,
.e-con.story__body,
.e-con.story__media{display:flex}
.e-con.measure{max-width:var(--measure)}
.e-con.section-head.center{margin-inline:auto; text-align:center; align-items:center}
/* Page hero, native version. The photograph is the container's background
rather than an inside the hero, so the old
`.page-hero p` rule blew the breadcrumb up to lead size — 22px white
instead of 12px caps — on every page except Our Story. Excluding .crumb
is what keeps the two apart. */
.page-hero .container > p:not(.crumb){
margin-top:14px; max-width:52ch;
font-size:var(--fs-lead); font-weight:300; color:rgba(255,255,255,.88);
}
.page-hero .crumb{
margin:0 0 18px;
font-family:var(--font-display);
font-size:12px; font-weight:400; line-height:1.1;
letter-spacing:.11em; text-transform:uppercase;
color:var(--sky);
}
.page-hero .crumb a{color:rgba(255,255,255,.62); text-decoration:none}
.page-hero .crumb a:hover{color:var(--white)}
/* The hero title is the brand teal on every page, matching Our Story.
Teal is darker than white, so the gradient beneath it is carried a little
further (see the ::after override below) — otherwise the title lands on a
bright patch of photograph on the lighter heroes and stops reading. */
.page-hero h1{margin:0; color:var(--teal); max-width:18ch}
@media (max-width:768px){
.page-hero,
.e-con.page-hero--el{min-height:clamp(360px, 52vh, 470px)}
.page-hero .container{padding-bottom:56px}
.page-hero .crumb{margin-bottom:14px}
}
/* Legibility floor for a teal title on a photograph. The mid-stop is the one
that matters: it sits behind the headline. */
.page-hero::after,
.e-con.page-hero--el::after{
background:linear-gradient(180deg,
rgba(11,17,20,.72) 0%,
rgba(11,17,20,.58) 45%,
rgba(11,17,20,.88) 100%);
}
/* ==========================================================================
25. OUR TEAM — native Elementor blocks
The same components as the hand-built page, re-skinned for Elementor's
container markup. Nothing here sets type size or colour on a widget: that
lives in the widget's own settings so the church can change it in the
panel. These rules do layout and skin only.
========================================================================== */
/* --- Senior leadership -------------------------------------------------- */
.e-con.lead-pair--el{align-items:flex-start}
.e-con.namecard{
padding-bottom:var(--s3); border-bottom:1px solid var(--line);
}
.e-con.namecard:last-of-type{border-bottom:0; padding-bottom:0}
.e-con.namecard h3{font-size:1.25rem; margin:0}
/* --- The portrait grid ---------------------------------------------------
Grid rather than Elementor's flex, so five tiles share the row evenly and
a sixth wraps into place on its own. Adding a person is a matter of
duplicating one container in the editor — nothing here counts them. */
/* A boxed Elementor container puts its children in a .e-con-inner, so the
grid has to go on that wrapper — putting it on .e-con leaves the wrapper as
the only grid item and every tile collapses to the width of one letter.
The second selector covers a full-width container, which has no wrapper. */
.e-con.people--el > .e-con-inner,
.e-con.people--el.e-con-full{
display:grid;
grid-template-columns:repeat(5, minmax(0,1fr));
gap:var(--s3);
}
/* Elementor gives every container a default padding; the portrait tiles and
their rows want none, so the photograph meets the tile edge. */
.e-con.person--el,
.e-con.person__media--el,
.e-con.person__body--el,
.e-con.people--el,
.e-con.factlist--el,
.e-con.factrow,
.e-con.btnrow,
.e-con.lead-pair--el,
.e-con.split--el,
.e-con.story__media{padding:0}
.e-con.person--el{gap:0}
.e-con.person__media--el > .e-con-inner{width:100%; height:100%}
.e-con.person__media--el{
position:relative; aspect-ratio:4/5; overflow:hidden;
border-radius:var(--radius-card);
background:linear-gradient(160deg, var(--sky), #E7EFF3);
border:1px solid var(--line);
transition:background var(--t-slow) var(--ease);
}
.e-con.person__media--el .mono{
font-family:var(--font-display); font-size:2rem; font-weight:700;
letter-spacing:.06em; color:var(--teal); opacity:.5;
transition:opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.e-con.person__media--el .photo-todo{
position:absolute; left:12px; bottom:12px;
font-family:var(--font-display); font-size:.625rem; font-weight:600;
letter-spacing:.14em; text-transform:uppercase; color:var(--gold-dark);
}
.e-con.person__media--el .photo-todo p{margin:0}
@media (hover:hover){
.e-con.person--el:hover .person__media--el{background:linear-gradient(160deg,#EAF3F7,#DCE9EF)}
.e-con.person--el:hover .mono{opacity:.72; transform:scale(1.04)}
}
.e-con.person__body--el{padding-top:14px}
.e-con.person__body--el h3{font-size:1.0625rem; margin:0}
/* --- The "still needed" note -------------------------------------------- */
.e-con.placeholder--el{
border:1px dashed var(--gold);
background:repeating-linear-gradient(45deg, rgba(197,160,89,.06) 0 10px, transparent 10px 20px);
border-radius:var(--radius-img);
padding:var(--s3); max-width:76ch;
}
/* --- The photographer's brief ------------------------------------------- */
.e-con.factlist--el{border-top:1px solid var(--line)}
.e-con.factrow{
padding:16px 0; border-bottom:1px solid var(--line); align-items:baseline;
}
.e-con.factrow > .e-con-inner > .factrow__label{flex:0 0 170px}
.e-con.factrow > .e-con-inner > .factrow__value{flex:1 1 auto}
/* --- Feature card, native ------------------------------------------------
The prototype's full-bleed photo card, rebuilt on Elementor containers.
Three layers stack inside one 3:4 tile:
z-index 0 the photograph (an Image widget, absolutely placed)
z-index 1 the legibility gradient, drawn on ::after because Elementor
already uses ::before on .e-con for its own overlay
z-index 2 the copy
.e-con-inner is deliberately left at z-index auto: it is positioned but
creates no stacking context, so the body's z-index:2 is still measured
against the ::after directly. */
.e-con.features--el > .e-con-inner,
.e-con.features--el.e-con-full{
display:grid;
grid-template-columns:repeat(3, minmax(0,1fr));
gap:var(--s3);
}
.e-con.feature--el{
position:relative; overflow:hidden; isolation:isolate;
border-radius:16px; aspect-ratio:3/4; padding:0;
color:var(--white);
}
.e-con.feature--el > .e-con-inner{
position:relative; height:100%; padding:0;
display:flex; flex-direction:column; justify-content:flex-end;
}
.e-con.feature--el .feature__img{
position:absolute; inset:0; z-index:0; margin:0;
}
.e-con.feature--el .feature__img img{
width:100%; height:100%; object-fit:cover; display:block;
border-radius:0; filter:saturate(.94);
transition:transform 1s var(--ease), filter var(--t-slow) var(--ease);
}
.e-con.feature--el::after{
content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
background:
linear-gradient(180deg, rgba(11,17,20,.42) 0%, rgba(11,17,20,.18) 30%, rgba(11,17,20,.78) 68%, rgba(11,17,20,.95) 100%),
linear-gradient(0deg, rgba(11,17,20,.18), rgba(11,17,20,.18));
transition:opacity var(--t-slow) var(--ease);
}
.e-con.feature__body--el{
position:relative; z-index:2;
padding:var(--s4) var(--s3) var(--s3);
align-items:flex-start;
}
.e-con.feature--el .feature__tag--el{
align-self:flex-start;
border:1px solid rgba(255,255,255,.55); border-radius:100px;
padding:9px 18px; line-height:1;
backdrop-filter:blur(4px); background:rgba(255,255,255,.06);
transition:background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.e-con.feature--el .feature__tag--el p{line-height:1}
.e-con.feature--el h3{
font-size:clamp(1.5rem, 2.1vw, 2rem);
font-weight:600; line-height:1.1; letter-spacing:-.02em;
max-width:14ch; margin:0;
transition:transform var(--t-slow) var(--ease);
}
.e-con.feature--el .feature__copy{
max-width:34ch;
transition:transform var(--t-slow) var(--ease);
}
/* The arrow link goes gold on a photograph, where teal disappears. */
.elementor-widget-button.link-arrow--gold .elementor-button{color:var(--gold); font-size:.9375rem}
.elementor-widget-button.link-arrow--gold .elementor-button:hover{color:var(--white)}
@media (hover:hover){
.e-con.feature--el:hover .feature__img img{transform:scale(1.05); filter:saturate(1)}
.e-con.feature--el:hover::after{opacity:.88}
.e-con.feature--el:hover .feature__tag--el{background:var(--white); border-color:var(--white)}
.e-con.feature--el:hover .feature__tag--el p{color:var(--ink)}
.e-con.feature--el:hover h3,
.e-con.feature--el:hover .feature__copy{transform:translateY(-4px)}
}
/* --- Buttons sitting side by side --------------------------------------- */
.e-con.btnrow{flex-wrap:wrap; margin-top:var(--s2)}
/* --- Phone -------------------------------------------------------------- */
@media (max-width:1024px){
.e-con.features--el > .e-con-inner,
.e-con.features--el.e-con-full{grid-template-columns:repeat(2, minmax(0,1fr))}
.e-con.people--el > .e-con-inner,
.e-con.people--el.e-con-full{grid-template-columns:repeat(3, minmax(0,1fr))}
.e-con.lead-pair--el > .e-con-inner,
.e-con.split--el > .e-con-inner{flex-direction:column !important}
.e-con.lead-pair--el > .e-con-inner > .e-con,
.e-con.split--el > .e-con-inner > .e-con{width:100% !important}
}
@media (max-width:640px){
.e-con.features--el > .e-con-inner,
.e-con.features--el.e-con-full{grid-template-columns:1fr}
.e-con.people--el > .e-con-inner,
.e-con.people--el.e-con-full{grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s2)}
.e-con.factrow > .e-con-inner{flex-direction:column !important; gap:4px}
.e-con.factrow > .e-con-inner > .factrow__label{flex:none}
}
/* ==========================================================================
26. CONTACT — native Elementor blocks
========================================================================== */
/* --- The details card beside the form ------------------------------------ */
.e-con.contact-card--el{
background:var(--white); border:1px solid var(--line);
border-radius:var(--radius-card); padding:var(--s4);
}
.e-con.contact-item--el,
.e-con.contact-item__text,
.e-con.contact-card__follow,
.e-con.time-cell,
.e-con.times-strip--el,
.e-con.map-full--el{padding:0}
.e-con.contact-item--el > .e-con-inner{align-items:flex-start}
.e-con.contact-item--el .contact-item__icon--el{
flex:0 0 44px; width:44px; height:44px; border-radius:50%;
background:var(--sky); color:var(--teal);
display:grid; place-items:center;
transition:background var(--t-base) var(--ease), color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.e-con.contact-item--el .contact-item__icon--el p{margin:0; line-height:0}
.e-con.contact-item--el .contact-item__icon--el svg{width:19px; height:19px}
.e-con.contact-item--el .contact-item__value a{color:inherit; text-decoration:none}
.e-con.contact-item--el .contact-item__value a:hover{color:var(--teal); text-decoration:underline}
@media (hover:hover){
.e-con.contact-item--el:hover .contact-item__icon--el{
background:var(--teal); color:var(--white); transform:scale(1.06) rotate(-4deg);
}
}
.e-con.contact-card__follow{border-top:1px solid var(--line); padding-top:var(--s3)}
/* The shared socials row, on a white card rather than the dark footer. */
.socials--ink p{display:flex; gap:12px; margin:0}
.socials--ink a{
width:42px; height:42px; border-radius:50%;
border:1px solid var(--line); color:var(--ink);
display:grid; place-items:center;
transition:background var(--t-base) var(--ease), border-color var(--t-base) var(--ease),
color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.socials--ink a:hover{background:var(--teal); border-color:var(--teal); color:var(--white); transform:translateY(-2px)}
.socials--ink svg{width:18px; height:18px; display:block}
/* --- The map ------------------------------------------------------------- */
.e-con.map-full--el .elementor-widget-google_maps iframe{
filter:grayscale(.28); display:block; width:100%;
}
/* --- Service times on the teal band -------------------------------------- */
.e-con.times-strip--el > .e-con-inner{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
gap:var(--s3);
border-top:1px solid rgba(255,255,255,.18);
padding-top:var(--s3);
}
@media (max-width:640px){
.e-con.times-strip--el > .e-con-inner{grid-template-columns:1fr 1fr; gap:var(--s2)}
}
/* The media column on a native split: the container's sky background was
showing as a pale ring around the rounded photograph. The frame belongs to
the image, not to the container behind it. */
.e-con.story__media{background:none; border-radius:var(--radius-card); overflow:hidden}
.e-con.story__media .elementor-widget-image img{border-radius:var(--radius-card)}
/* ==========================================================================
27. MINISTRIES — native Elementor blocks
========================================================================== */
/* --- The sticky section bar ---------------------------------------------
The scroll-spy in carmel-motion.js looks for [data-spy] and the anchors
inside it, and puts .is-active on the . Elementor's Button widget
renders exactly that , so the script needs no change. */
.e-con.anchorbar--el{
position:sticky; top:var(--header-h); z-index:60;
background:var(--white); border-bottom:1px solid var(--line);
padding:0;
}
@media (max-width:1024px){ .e-con.anchorbar--el{top:0} }
.e-con.anchorbar__inner{padding:0; overflow-x:auto; scrollbar-width:none}
.e-con.anchorbar__inner::-webkit-scrollbar{display:none}
.elementor-widget-button.anchor-link .elementor-button{
background:none; border:0; border-radius:0; box-shadow:none;
font-family:var(--font-display); font-size:.9375rem; font-weight:500;
color:var(--muted); padding:20px 0; white-space:nowrap;
position:relative; text-decoration:none;
transition:color var(--t-base) var(--ease);
}
.elementor-widget-button.anchor-link .elementor-button::after{
content:""; position:absolute; left:0; right:100%; bottom:-1px; height:2px;
background:var(--teal); transition:right var(--t-base) var(--ease);
}
.elementor-widget-button.anchor-link .elementor-button:hover{color:var(--ink)}
.elementor-widget-button.anchor-link .elementor-button.is-active{color:var(--teal)}
.elementor-widget-button.anchor-link .elementor-button.is-active::after,
.elementor-widget-button.anchor-link .elementor-button:hover::after{right:0}
/* Anchored sections clear the fixed header when jumped to. */
.e-con#church, .e-con#outreach, .e-con#serve{scroll-margin-top:150px}
/* --- Alternating numbered rows ------------------------------------------
Every second row swaps its photograph to the right. Done with nth-child so
the pattern survives the church adding, deleting or reordering rows —
nothing has to be set per row. */
.e-con.alt-list--el,
.e-con.alt-row--el,
.e-con.alt-row__media--el,
.e-con.alt-row__body--el,
.e-con.alt-row__meta--el,
.e-con.stat-strip--el{padding:0}
.e-con.alt-list--el > .e-con-inner > .e-con:nth-child(even) > .e-con-inner > .alt-row__media--el,
.e-con.alt-list--el > .e-con-inner > .e-con:nth-child(even) > .e-con-inner > .alt-row__todo--el{order:2}
.e-con.alt-row__media--el{
border-radius:var(--radius-card); overflow:hidden; background:var(--sky);
}
.e-con.alt-row__media--el img{
width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
border-radius:0;
transition:transform .9s var(--ease);
}
@media (hover:hover){
.e-con.alt-row--el:hover .alt-row__media--el img{transform:scale(1.04)}
}
.e-con.alt-row__todo--el{
aspect-ratio:4/3; border:1px dashed var(--gold); border-radius:var(--radius-card);
background:repeating-linear-gradient(45deg, rgba(197,160,89,.08) 0 14px, transparent 14px 28px);
text-align:center; padding:var(--s4);
}
/* The inner wrapper has to fill the tile, or the centred text sits at the
top of a 4:3 box instead of the middle of it. */
.e-con.alt-row__todo--el > .e-con-inner{
height:100%; justify-content:center; align-items:center;
}
.e-con.alt-row__todo--el .todo__note{max-width:30ch}
/* On the near-black outreach band the muted note needs to come up. */
.band--deep .e-con.alt-row__todo--el{border-color:rgba(197,160,89,.6)}
.band--deep .e-con.alt-row__todo--el .todo__note{color:rgba(255,255,255,.66)}
.e-con.alt-row__body--el{max-width:52ch}
.e-con.alt-row__body--el h3{font-size:clamp(1.5rem, 2.4vw, 2rem); line-height:1.12; margin:0}
.e-con.alt-row__meta--el .ministry__tag--el{
background:var(--sky); padding:5px 12px; border-radius:5px; white-space:nowrap;
}
.band--deep .e-con.alt-row__meta--el .ministry__tag--el{background:rgba(255,255,255,.08)}
/* The dark band's headings and copy carry their colour as widget settings
(see $rows($outreach, true) in elementor-build.php), so nothing is stated
here that the panel could not override. */
/* --- Figures on the outreach band ---------------------------------------
Elementor's Counter widget, so the number, suffix and caption are panel
settings rather than data attributes on a . */
.e-con.stat-strip--el > .e-con-inner{flex-wrap:wrap}
.elementor-widget-counter.stat--el .elementor-counter-number-wrapper{
font-family:var(--font-display); font-weight:700; font-size:2.75rem;
color:var(--gold); line-height:1; font-variant-numeric:tabular-nums;
justify-content:flex-start;
}
.elementor-widget-counter.stat--el .elementor-counter-title{
font-family:var(--font-body); font-size:.9375rem; font-weight:400;
color:rgba(255,255,255,.7); margin-top:6px; text-align:left;
}
@media (max-width:900px){
.e-con.alt-row--el > .e-con-inner{flex-direction:column !important}
.e-con.alt-row--el > .e-con-inner > .e-con{width:100% !important}
.e-con.alt-list--el > .e-con-inner > .e-con:nth-child(even) > .e-con-inner > .alt-row__media--el,
.e-con.alt-list--el > .e-con-inner > .e-con:nth-child(even) > .e-con-inner > .alt-row__todo--el{order:0}
}
/* ==========================================================================
28. THE REMAINING PAGES — native Elementor blocks
New Here, Beliefs, Giving, Privacy, 404 and Home. Layout and skin only:
every size and colour that a person would plausibly change is a widget
setting, so nothing here outranks the panel.
========================================================================== */
/* --- Shared: rows of buttons, and a photograph used as a band ------------ */
.e-con.btnrow--center > .e-con-inner{justify-content:center}
.e-con.band-image--el{position:relative; isolation:isolate; overflow:hidden; color:var(--white)}
.e-con.band-image--el::after{
content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background:linear-gradient(180deg, rgba(11,17,20,.86), rgba(11,17,20,.78)),
linear-gradient(90deg, rgba(14,65,85,.4), transparent 60%);
}
.e-con.band-image--el > .e-con-inner{position:relative; z-index:1}
.pullquote--light{border-left-color:var(--gold)}
.e-con.placeholder--light{
background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.4);
}
.e-con.times-strip--plain > .e-con-inner{border-top:0; padding-top:0}
/* --- New Here: the six things ------------------------------------------- */
.e-con.icon-grid--el > .e-con-inner{
display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s3);
}
.e-con.icon-card--el{
background:var(--white); border:1px solid var(--line); border-radius:var(--radius-card);
padding:var(--s4) var(--s3);
transition:transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
border-color var(--t-base) var(--ease);
}
.e-con.icon-card--el .icon-card__icon--el{
width:52px; height:52px; border-radius:50%;
background:var(--sky); color:var(--teal);
display:grid; place-items:center; flex:none;
transition:background var(--t-base) var(--ease), color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.e-con.icon-card--el .icon-card__icon--el p{margin:0; line-height:0}
.e-con.icon-card--el .icon-card__icon--el svg{width:22px; height:22px}
.e-con.icon-card--el h3{font-size:1.125rem; font-weight:600; margin:0}
@media (hover:hover){
.e-con.icon-card--el:hover{transform:translateY(-2px); box-shadow:var(--shadow-card); border-color:transparent}
.e-con.icon-card--el:hover .icon-card__icon--el{background:var(--teal); color:var(--white); transform:scale(1.06)}
}
/* --- New Here: the tick list -------------------------------------------- */
.e-con.checklist--el,
.e-con.check-row{padding:0}
.e-con.check-row .check-row__tick{flex:0 0 22px; color:var(--gold)}
.e-con.check-row .check-row__tick p{margin:0; line-height:0}
.e-con.check-row .check-row__tick svg{width:22px; height:22px; display:block}
/* --- Beliefs ------------------------------------------------------------- */
.e-con.spy-layout--el > .e-con-inner{align-items:flex-start}
.e-con.spy--el{position:sticky; top:calc(var(--header-h) + var(--s3)); padding:0}
.spy__rail h4{
font-family:var(--font-display); font-size:var(--fs-label); font-weight:600;
letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 var(--s2);
}
.spy__rail ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.spy__rail li{margin:0}
.spy__rail a{
display:flex; gap:12px; align-items:baseline; padding:7px 0;
font-size:.9375rem; color:var(--muted); text-decoration:none;
border-left:2px solid transparent; padding-left:14px;
transition:color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.spy__rail a span{
font-family:var(--font-display); font-weight:600; font-size:.75rem;
color:var(--medium-blue, #7F9EAA); font-variant-numeric:tabular-nums;
}
.spy__rail a:hover{color:var(--ink)}
.spy__rail a.is-active{color:var(--teal); border-left-color:var(--gold)}
.spy__rail a.is-active span{color:var(--gold)}
.e-con.doctrine--el,
.e-con.doctrine__item--el,
.e-con.doctrine__text{padding:0}
.e-con.doctrine__item--el{
padding-bottom:var(--s4); border-bottom:1px solid var(--line);
}
.e-con.doctrine__item--el .doctrine__num--el{flex:0 0 46px}
.e-con.doctrine__item--el .doctrine__copy{max-width:62ch}
.e-con.doctrine__item--el.is-active .doctrine__num--el{color:var(--gold)}
.display-xl .elementor-heading-title,
h2.display-xl{font-size:clamp(2rem, 4.4vw, 3.25rem)}
/* --- Privacy: one long document, one widget ------------------------------ */
.e-con.measure-wide{max-width:74ch; padding:0}
/* --- 404 ----------------------------------------------------------------- */
.e-con.error-hero--el .error-code--el{
font-family:var(--font-display); font-weight:700; font-size:clamp(3rem, 9vw, 6rem);
line-height:1; letter-spacing:-.04em;
}
.e-con.error-links--el{padding:0}
.e-con.error-links--el > .e-con-inner{flex-wrap:wrap}
.elementor-widget-button.error-link .elementor-button{
background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.32);
border-radius:100px; padding:9px 18px; color:var(--white);
font-family:var(--font-display); font-size:.9375rem; font-weight:500;
transition:background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.elementor-widget-button.error-link .elementor-button:hover{
background:var(--white); border-color:var(--white); color:var(--ink);
}
/* --- Giving -------------------------------------------------------------- */
.e-con.give-grid--el{padding:0}
.e-con.give-card--el{
background:var(--white); border:1px solid var(--line);
border-radius:var(--radius-card); padding:var(--s4);
}
.e-con.give-card--primary--el{border-color:var(--teal); box-shadow:var(--shadow-card)}
.e-con.give-card--el h3{font-size:1.375rem; margin:0}
.e-con.give-card--el .give-card__flag{color:#9C5C15; font-weight:500}
.e-con.give-card--el .give-card__foot{
margin-top:auto; padding-top:var(--s3); border-top:1px solid var(--line);
}
.e-con.give-card--el .give-card__foot a{color:var(--teal); font-weight:500}
.upi-idblock{margin-top:var(--s3)}
.upi-idblock__label{
font-family:var(--font-display); font-size:var(--fs-label); font-weight:600;
letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
display:block; margin-bottom:8px;
}
/* Two funds side by side. Each card carries a QR, so the pair needs equal
halves rather than the 55/45 the single-fund page used. */
.e-con.give-grid--el > .e-con-inner > .e-con{min-width:0}
.e-con.give-card--el .qr-block img{width:170px; height:170px}
/* On a phone the deep-link button is the useful control and the QR is not —
you cannot scan your own screen — so the column flips: button first, code
underneath for someone holding a second phone. `column-reverse` reorders
the painted result without moving anything in the markup, which keeps the
reading order (code, then its explanation) intact for a screen reader. */
.upi-app-note{display:none}
@media (hover:none) and (pointer:coarse){
.qr-block{flex-direction:column-reverse; align-items:flex-start; gap:var(--s3)}
.qr-block > div{flex:0 0 auto; width:100%}
.upi-app-note{display:block; font-size:.875rem; color:var(--muted); margin-top:10px}
.upi-app{width:100%; justify-content:center}
.e-con.give-card--el .qr-block img{width:140px; height:140px}
}
/* Bank transfer: folded away by default. Most givers use the QR, and a wall
of account numbers under each fund makes the simple route look harder than
it is. , so the gradient that keeps the type legible has to be
drawn here instead of over the image. */
.e-con.page-hero--el{
position:relative; isolation:isolate; color:var(--white);
min-height:clamp(380px, 54vh, 540px);
}
/* ::after, not ::before — Elementor already uses ::before on .e-con for its
own background overlay, so a ::before here never paints. */
.e-con.page-hero--el::after{
content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background:linear-gradient(180deg, rgba(11,17,20,.7) 0%, rgba(11,17,20,.42) 45%, rgba(11,17,20,.86) 100%);
}
.e-con.page-hero--el > *{position:relative; z-index:1}
.e-con.page-hero--el .elementor-heading-title{max-width:18ch}
/* Heading colour is deliberately NOT set here.
Elementor emits `.elementor-widget-heading .elementor-heading-title {color:
var(--e-global-color-primary)}` for every heading. An override at the same
specificity only wins by load order — and the order is reversed between the
editor and the front end, which is exactly why headings were teal in one and
black in the other. Leaving it to Elementor's global makes both agree, and
puts the colour where the church can change it: Site Settings > Global
Colors > Primary. Dark bands still need white, and those are stated below. */
/* Section 19 gives links inside text widgets the content teal, which is
unreadable on the hero photograph. Breadcrumb links instead take the
widget's own text colour, so whatever colour the church sets on the crumb
in the panel carries the links with it. Kept to a single class so a panel
setting still outranks it.
Everything else about the crumb and the hero lead — size, weight, case,
letter-spacing, colour — is now the widget's OWN typography setting (see
ccc_style() in elementor-build.php). It used to be stated here at
`.e-con.page-hero--el .crumb`, three classes deep, which no panel setting
could ever beat: that is why setting the breadcrumb to 190px did nothing. */
.crumb a{color:inherit; text-decoration:none}
.crumb a:hover{color:var(--white); opacity:.75}
/* Story rows: the media column keeps its rounded frame and hover zoom. */
.e-con.story__media{border-radius:var(--radius-card); overflow:visible}
.e-con.story__media .elementor-widget-image img{
border-radius:var(--radius-card); width:100%; display:block;
}
.e-con.story__body h2{margin:0}
/* The simple three-up card used to close a page. */
.e-con.ccc-card{
background:var(--white); border:1px solid var(--line);
border-radius:var(--radius-card); padding:var(--s4);
transition:transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.e-con.ccc-card h3{font-size:var(--fs-h3); color:var(--ink)}
.e-con.ccc-card p{color:var(--muted); font-size:1rem; line-height:1.6}
@media (hover:hover){
.e-con.ccc-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-card); border-color:transparent}
}
/* Elementor's button widget wearing our button classes.
The wrapper is a positioning box and nothing more; every part of the button
a person can see — padding, radius, border, type — lives on the inside.
That matters because Elementor's own Style panel writes to the : with the
look split across the two, half the panel's fields did nothing, the padding
was applied twice over, and the widget looked broken to whoever was editing
it. Every variant is moved, not just the ones the home page happens to use —
leaving one behind is how a button on some other page silently loses its
background.
The variant class sits inside :where(), which contributes no specificity, so
these rules land at two classes: the reset below them cannot outrank them,
and anything typed into the panel beats them both, whichever order the
stylesheets happen to load in. They are the default a button falls back to,
not a floor it cannot rise above. */
.elementor-widget-button:where(.btn, .link-arrow){padding:0; border:0; background:none}
.elementor-widget-button:where(.btn, .link-arrow) .elementor-button{
background:none; padding:0; border:0; border-radius:0; box-shadow:none;
}
.elementor-widget-button:where(.btn) .elementor-button{
display:inline-flex; align-items:center; gap:10px;
font-family:var(--font-display); font-size:1rem; font-weight:600; letter-spacing:.02em;
padding:16px 34px; border-radius:var(--radius-btn); border:1px solid transparent;
transition:background var(--t-base) var(--ease), color var(--t-base) var(--ease),
border-color var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.elementor-widget-button:where(.btn) .elementor-button:hover{transform:translateY(-2px)}
.elementor-widget-button:where(.btn--primary) .elementor-button{
background:var(--teal); color:var(--white); border-color:var(--teal);
}
.elementor-widget-button:where(.btn--primary) .elementor-button:hover{
background:var(--teal-dark); border-color:var(--teal-dark);
}
.elementor-widget-button:where(.btn--gold) .elementor-button{
background:var(--gold); color:var(--white); border-color:var(--gold);
}
.elementor-widget-button:where(.btn--gold) .elementor-button:hover{
background:var(--gold-dark); border-color:var(--gold-dark);
}
.elementor-widget-button:where(.btn--ghost) .elementor-button{
background:transparent; color:var(--ink); border-color:currentColor;
}
.elementor-widget-button:where(.btn--ghost) .elementor-button:hover{
background:var(--ink); color:var(--white);
}
.elementor-widget-button:where(.btn--ghost-light) .elementor-button{
background:transparent; color:var(--white); border-color:rgba(255,255,255,.6);
}
.elementor-widget-button:where(.btn--ghost-light) .elementor-button:hover{
background:var(--white); color:var(--ink); border-color:var(--white);
}
.elementor-widget-button.link-arrow .elementor-button{
font-family:var(--font-display); font-weight:600; font-size:1rem;
color:var(--teal); display:inline-block; text-decoration:none;
transition:color var(--t-base) var(--ease);
}
/* Elementor wraps the label in a flex container and leaves whitespace either
side of it. The rule goes on that wrapper rather than on the , so it
measures the words and not the stray space before the arrow. */
.elementor-widget-button.link-arrow .elementor-button-content-wrapper{
display:inline;
text-decoration:underline;
text-decoration-color:transparent;
text-decoration-thickness:1px;
text-underline-offset:5px;
transition:text-decoration-color .35s var(--ease);
}
.elementor-widget-button.link-arrow .elementor-button::after{
content:"\2192"; display:inline-block; margin-left:10px;
transition:transform .4s cubic-bezier(.2,.8,.25,1);
}
@media (hover:hover){
.elementor-widget-button.link-arrow .elementor-button:hover{color:var(--teal-dark)}
.elementor-widget-button.link-arrow .elementor-button:hover .elementor-button-content-wrapper{
text-decoration-color:currentColor;
}
.elementor-widget-button.link-arrow .elementor-button:hover::after{transform:translateX(6px)}
}
.elementor-widget-button.link-arrow .elementor-button:focus-visible .elementor-button-content-wrapper{
text-decoration-color:currentColor;
}
/* Elementor's kit sets a button's hover background at `.elementor-button:hover`
— one class plus a pseudo-class, the same 0,2,0 as the reset further up, so
the reset cannot win it on weight and load order decides. The link-arrow is a
text link, not a filled button, so its hover has to be cancelled at the
weight of the rule that sets it: two real classes plus the pseudo-class.
Focus and active go with it, or the box comes back on a keyboard tab and on
the moment of the tap. */
.elementor-widget-button.link-arrow .elementor-button:hover,
.elementor-widget-button.link-arrow .elementor-button:focus,
.elementor-widget-button.link-arrow .elementor-button:focus-visible,
.elementor-widget-button.link-arrow .elementor-button:active{
background:none; box-shadow:none; border-color:transparent;
}
@media (prefers-reduced-motion:reduce){
.elementor-widget-button.link-arrow .elementor-button,
.elementor-widget-button.link-arrow .elementor-button-content-wrapper,
.elementor-widget-button.link-arrow .elementor-button::after{transition:none}
}
/* Phone: the two-column rows stack, as the hand-built ones already do. */
@media (max-width:1024px){
.e-con.story,
.e-con.split{flex-direction:column !important}
.e-con.story > .e-con,
.e-con.split > .e-con{width:100% !important}
}
@media (max-width:768px){
.e-con.page-hero--el{min-height:clamp(300px, 46vh, 420px)}
}
/* --- 23b. Typography lives in Elementor, not here ------------------------
These classes used to carry font size, weight, case and colour at a
specificity that beat Elementor's per-widget rules — which meant changing a
widget's typography in the panel did nothing at all. Text styling now ships
as the widget's OWN settings (see ccc_text() in elementor-build.php), so it
renders identically in the editor and on the front end AND the church can
change it in the panel, where their change wins.
What is left here is only what Elementor cannot express as a widget
setting: the pull-quote's rule, kept at a single class so any panel setting
still overrides it. */
.pullquote{
border-left:3px solid var(--gold);
padding-left:var(--s3);
}
/* ==========================================================================
24. PAGE HERO — one treatment on every page
Every inner page opens the same way: photograph, breadcrumb, title, one
line of lead. Nine of them are built from the theme's own markup and one
(Our Story) from Elementor containers, so this section states the shared
metrics once and lets both kinds pick them up.
Kept to two classes deep on purpose. That is enough to beat the earlier
sections, and still less than the three classes Elementor writes from the
widget panel — so anything the church sets on the Our Story hero by hand
continues to win.
========================================================================== */
.page-hero,
.e-con.page-hero--el{
min-height:clamp(460px, 60vh, 620px);
}
.page-hero{
display:flex; align-items:flex-end;
padding-top:calc(var(--header-h) + var(--topbar-h) + var(--s4));
}
.page-hero .container{padding-bottom:80px}
/* The breadcrumb and the lead are BOTH