/*
Theme Name: Divi Child
Theme URI: https://www.elegantthemes.com/gallery/divi/
Description: Divi Child Theme
Author: Enthusiast, Inc.
Author URI: https://www.enthusiastinc.net
Template: Divi
Version: 1.0.0
*/
/* =Theme customization starts here
------------------------------------------------------- */
/** DESKTOP ONLY **/
@media only screen and (min-width: 768px) {
}
/* ALL MOBILE SCREENS (portrait and landscape) */
@media screen and (max-width: 767px) {
}
/* iPhone 6 and smaller portrait mode */
@media screen and (max-device-width: 667px) {
}
/* iPhone 6 & 6S in landscape */
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) {
}
/* iPhone 6 & 6S in portrait */
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) {
}
/* iPhone 6 Plus & 6S Plus in landscape */
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) {
}
/* iPhone 6 Plus & 6S Plus in portrait */
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) {
}
/** Mobile + Tablets **/
@media only screen and (max-width: 980px) {
}
/** Tablet Portrait Mode **/
@media only screen and (orientation: portrait) and (min-device-width: 768px) and (max-device-width: 1024px) {
}
/** Tablet Landscape Mode **/
@media only screen and (orientation: landscape) and (min-device-width: 768px) and (max-device-width: 1024px) {
}
/** All Smaller Desktop Screens **/
@media only screen and (max-width: 1024px) {
}
/* ==========================================================================
Ported VERBATIM from wp-content/themes/shepherds-pantry/assets/css/styles.css
(the7-to-divi5 migration, Task 7 follow-on, lines 22-146 of the source file).
Not re-derived, not "improved" — these are the user's own CSS rules.
Most page content on this site is still raw HTML (bare ,
, etc. from
WPBakery/Ultimate-VC shortcodes) rather than converted Divi modules. That raw
content was styled by these exact rules under the old theme; switching the
active theme away from `shepherds-pantry` drops them, and Divi's own defaults
silently take over instead. This block restores them so raw content keeps its
original appearance regardless of which Divi-family theme is active.
Divi module presets (SP Heading, SP Body, SP Button, ...) set up in
runner/design_system.py are unaffected by and unrelated to this block — they
style actual divi/* blocks, which never match these bare-tag selectors.
`color` on h1-h6 carries `!important`, added in a follow-on round — NOT
present in the original source. Cause: there is no single "heading colour"
on this site (h1/h2/h5 #dc322a, h3/h6 #ef9a24, h4 #544f4a), but Divi's own
dynamic per-page CSS sets ONE global heading colour (`--gcid-heading-color`)
on the same bare h1-h6 selectors, at the SAME specificity, and — being
dynamically generated — loads later in the document than this file, so it
was winning the tie for any heading not also caught by a more specific
selector like `.uvc-main-heading h1`. `!important` here is consistent with
the source file's OWN convention (it already puts `!important` on
`font-weight` for the same reason, presumably to beat some other rule under
the7); this just extends the same treatment to `color`. See
task-7-report.md "Fix A" for the measured before/after.
========================================================================== */
/* --------------------------------------------------------------------------
font-family / font-size / line-height / letter-spacing carry `!important`
for the SAME reason `color` already did, one level further on.
Divi 5 emits `--et_global_heading_font: 'Dancing Script'` and applies it to
every heading level. On this site only h1 and h2 are script — h3-h6 are
Heebo (see design-tokens.json, extracted from the live stylesheet). Without
`!important` Divi's global won, and board-staff rendered every person's name
(a raw
inside a text module) in Dancing Script 20px where the live site
shows Heebo 24px. Measured with harness/computed.mjs on both sites.
Divi's global is left alone rather than changed: it is what the Visual
Builder shows the user, and h1/h2 genuinely are Dancing Script.
-------------------------------------------------------------------------- */
/* ==========================================================================
SCOPING — why every selector below starts with `.et-l`
--------------------------------------------------------------------------
These rules were originally BARE element selectors (`h1 {}`, `p {}`) carrying
`!important`. Divi 5's Visual Builder renders its own chrome — the Layers panel,
the Insert Layout dialog, the right-hand settings sidebar — in the SAME document
as the page, so bare `h1-h6 { font-family: 'Dancing Script' !important }` restyled
the BUILDER UI too. Jonathan hit this on the blog page: "Insert Layout", "Page" and
"Premade Layout" all rendered in red script.
`.et-l` wraps Divi's Theme Builder layouts (`.et-l--header`, `--body`, `--post`,
`--footer`) — i.e. the actual page content, on the front end and inside the builder
canvas — and never the builder's own panels.
The specificity is chosen deliberately, not just to be safe:
`h3` 0-0-1 Divi's global heading rule
`.et-l h3` 0-1-1 these rules — win
`.et_pb_heading_1 .et_pb_heading_container h3` 0-2-1 a module's own settings — win
So the site's type scale beats Divi's single global heading font, and anything set
per-module in the builder still beats the site default. That ordering is the whole
point, and it is why `#page-container` (1-0-1) would have been WRONG: an id would
have overridden every module's own typography.
This also let the `!important` on font-family/size/letter-spacing/line-height go —
the specificity does the work now. Divi's global heading font can only hold ONE
family (novamira/divi-set-global-fonts has a single `heading_font`), and this site
is h1/h2 Dancing Script with h3-h6 Heebo, so a per-level scale cannot live in Divi's
global settings; it has to be CSS. Scoped CSS, not aggressive CSS.
========================================================================== */
.et-l h1 {
color: #dc322a;
font-family: "Dancing Script";
font-size: 45px;
font-weight: bold;
letter-spacing: 1.41px;
line-height: 54px;
}
.et-l h2 {
color: #dc322a;
font-family: "Dancing Script";
font-size: 36px;
font-weight: bold;
letter-spacing: 1.13px;
line-height: 45px;
}
.et-l h3 {
color: #ef9a24;
font-family: "Heebo";
font-size: 24px;
font-weight: bold;
letter-spacing: 0.75px;
line-height: 35px;
}
.et-l h4,
.et-l h4 span,
.et-l h4 strong,
.et-l h4 span strong,
.et-l h4 strong span,
.wpb_text_column h4 span {
color: #544f4a;
font-family: "Heebo";
font-size: 20px;
font-weight: 500;
letter-spacing: 1.5px;
line-height: 32px;
}
.et-l h5 {
color: #dc322a;
font-family: "Heebo";
font-size: 18px;
font-weight: 500;
letter-spacing: 1.5px;
line-height: 32px;
}
.et-l h6 {
color: #ef9a24;
font-family: "Heebo";
font-size: 15px;
font-weight: 500;
letter-spacing: 0.75px;
line-height: 25px;
}
/* @include p(15px, 300, 0.5px, 30px, #797B79); */
.et-l p {
color: #606161;
font-family: "Heebo";
font-size: 16px;
/* font-weight was not in the original source at all — added here. Some
WPBakery/Ultimate-VC paragraphs carry an inline `font-weight: 800px`,
which is invalid CSS (px is not a valid font-weight unit) and is dropped
by both browsers identically on live and local, so weight falls through
to whichever base cascade is active. On live that resolves to `normal`
(The7's own base font-weight default); locally, with nothing here to
fall back to, it was resolving to something else (measured 500).
Matching live's actual fallback closes the gap. See task-7-report.md. */
font-weight: normal;
letter-spacing: 1.07px;
line-height: 28px;
}
/* Let a Divi module's own Design settings reach its paragraphs.
------------------------------------------------------------------------------
Divi writes a text module's Design > Text values onto `.et_pb_text_inner` and lets
the paragraphs inside inherit them. The `.et-l p` block above declares on `p`
DIRECTLY, and a direct declaration always beats an inherited value regardless of
specificity — so every text module's own typography was being silently overridden.
Measured on the homepage hero sub-head: Divi emitted
`.et_pb_text_0 .et_pb_text_inner{font-size:19px;color:#ffffff}` and the paragraph
still rendered 16px #606161, winner `.et-l p` (CSS.getMatchedStylesForNode).
Two parts, so nothing else moves:
1. `.et_pb_text_inner` carries the same defaults `.et-l p` does, so a module that
sets NOTHING renders exactly as it did before;
2. paragraphs inside a text module inherit instead of re-declaring, so a module
that DOES set something finally wins.
Every converted page keeps its body copy at Heebo 16px/28px #606161; only modules
with explicit Design settings change, which is the point. */
.et-l .et_pb_text_inner {
color: #606161;
font-family: "Heebo";
font-size: 16px;
font-weight: normal;
letter-spacing: 1.07px;
line-height: 28px;
}
.et-l .et_pb_text_inner p {
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
line-height: inherit;
}
.et-l a {
text-decoration: none;
font-weight: 500;
}
a:hover {
color: #dc322a;
}
.uvc-main-heading h1 {
color: #dc322a;
font-family: "Dancing Script";
font-size: 45px;
font-weight: bold !important;
letter-spacing: 1.41px;
line-height: 54px !important;
}
.uvc-main-heading div {
color: #fcf9f4;
font-family: "Heebo";
font-size: 26px;
letter-spacing: 1px;
line-height: 38px;
}
.wpb_text_column p, .wpb_text_column span {
color: #606161;
font-family: "Heebo";
font-size: 16px;
letter-spacing: 1.07px;
line-height: 28px;
margin-bottom: 25px;
}
.ubtn-ctn-center a button {
border-radius: 2px;
}
.ubtn-ctn-center a button .ubtn-text {
color: #FFFFFF;
font-family: "Heebo";
font-size: 11px;
font-weight: bold;
letter-spacing: 0.5px;
line-height: 17px;
}
.ubtn-ctn-left a button {
border-radius: 2px;
}
.ubtn-ctn-left a button .ubtn-text {
color: #FFFFFF;
font-family: "Heebo";
/* font-size was 14px verbatim from styles.css; production's live rendering
measures 15px (confirmed with harness/computed.mjs) for a button that
resolves to this exact selector, and no rule anywhere in styles.css
produces 15px (grepped the whole file) — the deployed live CSS has
drifted from this source file. Per team lead's explicit instruction
("what the live site actually renders wins" when the two disagree),
using the live-measured value here instead of the stale 14px. See
task-7-report.md "Fix C". */
font-size: 15px;
font-weight: bold;
letter-spacing: 0.64px;
line-height: 21px;
}
/* ==========================================================================
NOT ported from styles.css — these elements have no rule there at all
(confirmed by grep). Both classes are rendered by the Ultimate VC Addons
plugin's widgets, not styled by the child theme. Values are taken directly
from harness/computed.mjs measurements against the LIVE production site,
per team lead's instruction to read the real class from rendered markup
and use the live-measured value as truth. See task-7-report.md "Fix B" and
"Our Locations and Services".
========================================================================== */
/* Ultimate VC "stats counter" widget digits (e.g. "92,410" on the homepage). */
.stats-number {
color: #ffffff;
font-family: "Mohave";
font-size: 50px;
font-weight: 500;
line-height: 65px;
}
/* Ultimate VC "heading" widget's own wrapper div (matched by computed.mjs's
`.uvc-main-heading` selector directly, distinct from `.uvc-main-heading h1`
and `.uvc-main-heading div` above, which target its CHILDREN). On live this
inherits The7's base theme font cascade (Mohave/15px/27px/#606161, from
`--the7-base-font-big` in wp-content/uploads/the7-css/custom.css) rather
than anything in styles.css; reproduced directly since The7's own CSS goes
away with the theme regardless of anything in this file. */
.uvc-main-heading {
color: #606161;
font-family: "Mohave";
font-size: 15px;
font-weight: normal;
line-height: 27px;
}
/* ==========================================================================
Ported verbatim from styles.css line 184 — genuinely missed in the first
round, which only ported lines 22-146. Fixes a real remaining mismatch: an
inside a `.cta-footer` row ("Volunteer & Support Our Cause" on the
homepage) is 40px on live, not the generic h1{}'s 45px, and this is why —
not production drift, an actual rule this file hadn't picked up yet.
========================================================================== */
.cta-footer h1 {
font-size: 40px;
}
/* --------------------------------------------------------------------------
Button arrow on hover — hidden here rather than through Divi's own setting.
Divi's global-preset control (`button.decoration.button.icon.enable = off`)
DOES remove the arrow, but it makes Divi generate:
body #page-container .et_pb_section
.preset--module--divi-button--default:hover
{ padding-right:1em!important; padding-left:1em!important }
That is specificity (1,3,1) with !important, so it outranks every per-button
padding rule and every button visibly shrinks on hover. MEASURED on the
homepage: DONATE NOW 211x63 -> 153x63, "Learn More!" 143x49 -> 122x49.
Reverting the preset removes that rule and the buttons hold their size, which
is why the icon is left ENABLED in Divi and suppressed here instead.
Scoped to `.et-l` like everything else in this file, so it cannot reach the
Visual Builder's own chrome.
-------------------------------------------------------------------------- */
.et-l .et_pb_button::after,
.et-l .et_pb_button::before {
display: none !important;
}
/* --------------------------------------------------------------------------
Single-post content width.
Live measures the post column at x=170 w=1100 against a 1440 viewport. That
used to come from a second, posts-only Post Content module in the Theme
Builder body — but the Visual Builder renders a page's content through the
FIRST Post Content module it finds, so every PAGE was being edited inside
that 1100px row while the front end showed it full width. One module now
serves everything, and posts are constrained here instead.
`body.single-post` is WordPress's own class, so pages are untouched.
-------------------------------------------------------------------------- */
/* Posts render no `.et-l--post` wrapper — only `.et-l--body` — so the Post
Content module itself is the thing to constrain. Checked in the rendered
markup rather than assumed. */
body.single-post .et_pb_post_content {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
/* --------------------------------------------------------------------------
Header menu: Donate and collapsible sections.
Agreed exceptions to the design-options-only rule (Jonathan, 2026-09-14).
Divi 5's Menu module can neither hide a single menu item on one device nor
collapse submenus.
1. Main Menu (2025) has a "Donate" item with the `sp-menu-donate` class so it
shows in the hamburger menu. On desktop the red DONATE button is already
there, so the item is hidden from the desktop nav (`.et-menu-nav`) only.
The button itself is hidden on tablet/phone with Divi's own Disable On.
2. assets/js/mobile-menu.js adds `.sp-collapsible` to the hamburger menu and
toggles `.sp-open` on a section when its parent is tapped. Without the
script nothing here matches and the menu stays fully expanded.
-------------------------------------------------------------------------- */
.et-l .et-menu-nav .sp-menu-donate {
display: none;
}
/* !important because Divi's own `.et_pb_menu .et_mobile_menu li ul
{display:block !important}` forces every submenu open (measured). */
.et-l .et_mobile_menu.sp-collapsible .menu-item-has-children:not(.sp-open) > .sub-menu {
display: none !important;
}
.et-l .et_mobile_menu.sp-collapsible .menu-item-has-children > a {
position: relative;
padding-right: 48px;
}
/* Chevron: points down when closed, up when open. */
.et-l .et_mobile_menu.sp-collapsible .menu-item-has-children > a::after {
content: "";
position: absolute;
top: 50%;
right: 20px;
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-75%) rotate(45deg);
transition: transform 0.2s ease;
}
.et-l .et_mobile_menu.sp-collapsible .menu-item-has-children.sp-open > a::after {
transform: translateY(-25%) rotate(-135deg);
}