wrapping - and only this file assumed
otherwise, capping at 1080px. Measured on /advisers-report at a 2033px viewport before the
change: every band rendered 1032px wide, 51% of the screen, so all 589 declared background colours
painted a box floating on white where the live site paints a band edge to edge.
The header and footer have always done it this way (.caf-header / .caf-header__section), so this
is the pattern already in this file rather than a new one - it had simply never been applied to
the page.
*/
.caf-page { width: 100%; flex: 1 0 auto; padding-block: var(--caf-space); }
/*
A FULL-BLEED BAND BRINGS ITS OWN PADDING, so main's shows as a white strip beside it rather than
as space inside it. .caf-section already carries padding-block: var(--caf-space-large), and the
hero is a .caf-section - so the 24px above was a gap between the sticky header and the top of the
hero band, and the 24px below put white between the last band and the footer.
Measured 3 October 2026, both channels: main started at the header's own bottom edge every time
and its first child started 24px further down. The gap above the footer was 72px - this 24 plus
.caf-footer's margin-top: 3rem - against the 80px standing gap front-end.md records for a section
boundary. It is 48px now, and the last band's own 40px of bottom padding makes it ~88.
The padding stays for everything it was written for: a listing, the search results, a form and a
staff profile all land here as bare children and none of them paints a band.
:has() rather than a wrapper class, for the same reason the :not() below is a :not() - _Layout
renders @RenderBody() and cannot know what a template emits. It is already used in this file.
*/
.caf-page:has(> .caf-section:first-child, > .caf-body:first-child) { padding-block-start: 0; }
.caf-page:has(> .caf-section:last-child, > .caf-body:last-child) { padding-block-end: 0; }
/*
A direct child that is NOT a band is constrained where it stands. Written as a :not() rather than
as a wrapper class because _Layout renders @RenderBody() and cannot know what a template emits -
an archive listing, the search results, a form and a staff profile all land here as bare children.
width:min(80%, --caf-container) is .et_pb_row verbatim; 90% below Divi's own breakpoint is its
narrow-screen row. A width rather than a max-width with padding, so the content measure stays the
cap without box-sizing arithmetic. The cap is 1300px and the token's own comment says why that
took three weeks to get right.
*/
.caf-page > :not(.caf-section, .caf-body, .caf-search-page),
.caf-section__grid,
.caf-body__row,
.caf-footer__row,
.caf-header__row {
width: min(90%, var(--caf-container));
margin-inline: auto;
}
@media (min-width: 981px) {
.caf-page > :not(.caf-section, .caf-body, .caf-search-page),
.caf-section__grid,
.caf-body__row { width: min(80%, var(--caf-container)); }
/* .caf-footer__row joined this list on 16 September 2026, and the comment above had already said
it was here - "the header and footer have always done it this way" was true of the header and
not of the footer, whose SECTION carried the cap. So every colour the footer declares painted a
1600px panel floating in the middle rather than a band edge to edge, which is the same defect
this block was written to fix on the page and one place was missed. Measured against live: its
footer row is 948px of a 1185px viewport, which is min(80%, 1300) exactly. */
.caf-footer__row,
.caf-header__row { width: min(80%, var(--caf-container)); }
}
/*
Divi's other two row widths, which this conversion did not have. width="100%" spans the band;
max_width="1600px" raises the cap. Counted over English rows: 894 default, 31 full and 166 wide on
America; 118, 20 and 91 on Canada.
FULL IS THE ONE THAT SHOWS AND WIDE IS NEARLY THEORY, because the percentage binds before the cap:
a wide row is identical to a default one below a ~1625px viewport and is 1536px against 1300px on a
1920 screen, while a full row differs everywhere - at 1200px it is ~1185px against 960px.
Both outside the media query above and both more specific than it, so they hold at every width -
Divi emits width:100% for a full row with no media query of its own. The narrow-screen 90% is
deliberately still the floor for a full row: min() takes it below 981px, which keeps a side gutter
on a phone rather than running the text into both edges.
*/
.caf-section__grid--full { width: min(100%, var(--caf-container)); }
.caf-section__grid--wide { width: min(80%, var(--caf-container-wide)); }
.caf-section__grid--full.caf-section__grid--wide { width: min(100%, var(--caf-container-wide)); }
/*
THE SAME TWO WIDTHS FOR A LAYOUT ROW, which the header, footer and body layouts get from the export
exactly as a page section does - and did not read until 16 September 2026. 115 of the 285 rows
across the six layouts declare one of these, so every one of them had been taking the default
measure. The names are shared across the three prefixes because one rule should serve them.
--uncapped is max_width="100%", which is "no pixel cap" rather than a width. It is what makes BOTH
HEADERS full-bleed rather than merely full: they declare width="100%" max_width="100%", and live's
header row is the whole 1185px of the viewport with the menu starting at x=0 and the logo panel
ending at the right edge. A 1600px cap would still centre it on a wide screen.
No 90% floor on a narrow screen, unlike the page's --full. A page's text wants a gutter; this is
furniture, and the live headers run their menu and their logo panel edge to edge at every width.
*/
.caf-row--full { width: min(100%, var(--caf-container)); }
.caf-row--wide { width: min(80%, var(--caf-container-wide)); }
.caf-row--full.caf-row--wide { width: min(100%, var(--caf-container-wide)); }
.caf-row--full.caf-row--uncapped { width: 100%; }
@media (max-width: 980px) {
.caf-section__grid--full,
.caf-section__grid--full.caf-section__grid--wide { width: min(90%, var(--caf-container)); }
}
/*
Bands take PADDING, not margin. With the colour spanning the viewport a margin between two
coloured sections is a white stripe across the page, which is what the three :has() rules below
used to work around - one adjacency rule now does it, works for padding as well as margin, and
needs no :has().
*/
.caf-section,
.caf-body__section { margin-block: 0; padding-block: var(--caf-space-large); }
/*
Divi puts pictures on rows and columns as settings rather than as modules inside them, and both
arrive here as a --caf-background custom property. 148 columns across the two sites carry one and
hold nothing else - a photo panel beside a text column is the commonest shape - so a column with a
background needs a height of its own when the grid is collapsed and nothing is stretching it.
*/
.caf-section--background,
.caf-section__grid--background,
.caf-section__column--background {
background-image: var(--caf-background);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/*
A PICTURE DIVI TILES ACROSS THE TOP OF A COLUMN RATHER THAN COVERING IT - the thin rule above the
heading in the grey-panel rows, 38 columns across both sites. The picture is a 61px white strip with
a grey line at row 28. Stretched by the cover rule above, it became a dark band behind the text.
Carried by the mapper's hook, since Divi's background_repeat is the setting (BackdropStripHooks). The
raised position is Canada's background_vertical_offset: -25px, which leaves the line 3px from the top.
The strip is white, so the column's own
background colour, where it has one, shows only below the first 61px.
Named `.caf-column--rule` since 5 October 2026, after the "Column rule" control that sets it. It was
`.caf-backdrop--strip`, which described how Divi happened to paint it rather than what an editor is
choosing. The import still parses the old spelling where it reads its own generated hook back
(ColumnRule.FromClasses) - that is a legacy stored vocabulary, not a name anything renders.
*/
.caf-section__column--background.caf-column--rule {
background-size: auto;
background-position: center top;
background-repeat: repeat-x;
/* The rule has to sit ABOVE the heading. Every one of these columns opens with a module carrying
custom_margin 50px (60 and 80-90 on three), which is what puts the heading below the line on
the live site. Module margins do not survive conversion, so the column carries the one figure. */
padding-top: 50px;
}
.caf-section__column--background.caf-column--rule-raised { background-position: center -25px; }
/*
AND DIVI PUTS GRADIENTS THERE TOO, WHICH IS THE ONE BACKGROUND THIS CONVERSION USED TO DROP.
A row or section setting use_background_color_gradient="on" makes Divi render the gradient INSTEAD
of the flat colour, so CssColor refuses the colour on those - correctly - and until 18 September
2026 nothing picked up what it refused. 17 rows and sections across the two exports painted neither.
Two populations, and CssGradient's remarks have the census. 14 are translucent SCRIMS over a
photograph, which is why the gradient paints ABOVE the picture here rather than instead of it -
that is Divi's own order and the whole point of them. 3 are opaque two-tone PANELS where the
gradient is the drawing: /give-now's charity search sits in a row whose background is
#ff3b21 15%|#0d393b 15% at 90deg, which is the thick orange-and-teal frame the live page draws
around the box and which we were rendering as nothing at all.
A gradient takes the same inset a flat colour does, for the same reason: it is a panel, and a panel
needs room around what it holds.
*/
.caf-section--gradient,
.caf-section__grid--gradient { background-image: var(--caf-background-gradient); }
.caf-section--gradient.caf-section--background,
.caf-section__grid--gradient.caf-section__grid--background {
background-image: var(--caf-background-gradient), var(--caf-background);
}
.caf-section__grid--gradient { padding: var(--caf-space); }
/*
THE FOUR GRADIENTS, NAMED - 4 October 2026.
Until now the gradient arrived as a value: the section stored Divi's pipe notation in a free-text
property an editor could not see, CssGradient parsed it, and the view wrote the finished
linear-gradient() into a style attribute. Six sections across both channels carry one, in four
distinct treatments, and none of the four is a per-instance measurement - they are four designs
used once or three times each. So they are declared here, as the design system holds every other
colour, and the section stores WHICH ONE rather than WHAT IT IS. See SectionPattern.
Written as the values that were already reaching the page, not as fresh ones: CssColor folds an
rgba() into eight-digit hex, so the scrim is #00000087 rather than rgba(0,0,0,0.53). Keeping the
rendered bytes identical is what makes the before-and-after HTML diff readable.
These sit on the SECTION and only declare a custom property, so --caf-background-gradient reaches
the grid by inheritance when the row rather than the section is the painted element. The
--gradient modifier above is what actually paints, and it is unchanged.
*/
.caf-section--pattern-dark-scrim {
--caf-background-gradient: linear-gradient(180deg, #00000087 0%, #0000004a 100%);
}
/* /give-now's charity search frame: orange for the first 15% of the row, teal for the rest. The one
gradient on either site that IS the page's design rather than a scrim over a photograph. */
.caf-section--pattern-brand-split {
--caf-background-gradient: linear-gradient(90deg, #ff3b21 15%, #be3a28 15%, #0d393b 15%);
}
/* A hard white-to-paper split. Two sections draw one and they split at different heights, so they are
two values rather than one - /who-we-serve at half, the FY23 statements at a quarter. Collapsing
them would move a line across a page to save a line in this file. */
.caf-section--pattern-paper-split {
--caf-background-gradient: linear-gradient(180deg, #ffffff 50%, #efefef 50%);
}
.caf-section--pattern-paper-split-quarter {
--caf-background-gradient: linear-gradient(180deg, #ffffff 25%, #efefef 25%);
}
.caf-section__column--background:empty,
.caf-section__column--background > :only-child:empty { min-height: 18rem; }
/*
Divi keeps a panel's colour in a section, row or column setting rather than in a stylesheet - 589 of
them across the two sites, 191 on sections, 71 on rows and 327 on columns - and until they were read
every one rendered on the page background. /advisers-report is the clearest case: three statistics
reversed out of the brand teal, which arrived as plain headings on white.
The colour arrives as --caf-background-color. Everything else about the panel does not: Divi wrote
its font sizes and text colours - 1,139 and 1,716 of them - into CSS generated per page against
positional module ids such as .et_pb_heading_3, which cannot survive flattening Divi's four nesting
levels into three. So the text treatment here is derived from the colour's own luminance rather than
migrated, and --on-dark is that derivation arriving.
*/
.caf-section--tinted,
.caf-section__grid--tinted,
.caf-section__column--tinted {
background-color: var(--caf-background-color);
}
/* A column's own panel still needs its inset; the band gets its room from padding-block above and
its width from .caf-section__grid. */
.caf-section__column--tinted { padding: var(--caf-space); }
/*
AND SO DOES THE ROW'S OWN PANEL, which is the same case one level up.
Divi's et_pb_section is full width and its et_pb_row is constrained inside it, so a colour declared
on the ROW paints a centred panel rather than a band - and this conversion painted both on the
section, because the mapper takes the row's colour in preference and then hands it to the
full-width element. 52 colours across the two sites, 41 on America and 11 on Canada, including both
home pages and the /alert/* articles.
Measured on cafamerica.org/contact at innerWidth 1536: the Make a Gift Today panel is a 1300px box
starting at x=110 with white either side, and ours painted the whole 1521px from x=0. The inset is
--caf-space to match the column panel above rather than the live row's own 30px/50px, which is that
one row's custom_padding rather than a rule.
*/
.caf-section__grid--tinted,
.caf-section__grid--background { padding: var(--caf-space); }
/*
A Divi section holding several rows becomes several of these, each carrying the colour it inherited
from the section - the teal panel on /advisers-report is two rows, a heading and then three columns.
Closing the gap and the facing padding is what makes that read as the one panel it was rather than
as two bands with a white stripe between them.
*/
.caf-section--tinted + .caf-section--tinted { padding-block-start: 0; }
/*
THE LIVE SITES HAVE TWO RHYTHMS AND THIS FILE HAD ONE FLAT VALUE THAT MATCHED NEITHER.
A .caf-section is one Divi ROW. Divi separates two rows of the same section by their own padding
alone, and adds the section's own spacing at a boundary - so the gaps come in two families.
Measured as rendered gaps between consecutive rows, on both channels independently:
cafamerica.org/what-we-do within 24, 0, 0, 40, 20, 40, 0, 0, 0 (median 20)
across 50, 95, 120, 100, 120, 140, 64, 0, 110, 0 (median 95)
cafcanada.ca/what-we-do within 24, 0, 0, 40, 20, 0 (median 20)
across 50, 95, 120, 100, 120, 94, 65, 110, 0 (median 95)
Ours was 80px at every one of them: too much for a row that belongs to the block above it, too
little for a new one. The standing gap stays 80 rather than chasing the 95 - it is this
stylesheet's own scale and the difference is 15px - and the two tighter tiers are what was missing.
A DECLARED ZERO ONLY MEANS ANYTHING INSIDE A SECTION, and the first attempt at this got it wrong.
/what-we-do's "Who We Serve" row declares padding-top: 0 and still sits 95px below the row before
it, because that row is in the previous section; carrying the zero across the boundary closed a gap
the live site holds open. The mapper now refuses both tighter tiers to a first or last row.
*/
.caf-section--space-top-tight { padding-block-start: var(--caf-space-small); }
.caf-section--space-top-none { padding-block-start: 0; }
.caf-section--space-bottom-tight { padding-block-end: var(--caf-space-small); }
.caf-section--space-bottom-none { padding-block-end: 0; }
/*
Redefining the tokens rather than overriding each rule, so anything that already draws its colour
from the palette adapts inside a dark panel - headings and body copy through --caf-ink, a hero
subheading or a pager through --caf-ink-muted, and links through --caf-teal, which would otherwise
be teal text on a teal ground. --caf-paper-alt goes translucent for the same reason: a table header
or a .caf-section--cta block inside a dark panel would otherwise paint a light background under light text.
*/
.caf-section--on-dark,
.caf-section__grid--on-dark,
.caf-section__column--on-dark {
--caf-ink: var(--caf-paper);
--caf-ink-muted: var(--caf-ink-muted-on-dark);
--caf-teal: var(--caf-paper);
/* Body links took --caf-teal until 18 September 2026, so they were lightened here for free. They
take --caf-link now, and #d14508 on a teal panel is 3.0:1 - which is the shape of defect this
block exists to prevent, one token later. */
--caf-link: var(--caf-paper);
--caf-paper-alt: rgba(255, 255, 255, 0.12);
color: var(--caf-ink);
}
/*
The column grid. The template comes from the section itself as the --caf-columns custom property,
written by ColumnsSectionViewComponent from Divi's own column_structure - so 2_5,3_5 is 2fr 3fr
here exactly as it is 40/60 there.
A custom property rather than an inline grid-template-columns, so that this stylesheet can collapse
the grid on a narrow screen. An inline declaration would win against any rule here, which is why
the sections were not responsive before.
*/
.caf-section__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--caf-space);
}
/*
min-width: 0 on the columns, and it is the same defect the navigation row already carries a note
about. A grid child defaults to min-width: auto - "never shrink below my content" - so one wide
thing inside a column (a table, a pasted block, an image with an intrinsic width) pushes the column
past its track, the row past the page, and the WHOLE PAGE scrolls sideways. The header column and
.caf-nav were given this when the mobile menu was built; the page and body grids never were.
Found by --visual-sweep, and only after its attribution was fixed: it first blamed the widest
element sticking out, which was a span of pasted Word markup that wraps perfectly well at 200px.
The offender is the outermost element that sticks out, and it was a body column overflowing by
40px at 360px wide.
THE SPLIT PAGE HERO'S TWO HALVES ARE THE THIRD CASE, added 2 October 2026. They are direct children
of .caf-section__grid but are neither a section column nor a body column, so the rule above never
reached them. Below 981px that grid is a single 1fr track, and the panel's min-content is set by its
h1, whose clamp floor is --caf-text-h1 - 54px, and at 375px the 5vw term is 18.75px, so the floor is
what applies. One unbreakable 14-letter French word at 54px is wider than the phone.
Measured by the 2 October full sweep: 50 of its 53 page-overflow findings were these two selectors,
25 each, across 25 pages on both channels and both languages - and that both halves are named the
same number of times is the signature of the TRACK being over-wide, not of either half misbehaving.
Worst was /fr/ce-que-nous-faisons/dons-a-des-projets-internationaux at scrollWidth 547 against 375.
min-width: 0 alone would stop the PAGE scrolling and let the word spill out of the teal panel
instead, so the title gets overflow-wrap too. Both are needed; neither is visible to a structural
check, which is why this was confirmed by looking at the page and not by the sweep going quiet.
*/
/*
AND header.caf-hero IS THE FOURTH SUCH CHILD, FOUND 13 OCTOBER 2026 - the list above had every
grid child of .caf-section__grid except the one a page header is actually made of.
A CAF.Page or CAF.ListingPage with a heading and no picture renders
.caf-section__grid > header.caf-hero > h1.caf-hero__title, with no column between them. So the
hero IS the grid item, and it kept min-width: auto while the title inside it already had both
min-width: 0 and overflow-wrap. The title could break; its parent would not let it, because a grid
item at auto refuses to shrink below the min-content of its longest unbreakable word.
Measured on /news-insights/grantmaking-fundamentals at 360: header.caf-hero 394px wide inside a
311px grid, the h1 the same 394, "Fundamentals" at 50px. Twelve pages, 7.5px to 51.5px over.
THE 50px IS THE SUPPLIED LAYER'S, not ours - caf-overrides.min.css sets .caf-hero__title to a flat
50px with no media query, over the clamp(1.375rem, 5vw, ...) below, which resolves to 22px at this
width. That file is vendored and not ours to edit, and it does not need editing: a heading is
allowed to be 50px on a phone if the box it sits in is allowed to wrap it.
*/
.caf-section__column,
.caf-body__column,
.caf-page-hero__panel,
.caf-page-hero__image,
.caf-hero { min-width: 0; }
/*
EVERY HEADING, NOT JUST THE HERO'S - 13 October 2026, and the ten pages that needed it were all
the same element.
h1.caf-body__title is the article heading, rendered by the generated body partial rather than by
_PageHero, so it never saw the rule that used to name .caf-hero__title alone. Its box was already
constrained - 294px - and the text simply overflowed it: scrollWidth 387 against clientWidth 294
on /story/closing-the-gender-gap, which is "Entrepreneurship" at the title size. Every ancestor
passed it up to html, so the page scrolled sideways by 59px with no element visibly past the edge,
because the overflow was INSIDE a box rather than a box being too wide.
Named as a group rather than per class, because the next heading added to this site should not
have to rediscover this. break-word rather than anywhere: it breaks a word only when that word
cannot fit on a line of its own, so nothing that fits today moves.
*/
h1, h2, h3, h4, h5, h6,
.caf-hero__title,
.caf-body__title { overflow-wrap: break-word; }
/*
AND THE HEADING HAS TO FIT, NOT MERELY STOP SCROLLING THE PAGE - 13 October 2026.
min-width: 0 and overflow-wrap together stop the page moving sideways, and on their own they do it
by breaking the word: /news-insights/grantmaking-fundamentals rendered "GRANTMAKIN / G /
FUNDAMENT / ALS" at 360. The structural check passes and the page is worse. This is the rule the
sweep cannot have an opinion about, and it is why the page gets looked at.
THE 50px IS A VENDORED RULE WITH NO NARROW-WIDTH CASE. caf-overrides.min.css sets
.caf-hero__title { font-size: 50px } unconditionally, which is right at desktop and is upstream's
own "phone widths are the weakest". It is not ours to edit, so it is beaten on specificity: that
selector is (0,1,0) and this is (0,2,0). A media query adds none, so the extra class is doing the
work rather than the query.
9vw rather than a fixed step, because the constraint is the longest word in a title we do not
control. The worst of the twelve pages is "RESPONSIBILITY", 14 characters, which at this face needs
about 0.62em each: 32px at 360 is roughly 280px inside a 311px column, and the clamp reaches the
supplied 50px again at about 556px, where the column is wide enough to hold it. The floor is
1.75rem so a short title does not go small for no reason.
TAKE THIS BACK UPSTREAM. The right home for it is _10-page-hero.scss beside the rule it corrects;
it lives here because that file cannot be edited in this tree.
*/
@media (max-width: 768px) {
.caf-hero .caf-hero__title { font-size: clamp(1.75rem, 9vw, var(--caf-text-display)); }
}
/*
THE GUTTER IS DIVI'S, AND IT IS PART OF THE TRACK LIST RATHER THAN SPACING AROUND IT.
A Divi row separates its columns by a percentage of the row - 5.5% by default - and takes that out
of each column in proportion to how much of the row the column is NOT, so 3_5,1_5,1_5 resolves to
57.8/15.6/15.6 rather than 60/20/20. The tracks arrive here already written that way, so the gap
has to be the same percentage or the row does not add up to 100%.
This file used var(--caf-space) - a flat 24px - for every row on the site. Measured against live at
1185px, its gutter is 65px, so every multi-column row was about 40px narrower in its gutters and
correspondingly wider in its columns than the row it was converted from.
--caf-space stays the fallback, for a row that declares no gutter and for everything stored before
the property existed. Only column-gap moves: a percentage ROW gap would resolve against the width
too, which is not a spacing anyone chose.
*/
@media (min-width: 981px) {
.caf-section__grid,
.caf-body__row,
.caf-footer__row,
.caf-header__row {
grid-template-columns: var(--caf-columns, 1fr);
column-gap: var(--caf-gutter, var(--caf-space));
}
/*
A cell covering more than one track or more than one row. Divi lets a column hold a row and Page
Builder sections cannot nest, so the converter flattens the two levels into one set of tracks and
says here what covers what - see ColumnsSectionProperties.ColumnSpans. The home page's bento is
the one row on either site that uses it: a tall panel spanning both rows, two panels beside it,
and a wide one spanning their two tracks underneath.
Inside the media query on purpose. Below it the grid is a single stacked column, where a row span
would leave a hole; the declarations simply do not apply, which is why the spans travel as custom
properties rather than as an inline grid-column that no rule could undo.
*/
.caf-section__column {
grid-column: span var(--caf-column-span, 1);
grid-row: span var(--caf-row-span, 1);
}
}
/* ---------------------------------------------------------------- body layout */
/*
Divi's Theme Builder template that wraps an article: its title, byline, related posts and closing
calls to action. Generated from the export - see Migration/Divi/BodyBuilder.cs - so these classes
mirror the footer's, and the row grid is the same custom property the page sections use.
*/
.caf-body__section { margin-block: var(--caf-space-large); }
.caf-body__row { display: grid; grid-template-columns: 1fr; gap: var(--caf-space); }
/*
The article title. The clamp was always right - both live templates compute 40px at a desktop
width, which is this rule's 2.5rem ceiling - and the uppercase that used to be declared here is
now what every h1 does, so only the clamp is left. The sentence this comment used to carry, "only
the article title, because that is where the measurement is", was the right caution before the
brand document existed and is answered by it: headlines are always caps.
Weight is still left alone. The two sites disagree with each other - 500 on America, 700 on
Canada - so there is nothing consistent to copy and the design system picks one.
.caf-body__rule was deleted from here on 3 October 2026. It was emitted by nothing - its three
neighbours below are all used - and the divider section 1,800 lines down already draws the same
line, saying so in its own comment.
*/
.caf-body__title {
margin: 0 0 0.5rem;
font-size: clamp(2rem, 4vw, 2.5rem);
}
.caf-body__space { height: var(--caf-space); }
.caf-body__image { max-width: 100%; height: auto; }
.caf-body__button { margin-top: 0.9rem; }
/* The category line Divi prints above the title, from the page's own taxonomy. */
/* Only one selector, because .caf-body__categories was emitted by nothing - the generated article
partials print this line through .pageHeader's first text block. */
.caf-body .pageHeader .caf-body__text:first-child {
font-size: var(--caf-text-small);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* The closing call-to-action band, which the source marks with its own hook. */
/* padding-block rather than the shorthand: the band's width is the row's job now, and a side padding
here would fight it. */
/*
DO NOT UNSCOPE THIS - checked against the live site 4 October 2026, and the obvious fix is a defect.
The Section style drop-down offers "Call to action - a light panel" on every section, and 103 of its
110 placements sit on a CAF.Page where .caf-body never appears, so the class is emitted and nothing
matches it. That reads as a fidelity bug until the source is read: on
cafamerica.org/what-we-do/corporations/ every rule naming the hook is spacing and type -
.color-cta .et_pb_column_1_2{padding:35px}, .color-cta .et_pb_text{margin:0!important;
margin-bottom:20px!important}, .color-cta .et_pb_text h3{font-size:25px} - and there is NO
BACKGROUND ANYWHERE. Dropping .caf-body from the selector would paint 83 pages grey that are not
grey on the live site. The ground belongs to the article closing block, which is why it is scoped to
the body that draws one. The label is the thing that is wrong, and that is decision 168.
The class was the client's own `.color-cta` until 5 October 2026. The hook they write in the source
is still read under that name by SectionStyle.FromHooks - it has to be, it is their word - but what
we emit is ours, so the stylesheet and the Section style drop-down now use the same one.
*/
.caf-body .caf-section--cta { background: var(--caf-paper-alt); padding-block: var(--caf-space-large); }
/*
The same block as each article's own content rather than the template's (ArticleClosing, decision
122), so it is a Page Builder section inside the body's row rather than a section of its own - and
left alone it would paint a grey box the width of the text, with its content at 80% of that.
The shadow paints the band out to the page edges without widening anything, and the clip keeps it
off the content above and below: a 100vw box would carry the scrollbar's width and scroll the page
sideways. The grid takes the row's full width, which is the width the template's rows had.
*/
.caf-body .caf-article-closing {
box-shadow: 0 0 0 100vmax var(--caf-paper-alt);
clip-path: inset(0 -100vmax);
/* The space the template put between the article and this block, which its spacer section and two
section boundaries made - 241px measured at 1536 wide, and six large spaces is 240. */
margin-block-start: calc(var(--caf-space-large) * 6);
}
/*
And that spacer section - a divider and the author box that is not built, so nothing but space - now
follows the block it used to precede, and would put the same space again between the band and the
footer. Its space is above the block now.
*/
/* The band ends the section it is in, as it ended the template: no padding of the article's under it. */
.caf-body__section:has(.caf-article-closing) { padding-block-end: 0; }
.caf-body__section:has(.caf-article-closing) + .caf-body__section:not(:has(img, a, h1, h2, h3, h4, p:not(:empty))) { display: none; }
.caf-body .caf-article-closing > .caf-section__grid { width: 100%; }
/*
THE SECOND HALF OF A SPLIT CLOSING BLOCK. The band that used to sit under the listing inside this
one section is a two-column section of items now, immediately after it and carrying the same hook so
it keeps the grey. The shadow is harmless painted twice - it is the same colour over the same
ground - but the 240px that holds the block below the article is not, and would open a gap between
the listing and the band it closes.
*/
.caf-body .caf-article-closing--continued { margin-block-start: 0; }
/*
The content listing's header: the heading beside its button, then an intro where it has one, then the
items. The row is the article template's own first row - 57.8% and 36.7% with a 5.5% gutter, which is Divi's 3_5,2_5 - so
the block did not move when it stopped being template.
*/
.caf-content-listing__header { display: grid; grid-template-columns: 1fr; gap: var(--caf-space); }
/* A carried heading alone in its cell gives up its margin to the carried spacing; one with an intro under
it keeps the margin a heading has above a paragraph. */
.caf-content-listing__header > .fr-view > h2:last-child { margin-block-end: 0; }
.caf-content-listing__header { margin-block-end: var(--caf-content-listing-header-space, 0); }
/* The strip starts level with the heading, as its column did, rather than centring on it. Beside the
heading its link stays on one line and the column widens for it instead (see _ContentListing.cshtml). */
.caf-content-listing__header > .pr-slider-controls { align-self: start; }
.caf-content-listing__button { justify-self: start; align-self: start; }
/* Space under an intro, unless it already ends with an empty paragraph - the SDG page's does, carried
verbatim, and that paragraph is what gives the author's own spacer its margin. */
.caf-content-listing__intro:not(:has(> :last-child:empty)) { margin-block-end: var(--caf-space); }
/* The paragraph the template's related strip sat in gave it 1em beneath, which is the gap above the
band; kept, so the band did not move up when the paragraph went. The article closing's only - the
home pages' "Our Insights" listings were never in a text module and are set in the page's sans. */
.caf-content-listing__listing:has(> .caf-body__related) { font-family: var(--caf-font-serif); margin-block-end: 1em; }
/* THE VISITOR CONTROLS - the category dropdown above a listing and the Load more button under it.
Five placements carry them; every other listing renders none of this markup at all.
The live control bar is a bare select at the left with a caret, no label and no border but its
own, sitting above the grid with the items' own gap beneath it. Reproduced rather than copied:
the type, the rule colour and the spacing are this stylesheet's own tokens, so the bar belongs to
the site rather than to The Post Grid's defaults. */
.caf-content-listing__filter {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
margin-block-end: var(--caf-space);
}
.caf-content-listing__filter-select {
font: inherit;
color: var(--caf-ink);
background-color: transparent;
border: 1px solid var(--caf-rule);
border-radius: 2px;
padding: 0.5rem 2rem 0.5rem 0.75rem;
min-width: 12rem;
/* The caret the live dropdown draws, as a background so the control keeps the platform's own
keyboard and touch behaviour - a select styled into a div loses both. */
appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--caf-ink) 50%), linear-gradient(135deg, var(--caf-ink) 50%, transparent 50%);
background-position: calc(100% - 1.05rem) 55%, calc(100% - 0.75rem) 55%;
background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
background-repeat: no-repeat;
}
.caf-content-listing__filter-select:focus-visible { outline: 2px solid var(--caf-ink); outline-offset: 2px; }
/* Hidden only once listing.js has wired the dropdown to submit on change. A form whose script never
arrived keeps a button that works - which is the whole reason the class is added at runtime rather
than written into the markup. */
.caf-content-listing__filter--auto .caf-content-listing__filter-submit { display: none; }
/* The live button is centred under the grid with a clear gap above it. .caf-button draws the fill. */
.caf-content-listing__more { margin-block-start: var(--caf-space); text-align: center; }
.caf-content-listing__load-more { display: inline-block; }
/* While a fetch is in flight. Deliberately a dimming of the items rather than a spinner: the items
already on the page stay readable, and nothing is claimed to be happening in a place where it is
not. The search page's own in-flight marker is the precedent. */
.caf-content-listing--busy .caf-content-listing__listing { opacity: 0.6; transition: opacity 120ms ease-out; }
.caf-content-listing__load-more[aria-busy="true"] { pointer-events: none; opacity: 0.7; }
@media (min-width: 981px) {
/* A carried track list already includes the source row's gutter, which is 0% on both home pages -
the importer declines a row with any other - so the gap goes with it. */
.caf-content-listing__header { grid-template-columns: var(--caf-content-listing-columns, 57.8% 36.7%); column-gap: 5.5%; }
.caf-content-listing__header[style*="--caf-content-listing-columns:"] { column-gap: var(--caf-content-listing-gap, 0); }
/* Only beside the heading: stacked on a narrow screen the strip has the whole width, and a link that
could not wrap would push the page sideways. */
.caf-content-listing .pr-slider-controls .caf-content-listing__button { white-space: nowrap; }
}
/*
The carousel's arrows, drawn rather than pictured. The client's strip carries two PNGs the media
import holds at addresses no widget should hard-code, so the glyph is the same two-border chevron the
buttons use, in the white the PNGs are, on the orange square the strip rules above already draw.
*/
.caf-content-listing .pr-slider-controls-left::before,
.caf-content-listing .pr-slider-controls-right::before {
content: "";
width: 0.6rem;
height: 0.6rem;
border-top: 0.15rem solid var(--caf-paper);
border-right: 0.15rem solid var(--caf-paper);
}
.caf-content-listing .pr-slider-controls-left::before { transform: translateX(0.15rem) rotate(-135deg); }
.caf-content-listing .pr-slider-controls-right::before { transform: translateX(-0.15rem) rotate(45deg); }
.caf-body .darkGreenBox { padding: var(--caf-space); }
/*
THE ARTICLE HEADER, IN ITS TWO SHAPES - decision 136, 29 September 2026. One template serves every
article on both channels, and the article's own Hero image is the only thing that decides which
shape it takes: the four layouts live assigns by Theme Builder rules the export does not carry are
not reproduced.
WITH A HERO IMAGE, THE SPLIT: picture beside the text, and the two orange bars both live sites draw
from their Theme Options CSS - which is in no export, and was read off the live pages' unified
stylesheet on 29 September 2026:
.pageHeaderSplit:before, .pageHeaderSplit .bgImage:after
{ height: 4rem; background: #ff3b21; position: absolute; top: 10rem; width: 100%;
right: calc(100% + 0px) }
.pageHeaderSplit .bgImage:after { width: 1.5rem; left: calc(100% + 0px) }
so a band 4rem tall, 10rem down, running from the row's left edge out to the page edge, and a
1.5rem tab on the picture's right edge. ONLY THE BAND IS DRAWN - the tab was removed by decision
139. 100vw rather than live's 100%, and the reason used to live on .homeBannerLeft h1::before, which
is gone: a percentage resolves against the containing block, so the bar would stop at the row rather
than the page, and it has to reach the edge at any width. Overflow to the LEFT never scrolls, which
is what makes 100vw safe here. Above Divi's breakpoint only - live's phone section draws no bar.
The bar is drawn only where the picture is (:has(> .caf-backdrop)), because the row's own ::before
would otherwise sit beside the banner below.
*/
/*
Three corrections by eye, 29 September 2026 (decision 139), on America's /blog and both sites'
/story - every article showing the split:
- THE BAR STANDS OFF THE PICTURE. Live draws it flush (calc(100% + 0px)); a gap of
--caf-hero-bar-gap is the design now.
- NO TAB. Live's second bar, the 1.5rem tab on the picture's right edge, is not drawn on this
header, by decision. Other headers carry the same tab and are to be settled separately.
- THE PICTURE IS TALLER. Ours was only as tall as the text beside it, 288px at 1440; cafcanada.ca's
story header measures 386px at the same width, which is the 24rem floor here. The text is
centred on that height, as live's is.
- THE TEXT PANEL IS WHITE WITH BLACK TEXT. America's darkGreenBox painted it teal; cafcanada.ca's is
already white with a black title. The tokens are reset on the panel rather than listing elements,
for the reason .darkGreenBox gives, and the h1 is set because headings take --caf-teal.
*/
.caf-body { --caf-hero-bar-gap: 12px; }
.caf-body .pageHeaderSplit:has(> .caf-backdrop) > .caf-body__column:not(.caf-backdrop) {
background-color: var(--caf-paper);
/* The same air on both channels. Canada's panel had none - its column is not a darkGreenBox - so its
title sat against the gutter. */
padding: var(--caf-space);
--caf-ink: #0d0d0d;
--caf-ink-muted: #464646;
--caf-link: #d14508;
--caf-paper-alt: #f5f5f4;
color: var(--caf-ink);
}
.caf-body .pageHeaderSplit:has(> .caf-backdrop) .caf-body__title { color: var(--caf-ink); }
@media (min-width: 981px) {
.caf-body .pageHeaderSplit:has(> .caf-backdrop) { position: relative; min-height: 24rem; }
.caf-body .pageHeaderSplit:has(> .caf-backdrop) > .caf-body__column:not(.caf-backdrop) {
display: flex;
flex-direction: column;
justify-content: center;
}
.caf-body .pageHeaderSplit:has(> .caf-backdrop)::before {
content: "";
position: absolute;
top: 10rem;
right: calc(100% + var(--caf-hero-bar-gap));
width: 100vw;
height: 4rem;
background: var(--caf-orange);
}
}
/*
WITHOUT ONE, THE BANNER: the whole section on the dark teal the page hero uses (#0d393b, see
.caf-page-hero), the text in white, no picture - the full-width title bar live's alerts, webinars
and podcasts carry. The picture column already withdraws (.caf-backdrop--none, below); this paints
the section rather than the column so the band spans the viewport, and clears the column's own
ground - white on Canada, teal-dark on America's darkGreenBox - so there is one teal, not two.
The column's white is written inline as --caf-background-color, which no rule can outrank; this sets
background-color itself, which .caf-tinted only feeds, so a more specific selector is enough.
*/
.caf-body .pageHeader:has(.caf-backdrop--none) {
/* #0d393b rather than var(--caf-teal): this rule redefines --caf-teal to the paper colour four
lines down, on this same element, so the token would paint the panel white under white text. */
background-color: #0d393b;
--caf-ink: var(--caf-paper);
--caf-ink-muted: var(--caf-ink-muted-on-dark);
--caf-teal: var(--caf-paper);
--caf-link: var(--caf-paper);
color: var(--caf-ink);
}
.caf-body .pageHeader:has(.caf-backdrop--none) .caf-body__column { background-color: transparent; padding-inline: 0; }
/*
The author box - the staff pages an article credits (_ArticleAuthors.cshtml). Live's PublishPress
box is a round headshot beside a name and a role; the name is the heading-weight line, the role the
muted one. The colours are tokens, so the box reads on white, on America's teal panel and on the
banner without a rule for each.
*/
.caf-authors { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.caf-author { display: flex; align-items: center; gap: 0.75rem; }
.caf-author__portrait { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.caf-author__text { display: flex; flex-direction: column; }
.caf-author__name { font-family: var(--caf-font); font-weight: 700; color: var(--caf-ink); text-decoration: none; }
a.caf-author__name:hover { color: var(--caf-orange); }
.caf-author__role { font-size: var(--caf-text-small); color: var(--caf-ink-muted); }
@media (min-width: 981px) {
.caf-body__row { grid-template-columns: var(--caf-columns, 1fr); column-gap: var(--caf-gutter, var(--caf-space)); }
}
/* ---------------------------------------------------------------- body copy */
/*
The body face. .fr-view is Xperience's rich text wrapper - 1,268 widgets, the highest-volume
markup on the site - and .caf-body__text is the generated body layouts' equivalent, so between
them they are where a visitor's reading happens.
Headings inside these are unaffected: the h1-h6 rule sets font-family explicitly, so it wins over
what they inherit here. A button inside rich text would NOT have won, because .caf-button declared
no family at all - it is given one below rather than left to inherit a serif it never had.
*/
.fr-view,
.caf-body__text { font-family: var(--caf-font-serif); }
/*
Xperience's built-in rich text widget wraps its content in .fr-view, and this is the highest-volume
markup on the site by a wide margin - 1,268 widgets. Nothing styled it until now, so migrated body
copy inherited only the browser defaults.
*/
.fr-view { line-height: var(--caf-line); }
/*
The second half of each of these is for a hooked text block. A text module that carried a
module_class travels as a wrapping div (DiviWidgetMapper.WrapRichText), because the built-in rich
text widget has nowhere else to put the class - so the first and last child of .fr-view can be that
wrapper rather than the paragraph inside it, and without these the leading paragraph of 204 blocks
on America and 77 on Canada keeps the top margin these rules exist to remove. Written for any
top-level div rather than for a marker class of ours: an author's own wrapper wants the same
treatment, and it is one rule instead of a class that would have to survive a re-import.
*/
.fr-view > :first-child,
.fr-view > div:first-child > :first-child { margin-top: 0; }
.fr-view > :last-child,
.fr-view > div:last-child > :last-child { margin-bottom: 0; }
/*
BODY LINKS ARE ORANGE ON BOTH LIVE SITES AND WERE TEAL AND UNDERLINED HERE.
The bare `a` rule above sets --caf-teal, which is right for the header, the footer, a listing card
and a search result - all of which have their own measured treatments - and wrong for a link inside
a paragraph, which is the one place a reader has to tell link from text at a glance.
MEASURED ON THE RENDERED PAGES, both sites independently, on modules that declare nothing of their
own: cafamerica.org/what-we-do/validation and cafcanada.ca/what-we-do/individuals-families both
compute rgb(209, 69, 8) with text-decoration: none. That is #d14508, and it is deliberately NOT
--caf-orange: the brand orange is #ff3b21, which the live sites reserve for a module that asks for
it by name through link_text_color.
THE CONTRAST IS A KNOWN TRADE AND THE FIGURES ARE HERE RATHER THAN ROUNDED, because the first
version of this comment claimed "4.4:1 and passes" and that is only true on white:
#d14508 on #ffffff 4.60:1 AA
#d14508 on #fcfcfc 4.48:1 just under
#d14508 on #f6f6f6 4.26:1 under
#d14508 on #efefef 4.00:1 under - the card panels
#ff3b21 on #ffffff 3.56:1 the 43 declared overrides
#0d393b on #ffffff 12.61:1 what this replaced
So a body link on a grey panel does not meet AA for normal text, and that is the live sites' own
contrast reproduced rather than a choice made here - the same position --caf-orange buttons are
already in at 3.47:1. It is logged rather than silently taken; a darker orange would meet AA on
every ground and would no longer be the client's colour, which is CAF's call and not ours.
THE UNDERLINE IS TRADED FOR A HOVER AND FOCUS ONE rather than simply dropped. Neither live site
underlines a body link, so keeping ours would be a visible divergence on every page; but colour
alone is not an affordance. #d14508 against the #0d0d0d of the text around it is 4.23:1, well over
the 3:1 that lets colour distinguish a link at all, and the underline on hover and on focus is the
second cue that makes relying on it legitimate.
THE DEFAULT IS ON :root AND NOT ON .fr-view, and the difference is not cosmetic. .fr-view is a
DESCENDANT of a dark panel, so declaring the token here would beat the one .caf-section--on-dark
sets and body copy inside a teal band would keep #d14508 at 3.0:1 - the exact defect that block
exists to prevent. Measured in the browser before it was moved: a probe anchor inside /contact's
on-dark panel computed rgb(209, 69, 8). The order that works is :root, then the panel, then the
module wrapper, each one closer to the link than the last.
*/
.fr-view a { color: var(--caf-link); text-decoration: none; }
.fr-view a:hover,
.fr-view a:focus-visible { text-decoration: underline; }
/*
--caf-link is a token so a module can override it, which 43 of them do. Divi keeps a text module's
link colour in link_text_color and renders it as per-module CSS keyed to a generated number, so
nothing reached us: 35 modules on America and 8 on Canada, every one of them #FF3B21. /give-now's
opening paragraph is the case that prompted this - "verify every charity" is the brand orange on the
live page and arrived teal here. DiviWidgetMapper.WrapRichText writes the override onto the wrapper
div as --caf-link, so it reaches this rule by inheritance and needs no selector of its own.
*/
.fr-view ul,
.fr-view ol { padding-left: 1.25em; margin: 0 0 1em; }
.fr-view li { margin-bottom: 0.35em; }
.fr-view img { display: block; margin: var(--caf-space) 0; }
.fr-view blockquote {
margin: var(--caf-space) 0;
padding-left: 1.25rem;
border-left: 4px solid var(--caf-orange);
font-size: var(--caf-text-lead);
}
/*
width: 100% ON A TABLE IS A FLOOR, NOT A CEILING, and on a phone that is the difference between a
tidy table and a page that scrolls sideways.
A table lays out at auto, so it grows past its declared width whenever its cells cannot fit -
width: 100% only stops it being NARROWER than its column. /privacy-policy at 360 put a 355px table
in a 311px column and took the whole page with it, 12.8px over, because every ancestor passes that
up. The cells already wrap: their min-content is a column of single words, and the table still
could not fit inside the phone.
So the table gets to scroll on its own rather than the page scrolling for it, which is the rule
this project already applies to anything that is legitimately wider than its column. display:
block is what makes a table scrollable at all - overflow has no effect on display: table - and the
browser rebuilds the rows as anonymous table boxes inside it, so the table still looks like a
table. Confined to the phone tier: above it the column is wide enough and the plain table is
better, because a scroller the reader cannot see the end of is worse than one they never need.
*/
.fr-view table { width: 100%; border-collapse: collapse; margin: var(--caf-space) 0; }
@media (max-width: 768px) {
.fr-view table { display: block; max-width: 100%; overflow-x: auto; }
}
.fr-view th,
.fr-view td { padding: 0.6rem 0.75rem; border: 1px solid var(--caf-rule); text-align: left; }
.fr-view th { background: var(--caf-paper-alt); }
/*
TWO CONTENT TABLES SCROLLED THE WHOLE PAGE SIDEWAYS ON A PHONE, by 2px and 4px — found by the
full sweep of 17 September 2026, which is the first time `page-overflow` had fired on anything but
a one-off.
The cause is the client's own markup and it is wrong in two different ways. `/privacy-policy`
declares a two-column table at `width: 100%` and then gives TEN cells `width: 50%`;
`/case-studies/reuniting-lovers` declares cell widths summing to about 122%. Both are inline, so
they beat any stylesheet rule, and `table-layout: auto` then widens the columns to fit their
content regardless. **Neither is ours**: the live privacy-policy page carries the identical table
tag and the same ten 50% cells, and the 12 September `--origin` sweep recorded live's own
reuniting-lovers overflowing by **20px at 1185px**, against our 4px at 360px.
So the fix is the smallest thing that gives the content room back, and the room is ours to give:
24px per column of horizontal padding, against overflows of 2px and 4px. Halving it at phone
widths clears both with margin to spare, and changes nothing about how the table is laid out.
`table-layout: fixed` was tried first and rejected although it also worked. It makes the declared
widths authoritative, which is correct in principle — but at 360px it forced mid-word breaks, so
`/blog/4-steps-to-planning-your-charitable-legacy` rendered "Benefici|ary designat|ions". A table
that no longer scrolls the page but cannot spell is a worse page. `max-width: 100%` alone was
measured too and fixes neither, because a table's used width is at least its minimum content
width.
`overflow-wrap: break-word` is a backstop rather than part of the fix, and it changes nothing on
the three tables that can be measured — it breaks a word only when the word cannot fit its column
at all, which none of them does. It is here because `/friends-fund-private` carries **three more
tables** and is a secured page, so it answers 401 and neither the sweep nor a browser can measure
it. Unlike `anywhere`, `break-word` does not enter the minimum-width calculation, so it cannot
cause the mangling above.
*/
@media (max-width: 768px) {
.fr-view th,
.fr-view td { padding: 0.5rem 0.4rem; overflow-wrap: break-word; }
}
/* ---------------------------------------------------------------- button */
/*
THE LIVE SITES HAVE TWO BUTTON SHAPES AND THIS FILE HAD ONE, so roughly three in five buttons on
both channels rendered as a solid orange block where the original is an uppercase text link.
Every figure below is a COMPUTED value read off the rendered live pages on 12 September 2026 -
cafamerica.org/contact and cafcanada.ca/disaster-relief and /privacy - rather than a declared one,
because Divi's button styling arrives as generated per-module CSS that is in neither child
stylesheet: .transparent-cta and .orange-button appear on the page and in no file we can fetch.
filled padding 8px 41px 8px 30px, radius 0, 18px/600 Outfit uppercase, chevron at right: 15.4px
(the asymmetric right padding IS the chevron's room), 47px tall
link no background, no padding, 18px/600 Outfit uppercase, chevron at right: -28px - outside
the text box - and the text colour is the band's rather than the button's
Which button gets which is ButtonVariant.FromDivi, from the colour the module declares. The
chevron is drawn from two borders rather than set as a glyph: the live sites print Divi's
ETmodules character "5", and that font is Elegant Themes' artwork which this project deliberately
does not ship - see front-end.md. A chevron is a shape, not their drawing of one.
*/
.caf-button {
position: relative;
display: inline-block;
font-family: var(--caf-font);
/* 8px 41px 8px 30px, and the 11px of extra right padding is where the chevron sits. */
padding: 0.5rem 2.5625rem 0.5rem 1.875rem;
background: var(--caf-orange);
color: var(--caf-paper);
font-size: var(--caf-text-lead);
font-weight: 600;
line-height: var(--caf-line);
text-decoration: none;
text-transform: uppercase;
border: 0;
border-radius: 0;
cursor: pointer;
transition: background var(--caf-transition), color var(--caf-transition);
}
/*
currentColor is what makes one chevron serve all three variants - including the link treatment,
whose colour comes from the band it sits in rather than from this rule.
*/
.caf-button::after {
content: "";
position: absolute;
top: 50%;
right: 1.0625rem;
width: 0.4rem;
height: 0.4rem;
border-top: 0.125rem solid currentColor;
border-right: 0.125rem solid currentColor;
transform: translateY(-50%) rotate(45deg);
}
.caf-button:hover { background: var(--caf-teal); color: var(--caf-paper); }
/* Divi's green-button: the same shape, the brand teal. #0b2d2e and #002e2e both read as dark and
arrive here too, which is why this is one variant rather than three colours. */
.caf-button--dark { background: var(--caf-teal); }
.caf-button--dark:hover { background: var(--caf-orange); }
/*
transparent-cta: 318 of the 506 declared button colours across the two exports, and the reason
this section was worth rewriting.
The colour is var(--caf-ink) rather than a fixed value, so it follows the band exactly as the live
site does: the original declares #FCFCFC on a teal panel and #000000 on a light one, and
.caf-section--on-dark and .caf-tinted--on-dark already redefine that token on precisely the bands
that need it. One rule, and the two cases come out right on their own.
THE RISK IN THAT IS A BUTTON THE AUTHOR MADE LIGHT BECAUSE IT SITS ON A PHOTOGRAPH - our ink would
come out dark on a dark picture, and --visual-sweep cannot see it: its backdrop walk returns null
the moment a background image intervenes, deliberately, so low-contrast skips text over photos.
Counted instead, over both round-8 exports: of 245 transparent buttons, 107 declare a light text
colour and ALL 107 sit inside an ancestor declaring a dark background COLOUR. None is over an
image, and none is over nothing. The token resolves light in exactly the cases that need it.
Padding rather than the live site's right: -28px. The chevron hanging outside its own box is an
accident of Divi's absolute positioning, and a box that contains its own chevron has a hit area
that matches what a visitor sees.
*/
.caf-button--link {
padding: 0 1.5rem 0 0;
background: none;
color: var(--caf-ink);
}
.caf-button--link::after { right: 0.25rem; }
.caf-button--link:hover { background: none; color: var(--caf-orange); }
/* ---------------------------------------------------------------- call-to-action band */
/*
The Contact / Newsletter band that closes most America pages, as one widget rather than a
two-column section of rich text and buttons - see CtaBandWidgetProperties.
Every figure is the one the converted section rendered with, so moving the band into a widget
changes nothing a visitor sees: 48.5% 48.5% with a 3% gutter is what GutterFor resolves the
source's gutter_width="2" to, and the panel inset is .caf-section__column--tinted's. The colour
and the lightened text are the shared .caf-tinted and .caf-tinted--on-dark, which the view adds.
*/
.caf-cta-band { display: grid; grid-template-columns: 1fr; gap: var(--caf-space); }
.caf-cta-band__panel { min-width: 0; padding: var(--caf-space); }
.caf-cta-band--centred .caf-cta-band__panel { text-align: center; }
@media (min-width: 981px) {
.caf-cta-band--panels-2 { grid-template-columns: 48.5% 48.5%; column-gap: 3%; }
}
/*
THE GIFT PANEL: the same widget with its button on the corner (Button style), which is what
Make Your Gift Count is on the America home page and ten more. The overhang itself is the
.caf-button--corner rule further down, unchanged - these two lines only give it the right box.
The PANEL is the positioned box, not the section grid the rule anchors to when a button widget
sits in a column. In the widget the colour is painted by the panel, so that is the corner the
button has to straddle; anchored to the grid it would hang off whatever the section's own inset
happens to be. Below Divi's breakpoint the button stays in the flow, right-aligned, exactly as
.caf-section__column does it - but by its own margin rather than the panel's text-align, which
would have right-aligned the paragraph above it too.
The panel widget joins this rule and the three below rather than repeating them, with one
difference worth noting: its button sits inside .caf-panel__text, not as a direct child, because a
picture beside the text makes the panel a grid and a third child would auto-place into it. So the
combinator is a descendant one for the panel and a child one for the band.
*/
.caf-cta-band__panel:has(> .caf-button--corner),
.caf-panel:has(.caf-button--corner) { position: relative; }
/*
A PANEL INSIDE A COLUMN, BELOW THE COLUMN'S OWN INTRO - the grey panels of the two-column rows,
which the mapper places among their neighbours (TryMapPanelPair). The rich text above drops its last
paragraph's margin, so the panel sat flush against the intro. Live separates them by Divi's standard
module spacing, and the panels' own custom_margin top is 0px on 40 of 64. 30px is that spacing. The
same space separates Canada's home page's two stacked panels. A band alone in its section has no
previous sibling and is untouched.
*/
.caf-section__column > * + .caf-cta-band,
.caf-section__column > * + .caf-panel,
/* The tab set is built in the browser, so its previous sibling is often this file's own script tag -
which is still an element, so the adjacent combinator holds. See wwwroot/js/tabs.js. */
.caf-section__column > * + .caf-tabs { margin-top: 30px; }
/*
NO MORE OVERHANG THAN THERE IS ROOM FOR. A panel from a width="100%" row runs edge to edge, and the
20px then hangs past the viewport and puts a sideways scrollbar on the page - --visual-sweep found
it on /what-we-do/grant-management-services at 1521px, and it had found the same thing on /contact
in September when the panel was still a section and a button. The section becomes a size container
so 100cqw is its own width; half the difference between that and the panel is the room beside it,
and the button takes 20px of it at most. A centred panel is unchanged; a full-bleed one sits its
button flush. Only on sections holding a corner panel, so containment reaches nothing else.
*/
@media (min-width: 981px) {
.caf-section:has(.caf-cta-band__panel > .caf-button--corner),
.caf-section:has(.caf-panel .caf-button--corner) { container-type: inline-size; }
/*
100% resolves against the nearest positioned ancestor, which the rule above makes .caf-panel
even where the button is nested inside .caf-panel__text - so the clamp measures the panel, as
it does for the band.
*/
.caf-cta-band__panel > .caf-button--corner,
.caf-panel .caf-button--corner {
right: calc(-1 * min(20px, max(0px, (100cqw - 100%) / 2)));
}
}
@media (max-width: 980px) {
.caf-cta-band__panel > .caf-button--corner,
.caf-panel .caf-button--corner { display: flex; width: fit-content; margin-left: auto; }
}
/* ---------------------------------------------------------------- panel */
/*
ONE panel: a heading, text, an optional picture and an optional button - the 39 single-panel
call-to-action bands and three pinned content listings, which measured as one shape. The counts and
why they are one widget are in PanelWidgetProperties.
THE INSET FOLLOWS THE COLOUR, which is the one thing that differs from .caf-cta-band__panel above.
That one pads unconditionally, which is right for a band: all 39 of the panels it used to carry are
tinted. The three converted listings are not tinted at all, and padding them would indent a
picture-beside-text row that the live site runs flush. var(--caf-space) is the same inset
.caf-section__column--tinted and the band's panel both use, so a converted band is unchanged.
*/
.caf-panel.caf-tinted { padding: var(--caf-space); }
/* The label pill, as the card's - same treatment, because it is the same thing in the same place. */
.caf-panel__eyebrow {
margin: 0 0 0.5rem;
font-family: var(--caf-font);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--caf-teal);
}
.caf-panel__media { margin-bottom: var(--caf-space-small); }
.caf-panel__image { display: block; width: 100%; height: auto; }
/*
THE PICTURE BESIDE THE TEXT, at the proportions the list archives already render - a third to the
picture, two thirds to the text, stacking below Divi's breakpoint. The same tracks as
.caf-listing--list .caf-listing__item:has(.caf-listing__media) further down, because that IS what
the three converted listings drew: the shape reproduced, rather than a measurement carried.
*/
/*
THE SUPPLIED LAYER HANGS THIS PANEL'S BUTTON 24px OUTSIDE ITS RIGHT EDGE, and on a phone there is
no page left for it to hang into.
caf-overrides.min.css carries
.caf-panel--image-left .caf-panel__text > .caf-button--link
{ position: absolute; right: -24px; bottom: -31px; width: 60px; height: 76px }
which is the orange corner tab, and at desktop the column is inset far enough to hold it. At 360
the panel reaches the gutter, so 6.8px of the tab is past the edge and the page scrolls - measured
on /disaster-crisis-response and /resources/views-of-charities.
PULLED IN RATHER THAN CLIPPED. Clipping the panel would cut 36px off a 60px button and leave a
visibly severed tab; the tab belongs on the corner, so at this width the corner is the panel's own
edge. Beaten on specificity rather than with !important - the vendored selector is (0,3,0) and
this is (0,4,1) - which is the one legitimate way to correct a vendored rule from a file that
loads before it.
*/
@media (max-width: 768px) {
.caf-panel.caf-panel--image-left .caf-panel__text > a.caf-button--link { right: 0; }
}
@media (min-width: 981px) {
.caf-panel--image-left,
.caf-panel--image-right {
display: grid;
gap: var(--caf-space);
align-items: start;
}
.caf-panel--image-left { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
/* The text comes first in source order, so the picture's track is the second one. */
.caf-panel--image-right { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.caf-panel--image-left > .caf-panel__media,
.caf-panel--image-right > .caf-panel__media { margin-bottom: 0; }
/*
THE PICTURE CROPPED TO THE HEIGHT OF THE TEXT, which is what a column background photograph does
and what the two featured-item sections on Canada's news page were built as. The media box
stretches to the row rather than sitting at the top, and the picture fills it.
Inside this query on purpose: below Divi's breakpoint the two sides stack, there is no text to
be as tall as, and a cropped picture would be an arbitrary band. A stacked phone keeps the
natural picture whatever the fit says.
*/
.caf-panel--fit-cover > .caf-panel__media,
.caf-panel--fit-contain > .caf-panel__media { align-self: stretch; }
.caf-panel--fit-cover > .caf-panel__media > .caf-panel__image { height: 100%; object-fit: cover; }
/* The whole picture inside that box - a logo, a report cover, anything that must not be cut. */
.caf-panel--fit-contain > .caf-panel__media > .caf-panel__image { height: 100%; object-fit: contain; }
}
/* ---------------------------------------------------------------- hero */
/*
The banner Divi calls et_pb_fullwidth_header. Its own section supplies the dark ground and now the
full width, so this only has to get the type right - and every figure below is declared by the
modules themselves rather than chosen here.
Counted across both round-8 exports: 97 instances, ALL of them title_font_size="50px" with
title_font_size_phone="22px", and 92 of the 97 carry title_font="|||on|||||" - the fourth slot in
Divi's font field, which is uppercase. Confirmed by eye on cafamerica.org/advisers-report and
/news-insights, both of which render their banner title in caps.
The 5 that do not ask for caps are all on America; they get it anyway, because the design system's
whole claim is that a treatment is applied consistently rather than per page. If that turns out to
matter on review it is one rule to scope.
The clamp reproduces the two declared ends rather than interpolating invented ones: 22px on a
phone, 50px on a desktop. Padding is small because the band it sits in already has its own -
Divi's own custom_padding on 65 of the 69 America instances is 0px top and bottom for exactly the
same reason.
*/
/*
A HERO ALWAYS SITS ON A DARK BAND, AND ON 7 PAGES OURS WAS TEAL ON TEAL.
The light treatment used to arrive by accident and only where the band was a flat colour. 90 of the
97 hero sections declare background_color="#0D393B", so .caf-section--on-dark fired, redefined
--caf-teal to --caf-paper, and the title came out white. THE OTHER 7 DECLARE A BACKGROUND IMAGE
INSTEAD, and CssColor has no colour to read on those - so the title kept the bare h1 colour, which
is --caf-teal, on a picture that is itself teal. /give-now rendered a 188px empty teal band where
the live site says WAYS TO GIVE; so did Canada's /givenow, both languages.
--visual-sweep is blind to exactly this, by construction rather than by omission: the backdrop walk
returns null the moment a background image intervenes, so low-contrast skips text over pictures. It
is the fifth defect in this file found by looking at the page, and the reason rule 13 stands.
The treatment is unconditional here rather than derived per band, and that is measured. Every one of
the 97 hero sections across both exports is dark - 90 at #0D393B, 5 on a photograph or a flat teal
PNG, 2 on Canada's Give-Now-Background-3.png - so there is no hero on a light ground to make white
text invisible on. Measured on the live sites too: the title computes #FCFCFC where a module
declares title_text_color (68 of 97) and pure white where none does (29), and the subheading is
white on all 50 that carry one, none of which declares a colour at all. Ours drew that subheading in
--caf-ink-muted, #464646, which on the teal 90 was legible only just.
Redefining the tokens rather than setting colours, for the reason .caf-section--on-dark's own
comment gives: a rule that lists the elements to lighten will one day miss one.
*/
.caf-hero {
padding-block: var(--caf-space);
--caf-ink: var(--caf-paper);
--caf-ink-muted: var(--caf-ink-muted-on-dark);
--caf-teal: var(--caf-paper);
color: var(--caf-ink);
}
/* An h1, so the case and the colour come from the global heading rules; only the clamp is its own. */
.caf-hero__title {
margin: 0;
font-size: clamp(1.375rem, 5vw, var(--caf-text-display));
line-height: var(--caf-line-tight);
}
/* The label above the heading - the source's .topBannerQuote h5 - with the same small uppercase
treatment the base h5 rule gives it, as a paragraph because it is not the heading of anything. */
.caf-hero__eyebrow {
margin: 0 0 0.5rem;
font-size: var(--caf-text-h5);
letter-spacing: 0.1px;
text-transform: uppercase;
}
.caf-hero__subheading { margin: 0.5rem 0 0; font-size: 1.25rem; color: var(--caf-ink-muted); }
/*
THE PAGE HEADER FROM THE HERO FIELDS (Views/Shared/_PageHero.cshtml), which is the band above with
its title lifted out of Page Builder. Its markup is the section the CAF.Hero widget used to sit in,
so every rule above applies unchanged and a lifted header looks as it did.
The colour is written here rather than read from --caf-teal, and that is load-bearing:
.caf-section--on-dark redefines --caf-teal to the paper colour ON THIS SAME ELEMENT, so
var(--caf-teal) here would paint the band white under white text. #0d393b is what 90 of the 97 Divi
header sections declare.
*/
.caf-page-hero { --caf-background-color: #0d393b; }
.caf-hero__action { margin: 1.25rem 0 0; }
/*
THE HOME BANNER - decision 140, 29 September 2026. Both channels' home pages, one design: the
cafcanada.ca home header without what is only Canada's (the buttons running out to the left edge
of the screen, the orange block under the photograph's corner), which is the brief - unify, not
reproduce.
Read off cafcanada.ca/ at 1440: the photograph 736px tall with NO scrim over it; a teal box at the
left, 100px below the top of the photograph, the text 90px inside it; and one orange band 64px tall
at the first line of the title, standing 24px out of the box's right edge. The buttons sit side by
side at their own width.
THE BOX IS MEASURED FROM ITS RIGHT EDGE, which is the correction of 4 October 2026. It used to be
68% of the container, and because that container is itself 80% of the viewport with a 10% gutter
either side, its right edge sat at a CONSTANT 64.4% of the screen at every width below 1529px.
America's photograph has its subject at 53-64% of the frame, so the box's top-right corner landed on
her face at every width from about 1135px to 1600px: measured covered at 1280, 1366 and 1536, clear
at 1680 and 1920. Canada's photograph puts its subject in the right third and never showed it.
Cropping could not fix the picture, and that is worth recording because Kentico's image variants
make it look available: the only crop that moves her right of the box cuts the man out of the frame
entirely, because he is already to her right. Narrowing the box inside the container could, but a
box narrow enough took Canada's much longer title from 6 lines to 7 and stacked its buttons - two
channels drifting apart over one page.
SO MOST OF THE GUTTER WENT, NOT THE WIDTH. The box keeps an inset of its own - the bar needs ground
to run across, and a box flush to the screen edge loses that half of the decoration entirely, which
was tried on the way here and looked like a fault rather than a choice. What is left of the gutter
pays for the right edge: 52% of the viewport, measured 48..710 at 1366 and 103..960 at 1920, with
the bar showing 72px and 127px of orange. Canada keeps 6 lines and side-by-side buttons at both.
The three expressions are each doing one job. margin-left: calc(50% - 50vw + inset) is the
full-bleed trick against the centred .caf-section__grid - 50% of the grid minus half the viewport is
exactly the distance from the grid's left edge to the screen's, at any width and whether the grid is
at 80% or capped at 1300px - with the inset added back on. The width is then --caf-home-edge minus
that inset, so the RIGHT edge stays put wherever the left one lands. And the inset takes a third of
the gutter rather than a fixed figure, so the bar grows on a wide screen instead of staying mean.
THE BAND IS SHORTER THAN IT WAS - 697px to 584px at 1366, 736px to 640px at 1920 - because it was
taller than the live site's, seen in a side-by-side on 4 October 2026. The padding is symmetrical
now where it used to carry an extra 2.5rem at the bottom, and the min-height clamp came down with
it. Both channels' bands are content-driven at 1366, so this is the floor rather than the height.
Above Divi's breakpoint only: on a phone the box is the width of the screen already.
NO SCRIM, AND THERE NEVER WAS ONE ANYWHERE - established 3 October 2026. Two rules used to sit here:
one laying a teal wash at 60% over any header with a picture (23 September 2026, written because
white display type had disappeared into a beach on /who-we-serve), and one immediately below it
cancelling that wash for this banner. The cancel always won - same specificity, later in source,
same property - and six days after the wash was written decision 143 made a Page with a picture
SPLIT, which took away its only other possible caller. So .caf-section--background became reachable
from the home variant alone, where the cancel was waiting. The wash painted on no page on either
channel, for ten days, and nothing could see it: --style-probe did not read background-image until
the day this was found. Measured in the browser before removing it, and both home heroes read
url(...) with no gradient in front.
It is not needed either, which is why it is gone rather than repaired: no variant puts hero text
over a photograph any more. The split's text sits on the teal panel, and this banner's text sits in
the teal box below. IF A VARIANT EVER DOES, THE WASH HAS TO COME BACK - and be looked at, because it
was never once seen working. The cancel went with it: .caf-section--background already declares
exactly what it restated.
*/
.caf-page-hero--home .caf-hero { background-color: var(--caf-background-color); padding: var(--caf-space); }
.caf-page-hero--home .caf-hero__action { display: inline-block; margin-right: 1rem; }
@media (min-width: 981px) {
.caf-page-hero--home {
--caf-home-bar-top: 7.5rem;
min-height: clamp(28rem, 42vw, 40rem);
padding-block: 6.25rem;
/* The box's right edge, which is the measurement the whole banner turns on, and the gutter it
keeps on the left so the orange bar has something to run across. The inset takes a third of
the container's own gutter and never less than 3rem, so the bar is a band rather than a nick
at 1366 and gets more room on a wide screen where there is slack to spare. */
--caf-home-edge: min(52vw, 60rem);
--caf-home-inset: max(3rem, calc((50vw - 50%) / 3));
}
.caf-page-hero--home .caf-hero {
position: relative;
margin-left: calc(50% - 50vw + var(--caf-home-inset));
width: calc(var(--caf-home-edge) - var(--caf-home-inset));
padding: 5.5rem 3.5rem 4.5rem;
}
.caf-page-hero--home .caf-hero::before,
.caf-page-hero--home .caf-hero::after {
content: "";
position: absolute;
top: var(--caf-home-bar-top);
height: 4rem;
background: var(--caf-orange);
}
/* THE BUTTONS STRADDLE THE BOX'S BOTTOM EDGE (by eye, 29 September 2026): the box stops short of
them by 1.25rem. A negative bottom margin on the inline-block takes that much out of the line
box, so the box ends above the buttons without either being positioned - they stay in the flow
and wrap as before. Only where there are buttons, so a home with none keeps its full padding. */
.caf-page-hero--home .caf-hero:has(.caf-hero__action) { padding-bottom: 0; }
.caf-page-hero--home .caf-hero__action { margin-bottom: -1.25rem; }
.caf-page-hero--home .caf-hero::before { right: calc(100% - 1.5rem); width: 100vw; }
.caf-page-hero--home .caf-hero::after { left: 100%; width: 1.5rem; }
}
/*
THE PAGE HEADER WITH A PICTURE - decision 143, 29 September 2026. A Page (not an article, not the
home) whose Hero has a picture splits: the teal box on the left, the picture as a column of its own
on the right, 50/50 or 60/40 as the page's Hero layout says. Without a picture it stays the
full-width teal band, the fallback the article header has too.
Read off cafamerica.org/financial-advisors/ (60/40) and /what-we-do/ (50/50) in a browser: both sit
inside the container, on white; the box is about 455px tall with its text about 95px in and centred
on that height; the eyebrow carries a thin rule that runs the full width of the box [WRONG - see the
correction below the panel rules; live draws no rule and the export declares no border]; and one
orange band 4rem tall, about 9rem down, comes in from the page edge, overlaps the box's left side
and shows again past the picture's right edge. The two pieces are the panel's ::before and the picture's
::after, as the home banner draws them, so they move with the boxes. No wash over the picture - the
text is on the teal, not on the photograph.
Below Divi's breakpoint the two stack, box first, and there are no bars.
*/
.caf-page-hero--split { background: none; }
/*
THE TITLE BAND: A CENTRED HEADING OVER A FULL-WIDTH PICTURE, and it was a page name until
13 October 2026.
Six rules of the supplied design were addressed to html[data-caf-path="/give-now/"], for the same
reason as the 70/30 above: the markup said "split" and nothing said which kind. This is a distinct
header SHAPE rather than a proportion - the picture is behind the words instead of beside them -
and any page may now pick it, which is the whole point of naming it.
IT SHARES THE SPLIT'S MARKUP. The same panel and the same picture element; the picture is taken
out of the flow to inset: 0 and the panel laid over it. That is how the supplied rules drew it,
and keeping the markup means no new branch in _PageHero.cshtml and nothing new for --visual-sweep
or a later reader to learn.
The panel is transparent on purpose - background: none, not a colour - because the picture behind
it is the band. Painting it would hide the thing it is sitting on. This is also why no rule here
reaches for var(--caf-teal): inside .caf-page-hero that token resolves to the paper colour, and a
band painted with it comes out white under white text.
padding-block: 0 on the section and the padding moved onto the panel, so the picture reaches the
band's own edges rather than stopping inside the section's air.
*/
.caf-page-hero--band { position: relative; padding-block: 0; }
.caf-page-hero--band .caf-section__grid {
width: min(80%, var(--caf-container));
grid-template-columns: 1fr;
}
.caf-page-hero--band .caf-page-hero__image {
position: absolute;
inset: 0;
min-height: 0;
/* Stretched rather than cropped, which is what the design asked for: the picture is a wash
behind the words rather than a photograph with a subject to keep in frame. */
background-size: 100% 100%;
}
.caf-page-hero--band .caf-page-hero__panel {
position: relative;
z-index: 1;
min-height: 0;
padding: calc(20px + min(5vw, 82px)) 0;
background: none;
text-align: center;
align-items: center;
}
/* Neither orange bleed: both are drawn against the edge of a panel that no longer has one. */
.caf-page-hero--band .caf-page-hero__panel::before,
.caf-page-hero--band .caf-page-hero__image::after { display: none; }
.caf-page-hero--band .caf-page-hero__panel .caf-hero__title {
margin: 0;
font-size: 50px;
font-weight: 500;
line-height: 50px;
letter-spacing: 0.1px;
}
/* Flush: live's box and picture touch, so the section grid's own gap is taken out. */
.caf-page-hero--split .caf-section__grid { display: grid; grid-template-columns: 1fr; gap: 0; }
/* Live's title is the banner size, not the band's - the same scale the home banner uses. */
.caf-page-hero--split .caf-hero__title { font-size: clamp(var(--caf-text-h1), 5vw, 4.5rem); line-height: 1.1; }
.caf-page-hero__panel {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--caf-space);
/* #0d393b rather than var(--caf-teal): this element is also .caf-hero, which redefines --caf-teal
to the paper colour, so the token would paint the panel white under its own white title. */
background-color: #0d393b;
}
/* THE RULE UNDER THE EYEBROW WAS NOT THERE, corrected 5 October 2026 after the user reported a
separator production does not draw. The note above claimed "the eyebrow carries a thin rule that
runs the full width of the box", read in a browser on 29 September; --style-probe against
cafamerica.org/what-we-do/ says otherwise, and so does the export.
Live's eyebrow is the h5 of an et_pb_text module whose settings declare fonts, sizes, letter
spacing, background and margin and NO border of any kind, and the rendered element computes
border-bottom: 0px none. Ours computed 1px solid rgba(252, 252, 252, 0.35).
The full-bleed negative margin and the horizontal padding went with it: they existed only to make
that rule span the box, and they cancel each other out, so the text does not move. The bottom
padding stays, because it is the gap above the title rather than space for a line. */
.caf-page-hero__panel .caf-hero__eyebrow {
margin-bottom: 1.25rem;
padding-bottom: 0.75rem;
}
.caf-page-hero__image {
position: relative;
min-height: 16rem;
background-image: var(--caf-background);
background-size: cover;
background-position: center;
}
@media (min-width: 981px) {
.caf-page-hero--split { --caf-split-pad: 5.5rem; }
.caf-page-hero--60-40 .caf-section__grid { grid-template-columns: 3fr 2fr; }
.caf-page-hero--50-50 .caf-section__grid { grid-template-columns: 1fr 1fr; }
/*
THE THIRD PROPORTION, AND IT WAS A PAGE NAME UNTIL 13 OCTOBER 2026.
The supplied design drew this with four rules addressed to html[data-caf-path="/how-we-work/"],
because every page header emitted the same three classes and a stylesheet had no other way to
tell that one apart. Rename the page and the header silently became 60/40. It is a layout, not
a page: 70/30 drawn edge to edge, available to any page that picks it.
The width is the supplied measurement kept as it was - 1620px is wider than --caf-container
and narrower than --caf-container-wide, and it is what the design asked for rather than a
token this file already had. max-width: none is needed because .caf-section__grid caps itself.
*/
.caf-page-hero--70-30 .caf-section__grid {
width: min(100%, 1620px);
max-width: none;
grid-template-columns: 70% 30%;
}
/* The panel bleed starts lower and reaches less far, because the band has no padding above it. */
.caf-page-hero--70-30 .caf-page-hero__panel::before { top: 116px; right: calc(100% - 36px); }
/* No orange tab on the far side of the picture: it would sit against the viewport edge. */
.caf-page-hero--70-30 .caf-page-hero__image::after { display: none; }
.caf-page-hero__panel { min-height: 28rem; padding: 4.5rem var(--caf-split-pad); }
/* The eyebrow's full-bleed override went with the rule it was widening on 5 October 2026 - see
the correction above. Nothing replaces it: with no line to span, the eyebrow is just text. */
.caf-page-hero__panel::before,
.caf-page-hero__image::after {
content: "";
position: absolute;
top: 9rem;
height: 4rem;
background: var(--caf-orange);
}
.caf-page-hero__panel::before { right: calc(100% - 2.25rem); width: 100vw; }
.caf-page-hero__image::after { left: 100%; width: 1.25rem; }
}
/* The same two, inside the article template's own header - see Views/Shared/_HeroDetail.cshtml. */
.caf-body__subheading { margin: 0.75rem 0 0; font-size: 1.25rem; color: var(--caf-ink-muted); }
.caf-body__action { margin: 1.25rem 0 0; }
/* ---------------------------------------------------------------- tile grid */
/*
FOUR PICTURE TILES: ONE TALL ON THE LEFT, TWO HALVES ABOVE ONE WIDE ON THE RIGHT. The "Resources
for …" block on nine America pages and the home page's feature grid - see TileGridWidgetProperties.
Every figure is a COMPUTED value read off cafamerica.org on 28 September 2026, /what-we-do/friends-fund
and the home page, at 1440 and 1920 wide. The source's own fractions say 1_2,1_2 and are not what
the live page draws: the client's CSS narrows the left column, so the three tracks come out
near-equal (348, 356, 356 at 1440) with 40px between them and 24px between the rows.
resources tiles 420px tall, the tall one both rows; heading 30px/500 Outfit, text 17px serif,
both inset 24px; the link a full-width bar, 20px/400 uppercase on 50% black, 12px 24px
features tall track two fifths of the row, tiles as tall as their words; text 16px serif,
inset 17px; the bar 17px/700 on 30% black with an arrow, and a label pill in the corner
The text sits at the bottom of every tile, which is what the live flex column does.
*/
.caf-tile-grid { margin-block: var(--caf-space); }
.caf-tile-grid__header {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: var(--caf-space);
margin-block-end: 1.5rem;
}
/* 43px uppercase in near-black, as live draws it, whatever the page's h2 scale says. */
.caf-tile-grid__heading {
margin: 0;
font-size: clamp(2rem, 4vw, 2.6875rem);
font-weight: 500;
line-height: 1;
text-transform: uppercase;
color: var(--caf-ink);
}
/* The chevron .caf-button draws, on the client's button, whose right padding is widened for it. */
.caf-tile-grid__button { position: relative; padding-right: 3rem; white-space: nowrap; }
.caf-tile-grid__button::after {
content: "";
position: absolute;
top: 50%;
right: 1.4rem;
width: 0.4rem;
height: 0.4rem;
border-top: 0.125rem solid currentColor;
border-right: 0.125rem solid currentColor;
transform: translateY(-50%) rotate(45deg);
}
.caf-tile-grid__tiles {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
.caf-tile-grid__tile {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 26.25rem;
overflow: hidden;
background: var(--caf-tile-color, var(--caf-teal));
color: var(--caf-paper);
}
.caf-tile-grid--features .caf-tile-grid__tile { min-height: 16rem; }
.caf-tile-grid__tile--empty { background: none; }
.caf-tile-grid__tile--empty > span {
margin: auto;
color: var(--caf-ink-muted);
font-family: var(--caf-font);
}
.caf-tile-grid__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Divi's gradient over the picture, 0.33 to 0.35 black on every tile that has one. */
.caf-tile-grid__tile--darken::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: rgba(13, 13, 13, 0.35);
}
.caf-tile-grid__text,
.caf-tile-grid__link,
.caf-tile-grid__eyebrow { position: relative; z-index: 2; }
.caf-tile-grid__text { padding: 1.5rem 1.5rem 0; }
.caf-tile-grid__heading-tile {
margin: 0 0 1rem;
font-size: 1.875rem;
font-weight: 500;
line-height: 1;
color: var(--caf-paper);
}
.caf-tile-grid__body {
font-family: var(--caf-font-serif);
font-size: 1.0625rem;
line-height: var(--caf-line);
color: var(--caf-paper);
}
.caf-tile-grid__body > :first-child { margin-top: 0; }
.caf-tile-grid__body > :last-child { margin-bottom: 0; }
.caf-tile-grid__body a { color: var(--caf-paper); }
.caf-tile-grid__link {
display: block;
margin-top: 1.5rem;
padding: 0.75rem 1.5rem;
background: rgba(0, 0, 0, 0.5);
font-family: var(--caf-font);
font-size: 1.25rem;
font-weight: 400;
line-height: var(--caf-line);
text-transform: uppercase;
text-decoration: none;
color: var(--caf-paper);
}
.caf-tile-grid__link:hover { color: var(--caf-paper); text-decoration: underline; }
/* The chevron, drawn from two borders as the buttons draw theirs. */
.caf-tile-grid__link::after {
content: "";
display: inline-block;
width: 0.4rem;
height: 0.4rem;
margin-left: 0.6rem;
border-top: 0.125rem solid currentColor;
border-right: 0.125rem solid currentColor;
transform: translateY(-0.12rem) rotate(45deg);
}
/* The home grid's version of the same parts. */
.caf-tile-grid--features .caf-tile-grid__text { padding: 1.5rem 1.0625rem 0; }
.caf-tile-grid--features .caf-tile-grid__heading-tile { margin-bottom: 0.6rem; }
.caf-tile-grid--features .caf-tile-grid__body { font-size: 1rem; }
.caf-tile-grid--features .caf-tile-grid__link {
padding: 0.875rem 1.0625rem 0.625rem;
background: rgba(0, 0, 0, 0.3);
font-size: 1.0625rem;
font-weight: 700;
}
/* A glyph, not an escape - see the card's arrow and CLAUDE.md rule 12. */
.caf-tile-grid--features .caf-tile-grid__link::after {
content: "→";
width: auto;
height: auto;
margin-left: 0.45rem;
border: 0;
transform: none;
}
/* The label pill, pinned to the corner as the card's is on the live template. */
.caf-tile-grid__eyebrow {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0.5rem 0.9rem;
background: var(--caf-teal);
font-family: var(--caf-font);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--caf-paper);
}
/* Stacked below Divi's breakpoint, like every other row; side by side above it. */
@media (min-width: 981px) {
.caf-tile-grid__tiles {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: auto auto;
column-gap: 2.5rem;
}
.caf-tile-grid--features .caf-tile-grid__tiles {
grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr);
column-gap: 1.875rem;
}
.caf-tile-grid__tile--tall { grid-column: 1; grid-row: 1 / span 2; }
.caf-tile-grid__tile--wide { grid-column: 2 / span 2; }
}
/* ---------------------------------------------------------------- team grid */
/*
The "Our Team" block: picked staff pages two to a row, each a portrait beside a name, a role and a
LinkedIn link. Measured on cafamerica.org/how-we-work at 1440 and 1920 on 28 September 2026:
heading 54px/500 Outfit uppercase, centred, near-black; 40px above and below its row
intro body copy, 25px above and below
card 30px padding all round, no border or fill; two 50% columns, 2-gutter
portrait 150px square (100px on phone), 40px before the text; the file itself is the circle
name 30px/500 Outfit teal, line-height 1, 8px below
role body copy, serif 17px
link 16px/600 serif, brand orange, no underline
button the link treatment, at the right-hand end of the row
The portrait is cropped to a circle here as well, so a person with no team portrait - whose
profile photograph is used instead - still reads as one of the set.
*/
.caf-people { margin-block: var(--caf-space); }
.caf-people__heading {
margin: 2.5rem 0;
font-size: clamp(2rem, 4vw, 3.375rem);
font-weight: 500;
line-height: 1;
letter-spacing: -0.1px;
text-transform: uppercase;
text-align: center;
color: var(--caf-ink);
}
/* /what-we-do/cadf's "Meet our team": the page's h3, left-aligned and teal, in its own case. */
.caf-people--subheading .caf-people__heading {
font-size: var(--caf-text-h3);
text-transform: none;
text-align: left;
color: var(--caf-teal);
}
/* Body copy on live is the serif, here as in the listing's text; the page's own default is Outfit. */
.caf-people__intro,
.caf-people__role { font-family: var(--caf-font-serif); }
.caf-people__intro { margin-block: 1.5625rem; }
.caf-people__intro > :last-child { margin-bottom: 0; }
.caf-people__members {
display: grid;
grid-template-columns: minmax(0, 1fr);
margin: 0;
padding: 0;
list-style: none;
}
.caf-people__member {
display: flex;
align-items: flex-start;
gap: 1.25rem;
padding: 1.875rem 0;
}
.caf-people__portrait {
flex: none;
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
}
.caf-people__text { min-width: 0; }
.caf-people__name {
margin: 0 0 0.5rem;
font-size: 1.875rem;
font-weight: 500;
line-height: 1;
color: var(--caf-teal);
}
.caf-people__role { margin: 0; }
.caf-people__link {
display: inline-block;
font-family: var(--caf-font-serif);
font-size: 1rem;
font-weight: 600;
color: var(--caf-orange);
text-decoration: none;
}
.caf-people__link:hover { color: var(--caf-teal); }
.caf-people__footer { display: flex; justify-content: flex-end; padding-block: 1rem; }
.caf-people__notice,
.caf-people--empty { color: var(--caf-ink-muted); font-style: italic; }
@media (min-width: 769px) {
.caf-people__member { gap: 2.5rem; padding: 1.875rem; }
.caf-people__portrait { width: 150px; height: 150px; }
}
/* TWO TO A ROW FROM THE SPACE THE GRID HAS, NOT FROM THE WINDOW - and it was the window until the
webinar's speakers put a people grid inside an article column (decision 153). Divi's 981px
breakpoint is the right answer for a grid in a full-width section and the wrong one for a grid in a
column half that wide: a 1400px window still gave two columns of about 375px, which left 185px for
the words beside a 150px portrait and broke "Vicki Kabalika" across two lines. 1000px is where two members fit
with words beside them rather than under them: a member is a 150px portrait, 60px of padding and a
40px gap, so a column under 500px leaves the role fewer than 250px and every multi-word name wraps. */
.caf-people { container-type: inline-size; }
@container (min-width: 1000px) {
.caf-people__members { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.375rem; }
}
/* ---------------------------------------------------------------- item */
/*
ONE item in a column of a section, beside others like it - see ItemWidgetProperties. This is what
the card grid became when the grid moved out of the widget and into the section: the column count
and the item count are the section's business now, so nothing here lays anything out.
Every figure is the one the card grid rendered with, so an item in a 1_3,1_3,1_3 section renders as
its card did in a three-column grid. What follows IS the per-card half of that block, moved here;
the grid half was deleted rather than rewritten, so there is no card grid block left to compare
against - git show 0044c65^:wwwroot/css/site.css is where the measurements are argued.
THE GAPS ARE GONE FROM HERE and that is the point. The card grid set --caf-card-grid-gap to 3%
(plain), 1.25rem (panel) and 5.5% (compact), because it drew its own columns. A section takes its
gutter from the row it was converted from, through GutterFor - gutter_width="2" is 3% and "1" is 0 -
which is the same number arrived at honestly instead of per style.
A CONTAINER, so an item can answer to the width of its column rather than to the viewport. Nothing
below uses it yet: every type size here is fixed, and the stacking is the section's at 981px. It is
declared because that is the mechanism a widget in an arbitrary column needs, and .caf-people has
proved it works here. Deliberately NOT on .caf-section__column: cqw units resolve to the nearest
size container whatever its name, so containing the column would make 100cqw the column's width and
silently flatten the corner button's overhang clamp, which measures the section on purpose.
*/
.caf-item {
container-type: inline-size;
display: flex;
flex-direction: column;
min-width: 0;
}
/*
So a row of items is as tall as its tallest, which is what make_equal="on" does on the live rows.
The section's grid cell already stretches; this is the item filling it.
:only-child SINCE 3 OCTOBER 2026, and the restriction is the whole point of the rule rather than a
detail of it. Every item written before decision 160 was one per column, so an unqualified
height:100% meant "fill the cell". /finance is the first page to stack EIGHT in one column, and
there each one claimed the full cell in turn: rows 3 to 16 were laid out a column-height apart and
the page became scenery. An item with siblings has no cell of its own to fill, so it takes its own
height - which is also what a stacked list of document rows wants.
*/
.caf-item:only-child { height: 100%; }
.caf-item--center { text-align: center; }
.caf-item--right { text-align: right; }
/*
AN IMAGE IN THE TEXT IS A BLOCK, so text-align cannot reach it. .fr-view img is display: block with
its own vertical margins - the rule the body copy needs, where an image is a figure between
paragraphs - and a block box centres by its margins, not by its parent's text-align. Without this
the six "Who We Serve" tiles centre their heading and their words and leave the icon hard left,
which is markup that passes every structural check and a page that looks wrong.
*/
.caf-item--center .caf-item__text img { margin-inline: auto; }
.caf-item__eyebrow {
margin: 0 0 0.5rem;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--caf-ink-muted);
}
.caf-item__heading {
margin: 0 0 0.625rem;
font-weight: 500;
line-height: 1;
}
.caf-item__text { font-family: var(--caf-font-serif); }
.caf-item__text > :last-child { margin-bottom: 0; }
/* The button sits at the foot, so a row of them lines up whatever the text above each. margin-top on
the item's own child rather than on the text, because the text is optional. */
.caf-item__button { align-self: flex-start; margin-top: auto; }
.caf-item--center .caf-item__button { align-self: center; }
.caf-item--right .caf-item__button { align-self: flex-end; }
/* plain - "Who We Serve". The rule between rows is the section's now: .caf-section--ruled. */
.caf-item--plain { padding: 2.5rem 0 0.9375rem; }
.caf-item--plain .caf-item__heading {
font-size: 1.4375rem;
letter-spacing: 0.1px;
color: var(--caf-ink);
}
.caf-item--plain .caf-item__text { margin-bottom: 1.5625rem; }
.caf-item--plain .caf-item__button {
font-size: 1.125rem;
line-height: 1.7;
}
/*
panel - "Our Services", and every converted call-to-action panel.
THE INSET FOLLOWS THE COLOUR, as the panel widget's does and for the same reason: var(--caf-space)
is the inset .caf-section__column--tinted and .caf-cta-band__panel both use, so a converted band is
unchanged. The card grid's own 2.1875rem is close enough to var(--caf-space) that reproducing it
exactly would be the per-page measurement the front-end guide says to stop carrying.
The lightening is the shared .caf-tinted--on-dark the view adds, not a redefinition here - the card
grid hard-coded #0d393b and its own --caf-ink override because it had no colour property.
*/
.caf-item--panel.caf-tinted { padding: var(--caf-space); }
.caf-item--panel .caf-item__heading {
margin-bottom: 1.625rem;
font-size: 1.5625rem;
letter-spacing: 1px;
}
.caf-item--panel .caf-item__text { margin-bottom: 3rem; }
/*
THAT GAP IS ROOM FOR A BUTTON, so a panel that has none does not want it. The text is the last child
exactly when no button was rendered - see _ItemMarkup.cshtml - and without this a tile of nothing but
words carries 3rem of empty ground at its foot. Found by looking at the before and after of Canada's
/what-we-do/corporations, whose six tiles are the only panels on either site with no button at all:
the structural check passed and the tile had simply grown 48px.
*/
.caf-item--panel .caf-item__text:last-child { margin-bottom: 0; }
.caf-item--panel .caf-item__button {
font-size: 1.25rem;
font-weight: 500;
line-height: 1.7;
}
/* compact - "Advantages of …", which carry a heading and words and usually no link. */
.caf-item--compact .caf-item__heading {
margin-bottom: 1.5625rem;
font-size: 1.5rem;
line-height: 1.1;
letter-spacing: 1px;
color: var(--caf-teal);
}
/*
THE PICTURE, added 3 October 2026 with decision 160 — the deferred question the item was registered
as a view component to keep open. Deliberately the PANEL'S rules in the panel's shape rather than
new ones: the same tracks, the same breakpoint, the same two fits, so a placement that moves between
the two widgets looks the same in both and there is one thing to fix if either is wrong.
ABOVE THE HEADING NEEDS ALMOST NOTHING, because the item is already a flex column and the picture is
simply its first child. That is also why no .caf-item__body wrapper is emitted in that case: the 697
placements written before this carry exactly the markup they always did.
*/
.caf-item__media { margin-bottom: var(--caf-space-small); }
.caf-item__image { display: block; width: 100%; height: auto; }
/*
BESIDE THE TEXT THE ITEM STOPS BEING A FLEX COLUMN and becomes a two-track grid, so the column moves
down to .caf-item__body — which is why the body wrapper exists at all. Without it the button's
margin-top:auto would have nothing to push against.
NO height:100% HERE, and that is the whole lesson of this rule. It was written with one, by analogy
with .caf-item above, and it collapsed /finance to a single visible row at every width: a percentage
height on a flex child of an indefinite-height flex column resolves to something the browser then
lays the siblings out underneath, so item 1 claimed the column and items 2 to 8 went off the page.
The item's own height:100% is against the SECTION'S GRID CELL, which is definite; this one had
nothing definite to be a percentage of.
*/
.caf-item__body {
display: flex;
flex-direction: column;
min-width: 0;
}
@media (min-width: 981px) {
.caf-item--image-left,
.caf-item--image-right {
display: grid;
gap: var(--caf-space);
align-items: start;
}
.caf-item--image-left { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
/* The text comes first in source order, so the picture's track is the second one. */
.caf-item--image-right { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.caf-item--image-left > .caf-item__media,
.caf-item--image-right > .caf-item__media { margin-bottom: 0; }
/*
Cropped to the height of the text, inside the query for the panel's reason: below the breakpoint
the two sides stack, there is no text to be as tall as, and a cropped picture would be an
arbitrary band. A stacked phone keeps the natural picture whatever the fit says.
*/
.caf-item--fit-cover > .caf-item__media,
.caf-item--fit-contain > .caf-item__media { align-self: stretch; }
.caf-item--fit-cover > .caf-item__media > .caf-item__image { height: 100%; object-fit: cover; }
/* The whole picture inside that box - a report cover, anything that must not be cut. */
.caf-item--fit-contain > .caf-item__media > .caf-item__image { height: 100%; object-fit: contain; }
}
.caf-item--empty { color: var(--caf-ink-muted); font-style: italic; }
/*
THE LINE BETWEEN THE ROWS of a block built as a section per row - see
ColumnsSectionProperties.RuledBelow. Desktop only, because the source drew it as a divider row
marked disabled_on="on|on|off" and a stacked phone has no rows to divide.
Positioned on the column rather than drawn as the section's own border-bottom so it spans the
columns and not the row's full width, which is what the divider modules did - one per column, with
the gutter between them left bare. position: relative only on a ruled section, so the corner
button's positioned ancestor is untouched everywhere else.
*/
@media (min-width: 981px) {
.caf-section--ruled .caf-section__column { position: relative; }
/*
Half the gap below, so the line sits in the middle of it. A ruled row and the row under it both
take the standing gap, which is --caf-space-large each side, so half of that distance is one
--caf-space-large from the bottom of this one. The source put its divider row's line in the
middle of a 93px gap by the same reasoning.
*/
.caf-section--ruled .caf-section__column::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: calc(-1 * var(--caf-space-large));
border-top: 1px solid var(--caf-teal);
}
}
/* ---------------------------------------------------------------- media and text */
/*
A PICTURE BESIDE A HEADING, TEXT, A BUTTON AND AN OPTIONAL GREY PANEL - the who-we-serve rows and an
article's photograph beside its words, which converted to a two-column section until they were one
widget. It lays out exactly as that section did, from the same arithmetic: --caf-columns is
ColumnsSectionViewComponent.GridTemplate over the Divi fractions, --caf-gutter is GutterFor, and the
two sides stack below Divi's 981px breakpoint in source order, so a picture on the right comes after
the text on a phone as it does on the live sites.
Measured on cafamerica.org at 1534px:
/who-we-serve/us-nonprofits 1_2,1_2, gutter 2 (3%): the photograph fills its half as tall as the
text beside it; the text column tiles Group-70.png, a 20x61px strip
whose one grey pixel (#808080) is at row 28, and its first module
sits 50px down.
/blog/resilience-in-haiti-… eight rows of a column background photograph beside text, cover and
centred, as tall as the text - 148px beside a heading alone.
The corner classes those columns carry (topRightBorder, topLeftBorder, bottomBorderRight) paint
nothing on either live site - no border, no pseudo-element, no rule in any stylesheet - so they are
not drawn here either.
*/
.caf-media-text {
display: grid;
grid-template-columns: 1fr;
gap: var(--caf-space);
}
@media (min-width: 981px) {
.caf-media-text {
grid-template-columns: var(--caf-columns, 1fr 1fr);
column-gap: var(--caf-gutter, var(--caf-space));
}
}
.caf-media-text__media,
.caf-media-text__text { min-width: 0; }
.caf-media-text--align-center { align-items: center; }
.caf-media-text__media > :last-child { margin-bottom: 0; }
/* The cropped photograph: the side is as tall as the text, and the picture fills it. */
.caf-media-text__frame {
display: flex;
flex-direction: column;
height: 100%;
margin: 0;
}
.caf-media-text__picture {
display: block;
flex: 1 1 auto;
min-height: 18rem;
background-image: var(--caf-background);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.caf-media-text--fit-contain .caf-media-text__picture { background-size: contain; }
@media (min-width: 981px) {
/* Beside a heading alone the live photograph is 148px, so the floor is about that rather than the
18rem a stacked picture needs to be seen at all. */
.caf-media-text__picture { min-height: 9rem; }
}
/* The line above the text, drawn rather than tiled: the same 1px grey at 28px, the text 50px down. */
.caf-media-text__text--rule {
padding-top: 50px;
background: linear-gradient(#808080, #808080) no-repeat 0 28px / 100% 1px;
}
/* Canada's strip is raised 25px, which leaves the line 3px from the top. */
.caf-media-text__text--rule-raised { background-position: 0 3px; }
/* The panel below the text, separated as it is in a column - see .caf-section__column > * + .caf-cta-band. */
.caf-media-text__text > * + .caf-cta-band { margin-top: 30px; }
.caf-media-text--empty,
.caf-media-text__missing {
padding: var(--caf-space);
border: 1px dashed var(--caf-rule);
color: var(--caf-ink-muted);
}
/* ---------------------------------------------------------------- accordion */
.caf-accordion { border-bottom: 1px solid var(--caf-rule); }
.caf-accordion__title {
padding: 0.85rem 0;
font-weight: 600;
color: var(--caf-teal);
cursor: pointer;
}
.caf-accordion__title:hover { color: var(--caf-orange); }
.caf-accordion__content { padding: 0 0 1rem; }
/* ---------------------------------------------------------------- tabs */
/*
A group of accordion panels drawn as a tab set - the 27 panels that came from Divi's et_pb_tabs
rather than from an accordion. The wrapper and the strip do not exist in the markup: wwwroot/js/tabs.js
builds them, so EVERY RULE IN THIS BLOCK IS INERT UNTIL IT HAS RUN and the fallback is the accordion
above, untouched. See analysis/status.md §5 for what this replaces.
The strip and the panel summaries are both present at every width and exactly one of them is
rendered - the strip above the stacking width, the summaries below it. display:none rather than a
visually-hidden clip, because the hidden one must leave the tab order as well as the page, and
because two controls for one panel is the thing to avoid rather than to style around.
The treatment is the live sites' shape with this project's own values: equal-width tabs in a row,
a rule along the top of each that lights up on the open one, and the open tab's ground continuing
into the panel below it so the two read as one surface. Live draws the rule 5px in #ff3b21 over
#f5f5f4, which is --caf-orange over --caf-paper-alt here; the type comes from the tokens rather
than from live's 'Outfit 600 uppercase, line-height 24px', per the front-end guide's standing rule.
*/
.caf-tabs__strip { display: none; }
@media (min-width: 981px) {
.caf-tabs { background: var(--caf-paper-alt); }
.caf-tabs__strip {
display: flex;
align-items: stretch;
}
.caf-tabs__tab {
/* A flex box of its own so a label that wraps to two lines sits level with the ones that do
not - "Adviser Insights and Strategies" against "Humanitarian Crisis in Haiti". */
display: flex;
flex: 1;
align-items: center;
justify-content: center;
padding: var(--caf-space);
border: 0;
/* Transparent rather than paper-coloured, so the active rule is a colour change on one
property and an inactive tab cannot be a 5px line of the wrong white. */
border-top: 5px solid transparent;
background: var(--caf-paper);
color: var(--caf-ink);
font-family: var(--caf-font);
font-size: var(--caf-text);
font-weight: 600;
line-height: var(--caf-line-tight);
text-align: center;
text-transform: uppercase;
cursor: pointer;
}
.caf-tabs__tab:hover,
.caf-tabs__tab--active {
border-top-color: var(--caf-orange);
background: var(--caf-paper-alt);
}
/* The panels are the surface under the strip rather than a stack of rules, so the accordion's own
separator goes, its summary goes, and the padding belongs to the body instead. */
.caf-tabs .caf-accordion { border-bottom: 0; }
.caf-tabs .caf-accordion__title { display: none; }
.caf-tabs .caf-accordion__content { padding: 0; }
}
/*
The body of one of those panels, which is the client's own two-column block: a .twoThirds of
heading, words and a link beside a .oneThird holding one picture. NEITHER CLASS HAD A SINGLE RULE
IN THIS FILE, so all 19 panels carrying them stacked the picture under the words at every width.
Their child theme reads
.tabStories .twoThirds { display:flex; max-width:60%; float:left; padding:25px 10% 25px 25px }
.tabStories .oneThird img { object-fit:cover; min-width:100%; min-height:100% }
so the names are 60/40 rather than the thirds they say, and the float is dead inside a flex parent.
The shape is what is reproduced - text beside picture, picture filling its column, stacking at the
same width everything else here stacks at - and the spacing comes from the tokens.
.bottomBorderLeft rides along on all 19 oneThirds and is defined NOWHERE in either live stylesheet,
so there is nothing to carry and no border is missing.
Not scoped to .caf-tabs: this is the panel's own layout, so it is the same whether the group drew a
strip or stayed an accordion.
*/
.tabStories .oneThird img {
display: block;
width: 100%;
height: auto;
}
@media (min-width: 981px) {
.tabStories .caf-accordion__content {
display: flex;
align-items: stretch;
}
.tabStories .twoThirds {
display: flex;
flex: 0 1 60%;
flex-direction: column;
justify-content: center;
padding: var(--caf-space-large) var(--caf-space-large) var(--caf-space-large) var(--caf-space);
}
.tabStories .oneThird { flex: 1 1 40%; }
.tabStories .oneThird img {
height: 100%;
object-fit: cover;
}
}
/* ---------------------------------------------------------------- listing */
/*
The card picture. The Post Grid draws one on every card - 440 instances across 143 pages on
America, 37 across 10 on Canada - and this listing drew none until the generated models caught up
with the FeaturedImage field.
A fixed ratio with object-fit rather than the image's own shape, because a grid of cards whose
pictures are different heights is a ragged grid; 3/2 is the commonest shape in the media library.
The tint holds the box while the image loads so the page does not reflow under the reader.
*/
.caf-listing__media { position: relative; display: block; margin-bottom: var(--caf-space-small); }
.caf-listing__image-link { display: block; }
.caf-listing__image {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
background: var(--caf-paper-alt);
}
/*
A HEADSHOT IS SQUARE, and the rule above cost it a third of its height.
Every portrait in the library is square or within 2% of it - the 19 on /staff are 270x270, 268x273,
2560x2560 and 5504x5504 - so a square source into a 3:2 box loses 33% of its height, 16.7% off each
end. Measured at 1440 that took the tops of the heads off Oscar Bazoberry, Oscar de Bruyn Kops and
Matt Hammerstein and clipped Jane Peebles' hair. cafamerica.org/staff crops none of them: its
picture is 258x258 against our 270x178.
Square rather than height:auto, which is what the live site does. Two of the 19 are 268x273, so the
source's own shape would stand them 5px proud of their row; cover at 1:1 takes 1.8% off those two
instead and keeps the row even.
This does NOT address the dither on the small headshots, and the dither was not what was reported:
before and after are identical on the same patch, 8 colours and a 0.966 delta. At real size that is
about one level in 255. The crop was the visible defect. The files are still small - see finding 184.
AND IT STOPPED WORKING TWO DAYS LATER, which is the shape every vendored-layer defect has. The rule
below was one class, (0,1,0), and that was enough while site.css was the only stylesheet. The
supplied design arrived on 8 October with
.caf-listing--grid:not(.caf-listing--carousel) .caf-listing__image { height: 320px; aspect-ratio: auto }
.caf-listing--carousel .caf-listing__image { height: 360px; aspect-ratio: auto }
at (0,3,0) and (0,2,0), and a fixed height beats a ratio outright: aspect-ratio is ignored once both
axes are given. Nothing was reverted - the modifier is still on all 19 cards - it was outranked. The
probe read 255x320 at 1440, 204x320 at 1185 and 648x320 at 768, where a square face is squeezed into
a 2:1 box and loses a quarter off each end, which is worse than the 3:2 crop this rule was written
to fix.
So the selectors below mirror the two they correct and add the modifier, (0,4,0) over (0,3,0) and
(0,3,0) over (0,2,0), and no !important - the same way the three vendored-rule corrections of
13 October win. height: auto is half the fix and the more important half: without it the ratio is
inert however specific the selector gets.
*/
.caf-listing__image--portrait { aspect-ratio: 1 / 1; }
.caf-listing--grid:not(.caf-listing--carousel) .caf-listing__image.caf-listing__image--portrait,
.caf-listing--carousel .caf-listing__image.caf-listing__image--portrait {
height: auto;
aspect-ratio: 1 / 1;
}
/*
THE CATEGORY BADGE, which every card on both live sites wears over its picture and ours printed as
grey text under the title when it printed it at all.
One treatment because the source declares one: of the 35 grid configurations that show a category,
28 set tpg_category_position="top_left" with tpg_category_style="style2" and tpg_category_bg
"#092729", 4 put it above the title and 3 say nothing. The live ARCHIVES agree — /news-insights
draws "Blogs" over its thumbnail too — so this is not a grid-only shape.
Every figure is computed off cafamerica.org's home page on 23 September 2026: #092729 ground, white,
13px Outfit uppercase at 0.39px tracking, padding 4px 8px 3px, and the badge overhanging the
picture's left edge by 15px. The overhang is carried because it is what makes it read as a label
ON the photograph rather than a caption inside it, and it cannot cause sideways scroll: the media
element is inside the listing's own column, not against the edge of the page.
#092729 is a literal rather than --caf-teal-dark (#0b2d2e), which is close and is not it. The value
is the GRID's own setting rather than a brand colour, so a token would claim a relationship the
export does not state.
*/
.caf-listing__badge {
position: absolute;
top: 15px;
left: -15px;
padding: 4px 8px 3px;
background: var(--caf-teal-dark);
color: var(--caf-paper);
font-family: var(--caf-font);
font-size: 0.8125rem;
letter-spacing: 0.39px;
text-transform: uppercase;
}
.caf-listing__item { padding-block: var(--caf-space); border-bottom: 1px solid var(--caf-rule); }
.caf-listing__text > :first-child { margin-top: 0; }
.caf-listing__text > :last-child { margin-bottom: 0; }
.caf-listing__title { margin: 0 0 0.25rem; font-size: 1.25rem; }
.caf-listing__title a { text-decoration: none; }
.caf-listing__title a:hover { text-decoration: underline; }
/* The archive meta line: date and category, as the live archives print them under a title. Separated by
a rule on the category rather than by punctuation in the markup, so a missing category leaves no
stray divider - the live page writes "date | category" and an item with neither renders no line. */
.caf-listing__meta { margin: 0 0 0.35rem; font-size: var(--caf-text-small); color: var(--caf-ink-muted); }
.caf-listing__date { font-size: inherit; color: inherit; }
.caf-listing__category::before,
.caf-listing__date:not(:first-child)::before { content: " | "; }
.caf-listing__category:first-child::before { content: ""; }
/*
The byline, which the post slider prints first: "By Joe Crome, CAP® | Aug 26, 2026". Measured on
cafamerica.org's home page as 16px Source Serif 4 at weight 700 in #354559 — the module's own
meta_font, meta_font_size and meta_text_color, all three declared and none of them read until now.
The separator is on the DATE rather than in the markup, matching what the category already does, so
an item with a byline and no date and one with a date and no byline both come out clean.
*/
.caf-listing__author { font-family: var(--caf-font-serif); font-weight: 700; }
.caf-listing__summary { margin: 0; }
/*
A staff member's position title, which the live site sets as italic serif where an article's excerpt
is upright. Measured on cafamerica.org/staff against /news-insights rather than inferred: the theme
styles The Post Grid's ACF custom-field output and its excerpt output differently, and ours had both
as upright sans because they arrive in the same field here.
*/
.caf-listing__summary--role { font-family: var(--caf-font-serif); font-style: italic; }
/*
THE READ-MORE CONTROL, which 13 of the 42 grids ask for and none of them got. An orange square with
a white arrow in it and no words - measured on the home page's GRN box: #ff3b21 ground, white,
59 x 68, padding 15px 15px 15px 20px around a 20px icon.
The arrow is drawn rather than set in a font. The live site uses Font Awesome, which this project
does not load and will not load for one glyph; a CSS triangle-and-bar is the same shape at any size
and inherits the colour, so the hover state needs no second rule.
Live positions it absolutely at right: -20px, bottom: -30px - hanging outside its own card. That is
NOT carried, for the reason the button section gives about the chevron at right: -28px: a box that
contains its own control has a hit area matching what a visitor sees, and an overhang measured
against Divi's box is measured against a box we do not have. Right-aligned in the flow instead,
which is what tpg_read_more_button_alignment="right" asks for.
*/
.caf-listing__more { margin: 0.9rem 0 0; text-align: right; }
.caf-listing__more-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 59px;
height: 68px;
background: var(--caf-orange);
color: var(--caf-paper);
}
/* The site's own button hover rather than the grid's #d4311c: this is a button, .caf-button turns teal
on hover, and one design system answers "what does a button do when you point at it" once. */
.caf-listing__more-link:hover { background: var(--caf-teal); color: var(--caf-paper); }
/* The arrow: a 2px shaft with a rotated square for the head, so one element draws both and the whole
thing scales with the box rather than with a loaded font. */
.caf-listing__arrow {
position: relative;
display: block;
width: 18px;
height: 2px;
background: currentColor;
}
.caf-listing__arrow::after {
content: "";
position: absolute;
top: 50%;
right: 0;
width: 8px;
height: 8px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
transform: translateY(-50%) rotate(45deg);
}
/* The archive pager. Newer on the left and older on the right, which is the order the live sites put
them in - their pagination floats one each way. */
.caf-pager { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem 1.5rem; margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--caf-rule); }
.caf-pager__position { order: 2; font-size: var(--caf-text-small); color: var(--caf-ink-muted); }
.caf-pager__newer { order: 1; }
.caf-pager__older { order: 3; }
.caf-pager a, .caf-pager__newer, .caf-pager__older { font-weight: 600; text-decoration: none; }
.caf-pager a:hover { text-decoration: underline; }
.caf-listing__empty { color: var(--caf-ink-muted); }
/*
A GRID'S COLUMN COUNT IS THE SOURCE'S, NOT A CONSTANT. The Post Grid stores one per grid and this
rule used to be a flat repeat(3): right for 16 of the 26 grid listings and wrong for the other 10,
/staff among them, where cafamerica.org runs four cards to a row against our three. The widget
writes --caf-listing-columns and --caf-listing-columns-medium onto the container; the fallbacks
below keep any listing that predates them rendering as it did.
Two steps rather than one, because the desktop count can now be 4: four cards across a 768px
viewport are about 180px each, so the medium count - 2 on every grid in both exports - holds from
768px and the full count waits for 1024px. Below 768px the items stay stacked, which is what the
source's own mobile count says.
*/
@media (min-width: 769px) {
.caf-listing--grid {
display: grid;
grid-template-columns: repeat(var(--caf-listing-columns-medium, 2), minmax(0, 1fr));
gap: var(--caf-space);
}
.caf-listing--grid .caf-listing__item { border-bottom: 0; }
/*
An archive lists rather than grids, and the live archives put the thumbnail beside the text
rather than above it. Scoped with :has() to the items that actually have a picture, so an
archive holding both kinds does not leave an empty first column on the ones that do not.
*/
.caf-listing--list .caf-listing__item:has(.caf-listing__media) {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
gap: var(--caf-space);
align-items: start;
}
.caf-listing--list .caf-listing__media { margin-bottom: 0; }
}
/*
THE POST SLIDER, which is what every ba_post_list on both sites is: all nine carry
module_class="pr-post-slider" and the client forces the plugin's list into a flex track with their
own injected CSS, whatever list_type each module declares.
A scroll-snap row rather than a transform track. The browser does the animation, the momentum, the
touch and the keyboard; wwwroot/js/carousel.js only adds the arrows, and with it absent the row still
scrolls. Their version is 200 lines of pointer capture and click suppression to arrive at the same
reading.
The card width is their formula rather than a guess: --pr-visible cards across with --pr-gap between
them, which is what `flex: 0 0 calc((100% - (n - 1) * gap) / n)` says, at their own three
breakpoints - 3 cards at 30px, 2 at 24px below 980px, 1 at 20px below 767px. Read out of the