/ are not - flex-grow and margin-top:auto hit
nothing. Measured link-top spread: 60.3px across the four cards, worst on
"Become a Board Member" whose paragraph runs longest.
display:contents dissolves the wrappers so the static's own rules apply
again. Same fix family as the sponsor pills.
Scoped to > .elementor-widget on purpose: the icon is a CONTAINER
(e-con-full), not a widget, so its 54x54 circle is left intact.
2. CONTRAST. Measured against WCAG 2.2 on the live page (card bg rgb(28,28,28),
icon circle composites to rgb(59,32,30)):
icon vs circle 3.75:1 - SC 1.4.11 needs 3:1 -> passed, but barely
link vs card bg 4.30:1 - link is 18.72px/700, so it counts as large
text and needs 3:1 -> passed, but under the
4.5:1 normal-text bar
Both cleared the letter of the spec while reading poorly, because icon and
circle share a hue - a ratio cannot see that. Using a lighter tint of the
brand red on dark surfaces only:
icon vs circle -> ~4.5:1
link vs card bg -> ~5.1:1 (now clears 4.5:1 even as normal text)
Brand primary #EF3742 is untouched everywhere else; this token applies only
on dark backgrounds. TO REVERT: delete --red-on-dark and the two rules below.
=========================================================================== */
:root{--red-on-dark:#FF4854;}
:root:root .help-card > .elementor-widget{display:contents;}
:root:root .help-card a{color:var(--red-on-dark);}
:root:root .help-icon{color:var(--red-on-dark);}
/* ===========================================================================
Same widget-wrapper defect as .help-card above, swept for exhaustively rather
than waiting to be reported one card at a time.
The pattern: the design makes a card a flex column and then relies on a CHILD
being a flex item - p{flex-grow:1} to absorb slack, a{margin-top:auto} to pin
the link to the bottom. The converter wraps each child in an Elementor widget
div, so the WRAPPER is the flex item and those rules hit nothing. Result: links
sit at whatever height the paragraph happens to end, so cards in one row
disagree. Measured on .help-card: 60.3px of disagreement across four cards.
Found by scanning all 33 page sheets for descendant rules using flex-grow,
margin-top:auto, align-self or flex:1. Full affected set:
.help-card p{flex-grow:1} a{margin-top:auto} (home) - fixed above
.event-body p{flex-grow:1} a{margin-top:auto} (events) - below
.link-card p{flex-grow:1} (about, ways-to-help)
.team-card .info .story-link{margin-top:auto} (our-team)
Also matched but needing nothing: .nl-form/.signup-form inputs (WPForms owns
those, see forms.css) and .signup-card p (margin:auto centring, unaffected).
Each of these parents is display:flex;flex-direction:column in its own page
sheet, so dissolving the wrappers restores exactly the static's DOM semantics
and each page's own CSS still governs. NOTE .event-body is defined DIFFERENTLY
on home (padding only, no flex, and no margin-top:auto) than on events - which
is fine and intended: display:contents changes the DOM shape, not the rules,
so the homepage keeps its own non-aligned behaviour.
Scoped to > .elementor-widget so CONTAINER children (icon circles, image
wrappers) keep their boxes.
=========================================================================== */
:root:root .event-body > .elementor-widget,
:root:root .link-card > .elementor-widget,
:root:root .team-card .info > .elementor-widget{display:contents;}
/* ===========================================================================
Home: close the white gap above the red "Stay Connected" band.
Jason's call 2026-08-25, mobile and desktop.
Measured: exactly 40px, and it is NOT a conversion artefact - it comes from
.sponsors{margin-bottom:40px}, which the approved mockup also has. So this is
a deliberate divergence from the static, not a repair.
.sponsors exists on the homepage only, has ONE definition, and no
media-query variant, so this single rule covers both breakpoints.
The section's 1px border-bottom is left in place and now sits flush against
the red band. TO REVERT: delete this rule (the 40px returns).
=========================================================================== */
:root:root .sponsors{margin-bottom:0;}
/* ===========================================================================
Footer, Jason's requests 2026-08-25.
Contact rows are now links (address -> Google Maps, tel:, mailto:). The design
had no rule for anchors in there, so without this they would pick up the
theme's default link colour and underline. Keep the inherited #555, give a red
hover so the affordance is visible, and leave the svg icons outside the anchor
so they stay decorative red.
The credit line moves to a full-width centred row: .footer-bottom is
display:flex/space-between/wrap, so the WIDGET WRAPPER is the flex item -
text-align on the inner span alone would not centre it. flex-basis:100% drops
it onto its own row, as it already did by wrapping, then centres it there.
=========================================================================== */
:root:root .footer-contact li a{color:inherit;text-decoration:none;transition:color .3s;}
:root:root .footer-contact li a:hover{color:var(--red);text-decoration:underline;}
:root:root .footer-bottom .footer-credit{flex-basis:100%;text-align:center;}
/* ===========================================================================
/contact/ - First / Last name fields side by side.
WPForms sets `.wpforms-container .wpforms-field .wpforms-field-row{display:flex}`
at (0,3,0) in a sheet that loads AFTER forms.css, so the forms.css grid rule -
also (0,3,0) - lost the tie on order and grid-template-columns sat there inert
while the two blocks wrapped onto separate lines. Rather than escalate to grid,
use WPForms' own flex and just size the blocks: adding `div.` buys (0,3,1),
which wins on specificity regardless of sheet order.
=========================================================================== */
:root:root .wpforms-container div.wpforms-field-name .wpforms-field-row{
display:flex;flex-wrap:nowrap;gap:16px;align-items:flex-start;}
:root:root .wpforms-container div.wpforms-field-name .wpforms-field-row-block{
width:auto;flex:1 1 0;margin:0;}
@media (max-width:600px){
:root:root .wpforms-container div.wpforms-field-name .wpforms-field-row{flex-wrap:wrap;}
:root:root .wpforms-container div.wpforms-field-name .wpforms-field-row-block{flex:1 1 100%;}
}
/* In-page contact list on /contact/ is now clickable, same treatment as the
footer: keep the inherited colour, no underline until hover. */
:root:root .info-list a{color:inherit;text-decoration:none;transition:color .3s;}
:root:root .info-list a:hover{color:var(--red);text-decoration:underline;}
/* ===========================================================================
NEW DESIGN SECTIONS - /our-vision/ Executive Director band + Explore cards.
Jason's call 2026-08-25 ("this page has NO personality at all").
These live here rather than in page-our-vision.css because the page sheets are
GENERATED from the static mockup, and the mockup has no such sections - a
converter re-run would wipe anything added there.
CONSEQUENCE, recorded deliberately: /our-vision/ now DIVERGES from the static.
If our-vision is ever re-converted, these two sections are dropped from the
Elementor data and this CSS is left dangling but harmless.
Built on the design's own tokens (--red, --off-black, --gray-light, --ease,
.wrap, .eyebrow) so it reads as part of Anna's system, not bolted on.
=========================================================================== */
:root:root .ed-note{padding:110px 0;background:var(--gray-light);
border-top:1px solid var(--gray-border);border-bottom:1px solid var(--gray-border);}
:root:root .ed-grid{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:center;}
:root:root .ed-portrait{margin:0;}
:root:root .ed-portrait img{display:block;width:100%;height:auto;border-radius:6px;
box-shadow:0 18px 40px rgba(0,0,0,.16);}
:root:root .ed-copy .eyebrow{display:block;margin-bottom:18px;}
:root:root .ed-quote{margin:0 0 26px;padding:0;border:0;
font-family:var(--font-ui);font-size:1.28rem;font-weight:500;line-height:1.5;
color:var(--off-black);position:relative;}
:root:root .ed-quote::before{content:"\201C";position:absolute;left:-.5em;top:-.18em;
font-size:2.6rem;line-height:1;color:var(--red);opacity:.5;}
:root:root .ed-signature{display:block;height:58px;width:auto;margin:0 0 10px;}
:root:root .ed-name{margin:0 0 18px;font-size:.9rem;line-height:1.45;}
:root:root .ed-name strong{display:block;font-weight:700;color:var(--black);}
:root:root .ed-name span{color:#6b6b6b;font-size:.84rem;}
:root:root .ed-more{font-size:.78rem;font-weight:700;letter-spacing:1.2px;
text-transform:uppercase;color:var(--red);text-decoration:none;}
:root:root .ed-more:hover{text-decoration:underline;}
:root:root .explore-band{padding:0 0 110px;}
:root:root .explore-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;}
:root:root .explore-card{position:relative;display:block;overflow:hidden;border-radius:8px;
text-decoration:none;transition:transform .4s var(--ease),box-shadow .4s var(--ease);}
:root:root .explore-card img{display:block;width:100%;height:340px;object-fit:cover;
transition:transform .6s var(--ease);}
:root:root .explore-card::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.72) 100%);}
:root:root .explore-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(0,0,0,.22);}
:root:root .explore-card:hover img{transform:scale(1.04);}
:root:root .explore-body{position:absolute;inset:auto 0 0 0;z-index:2;
padding:0 28px 26px;display:flex;flex-direction:column;gap:8px;}
:root:root .explore-body strong{font-family:var(--font-display);font-weight:400;
font-size:1.9rem;line-height:1.05;text-transform:uppercase;color:var(--white);}
:root:root .explore-cta{font-size:.76rem;font-weight:700;letter-spacing:1.4px;
text-transform:uppercase;color:var(--white);opacity:.9;}
@media (max-width:860px){
:root:root .ed-grid{grid-template-columns:1fr;gap:32px;}
:root:root .ed-portrait{max-width:260px;}
:root:root .ed-quote{font-size:1.12rem;}
:root:root .ed-quote::before{left:-.36em;}
:root:root .explore-grid{grid-template-columns:1fr;gap:20px;}
:root:root .explore-card img{height:260px;}
:root:root .explore-body strong{font-size:1.55rem;}
}
/* ===========================================================================
/contact/ - the First field was 16px right of the Email field below it.
Measured: the name row is 455px wide, the two blocks computed 203.5px each
(407) plus a 16px gap = 423, leaving 32px of free space that WPForms' own
`justify-content:space-between` distributed to BOTH edges - 16px left, 16px
right - so the first input started at 728 while the email input started at 712.
flex-grow was not consuming that space, so the blocks were being capped.
Fix: force flex-start AND let the blocks actually fill (max-width:none,
min-width:0, and drop the 10px padding-right the gap already covers).
Result: both inputs share the email field's left edge and the row spans the
same width as the fields above and below it.
=========================================================================== */
:root:root .wpforms-container div.wpforms-field-name .wpforms-field-row{
justify-content:flex-start;}
:root:root .wpforms-container div.wpforms-field-name .wpforms-field-row-block{
flex:1 1 0;max-width:none;min-width:0;padding-right:0;}
/* Footer credit: make "Sojourn Digital" read as a deliberate link.
Jason's call 2026-08-25 - bold, underlined, brand red. It sits on the white
footer, where #EF3742 measures 3.97:1: fine as a bold link at this size, and
the underline carries the affordance rather than colour alone (WCAG 1.4.1). */
:root:root .footer-credit a{color:var(--red);font-weight:700;text-decoration:underline;}
:root:root .footer-credit a:hover{color:var(--red-dark);}
/* The remaining 16px on the name row was WPForms' CLEARFIX.
`.wpforms-field-row::before/::after { content:""; display:table }` is harmless
on a block container, but once the row is display:flex those pseudo-elements
become zero-width FLEX ITEMS. With gap:16px that produced three gaps instead of
one (3x16 = 48px) and pushed the first block 16px right of the row edge:
48 + 198.5 + 208.5 = 455 exactly. justify-content could never fix it, because
the space was being consumed by real items, not distributed as free space.
Removing them leaves two items, one gap, and blocks that grow to 219.5px each -
flush with the email field above and below. */
:root:root .wpforms-container div.wpforms-field-name .wpforms-field-row::before,
:root:root .wpforms-container div.wpforms-field-name .wpforms-field-row::after{display:none;}
/* ===========================================================================
SECTION BACKGROUND IMAGERY, Jason's brief 2026-08-25.
Scoped with body.page-id-N because the page sheets are GENERATED and must not
be hand-edited; the ported `.page-hero`/`.cta` rules sit at (0,3,0) after the
uniform lift, so these carry :root:root to reach (0,4,1) and win.
EVERY image is layered UNDER a scrim gradient in the same declaration, so text
contrast is guaranteed by construction rather than hoped for. The scrim colour
matches each section's original background, so the design still reads as itself:
.page-hero / .apply-section black, white text -> dark scrim
programs .cta red, white text -> red scrim, photo faint
board-member .cta LIGHT GREY, BLACK text -> LIGHT scrim
That last one matters: a dark scrim there would have made black body copy
unreadable. Backgrounds were read from the static, not assumed.
All assets are local WebP in uploads/yfc-static (68-135 KB each), resized to
1920w -- except the team photo, which is natively 1440x1440 and was kept at
1440 rather than upscaled, since upscaling adds bytes and no detail.
background-position is nudged off centre where faces sit high in the frame.
⚠️ EVERY selector below carries `.e-con` for one specific reason. Elementor
LAZY-LOADS container backgrounds with
.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload){background-image:none}
at (0,5,0). Our backgrounds come from CSS, so Elementor's JS never adds
.e-lazyloaded and that rule would suppress them PERMANENTLY. It only bites the
2nd container onward, which is why the first hero worked and the later CTA
sections silently rendered with no image while still accepting background-size
and background-position - a very convincing "my rule didn't apply" symptom.
Adding .e-con takes these to (0,5,1), which clears it.
=========================================================================== */
:root:root body.page-id-150 .page-hero.e-con{
background-image:linear-gradient(160deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.66) 100%),
url(/wp-content/uploads/yfc-static/hero-team-group.webp);
background-size:cover;background-position:center 44%;background-repeat:no-repeat;}
:root:root body.page-id-161 .cta.e-con{
background-image:linear-gradient(120deg,rgba(239,55,66,.90) 0%,rgba(173,33,25,.93) 100%),
url(/wp-content/uploads/yfc-static/cta-volunteers-group.webp);
background-size:cover;background-position:center 40%;background-repeat:no-repeat;}
:root:root body.page-id-145 .page-hero.e-con{
background-image:linear-gradient(160deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.64) 100%),
url(/wp-content/uploads/yfc-static/hero-volunteer-gym.webp);
background-size:cover;background-position:center 26%;background-repeat:no-repeat;}
:root:root body.page-id-145 .apply-section.e-con{
background-image:linear-gradient(160deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.70) 100%),
url(/wp-content/uploads/yfc-static/cta-volunteer-mentoring.webp);
background-size:cover;background-position:center 30%;background-repeat:no-repeat;}
:root:root body.page-id-143 .page-hero.e-con{
background-image:linear-gradient(160deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.68) 100%),
url(/wp-content/uploads/yfc-static/hero-board-collage.webp);
background-size:cover;background-position:center 18%;background-repeat:no-repeat;}
:root:root body.page-id-143 .cta.e-con{
background-image:linear-gradient(160deg,rgba(244,243,241,.93) 0%,rgba(244,243,241,.87) 100%),
url(/wp-content/uploads/yfc-static/cta-boardroom-casual.webp);
background-size:cover;background-position:center 36%;background-repeat:no-repeat;}
/* ===========================================================================
Headings that lost an INLINE style in conversion.
The static styles a few h2s with a `style` attribute, and the converter maps
h1-h6 to Elementor HEADING WIDGETS, which do not carry the source element's
inline style. The generic h2{margin-bottom:20px} does not rescue them either,
because Elementor's heading-widget CSS zeroes the margin - so these computed
margin-bottom:0 and sat flush against the list underneath. That is exactly
what Jason reported as "IF YOU is too tight to the checklist section below it".
Restored via classes stamped onto the heading widgets (_css_classes):
.yfc-h2-sub font-size:1.6rem + margin-bottom:24px (become-a-staff-member x2)
.yfc-h2-small font-size:1.6rem (home, Our Community Partners
was rendering 51.2px vs 38.4px)
A fourth inline style, , which is block and would still break the line. Hence p{display:inline}.
Affects 18 pages: 7 program, 9 story, our-history, 2026-prayer-reporting-night.
=========================================================================== */
:root:root .crumbs > .elementor-widget{display:contents;}
:root:root .crumbs p{display:inline;margin:0;}
/* ===========================================================================
PROGRAM PAGE HEROES (.prog-hero) - Jason approved 2026-08-25.
Every image was reviewed as a thumbnail before being proposed, and checked
against the images already on its own page so nothing repeats:
gymblast IMG_9108 page had F9AF4A88...
yfchl IMG_0007 page had yfchl+group+shot+2022
gateway-youth snack page had dodgeball
the-drop-in Drop+In page had IMG_5828
stepping-stones IMG_1011 page had AdobeStock_133138715
disorganized-sports IMG_1817 page had 12440516_...
the-zone 20251022_190923 (see note below)
the-zone RESOLVED 2026-08-25 (Jason). It previously borrowed Gateway's
Bible+study photo and this comment flagged it as the weakest match in the set.
It now uses 20251022_190923 - a real photo of The Zone (pool table, foosball,
youth in the room) that matches the page copy. That photo used to sit in the
.prog-media band directly below this hero; the band is now removed (see the
PROG-MEDIA block further down), so promoting it here repeats nothing.
Source 2500x1408 -> 1920w, gaussian-blur 0x0.7 before encode (noisy indoor
frame: 200KB -> 126KB, invisible under the scrim). Old file kept at
_secure_offweb/yfc-static-bak/prog-the-zone.borrowed-gateway.webp.
Position center 44%: faces and the counter group sit at 28-55% of frame
height, so ceiling above and empty carpet below are cropped out.
All downloaded to uploads/yfc-static (never hotlinked), 1920w WebP, 83-199 KB.
Scrim matches .prog-hero's own black gradient so the design still reads as
itself. .e-con is required or Elementor's container lazy-load blanks them.
=========================================================================== */
:root:root body.page-id-156 .prog-hero.e-con{background-image:linear-gradient(160deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.66) 100%),url(/wp-content/uploads/yfc-static/prog-gymblast.webp);background-size:cover;background-position:center 33%;background-repeat:no-repeat;}
:root:root body.page-id-160 .prog-hero.e-con{background-image:linear-gradient(160deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.66) 100%),url(/wp-content/uploads/yfc-static/prog-yfchl.webp);background-size:cover;background-position:center 42%;background-repeat:no-repeat;}
:root:root body.page-id-155 .prog-hero.e-con{background-image:linear-gradient(160deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.66) 100%),url(/wp-content/uploads/yfc-static/prog-gateway-youth.webp);background-size:cover;background-position:center 38%;background-repeat:no-repeat;}
:root:root body.page-id-158 .prog-hero.e-con{background-image:linear-gradient(160deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.66) 100%),url(/wp-content/uploads/yfc-static/prog-the-drop-in.webp);background-size:cover;background-position:center 34%;background-repeat:no-repeat;}
:root:root body.page-id-157 .prog-hero.e-con{background-image:linear-gradient(160deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.66) 100%),url(/wp-content/uploads/yfc-static/prog-stepping-stones.webp);background-size:cover;background-position:center 45%;background-repeat:no-repeat;}
:root:root body.page-id-154 .prog-hero.e-con{background-image:linear-gradient(160deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.66) 100%),url(/wp-content/uploads/yfc-static/prog-disorganized-sports.webp);background-size:cover;background-position:center 40%;background-repeat:no-repeat;}
:root:root body.page-id-159 .prog-hero.e-con{background-image:linear-gradient(160deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.66) 100%),url(/wp-content/uploads/yfc-static/prog-the-zone.webp);background-size:cover;background-position:center 44%;background-repeat:no-repeat;}
/* ===========================================================================
PROG-MEDIA - the full-bleed band under the programme heroes. REMOVED.
Jason 2026-08-25: "get rid of ALL images that are butting up below the hero
header."
The static's .prog-body is padding:0 and .prog-media is width:100%;height:380px
with object-fit:cover, so the band always sat flush against .prog-hero. That was
fine while .prog-hero was flat black - the band WAS the page's photo. Once the
heroes gained background photos earlier the same day, every programme page
rendered two different full-bleed photos stacked with zero gap. The defect was
introduced by our own hero work, not inherited from the static, and the
no-reuse rule is what guaranteed the two photos would differ.
Removed from PAGE DATA on all 7 pages (154-160) by remove-prog-media.php, which
is idempotent and backed up to _secure_offweb/progmedia-bak-20260825-204534/.
That also retired 7 hotlinked Squarespace URLs.
The rule below is only a BACKSTOP: page-*.css is generated, so re-running the
converter on a programme page would re-insert the band. This keeps it invisible
if that happens. It is deliberately NOT the primary fix - display:none would
still ship the markup and the hotlink.
TO REVERT: delete this block AND restore the page data from the backup above.
=========================================================================== */
:root:root .prog-media{display:none;}
/* ===========================================================================
PAGE HEROES (.page-hero) - BATCH 1, 2026-08-25. The 11 that had no image.
(our-team 150, become-a-volunteer 145 and become-a-board-member 143 were
done earlier and are above.)
Same construction as the programme heroes: photo layered UNDER a scrim in one
declaration so contrast is guaranteed, .e-con on every selector for the
lazy-load opt-out, page-scoped because page sheets are generated.
SCRIM COLOUR was read from each page's own static sheet, not assumed:
9 pages .page-hero is linear-gradient(160deg,var(--black),#000) -> DARK
donate 147 and ways-to-help 172 are
linear-gradient(120deg,var(--red),#ad2119) -> RED
NOTE: handoff 3 section 6.1 says donate is the ONLY red hero. That is wrong -
ways-to-help is red too. Both are corrected here.
RED VALUE - SETTLED 2026-08-25 by the brand guidelines, after I got it
backwards twice. The guidelines specify PANTONE RED 032 C / #EF3742 /
239,55,66. The BUILD matches; Anna's static (#E8362C) is the deviation. All
scrims here use 239,55,66, and the 148 stale rgba literals in the page sheets
and static sources were corrected to match. No longer an open question.
IMAGE SOURCING: 517 unused live-site images were filtered to 279 landscape
masters >=1000w. Handoff 3 section 6.3 claims only 15 are usable - that was
measured on the STORED srcset width; re-requesting at ?format=1000w returns
the master, so the real pool is far bigger. 110 of the 279 turned out to be a
single Christmas photo-booth series against a red curtain and were discarded
on sight.
Two picks were killed by a pixel comparison against the existing assets:
'Drop In.jpg' IS prog-the-drop-in.webp and 'IMG_1011.jpg' IS
prog-stepping-stones.webp (RMSE 0 both). Filename never proves distinctness -
compare pixels before adding an image.
All 11 are local WebP in uploads/yfc-static, 54-170 KB, resized with '1920x>'
so a smaller master is never upscaled.
JUDGEMENT CALL: privacy-policy (153) and terms-conditions (171) are legal
pages with no imagery that is genuinely 'relevant'. They get deliberately
quiet, neutral frames. Easy to revert - delete those two rules and the heroes
go back to flat black.
TO REVERT any one: delete its rule. TO REVERT the batch: delete this block.
=========================================================================== */
/* about (142) - youth group sitting together - 'who we are'. Source master is only 1080w so it is NOT upscaled (same rule as the 1440 team photo). */
:root:root body.page-id-142 .page-hero.e-con{
background-image:linear-gradient(160deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.66) 100%),
url(/wp-content/uploads/yfc-static/hero-about-group.webp);
background-size:cover;background-position:center 35%;background-repeat:no-repeat;}
/* become-a-staff-member (144) - staff and volunteers working the community kitchen - what joining the team looks like. */
:root:root body.page-id-144 .page-hero.e-con{
background-image:linear-gradient(160deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.66) 100%),
url(/wp-content/uploads/yfc-static/hero-staff-kitchen.webp);
background-size:cover;background-position:center 46%;background-repeat:no-repeat;}
/* contact (146) - the YFC building. REPLACED 2026-08-25 (Jason): the previous
image was a riverbank shot that is an ENGAGEMENT photo of a staff member -
a real picture, but nothing to do with contacting the organisation.
P=74% is the only crop that holds the entrance, the YFC banner AND the
"Youth For Christ 1338" address sign; at 48% you get roof and sky, at 58%
the sign is still below the frame. Reuses the existing asset (also used as
an inset photo on become-a-board-member, a different page) so this costs
ZERO new bytes. hero-contact-riverbank.webp is now unreferenced - delete it
if this sticks. */
:root:root body.page-id-146 .page-hero.e-con{
background-image:linear-gradient(160deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.66) 100%),
url(/wp-content/uploads/yfc-static/yfc-building.webp);
background-size:cover;background-position:center 74%;background-repeat:no-repeat;}
/* donate (147) - mentors and kids mid-activity around the table: PROGRAM delivery, which is
what a cash gift actually funds. Replaced hero-donate-goods.webp (stacked diapers, wipes and
store bags) on Jason's call 2026-08-28 - that photo reads as a GOODS drive, and carried
third-party brand packaging on the page that asks for money.
Focal band: faces sit at 10-82% of the frame, densest 20-50%. Position 32% was picked by
simulating the real cover crop at 1440 AND 2560 against the 553px hero (see the focal-band
rule) - it is the only one of 32/38/44% that keeps every face at least partly in frame at
2560, where the visible slice narrows to 38% of the image. */
:root:root body.page-id-147 .page-hero.e-con{
background-image:linear-gradient(160deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.66) 100%),
url(/wp-content/uploads/yfc-static/volunteer-mentoring-kids.webp);
background-size:cover;background-position:center 32%;background-repeat:no-repeat;}
/* events (148) - a banquet hall set for service - the page's main event is the Fall Fundraising Banquet. */
:root:root body.page-id-148 .page-hero.e-con{
background-image:linear-gradient(160deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.66) 100%),
url(/wp-content/uploads/yfc-static/hero-events-banquet.webp);
background-size:cover;background-position:center 58%;background-repeat:no-repeat;}
/* our-vision (151) - a figure carried across open prairie under a big sky - horizon reads as vision. */
:root:root body.page-id-151 .page-hero.e-con{
background-image:linear-gradient(160deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.66) 100%),
url(/wp-content/uploads/yfc-static/hero-vision-prairie.webp);
background-size:cover;background-position:center 38%;background-repeat:no-repeat;}
/* pray (152) - three figures arm in arm at a fence against sky. A silhouette is what survives a heavy scrim. */
:root:root body.page-id-152 .page-hero.e-con{
background-image:linear-gradient(160deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.66) 100%),
url(/wp-content/uploads/yfc-static/hero-pray-friends.webp);
background-size:cover;background-position:center 55%;background-repeat:no-repeat;}
/* privacy-policy (153) - deliberately neutral aerial. A legal page has no relevant imagery; see the note below. */
:root:root body.page-id-153 .page-hero.e-con{
background-image:linear-gradient(160deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.66) 100%),
url(/wp-content/uploads/yfc-static/hero-privacy-aerial.webp);
background-size:cover;background-position:center 50%;background-repeat:no-repeat;}
/* programs (161) - an indoor skate session - the widest single frame of programme activity. */
:root:root body.page-id-161 .page-hero.e-con{
background-image:linear-gradient(160deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.66) 100%),
url(/wp-content/uploads/yfc-static/hero-programs-skatepark.webp);
background-size:cover;background-position:center 33%;background-repeat:no-repeat;}
/* terms-conditions (171) - a YFC building in winter. Neutral and institutional; see the note below. */
:root:root body.page-id-171 .page-hero.e-con{
background-image:linear-gradient(160deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.66) 100%),
url(/wp-content/uploads/yfc-static/hero-terms-building.webp);
background-size:cover;background-position:center 50%;background-repeat:no-repeat;}
/* ways-to-help (172) - volunteers and youth together outdoors at the skatepark. RED scrim: this hero is red in the static. */
:root:root body.page-id-172 .page-hero.e-con{
background-image:linear-gradient(160deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.66) 100%),
url(/wp-content/uploads/yfc-static/hero-waystohelp-group.webp);
background-size:cover;background-position:center 38%;background-repeat:no-repeat;}
/* ===========================================================================
BACKGROUND-POSITION ON WIDE VIEWPORTS - the rule, learned the hard way.
Jason 2026-08-25, on our-team / become-a-volunteer / pray / programs:
"on largest screens the image is too high (cuts off too many faces/heads)...
watch the patterns of larger devices rendering hero header images too high or
low which misses the image focus."
WHY IT HAPPENS. With background-size:cover on a hero of FIXED height, the
wider the viewport the more the image is scaled up, so the visible slice of
the image gets SHORTER. Measured on our-team (1440x1440 image, 521px hero):
viewport visible band of the image band height
1280px 35.0% - 75.7% 40.7%
1440px 37.7% - 73.8% 36.2%
1920px 43.0% - 70.1% 27.1%
2560px 47.0% - 67.3% 20.3%
3000px 48.8% - 66.1% 17.4%
The band CONVERGES ON P as the viewport widens. So a P tuned by eye at 1440,
where the band is wide and forgiving, silently crops to a 20% slice at 2560
and throws the subject out of frame. our-team's P=59% was picked to fix a
1440 view; at 2560 it showed torsos with every head cut off.
THE RULE: set P to the fraction of the IMAGE HEIGHT where the focal content
sits - faces, almost always - NOT to whatever looks right at one width. P is
the only point guaranteed to survive every viewport. No media query is needed
and none is used here: a correct P is width-independent by construction, and
a wrong one cannot be rescued by nudging.
HOW TO CHECK before committing a position:
1. Render the image with a 10% ruler and read the focal band off it.
2. Simulate the real crop at 1440 AND 2560, and look at both.
Both are short ImageMagick scripts run on the box (ruler.sh / sim.sh in the
session scratch - they are NOT durable, re-create them).
This pass re-set 10 positions. SIX were not reported by Jason; they were found
by auditing all 21 heroes at 2560 - same class of defect, on pages he had not
reached. Left alone as already correct: prog-gateway-youth 38,
prog-the-drop-in 34, prog-yfchl 42, prog-the-zone 44,
prog-disorganized-sports 40, prog-stepping-stones 45 (hands close-up, no
faces), donate 50, events 58, privacy 50, terms 50, contact 48.
=========================================================================== */
/* ===========================================================================
CTA / BOTTOM-BAND IMAGERY - BATCH 2, 2026-08-25. 14 placements.
SCOPE. 29 CTA-type sections exist; 5 were already done. Of the 24 left, 20
sit on --gray-light with BLACK text, so they need the LIGHT scrim - the case
section 6.1 flags, because a dark scrim there makes black body copy
unreadable. At .93/.87 the photo is only 7-13% visible, so Jason's call
(option 2, 2026-08-25) was to spend that only where the CTA is actually
prominent: our-team, the 7 programme pages and the 2026 prayer-night page.
THE 9 STORY-PAGE .cta SECTIONS ARE DELIBERATELY LEFT FLAT GREY - not missed.
Those pages already carry a portrait and a hero, and 9 near-invisible panels
would have cost ~1.5 MB for an effect nobody can see.
NO NEW ASSETS. Every image here is one already in uploads/yfc-static, which
is allowed for CTAs (heroes may not repeat an image on their own page; CTAs
may reuse, same exclusion). So this batch adds ZERO bytes and every file is
already warm in cache.
The 7 programme CTAs deliberately share ONE image. Their copy is
byte-identical ("Help This Program Keep Going"), so an identical treatment is
the honest one - varying the photo would imply a difference that is not there.
SCRIM per section, read from each page's own static sheet:
--gray-light + black text -> LIGHT rgba(244,243,241,.93 -> .87)
red + white text -> RED rgba(239,55,66,.90) -> rgba(173,33,25,.93)
black + white text -> DARK rgba(0,0,0,.80 -> .66)
POSITIONS follow the wide-viewport rule documented at the end of this file.
A .cta is 512px tall - within 9px of a hero - so it crops just as tightly on
a wide screen. Focal bands read off a ruler: cta-boardroom-casual faces
25-48% (P=36), cta-volunteers-group faces 25-55% (P=40), cta-volunteer-
mentoring faces 12-50% (P=30), hero-donate-goods fills the frame (P=50).
.e-con is REQUIRED here and is doing real work: unlike the heroes, these are
the LAST container on the page, so Elementor's lazy-load rule genuinely
applies to them. Verified all 14 carry `e-con` as its own class token (not
just the `e-con-full` substring).
TO REVERT one: delete its rule. TO REVERT the batch: delete this block.
=========================================================================== */
/* our-team (150) - "Join Our Board" - a board around a table. Faces 25-48%, so P=36% is their centre. */
:root:root body.page-id-150 .cta.e-con{
background-image:linear-gradient(160deg,rgba(244,243,241,.93) 0%,rgba(244,243,241,.87) 100%),
url(/wp-content/uploads/yfc-static/cta-boardroom-casual.webp);
background-size:cover;background-position:center 36%;background-repeat:no-repeat;}
/* program-disorganized-sports (154) */
:root:root body.page-id-154 .cta.e-con{
background-image:linear-gradient(160deg,rgba(244,243,241,.93) 0%,rgba(244,243,241,.87) 100%),
url(/wp-content/uploads/yfc-static/cta-volunteers-group.webp);
background-size:cover;background-position:center 40%;background-repeat:no-repeat;}
/* program-gateway-youth (155) */
:root:root body.page-id-155 .cta.e-con{
background-image:linear-gradient(160deg,rgba(244,243,241,.93) 0%,rgba(244,243,241,.87) 100%),
url(/wp-content/uploads/yfc-static/cta-volunteers-group.webp);
background-size:cover;background-position:center 40%;background-repeat:no-repeat;}
/* program-gymblast (156) */
:root:root body.page-id-156 .cta.e-con{
background-image:linear-gradient(160deg,rgba(244,243,241,.93) 0%,rgba(244,243,241,.87) 100%),
url(/wp-content/uploads/yfc-static/cta-volunteers-group.webp);
background-size:cover;background-position:center 40%;background-repeat:no-repeat;}
/* program-stepping-stones (157) */
:root:root body.page-id-157 .cta.e-con{
background-image:linear-gradient(160deg,rgba(244,243,241,.93) 0%,rgba(244,243,241,.87) 100%),
url(/wp-content/uploads/yfc-static/cta-volunteers-group.webp);
background-size:cover;background-position:center 40%;background-repeat:no-repeat;}
/* program-the-drop-in (158) */
:root:root body.page-id-158 .cta.e-con{
background-image:linear-gradient(160deg,rgba(244,243,241,.93) 0%,rgba(244,243,241,.87) 100%),
url(/wp-content/uploads/yfc-static/cta-volunteers-group.webp);
background-size:cover;background-position:center 40%;background-repeat:no-repeat;}
/* program-the-zone (159) */
:root:root body.page-id-159 .cta.e-con{
background-image:linear-gradient(160deg,rgba(244,243,241,.93) 0%,rgba(244,243,241,.87) 100%),
url(/wp-content/uploads/yfc-static/cta-volunteers-group.webp);
background-size:cover;background-position:center 40%;background-repeat:no-repeat;}
/* program-yfchl (160) */
:root:root body.page-id-160 .cta.e-con{
background-image:linear-gradient(160deg,rgba(244,243,241,.93) 0%,rgba(244,243,241,.87) 100%),
url(/wp-content/uploads/yfc-static/cta-volunteers-group.webp);
background-size:cover;background-position:center 40%;background-repeat:no-repeat;}
/* 2026-prayer-reporting-night (141) - "Be Part of the Next Chapter" - give, pray, show up. Page carries no images at all. */
:root:root body.page-id-141 .cta.e-con{
background-image:linear-gradient(160deg,rgba(244,243,241,.93) 0%,rgba(244,243,241,.87) 100%),
url(/wp-content/uploads/yfc-static/cta-volunteer-mentoring.webp);
background-size:cover;background-position:center 30%;background-repeat:no-repeat;}
/* become-a-volunteer (145) - RED. Page already has hero-volunteer-gym, cta-volunteer-mentoring (apply-section) and volunteer-mentoring-kids, so this is the only volunteer frame left. */
:root:root body.page-id-145 .cta.e-con{
background-image:linear-gradient(120deg,rgba(239,55,66,.90) 0%,rgba(173,33,25,.93) 100%),
url(/wp-content/uploads/yfc-static/cta-volunteers-group.webp);
background-size:cover;background-position:center 40%;background-repeat:no-repeat;}
/* our-history (149) - RED. "Be Part of the Next Chapter" - young people today, against seven archival photos above it. */
:root:root body.page-id-149 .cta.e-con{
background-image:linear-gradient(120deg,rgba(239,55,66,.90) 0%,rgba(173,33,25,.93) 100%),
url(/wp-content/uploads/yfc-static/hero-waystohelp-group.webp);
background-size:cover;background-position:center 38%;background-repeat:no-repeat;}
/* pray (152) - RED. .signup-wrap, not .cta. */
:root:root body.page-id-152 .signup-wrap.e-con{
background-image:linear-gradient(120deg,rgba(239,55,66,.90) 0%,rgba(173,33,25,.93) 100%),
url(/wp-content/uploads/yfc-static/cta-volunteer-mentoring.webp);
background-size:cover;background-position:center 30%;background-repeat:no-repeat;}
/* about (142) - DARK. "Help Youth Connect With Jesus" - support. Goods fill the frame so position is not critical. */
:root:root body.page-id-142 .cta.e-con{
background-image:linear-gradient(160deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.66) 100%),
url(/wp-content/uploads/yfc-static/hero-donate-goods.webp);
background-size:cover;background-position:center 50%;background-repeat:no-repeat;}
/* events (148) - DARK. .events-note, not .cta - the newsletter sign-up band. */
:root:root body.page-id-148 .events-note.e-con{
background-image:linear-gradient(160deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.66) 100%),
url(/wp-content/uploads/yfc-static/cta-volunteer-mentoring.webp);
background-size:cover;background-position:center 30%;background-repeat:no-repeat;}
/* ===========================================================================
STORY-PAGE HEROES (.story-hero) - BATCH 3, 2026-08-25. All 9.
THE PROBLEM THIS SOLVES. The image genuinely 'relevant' to a story page is
that person's photo - which is already ON the page, in the 186px portrait
circle, so Jason's own no-reuse rule excluded it. Resolved by using the
PROGRAMME each person runs. Six map cleanly. Shelby only became mappable
after the-zone's hero was swapped to a real Zone photo earlier today; while
it was still borrowing Gateway's Bible+study shot, using it would have put
the identical image behind both Brendan's and Shelby's heroes.
The remaining three - Jeff (Executive Director), Sarah (Administrative
Director) and Carmen (YFC OKANAGAN, not a Saskatoon programme) - have no
programme to borrow, so they share the staff group photo. That also happens
to be the hero of /our-team/, which is exactly where the breadcrumb on these
pages points (Home / Our Team / Name), so the reuse reads as continuity
rather than repetition.
DEEPER SCRIM than the other dark heroes: .86 -> .74 rather than .80 -> .66.
A .story-hero is not an empty band - it already has a 186px portrait with a
white ring and a red orb as its subject. At the standard scrim the photo
competes with the portrait; at this one it reads as texture behind it.
If Jason wants the photo more present, raise these two numbers together.
Positions are each image's focal band, already established this session, and
are unchanged from where the same image sits as a programme hero.
TO REVERT: delete this block.
=========================================================================== */
/* story-brendan-schultz (162) - Gateway Youth Director */
:root:root body.page-id-162 .story-hero.e-con{
background-image:linear-gradient(160deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.74) 100%),
url(/wp-content/uploads/yfc-static/prog-gateway-youth.webp);
background-size:cover;background-position:center 38%;background-repeat:no-repeat;}
/* story-evan-peters (164) - YFCHL Director */
:root:root body.page-id-164 .story-hero.e-con{
background-image:linear-gradient(160deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.74) 100%),
url(/wp-content/uploads/yfc-static/prog-yfchl.webp);
background-size:cover;background-position:center 42%;background-repeat:no-repeat;}
/* story-kristin-duchak (166) - Stepping Stones */
:root:root body.page-id-166 .story-hero.e-con{
background-image:linear-gradient(160deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.74) 100%),
url(/wp-content/uploads/yfc-static/prog-stepping-stones.webp);
background-size:cover;background-position:center 45%;background-repeat:no-repeat;}
/* story-mitchell-diesen (167) - YFCHL / GymBlast Director */
:root:root body.page-id-167 .story-hero.e-con{
background-image:linear-gradient(160deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.74) 100%),
url(/wp-content/uploads/yfc-static/prog-gymblast.webp);
background-size:cover;background-position:center 33%;background-repeat:no-repeat;}
/* story-shelby-goertzen (169) - The Zone Director (Hague) */
:root:root body.page-id-169 .story-hero.e-con{
background-image:linear-gradient(160deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.74) 100%),
url(/wp-content/uploads/yfc-static/prog-the-zone.webp);
background-size:cover;background-position:center 44%;background-repeat:no-repeat;}
/* story-tyler-stein (170) - Community Outreach */
:root:root body.page-id-170 .story-hero.e-con{
background-image:linear-gradient(160deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.74) 100%),
url(/wp-content/uploads/yfc-static/prog-the-drop-in.webp);
background-size:cover;background-position:center 34%;background-repeat:no-repeat;}
/* story-carmen-pahl (163) - YFC Okanagan Program Coordinator */
:root:root body.page-id-163 .story-hero.e-con{
background-image:linear-gradient(160deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.74) 100%),
url(/wp-content/uploads/yfc-static/hero-team-group.webp);
background-size:cover;background-position:center 44%;background-repeat:no-repeat;}
/* story-jeff-siemens (165) - Executive Director */
:root:root body.page-id-165 .story-hero.e-con{
background-image:linear-gradient(160deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.74) 100%),
url(/wp-content/uploads/yfc-static/hero-team-group.webp);
background-size:cover;background-position:center 44%;background-repeat:no-repeat;}
/* story-sarah-neufeld (168) - Administrative Director */
:root:root body.page-id-168 .story-hero.e-con{
background-image:linear-gradient(160deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.74) 100%),
url(/wp-content/uploads/yfc-static/hero-team-group.webp);
background-size:cover;background-position:center 44%;background-repeat:no-repeat;}
/* ===========================================================================
THE LAST TWO HEROES - .history-hero and .listen-hero. Completes the sweep:
32 heroes now carry imagery (14 .page-hero + 9 .story-hero + 7 .prog-hero +
these 2). Both are black with white text in the static, so DARK scrim.
our-history (149) uses the BUILDING, not an archival photo, and that is a
forced choice worth recording: all seven archival images are already on the
page, and the one perfect frame - a man at a YOUTH FOR CHRIST podium,
explore-history-of-yfc.webp - is only 614x439. I checked the Squarespace
masters: history_2_2 is 424x269, and the rest of the archival set is the
same order. THERE IS NO HIGH-RESOLUTION HISTORICAL IMAGE TO BE HAD; do not
spend another session looking for one. The building is the honest
substitute - it is the ministry's actual home.
It is cropped at 55%, deliberately different from /contact/'s 74% of the
same file: contact frames the entrance and the address sign, this frames the
building against sky, so the two pages do not read as the same picture.
2026-prayer-reporting-night (141) is a prayer-and-reporting night recording,
so it takes the prayer frame already used on /pray/ - different page, which
is all the no-reuse rule asks.
=========================================================================== */
/* our-history (149) - see note above; NOT an archival photo, and not for want of trying. */
:root:root body.page-id-149 .history-hero.e-con{
background-image:linear-gradient(160deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.66) 100%),
url(/wp-content/uploads/yfc-static/yfc-building.webp);
background-size:cover;background-position:center 55%;background-repeat:no-repeat;}
/* 2026-prayer-reporting-night (141) - prayer night. */
:root:root body.page-id-141 .listen-hero.e-con{
background-image:linear-gradient(160deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.66) 100%),
url(/wp-content/uploads/yfc-static/hero-pray-friends.webp);
background-size:cover;background-position:center 55%;background-repeat:no-repeat;}
/* ===========================================================================
WAYS-TO-HELP CARDS - 2026-08-25 (Jason: "update all the cards ... with the
same or similar transparent background/overlay images you used for other
pages"). Five .link-card blocks, each previewing the page it links to.
THE GEOMETRY IS DIFFERENT HERE AND IT FLIPS WHICH AXIS MATTERS.
A card is 368x416 - PORTRAIT, aspect 0.89 - while every source image is
landscape (~1.5). With background-size:cover the image is scaled to fill the
card's HEIGHT and overflows horizontally, so background-position-Y does
NOTHING and X is the only control. That is the exact inverse of the heroes,
where the container is wider than the image and only Y matters. Only ~59% of
each image's width survives the crop, which is why hero-volunteer-gym needs
X=78%: its subject lives at 62-100% and a centre crop loses him completely.
Each card carries a stable per-card class (wth-card-*) added to the page data
rather than being targeted by :nth-of-type, so re-ordering the cards cannot
silently swap the images.
.e-no-lazyload is REQUIRED: the cards are nth-of-type 1-5, and Elementor's
suppression rule is n+4 normally, n+3 under max-height:1024px and n+2 under
640px - so on a short viewport even the second card is in range.
TO REVERT: delete this block (the wth-card-* classes are harmless if unused).
=========================================================================== */
/* wth-card-donate - FEATURED card - red gradient, white text. Goods fill the frame so X is not critical. */
:root:root body.page-id-172 .link-card.wth-card-donate.e-con{
background-image:linear-gradient(120deg,rgba(239,55,66,.90) 0%,rgba(173,33,25,.93) 100%),
url(/wp-content/uploads/yfc-static/hero-donate-goods.webp);
background-size:cover;background-position:50% center;background-repeat:no-repeat;}
/* wth-card-volunteer - the volunteer with the clipboard sits at 62-100% of the frame; at 50% he is cropped out entirely. */
:root:root body.page-id-172 .link-card.wth-card-volunteer.e-con{
background-image:linear-gradient(160deg,rgba(244,243,241,.93) 0%,rgba(244,243,241,.87) 100%),
url(/wp-content/uploads/yfc-static/hero-volunteer-gym.webp);
background-size:cover;background-position:78% center;background-repeat:no-repeat;}
/* wth-card-staff - the working group sits at 28-55%. */
:root:root body.page-id-172 .link-card.wth-card-staff.e-con{
background-image:linear-gradient(160deg,rgba(244,243,241,.93) 0%,rgba(244,243,241,.87) 100%),
url(/wp-content/uploads/yfc-static/hero-staff-kitchen.webp);
background-size:cover;background-position:42% center;background-repeat:no-repeat;}
/* wth-card-board - people are spread evenly across the frame. */
:root:root body.page-id-172 .link-card.wth-card-board.e-con{
background-image:linear-gradient(160deg,rgba(244,243,241,.93) 0%,rgba(244,243,241,.87) 100%),
url(/wp-content/uploads/yfc-static/cta-boardroom-casual.webp);
background-size:cover;background-position:50% center;background-repeat:no-repeat;}
/* wth-card-pray - subjects are centred in the re-cropped file (see below). */
:root:root body.page-id-172 .link-card.wth-card-pray.e-con{
background-image:linear-gradient(160deg,rgba(244,243,241,.93) 0%,rgba(244,243,241,.87) 100%),
url(/wp-content/uploads/yfc-static/hero-pray-friends.webp);
background-size:cover;background-position:50% center;background-repeat:no-repeat;}
/* hero-pray-friends was RE-CROPPED 1920x1280 -> 1500x1280 on 2026-08-25 (Jason:
"needs to have the subjects in the image centered ... if there's no room on the
left side of the image then ignore"). There is almost no margin on the LEFT -
the nearest man starts at x=8% - but the right third is empty sky, so the
subjects were centred by trimming 420px off the RIGHT instead: their centre
moved from 38% to 48.7%. background-position-X could NOT have done this: on a
wide hero the image fills the width exactly, so there is no horizontal
overflow for X to move. Original kept at
_secure_offweb/yfc-static-bak/hero-pray-friends.uncropped-1920.webp.
Vertical P=55% re-checked against the new 1.17 aspect: heads still inside the
band at 1440 and 2560. */
/* ===========================================================================
BRAND RED + THE DONATE CARD'S CONTRAST - 2026-08-25.
THE GUIDELINES SETTLE IT. YFC_BrandGuidelines_2019_V13-2.pdf, Primary Colours:
PANTONE RED 032 C CMYK 0/93/76/0 HEX #EF3742 RGB 239/55/66
So the BUILD was right all along and Anna's static (#E8362C) is the deviation.
Corrected everywhere: --red plus 148 hardcoded rgba() literals across all 33
page sheets AND all 33 static sources, so they cannot drift apart again. Those
literals - .btn-primary / .nav-donate box-shadows, the decorative red orb on
every hero (::before), and the icon/tag tints - never moved when --red did, so
the site had been rendering two different reds side by side.
THE DONATE CARD (/ways-to-help/) still failed WCAG AA and could not be fixed
by darkening the red, because the red is now fixed by the guidelines:
#FFE4E1 on #EF3742 ... 3.29:1 (the original design, before any imagery)
#FFFFFF on #EF3742 ... 3.97:1 (still short of the 4.5:1 normal-text bar)
The paragraph was .9rem. Root font-size is 150%, so that is 21.6px - just under
WCAG's 24px large-text threshold, which is why it needed 4.5:1 at all.
Fix: white at 1rem (=24px) clears the large-text bar, where the requirement is
3:1 and white measures 3.97:1. The brand red is preserved EXACTLY.
Only the featured card changes; the other four are dark-on-light and already
pass comfortably.
TO REVERT: delete the two declarations below.
=========================================================================== */
:root:root .link-card.featured p{color:#fff;font-size:1rem;}
/* ===========================================================================
ACCESSIBILITY - the two contrast failures Lighthouse reports on every page.
Measured 2026-08-25; both are near-misses, which is why they survived review.
1. .footer-legal a was #777 on white = 4.478:1 against a 4.5:1 requirement.
It failed by 0.022. Now #747474 = 4.674:1 - a barely perceptible darkening
that clears the bar with margin rather than sitting on it.
2. .nav-donate PASSES on desktop and FAILS on mobile, which is why it looked
fine in review. White on the brand red is 3.97:1. At the desktop size
(.8rem = 19.2px, weight 700) that is WCAG LARGE text, so the requirement is
3:1 and it passes. The mobile rules shrank it to .72rem (17.28px) and .68rem
(16.32px) - both under the 18.66px bold large-text threshold - so the
requirement jumps to 4.5:1 and 3.97 fails. PSI tests mobile, so every page
scored the failure.
Fixed by keeping 19.2px at every breakpoint rather than by changing the red,
which is fixed by the brand guidelines (#EF3742). 18.72px would also clear
18.66, but by 0.06px - too close for sub-pixel rounding to be safe.
Padding stays reduced on mobile, so the button is not much larger.
=========================================================================== */
:root:root .footer-legal a{color:#747474;}
@media (max-width:760px){:root:root .nav-donate{font-size:.8rem;}}
@media (max-width:400px){:root:root .nav-donate{font-size:.8rem;}}
/* ===========================================================================
HEADING-LEVEL FIXES and the CSS that must travel with them - 2026-08-25.
axe reports "Heading elements are not in a sequentially-descending order" on
every page. Two separate causes:
(a) the shared footer used h4 while every page's last content heading is h2
(b) our-vision, become-a-staff-member and program-stepping-stones jump
h1 -> h3 in their own content (inherited from the static)
CHANGING A HEADING'S TAG DETACHES IT FROM EVERY TAG-SCOPED RULE. That is the
same hazard as section 3.6, and it bit immediately: retagging the footer h4s
to h3 orphaned `.footer-col h4`, so the footer headings silently rendered at
42px Anton instead of 19.7px Poppins. Caught by measuring, not by looking.
So every retag below is paired with a rule that reproduces the original
declarations verbatim for the new tag.
=========================================================================== */
/* REGRESSION FIX: footer h4 -> h3 orphaned `.footer-col h4`. Same declarations. */
:root:root .footer-col h3{font-family:'Poppins',sans-serif;font-weight:700;
text-transform:uppercase;letter-spacing:1px;font-size:.82rem;
color:var(--black);margin-bottom:20px;}
/* our-vision: .pillar-card h3 -> h2 */
:root:root .pillar-card h2{font-size:1.3rem;margin-bottom:14px;}
/* become-a-staff-member: .opening-card h3 -> h2 */
:root:root .opening-card h2{font-family:'Poppins',sans-serif;font-weight:700;
font-size:1.2rem;text-transform:none;letter-spacing:0;margin-bottom:12px;}
/* program-stepping-stones: .help-block h3 -> h2, and .feature-card h4 -> h3 */
:root:root .help-block h2{font-family:'Poppins',sans-serif;font-weight:700;
text-transform:uppercase;letter-spacing:1px;font-size:.9rem;margin-bottom:14px;}
:root:root .feature-card h3{font-family:'Poppins',sans-serif;font-weight:700;
text-transform:none;letter-spacing:0;font-size:.98rem;margin-bottom:8px;color:var(--red);}
/* ===========================================================================
TWO CONTRAST FIXES, one of which is a REAL VISIBLE BUG rather than a warning.
1. .explore-cta ("Learn more ->") was `color:#fff` with NO background anywhere
in its ancestor chain - white text on the white page. Ratio 1:1. It was
INVISIBLE on both Explore cards, and had been since that band was added
(section 6.4, WP-only). The accessibility audit is what surfaced it.
Brand red gives 3.97:1 at 18.2px bold, which is WCAG large text (3:1).
2. The footer's grey #777 text measured 4.478:1 against a 4.5 requirement.
The earlier fix only covered `.footer-legal a`; the copyright line, the
"Powered by Sojourn Digital" line and .footer-legal itself are also #777.
#747474 = 4.674:1.
=========================================================================== */
:root:root .explore-cta{color:var(--red);}
:root:root .footer-legal,
:root:root .footer-legal a,
:root:root .footer-bottom,
:root:root .footer-bottom span,
:root:root .footer-bottom a{color:#747474;}
/* ===========================================================================
/donate/ "Give by Fund" - the first Answer the Call
, was checked
and needs nothing - it already inherits white from its section, so the inline
declaration was redundant. Deliberately not touched.
Must outrank Elementor's `.elementor-widget-heading .elementor-heading-title`,
hence :root:root and targeting the title inside the tagged widget.
=========================================================================== */
:root:root .yfc-h2-sub .elementor-heading-title,
:root:root .yfc-h2-sub h2{font-size:1.6rem;margin-bottom:24px;}
:root:root .yfc-h2-small .elementor-heading-title,
:root:root .yfc-h2-small h2{font-size:1.6rem;}
/* Rob Neufeld's card on /become-a-board-member/. He is the CONTACT on the live
page, not one of the six board members in our-team's Board of Directors list,
so he is labelled "Board Contact" rather than shown as a board member. Sits on
the light-grey .cta, whose scrim keeps black text at ~19:1. */
:root:root .rob-card{margin:0 auto 24px;text-align:center;max-width:150px;}
:root:root .rob-card img{width:116px;height:116px;border-radius:50%;object-fit:cover;
box-shadow:0 10px 26px rgba(0,0,0,.20);}
:root:root .rob-card figcaption{margin-top:11px;font-size:.84rem;line-height:1.4;}
:root:root .rob-card strong{display:block;font-weight:700;color:var(--black);}
:root:root .rob-card span{color:#5f5f5f;font-size:.76rem;}
/* our-vision "Answer the Call With Us" + become-a-staff-member "Ready to Join
Our Staff" - Jason's brief 2026-08-25. Both are red `.cta` sections with white
text, so both get the red scrim with the photo faint behind it, matching the
treatment already on /programs/.
Neither image appears elsewhere on its own page: cta-volunteers-group is on
/programs/, cta-volunteer-mentoring is on /become-a-volunteer/, and Jason
allows reuse across CTAs as long as it is not already on that page.
.e-con is required here for the same lazy-load reason documented above. */
:root:root body.page-id-151 .cta.e-con{
background-image:linear-gradient(120deg,rgba(239,55,66,.90) 0%,rgba(173,33,25,.93) 100%),
url(/wp-content/uploads/yfc-static/cta-volunteers-group.webp);
background-size:cover;background-position:center 40%;background-repeat:no-repeat;}
:root:root body.page-id-144 .cta.e-con{
background-image:linear-gradient(120deg,rgba(239,55,66,.90) 0%,rgba(173,33,25,.93) 100%),
url(/wp-content/uploads/yfc-static/cta-volunteer-mentoring.webp);
background-size:cover;background-position:center 30%;background-repeat:no-repeat;}
/* /pray/ signup row centring - the real cause.
The static has `.signup-form{display:flex;max-width:460px;margin:0 auto}`.
In the build that element is an Elementor container, and Elementor forces
`max-width:100%`, so the wrapper spans the card's full 700px content box while
the shortcode inside shrinks to its own 455px and sits at flex-start - putting
the row 123px left of centre. Neither the container's margins nor the form's
own max-width could fix that, because the offset came from the WRAPPER.
Restore the static's cap and centring on the wrapper itself. */
:root:root .signup-card .signup-form{
max-width:460px;margin-left:auto;margin-right:auto;justify-content:center;}
/* ===========================================================================
BREADCRUMBS - the "strange breadcrumb-type text" Jason spotted on GymBlast.
The static is ONE line: