/* =====================================================================
CCAPP shared child theme — components (v2.0.0)
Header: "Midnight Glow" (Option 4). Site color comes from body.ccapp-site-*.
Colors per the CCAPP brand kit (Pantone 3252 C / 321 C / 267 C / Black C).
===================================================================== */
/* ---------- 1. Tokens ---------- */
:root{
--ccapp-ink:#2D2926; --ccapp-ink-soft:#5B5856; --ccapp-line:#E3E8EE; --ccapp-wash:#F4F7FA;
--ccapp-edu-500:#2AD2C9; --ccapp-edu-800:#18736E; --ccapp-edu-900:#12524E;
--ccapp-mem-500:#008C95; --ccapp-mem-600:#017B83; --ccapp-mem-900:#024548;
--ccapp-cred-500:#5F249F; --ccapp-cred-400:#8254B4; --ccapp-cred-200:#CFBDE2; --ccapp-cred-900:#2A1145;
--ccapp-rr-500:#2D2926; --ccapp-rr-900:#1F1D1B;
--ccapp-spectrum:linear-gradient(90deg,#5F249F 0%,#008C95 50%,#2AD2C9 100%);
--ccapp-font:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
/* per-site aliases (ccapp.us defaults) */
--b:#008C95; --b-600:#017B83; --b-deep:#0B3B40; --b-mid:#016A71; --b-pop:#2AD2C9; --b-glow-rgb:0,140,149;
--b-stripe:var(--ccapp-spectrum); --b-bar:var(--ccapp-spectrum);
--hdr-glow:radial-gradient(ellipse 45% 90% at 25% 0%,rgba(95,36,159,.55),transparent 70%),
radial-gradient(ellipse 45% 90% at 75% 0%,rgba(42,210,201,.40),transparent 70%),
radial-gradient(ellipse 40% 80% at 50% 10%,rgba(0,140,149,.45),transparent 70%);
--hdr-base:#0E0D12;
/* Logo sizing is per lockup, not per site by accident: each master file puts
the wordmark at a different fraction of its height, and the wordmark is
what has to out-read the page h1 (see section 19). */
--ccapp-logo-h:88px; --ccapp-logo-h-mob:58px; --ccapp-logo-sm:24px;
}
body.ccapp-site-mem{ --ccapp-logo-h:104px; --ccapp-logo-h-mob:62px; --ccapp-logo-sm:22px; --b:#008C95; --b-600:#017B83; --b-deep:#024548; --b-mid:#008C95; --b-pop:#7AC3C8; --b-glow-rgb:0,140,149;
--b-stripe:#008C95; --b-bar:#7AC3C8; --hdr-glow:radial-gradient(ellipse 70% 130% at 50% 0%,rgba(0,140,149,.8),transparent 75%); }
body.ccapp-site-cred{ --b:#5F249F; --b-600:#52208A; --b-deep:#2A1145; --b-mid:#461B74; --b-pop:#CFBDE2; --b-glow-rgb:130,84,180;
--b-stripe:#8254B4; --b-bar:#CFBDE2; --hdr-glow:radial-gradient(ellipse 70% 130% at 50% 0%,rgba(130,84,180,.85),transparent 75%); }
body.ccapp-site-edu{ --b:#2AD2C9; --b-600:#18736E; --b-deep:#12524E; --b-mid:#1E958F; --b-pop:#2AD2C9; --b-glow-rgb:42,210,201;
--b-stripe:#2AD2C9; --b-bar:#2AD2C9; --hdr-glow:radial-gradient(ellipse 70% 130% at 50% 0%,rgba(42,210,201,.6),transparent 75%); }
body.ccapp-site-rr{ --b:#2D2926; --b-600:#2D2926; --b-deep:#1F1D1B; --b-mid:#3A3532; --b-pop:#FFFFFF; --b-glow-rgb:255,255,255;
--b-stripe:#C0BFBE; --b-bar:#FFFFFF; --hdr-base:#141312; --hdr-glow:radial-gradient(ellipse 70% 130% at 50% 0%,rgba(255,255,255,.22),transparent 75%); }
body.ccapp-site-home{ --ccapp-logo-h:112px; --ccapp-logo-h-mob:74px; --ccapp-logo-sm:30px; }
/* ---------- 2. Network bar [ccapp_network_bar] ---------- */
.ccapp-net{ background:#1F1D1B; color:#C9C6C3; font-family:var(--ccapp-font); font-size:13px; line-height:1; }
.ccapp-net *{ box-sizing:border-box; }
.ccapp-net__inner{ max-width:1440px; margin:0 auto; padding:0 52px; height:40px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.ccapp-net ul{ list-style:none!important; margin:0!important; padding:0!important; }
.ccapp-net__list--wide{ display:flex; align-items:stretch; height:40px; }
.ccapp-net__item a{ position:relative; display:flex; align-items:center; gap:8px; height:40px; padding:0 12px; color:#C9C6C3!important; font-weight:500; text-decoration:none; white-space:nowrap; transition:color .15s,background .15s; }
.ccapp-net__item a:hover{ color:#fff!important; background:rgba(255,255,255,.05); }
.ccapp-net__item.is-current a{ color:#fff!important; font-weight:600; background:rgba(255,255,255,.08); }
.ccapp-net__item.is-current a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--dot); }
.ccapp-net__dot{ width:10px; height:10px; border-radius:3px; background:var(--dot); flex-shrink:0; }
.ccapp-net__item--home{ --dot:var(--ccapp-spectrum); }
.ccapp-net__item--mem { --dot:#008C95; }
.ccapp-net__item--cred{ --dot:#5F249F; }
.ccapp-net__item--edu { --dot:#2AD2C9; }
.ccapp-net__item--rr { --dot:#2D2926; }
.ccapp-net__item--cred .ccapp-net__dot,.ccapp-net__item--rr .ccapp-net__dot{ box-shadow:0 0 0 1.5px rgba(255,255,255,.55); }
.ccapp-net__item--rr.is-current a::after{ background:#fff; }
.ccapp-net__util{ display:flex; align-items:center; gap:22px; }
.ccapp-net__util-link{ display:flex; align-items:center; gap:6px; color:#C9C6C3!important; text-decoration:none; white-space:nowrap; }
.ccapp-net__util-link:hover{ color:#fff!important; }
.ccapp-net__phone{ color:#fff!important; font-weight:600; }
.ccapp-net a:focus-visible,.ccapp-net summary:focus-visible{ outline:2px solid #fff; outline-offset:-2px; }
/* phone: collapse the site list into a disclosure */
.ccapp-net__sites{ display:none; position:relative; }
.ccapp-net__toggle{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; height:40px; color:#fff; font-weight:600; }
.ccapp-net__toggle::-webkit-details-marker{ display:none; }
.ccapp-net__dots{ display:flex; gap:4px; }
.ccapp-net__dots i{ width:10px; height:10px; border-radius:3px; }
.ccapp-net__dots i:nth-child(1){ background:#008C95; } .ccapp-net__dots i:nth-child(2){ background:#5F249F; box-shadow:0 0 0 1.5px rgba(255,255,255,.55); }
.ccapp-net__dots i:nth-child(3){ background:#2AD2C9; } .ccapp-net__dots i:nth-child(4){ background:#2D2926; box-shadow:0 0 0 1.5px rgba(255,255,255,.55); }
.ccapp-net__sites[open] .ccapp-net__list{ position:absolute; z-index:99999; top:40px; left:-16px; width:min(92vw,320px); background:#1F1D1B; padding:8px!important; border-radius:0 0 12px 12px; box-shadow:0 20px 40px -10px rgba(0,0,0,.6); }
.ccapp-net__sites[open] .ccapp-net__item a{ height:48px; border-radius:8px; }
/* The five-site list plus the three utility links need ~1160px before they stop
colliding, so the disclosure has to stay until then — collapsing at 980 left
the phone number running off the right edge on every tablet-landscape page. */
@media (max-width:1180px){
.ccapp-net__inner{ padding:0 24px; }
.ccapp-net__list--wide{ display:none!important; }
.ccapp-net__sites{ display:block; }
}
@media (max-width:980px){
.ccapp-net__inner{ padding:0 16px; }
.ccapp-hide-sm{ display:none!important; }
.ccapp-net__phone span{ display:none; } .ccapp-net__phone::after{ content:"Call"; }
}
/* ---------- 3. Header — Midnight Glow (Divi section class: ccapp-hdr) ----------
Section > Row > Column containing, top to bottom:
Code module [ccapp_site_chip] (class ccapp-hdr__chip)
Image module (site logo, white) (class ccapp-hdr__logo)
Menu module (Primary Menu) (class ccapp-hdr__menu)
------------------------------------------------------------------------------ */
.ccapp-hdr.et_pb_section{ position:relative; background:var(--hdr-glow),var(--hdr-base)!important; padding:64px 0 10px!important; font-family:var(--ccapp-font); }
.ccapp-hdr.et_pb_section::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:6px; background:var(--b-stripe); }
.ccapp-hdr .et_pb_row{ width:100%!important; max-width:1440px!important; padding:0!important; }
.ccapp-hdr .et_pb_column{ display:flex; flex-direction:column; align-items:center; }
.ccapp-hdr .et_pb_module{ margin-bottom:0; }
.ccapp-hdr .ccapp-hdr__chip.et_pb_module{ margin-bottom:20px!important; }
.ccapp-hdr .ccapp-hdr__logo.et_pb_module{ margin-bottom:84px!important; }
.ccapp-chip{ display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 14px; border-radius:999px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06);
color:rgba(255,255,255,.9); font-family:var(--ccapp-font); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; line-height:1; }
.ccapp-chip__dot{ width:10px; height:10px; border-radius:3px; background:var(--b); }
body.ccapp-site-home .ccapp-chip__dot{ background:var(--ccapp-spectrum); }
body.ccapp-site-cred .ccapp-chip__dot{ background:#8254B4; }
body.ccapp-site-rr .ccapp-chip__dot{ background:#fff; }
.ccapp-hdr__chip{ margin-bottom:20px!important; text-align:center; }
.ccapp-hdr__logo{ margin-bottom:84px!important; text-align:center; }
/* Size is set from the WORDMARK, not the image box. In the master file
(720x181) the "CCAPP" letters occupy rows 93-180 - 48.6% of the height - so a
64px image gave a 31px cap height against a 60px/800 h1 whose caps are ~42px:
the logo read smaller than the headline, which is the first thing Larry's
friend noticed. 88px and 112px put the cap height at 43px and 54px.
The lockup is also bottom-heavy: the solid letters sit in the lower half while
the swoosh is thin and only over the right. Its ink centroid is at 61.2% of
the height, 20.7px below centre, so with equal margins it reads as sitting
low. translateY lifts it optically without moving anything around it. */
.ccapp-hdr__logo img{ height:var(--ccapp-logo-h); width:auto!important; max-width:min(620px,86vw);
transform:translateY(-5px); filter:drop-shadow(0 6px 24px rgba(0,0,0,.35)); }
body.ccapp-site-home .ccapp-hdr__logo img{ transform:translateY(-6px); }
/* Divi Menu module */
.ccapp-hdr__menu.et_pb_menu{ width:100%; background:transparent!important; border-top:1px solid rgba(255,255,255,.12); }
.ccapp-hdr__menu .et_pb_menu__wrap{ justify-content:center!important; }
.ccapp-hdr__menu .et_pb_menu__menu > nav > ul{ justify-content:center; }
.ccapp-hdr__menu .et-menu > li{ padding:0!important; }
.ccapp-hdr__menu .et-menu > li > a{ position:relative; display:flex!important; align-items:center; height:60px; padding:0 18px!important;
color:rgba(255,255,255,.74)!important; font-family:var(--ccapp-font)!important; font-size:15px!important; font-weight:500!important; opacity:1!important; transition:color .15s; }
.ccapp-hdr__menu .et-menu > li.menu-item-has-children > a{ padding-right:34px!important; }
.ccapp-hdr__menu .et-menu > li.menu-item-has-children > a::after{ color:inherit!important; right:14px!important; top:50%!important; margin-top:-8px; font-size:16px!important; }
.ccapp-hdr__menu .et-menu > li > a::before{ content:""; position:absolute; left:50%; bottom:0; width:44px; margin-left:-22px; height:4px; border-radius:4px 4px 0 0;
background:var(--b-bar); box-shadow:0 0 18px 2px var(--b-pop); opacity:0; transform:scaleX(.4); transition:opacity .2s,transform .2s; }
.ccapp-hdr__menu .et-menu > li:hover > a,
.ccapp-hdr__menu .et-menu > li:focus-within > a,
.ccapp-hdr__menu .et-menu > li.current-menu-item > a,
.ccapp-hdr__menu .et-menu > li.current-menu-ancestor > a,
.ccapp-hdr__menu .et-menu > li.current_page_parent > a{ color:#fff!important; }
.ccapp-hdr__menu .et-menu > li.current-menu-item > a,
.ccapp-hdr__menu .et-menu > li.current-menu-ancestor > a{ font-weight:700!important; }
.ccapp-hdr__menu .et-menu > li:hover > a::before,
.ccapp-hdr__menu .et-menu > li:focus-within > a::before,
.ccapp-hdr__menu .et-menu > li.current-menu-item > a::before,
.ccapp-hdr__menu .et-menu > li.current-menu-ancestor > a::before{ opacity:1; transform:scaleX(1); }
body.ccapp-site-home .ccapp-hdr__menu .et-menu > li > a::before{ background:var(--ccapp-spectrum); box-shadow:0 0 18px 2px rgba(42,210,201,.8); }
/* dropdowns — dark glass */
.ccapp-hdr__menu .et-menu li ul.sub-menu{ width:320px!important; padding:10px!important; background:rgba(26,22,34,.97)!important; border:1px solid rgba(255,255,255,.14)!important;
border-top:0!important; border-radius:0 0 14px 14px; box-shadow:0 30px 60px -20px rgba(0,0,0,.6)!important; backdrop-filter:blur(10px); }
.ccapp-hdr__menu .et-menu li ul.sub-menu li{ width:100%!important; padding:0!important; }
.ccapp-hdr__menu .et-menu li ul.sub-menu a{ width:100%!important; padding:12px 14px!important; border-radius:10px; color:rgba(255,255,255,.86)!important; font-size:15px!important; font-weight:500!important; line-height:1.35!important; opacity:1!important; }
.ccapp-hdr__menu .et-menu li ul.sub-menu a:hover,
.ccapp-hdr__menu .et-menu li ul.sub-menu li.current-menu-item > a{ background:rgba(var(--b-glow-rgb),.18)!important; color:#fff!important; }
.ccapp-hdr__menu .et-menu li ul.sub-menu ul.sub-menu{ left:100%!important; top:-10px!important; border-radius:14px; border-top:1px solid rgba(255,255,255,.14)!important; }
/* search icon in the menu module */
.ccapp-hdr__menu .et_pb_menu__icon{ color:#fff!important; }
.ccapp-hdr__menu .et_pb_menu__search-button{ width:40px; height:40px; margin-left:14px; border-radius:50%; border:1px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; }
.ccapp-hdr__menu .et_pb_menu__search-container{ background:var(--hdr-base)!important; }
.ccapp-hdr__menu .et_pb_menu__search-input{ color:#fff!important; font-family:var(--ccapp-font)!important; font-size:18px!important; }
/* phone / tablet menu */
.ccapp-hdr__menu .et_mobile_nav_menu{ margin:0 auto!important; float:none!important; }
.ccapp-hdr__menu .mobile_nav{ display:flex; justify-content:center; padding:10px 0 14px; }
.ccapp-hdr__menu .mobile_menu_bar{ display:inline-flex!important; align-items:center; gap:10px; height:48px; padding:0 18px 0 12px!important; border-radius:12px; border:1px solid rgba(255,255,255,.3); }
.ccapp-hdr__menu .mobile_menu_bar::before{ color:#fff!important; position:static!important; font-size:28px!important; }
.ccapp-hdr__menu .mobile_menu_bar::after{ content:"Menu"; color:#fff; font-family:var(--ccapp-font); font-weight:600; font-size:15px; }
.ccapp-hdr__menu .et_mobile_menu{ left:50%!important; width:min(94vw,560px)!important; transform:translateX(-50%); top:64px!important; padding:10px!important; background:#1A1622!important;
border:1px solid rgba(255,255,255,.14)!important; border-top:4px solid var(--b-stripe)!important; border-radius:0 0 16px 16px; box-shadow:0 30px 60px -20px rgba(0,0,0,.6)!important; }
body.ccapp-site-home .ccapp-hdr__menu .et_mobile_menu{ border-top-color:#2AD2C9!important; }
.ccapp-hdr__menu .et_mobile_menu li a{ color:#fff!important; font-family:var(--ccapp-font)!important; font-size:16px!important; font-weight:600!important; padding:14px 12px!important; border-bottom:1px solid rgba(255,255,255,.08)!important; }
.ccapp-hdr__menu .et_mobile_menu li li a{ font-weight:500!important; color:rgba(255,255,255,.8)!important; padding-left:24px!important; }
.ccapp-hdr__menu .et_mobile_menu li a:hover{ background:rgba(var(--b-glow-rgb),.18)!important; opacity:1!important; }
@media (max-width:980px){
.ccapp-hdr.et_pb_section{ padding-top:40px!important; }
.ccapp-hdr__chip{ margin-bottom:14px!important; }
.ccapp-hdr__logo{ margin-bottom:50px!important; }
.ccapp-hdr__logo img{ height:var(--ccapp-logo-h-mob); transform:translateY(-3px); }
body.ccapp-site-home .ccapp-hdr__logo img{ transform:translateY(-4px); }
.ccapp-chip{ font-size:10.5px; height:26px; letter-spacing:.08em; }
}
/* ---------- 4. Hero (Divi section class: ccapp-hero) ---------- */
/* The company heroes used to run brand-deep to brand-mid, which on Membership
is #024548 -> #008C95: light enough that the bright accent word and the
primary button both sank into it. They now start from near-black like the
ccapp.us hero, so white type, the accent word and the button all read. */
.ccapp-hero.et_pb_section{ position:relative; background:linear-gradient(125deg,#07171A 0%,var(--b-deep) 42%,var(--b-mid) 100%)!important; font-family:var(--ccapp-font); }
body.ccapp-site-home .ccapp-hero.et_pb_section{ background:linear-gradient(125deg,#0A1F22 0%,#0B3B40 55%,#016A71 100%)!important; }
.ccapp-hero h1,.ccapp-hero h2{ color:#fff!important; font-weight:700!important; letter-spacing:-.02em; line-height:1.06!important; }
.ccapp-hero p{ color:#D5E4E6; }
.ccapp-hero .ccapp-pop,.ccapp-hero em.ccapp-pop{ color:var(--b-pop); font-style:normal; }
body.ccapp-site-home .ccapp-hero .ccapp-pop{ color:#2AD2C9; }
body.ccapp-site-rr .ccapp-hero .ccapp-pop{ color:#C0BFBE; }
.ccapp-eyebrow{ display:inline-block; font-family:var(--ccapp-font); font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--b-600); }
.ccapp-hero .ccapp-eyebrow{ color:var(--b-pop); background:rgba(var(--b-glow-rgb),.16); padding:8px 14px; border-radius:99px; }
body.ccapp-site-home .ccapp-hero .ccapp-eyebrow{ color:#2AD2C9; background:rgba(42,210,201,.16); }
/* ---------- 5. Buttons (add class to Divi Button module) ---------- */
.ccapp-btn.et_pb_button,.ccapp-btn-outline.et_pb_button{ font-family:var(--ccapp-font)!important; font-weight:700!important; font-size:16px!important; border-radius:10px!important; padding:14px 24px!important; line-height:1.3!important; }
.ccapp-btn.et_pb_button{ background:var(--b-pop)!important; border:2px solid var(--b-pop)!important; color:var(--ccapp-ink)!important; }
body.ccapp-site-home .ccapp-btn.et_pb_button,body.ccapp-site-edu .ccapp-btn.et_pb_button{ background:#2AD2C9!important; border-color:#2AD2C9!important; }
/* Membership's --b-pop (#7AC3C8) is a muted teal that disappears on its own
brand background; the hero's primary button needs the bright accent. */
body.ccapp-site-mem .ccapp-btn.et_pb_button{ background:#2AD2C9!important; border-color:#2AD2C9!important; color:#07171A!important; }
body.ccapp-site-mem .ccapp-hero .ccapp-pop{ color:#2AD2C9; }
.ccapp-btn-outline.et_pb_button{ background:transparent!important; border:2px solid rgba(255,255,255,.7)!important; color:#fff!important; }
.ccapp-btn.et_pb_button::after,.ccapp-btn-outline.et_pb_button::after{ display:none!important; }
/* ---------- 6. Divi Theme Builder plumbing ---------- */
/* network-bar section: edge to edge, no Divi padding */
.ccapp-net-section.et_pb_section{ padding:0!important; margin:0!important; background:#1F1D1B!important; }
.ccapp-net-section .et_pb_row{ width:100%!important; max-width:100%!important; padding:0!important; margin:0!important; }
.ccapp-net-section .et_pb_column{ margin:0!important; }
.ccapp-net-section .et_pb_module{ margin:0!important; }
/* header row: full width, no gutter */
.ccapp-hdr .et_pb_row{ width:100%!important; max-width:1440px!important; margin:0 auto!important; padding:0 24px!important; }
/* the Divi menu module carries its own logo slot — the header uses the Image module above it */
.ccapp-hdr__menu .et_pb_menu__logo-wrap,.ccapp-hdr__menu .et_pb_menu__logo{ display:none!important; }
.ccapp-hdr__menu .et_pb_menu_inner_container{ justify-content:center; }
/* Divi's own header spacing */
.ccapp-hdr.et_pb_section .et_pb_module.ccapp-hdr__logo{ text-align:center; }
/* ---------- 7. Header fixes measured on staging (Divi 5.13 markup) ---------- */
.ccapp-hdr .et_pb_menu_inner_container{ width:100%; }
.ccapp-hdr .et_pb_menu__wrap{ display:flex!important; align-items:center!important; justify-content:center!important; gap:6px; width:100%; }
.ccapp-hdr .et_pb_menu__menu{ flex:0 1 auto; }
.ccapp-hdr .et_pb_menu__icon.et_pb_menu__search-button{ align-self:center; margin:0 0 0 14px; }
.ccapp-hdr .et_pb_menu--style-centered .et_pb_menu__menu > nav > ul{ justify-content:center; }
.ccapp-hdr__logo img{ display:block; margin:0 auto; }
.ccapp-hdr__logo .et_pb_image_wrap{ display:block; }
@media (max-width:980px){
.ccapp-hdr .et_pb_menu__wrap{ flex-direction:row-reverse; gap:12px; }
.ccapp-hdr .et_mobile_nav_menu{ float:none!important; margin:0!important; }
.ccapp-hdr .et_pb_menu__icon.et_pb_menu__search-button{ margin:0; }
}
/* ---------- 8. Footer (Divi section class: ccapp-foot) ---------- */
.ccapp-foot.et_pb_section{ position:relative; background:var(--ccapp-wash)!important; padding:0!important; font-family:var(--ccapp-font); }
.ccapp-foot.et_pb_section::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--b-stripe); }
body.ccapp-site-home .ccapp-foot.et_pb_section::before{ background:var(--ccapp-spectrum); }
.ccapp-foot .et_pb_row{ width:100%!important; max-width:1320px!important; padding:0 24px!important; }
.ccapp-foot .ccapp-foot__top{ padding-top:64px!important; padding-bottom:16px!important; }
.ccapp-foot p,.ccapp-foot li,.ccapp-foot a{ font-family:var(--ccapp-font); font-size:15px; line-height:1.7; }
.ccapp-foot p{ color:var(--ccapp-ink-soft); }
.ccapp-foot a{ color:var(--ccapp-ink); text-decoration:none; }
.ccapp-foot a:hover{ color:var(--b-600); }
body.ccapp-site-edu .ccapp-foot a:hover{ color:var(--ccapp-edu-800); }
.ccapp-foot__logo img{ max-height:60px; width:auto; }
.ccapp-foot h2,.ccapp-foot .ccapp-foot__heading{ font-size:13px!important; font-weight:700!important; letter-spacing:.12em; text-transform:uppercase; color:var(--ccapp-ink)!important; margin:0 0 14px!important; }
.ccapp-orgs__list{ list-style:none!important; margin:0!important; padding:0!important; display:flex; flex-direction:column; gap:12px; }
.ccapp-orgs__item a{ display:flex; align-items:center; gap:10px; }
.ccapp-orgs__dot{ width:12px; height:12px; border-radius:3px; flex-shrink:0; }
.ccapp-orgs__item--home .ccapp-orgs__dot{ background:var(--ccapp-spectrum); }
.ccapp-orgs__item--mem .ccapp-orgs__dot{ background:#008C95; }
.ccapp-orgs__item--cred .ccapp-orgs__dot{ background:#5F249F; }
.ccapp-orgs__item--edu .ccapp-orgs__dot{ background:#2AD2C9; }
.ccapp-orgs__item--rr .ccapp-orgs__dot{ background:#2D2926; }
.ccapp-foot__links ul{ list-style:none!important; margin:0!important; padding:0!important; display:flex; flex-direction:column; gap:12px; }
/* one of these columns inherited a right alignment from the old layout; the
footer columns always read left */
.ccapp-foot__links,.ccapp-foot__links ul,.ccapp-foot__links li,.ccapp-foot__links .et_pb_text_inner{ text-align:left!important; }
.ccapp-foot .et_pb_social_media_follow li a.icon{ background:#fff!important; border:1px solid var(--ccapp-line); border-radius:50%!important; }
.ccapp-foot .et_pb_social_media_follow li a.icon::before{ color:var(--ccapp-ink)!important; }
.ccapp-foot .et_pb_social_media_follow li a.icon:hover{ background:var(--b-600)!important; border-color:var(--b-600)!important; }
.ccapp-foot .et_pb_social_media_follow li a.icon:hover::before{ color:#fff!important; }
.ccapp-foot__ad{ padding:8px 0 40px!important; text-align:center; }
.ccapp-foot__ad::before{ content:"Sponsored"; display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ccapp-ink-soft); font-weight:600; margin-bottom:8px; }
/* footer menu module (Divi) */
.ccapp-foot__menu.et_pb_menu{ background:transparent!important; }
.ccapp-foot__menu .et_pb_menu__wrap{ justify-content:flex-start!important; }
.ccapp-foot__menu .et-menu{ flex-direction:column; align-items:flex-start; gap:12px; }
.ccapp-foot__menu .et-menu > li{ padding:0!important; margin:0!important; }
.ccapp-foot__menu .et-menu > li > a{ color:var(--ccapp-ink)!important; font-size:15px!important; font-weight:500!important; opacity:1!important; }
.ccapp-foot__menu .et-menu > li > a:hover{ color:var(--b-600)!important; }
.ccapp-foot__menu .et_mobile_nav_menu{ display:none!important; }
.ccapp-foot__menu .et_pb_menu__menu{ display:flex!important; }
/* bottom strip */
.ccapp-legal{ background:var(--ccapp-ink); color:#D8D6D4; font-family:var(--ccapp-font); }
.ccapp-legal__inner{ max-width:1320px; margin:0 auto; padding:18px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:13px; line-height:1.5; }
.ccapp-legal a{ color:#D8D6D4!important; text-decoration:none; }
.ccapp-legal a:hover{ color:#fff!important; }
.ccapp-legal__links{ display:flex; gap:24px; }
@media (max-width:980px){
.ccapp-foot .ccapp-foot__top{ padding-top:40px!important; }
.ccapp-legal__inner{ flex-direction:column; align-items:flex-start; gap:10px; }
.ccapp-foot__logo img{ max-height:48px; }
}
/* ---------- 9. Footer fixes measured on staging ---------- */
.ccapp-orgs__item a{ align-items:flex-start; }
.ccapp-orgs__dot{ margin-top:6px; }
.ccapp-foot .ccapp-foot__top{ padding-bottom:0!important; }
.ccapp-foot .ccapp-foot__top .et_pb_column{ margin-bottom:28px!important; }
.ccapp-foot .ccapp-foot__adrow{ padding:0 24px 28px!important; }
.ccapp-foot .ccapp-foot__legalrow{ width:100%!important; max-width:100%!important; padding:0!important; margin:0!important; }
.ccapp-foot .ccapp-foot__legalrow .et_pb_column{ margin:0!important; }
.ccapp-foot__ad{ padding:0!important; }
/* ---------- 10. Page sections ---------- */
.ccapp-sec.et_pb_section{ background:#fff!important; padding:88px 0!important; font-family:var(--ccapp-font); }
.ccapp-sec--wash.et_pb_section{ background:var(--ccapp-wash)!important; }
.ccapp-sec .et_pb_row,.ccapp-hero .et_pb_row,.ccapp-cta .et_pb_row{ width:100%!important; max-width:1320px!important; padding:0 24px!important; }
.ccapp-sec h2,.ccapp-cta h2{ font-family:var(--ccapp-font)!important; font-weight:700!important; letter-spacing:-.015em; line-height:1.14!important; font-size:44px!important; color:var(--ccapp-ink); }
.ccapp-sec p{ font-size:18px; line-height:1.7; color:var(--ccapp-ink-soft); }
.ccapp-sec--center .et_pb_text{ text-align:center; }
.ccapp-sec--center .et_pb_text p{ margin-left:auto; margin-right:auto; max-width:700px; }
.ccapp-arrow{ display:inline-block; width:18px; height:18px; margin-left:8px; vertical-align:-3px;
background:currentColor; -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; }
/* hero */
.ccapp-hero.et_pb_section{ padding:88px 0 96px!important; }
.ccapp-hero h1{ font-family:var(--ccapp-font)!important; font-size:58px!important; }
.ccapp-hero .ccapp-eyebrow{ margin-bottom:18px; }
.ccapp-hero p{ font-size:19px!important; line-height:1.7!important; color:#D5E4E6!important; max-width:620px; }
.ccapp-hero .et_pb_button_module_wrapper{ display:inline-block!important; margin:18px 14px 0 0!important; }
.ccapp-hero .ccapp-hero__img img{ border-radius:18px; box-shadow:0 30px 70px -20px rgba(0,0,0,.6); width:100%; object-fit:cover; }
.ccapp-hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--b-stripe); }
body.ccapp-site-home .ccapp-hero::after{ background:var(--ccapp-spectrum); }
/* ad rows */
.ccapp-adrow .et_pb_code{ text-align:center; } /* see section 31 for the ad zone */
/* company cards */
.ccapp-orgcards{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin-top:44px; }
.ccapp-orgcard{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--ccapp-line); border-radius:16px; overflow:hidden; box-shadow:0 12px 30px -18px rgba(10,31,34,.35); }
.ccapp-orgcard__bar{ height:8px; display:block; }
/* CCAPP Home wears the spectrum, the way it does in the network bar */
.ccapp-orgcard--home .ccapp-orgcard__bar,.ccapp-orgcard--home .ccapp-orgcard__dot{ background:var(--ccapp-spectrum); }
.ccapp-orgcard--home .ccapp-card__tick,.ccapp-orgcard--home .ccapp-orgcard__cta{ color:#2D2926; }
.ccapp-orgcard--mem .ccapp-orgcard__bar,.ccapp-orgcard--mem .ccapp-orgcard__dot{ background:#008C95; }
.ccapp-orgcard--cred .ccapp-orgcard__bar,.ccapp-orgcard--cred .ccapp-orgcard__dot{ background:#5F249F; }
.ccapp-orgcard--edu .ccapp-orgcard__bar,.ccapp-orgcard--edu .ccapp-orgcard__dot{ background:#2AD2C9; }
.ccapp-orgcard--rr .ccapp-orgcard__bar,.ccapp-orgcard--rr .ccapp-orgcard__dot{ background:#2D2926; }
.ccapp-orgcard__body{ padding:26px 26px 28px; display:flex; flex-direction:column; gap:14px; flex-grow:1; }
.ccapp-orgcard__domain{ display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; color:var(--ccapp-ink-soft); }
.ccapp-orgcard__dot{ width:14px; height:14px; border-radius:4px; }
.ccapp-orgcard__name{ margin:0!important; font-size:24px!important; line-height:1.2!important; font-weight:700!important; color:var(--ccapp-ink); }
.ccapp-orgcard__desc{ margin:0; font-size:15px; line-height:1.65; color:var(--ccapp-ink-soft); }
.ccapp-orgcard__list{ list-style:none!important; margin:0!important; padding:0!important; display:flex; flex-direction:column; gap:10px; flex-grow:1; }
.ccapp-orgcard__list li{ display:flex; gap:10px; align-items:flex-start; font-size:15px; line-height:1.5; color:var(--ccapp-ink); }
.ccapp-card__tick{ width:18px; height:18px; flex-shrink:0; margin-top:2px; background:currentColor;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; }
.ccapp-orgcard--mem .ccapp-card__tick{ color:#017B83; } .ccapp-orgcard--cred .ccapp-card__tick{ color:#5F249F; }
.ccapp-orgcard--edu .ccapp-card__tick{ color:#18736E; } .ccapp-orgcard--rr .ccapp-card__tick{ color:#2D2926; }
.ccapp-orgcard__cta{ margin-top:6px; height:48px; border-radius:10px; border:2px solid currentColor; font-size:15px; font-weight:700; text-decoration:none; display:flex; align-items:center; justify-content:space-between; padding:0 18px; }
.ccapp-orgcard--mem .ccapp-orgcard__cta{ color:#017B83; } .ccapp-orgcard--cred .ccapp-orgcard__cta{ color:#5F249F; }
.ccapp-orgcard--edu .ccapp-orgcard__cta{ color:#18736E; } .ccapp-orgcard--rr .ccapp-orgcard__cta{ color:#2D2926; }
.ccapp-orgcard__cta:hover{ background:currentColor; }
.ccapp-orgcard__cta:hover,.ccapp-orgcard__cta:hover .ccapp-arrow{ color:#fff; }
.ccapp-orgcard__cta:hover{ background:var(--ccapp-ink); }
/* credentialing band */
.ccapp-band{ background:#5F249F; border-radius:20px; padding:44px 52px; display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:40px; align-items:center; font-family:var(--ccapp-font); }
.ccapp-band__eyebrow{ font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#E9E0F2; display:block; margin-bottom:10px; }
.ccapp-band h2{ margin:0 0 10px!important; font-size:34px!important; line-height:1.15!important; color:#fff!important; }
.ccapp-band p{ margin:0; font-size:17px; line-height:1.65; color:#E9E0F2; max-width:620px; }
.ccapp-band__links{ display:flex; flex-direction:column; gap:10px; }
.ccapp-band__links a{ height:52px; border-radius:10px; background:#fff; color:#5F249F!important; font-size:15px; font-weight:700; text-decoration:none; display:flex; align-items:center; justify-content:space-between; padding:0 18px; }
.ccapp-band__links a:hover{ background:#E9E0F2; }
/* program cards (Divi blurb modules) */
.ccapp-card.et_pb_blurb{ background:#fff; border:1px solid var(--ccapp-line); border-radius:16px; overflow:hidden; padding:0!important; }
.ccapp-card .et_pb_main_blurb_image{ margin:0!important; width:100%; }
.ccapp-card .et_pb_image_wrap{ display:block; width:100%; }
/* Anchored to the top, not the middle: a 200px landscape crop out of the middle
of a tall image shows its blank centre (Membership's annual-report cover came
out white), and on a photo the subject is usually in the upper half anyway. */
.ccapp-card .et_pb_image_wrap img{ width:100%; height:200px; object-fit:cover; object-position:center top; display:block; }
.ccapp-card .et_pb_blurb_container{ padding:20px 22px 24px; }
.ccapp-card .et_pb_module_header{ font-family:var(--ccapp-font)!important; font-size:19px!important; font-weight:700!important; line-height:1.3!important; color:var(--ccapp-ink)!important; padding-bottom:6px!important; }
.ccapp-card .et_pb_blurb_description p{ font-size:14px!important; line-height:1.6!important; color:var(--ccapp-ink-soft)!important; }
.ccapp-card:hover{ box-shadow:0 18px 40px -26px rgba(10,31,34,.5); }
/* blog cards */
.ccapp-posts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin-top:40px; }
.ccapp-post{ display:flex; flex-direction:column; gap:14px; }
.ccapp-post__img{ width:100%; height:230px; object-fit:cover; border-radius:14px; display:block; }
.ccapp-post__meta{ display:flex; gap:8px; align-items:center; font-size:13px; color:var(--ccapp-ink-soft); }
.ccapp-post__cat{ font-weight:700; color:var(--b-600); }
body.ccapp-site-edu .ccapp-post__cat{ color:var(--ccapp-edu-800); }
.ccapp-post__title{ margin:0!important; font-size:21px!important; line-height:1.35!important; font-weight:700!important; }
.ccapp-post__title a{ color:var(--ccapp-ink); text-decoration:none; }
.ccapp-post__title a:hover{ color:var(--b-600); }
.ccapp-post__excerpt{ margin:0; font-size:15px; line-height:1.7; color:var(--ccapp-ink-soft); }
/* papers */
.ccapp-papers{ display:flex; flex-direction:column; gap:14px; }
.ccapp-papers a{ display:flex; align-items:center; gap:18px; padding:22px 24px; background:#fff; border:1px solid var(--ccapp-line); border-radius:14px; text-decoration:none; color:var(--ccapp-ink); }
.ccapp-papers a:hover{ border-color:var(--b-600); }
.ccapp-papers__kind{ display:block; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ccapp-ink-soft); }
.ccapp-papers__title{ display:block; font-size:17px; font-weight:700; }
.ccapp-papers__pdf{ margin-left:auto; font-size:13px; font-weight:700; color:var(--b-600); white-space:nowrap; }
body.ccapp-site-edu .ccapp-papers__pdf{ color:var(--ccapp-edu-800); }
/* dark call-to-action band */
.ccapp-cta.et_pb_section{ background:linear-gradient(125deg,#0A1F22 0%,#0B3B40 55%,#016A71 100%)!important; padding:80px 0!important; }
.ccapp-cta h2{ color:#fff!important; font-size:40px!important; }
.ccapp-cta p{ color:#D5E4E6!important; font-size:17px!important; line-height:1.7!important; }
.ccapp-cta .et_pb_button_module_wrapper{ display:inline-block!important; margin:16px 14px 0 0!important; }
/* BPPE notice */
.ccapp-bppe{ border:1px solid var(--ccapp-line); border-radius:16px; padding:26px 30px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:28px; align-items:center; background:#fff; }
.ccapp-bppe p{ margin:0; font-size:14px!important; line-height:1.7!important; color:var(--ccapp-ink-soft)!important; }
.ccapp-bppe a.ccapp-bppe__btn{ height:48px; padding:0 20px; border-radius:10px; border:1px solid var(--ccapp-line); color:var(--ccapp-ink)!important; font-size:14px; font-weight:700; text-decoration:none; display:flex; align-items:center; white-space:nowrap; }
.ccapp-bppe a.ccapp-bppe__btn:hover{ border-color:var(--ccapp-ink); }
@media (max-width:1100px){
.ccapp-orgcards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.ccapp-posts{ grid-template-columns:1fr; }
.ccapp-band{ grid-template-columns:1fr; padding:32px 26px; }
}
@media (max-width:980px){
.ccapp-sec.et_pb_section{ padding:56px 0!important; }
.ccapp-sec h2,.ccapp-cta h2{ font-size:30px!important; }
.ccapp-hero.et_pb_section{ padding:44px 0 52px!important; }
.ccapp-hero h1{ font-size:36px!important; }
.ccapp-orgcards{ grid-template-columns:1fr; }
.ccapp-bppe{ grid-template-columns:1fr; }
}
/* ---------- 11. Homepage polish measured on staging ---------- */
/* The smaller card is for the four brand sites. ccapp.us keeps the taller one
it was designed with - Larry, 2026-10-11: "the taller cards are what we
wanted for ccappus home page. the other sites have the smaller cards."
Base values in section 10 are the TALL card; this only shrinks the rest. */
body:not(.ccapp-site-home) .ccapp-orgcard__name{ font-size:21px!important; }
body:not(.ccapp-site-home) .ccapp-orgcard__body{ padding:24px 22px 26px; gap:12px; }
.ccapp-blog__more{ margin-top:26px!important; }
.ccapp-blog__more p{ margin:0; }
.ccapp-blog__more a{ color:var(--b-600); text-decoration:none; font-size:16px; }
body.ccapp-site-home .ccapp-blog__more a{ color:#017B83; }
.ccapp-hero__img .et_pb_image_wrap,.ccapp-hero__img img{ width:100%; }
.ccapp-sec .ccapp-eyebrow{ margin-bottom:12px; }
.ccapp-posts__wrap{ margin-top:0!important; }
/* =====================================================================
12. "Dark spine" — v2.1: dark bands down the page, cards lifting off them
===================================================================== */
:root{ --ccapp-shadow-lift:0 30px 60px -26px rgba(7,26,30,.55); --ccapp-shadow-card:0 18px 40px -24px rgba(7,26,30,.45); }
/* --- dark sections --- */
.ccapp-sec--dark.et_pb_section{ background:linear-gradient(135deg,#0A1F22 0%,#0C3438 55%,#0B4A4E 100%)!important; position:relative; }
body.ccapp-site-home .ccapp-sec--dark.et_pb_section{ background:linear-gradient(135deg,#0B1013 0%,#0A2A2E 45%,#0B4A4E 100%)!important; }
.ccapp-sec--dark h2,.ccapp-sec--dark h3{ color:#fff!important; }
.ccapp-sec--dark p,.ccapp-sec--dark li{ color:#CFE0E2!important; }
.ccapp-sec--dark .ccapp-eyebrow{ color:var(--b-pop)!important; }
.ccapp-sec--dark::after,.ccapp-cta::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--ccapp-spectrum); opacity:.9; }
/* --- hero: taller, layered, glow --- */
.ccapp-hero.et_pb_section{ padding:104px 0 128px!important; overflow:hidden; }
.ccapp-hero.et_pb_section::before{ content:""; position:absolute; inset:0;
background:radial-gradient(ellipse 60% 70% at var(--gx,50%) var(--gy,30%), rgba(42,210,201,.22), transparent 62%),
radial-gradient(ellipse 50% 60% at 12% 110%, rgba(95,36,159,.28), transparent 60%);
transition:background-position .3s ease; pointer-events:none; }
.ccapp-hero .et_pb_row{ position:relative; z-index:2; }
.ccapp-hero h1{ font-size:64px!important; line-height:1.04!important; letter-spacing:-.025em!important; text-shadow:0 10px 40px rgba(0,0,0,.35); }
.ccapp-hero .ccapp-eyebrow{ backdrop-filter:blur(4px); }
.ccapp-hero__img{ position:relative; }
.ccapp-hero__img img{ box-shadow:0 40px 90px -30px rgba(0,0,0,.75); border:1px solid rgba(255,255,255,.14); }
.ccapp-hero__img::after{ content:""; position:absolute; inset:-14px -14px auto auto; width:180px; height:180px; border-radius:50%;
background:radial-gradient(circle, rgba(42,210,201,.35), transparent 70%); filter:blur(14px); pointer-events:none; }
.ccapp-btn.et_pb_button:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -12px rgba(42,210,201,.6); }
.ccapp-btn.et_pb_button,.ccapp-btn-outline.et_pb_button{ transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
.ccapp-btn-outline.et_pb_button:hover{ background:rgba(255,255,255,.12)!important; transform:translateY(-2px); }
/* --- stats strip inside the hero --- */
.ccapp-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:54px; padding-top:34px; border-top:1px solid rgba(255,255,255,.16); }
.ccapp-stat{ display:flex; flex-direction:column; gap:6px; }
.ccapp-stat__num{ font-family:var(--ccapp-font); font-size:52px; font-weight:800; line-height:1; color:#fff; letter-spacing:-.02em; }
body.ccapp-site-home .ccapp-stat__num{ background:var(--ccapp-spectrum); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ccapp-stat__label{ font-size:14px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:#A9C4C7; }
/* --- cards lifting off a dark band (split section) --- */
.ccapp-sec--split.et_pb_section{ background:linear-gradient(180deg,#0A2A2E 0,#0A2A2E 340px,#FFFFFF 340px)!important; padding-top:72px!important; }
body.ccapp-site-home .ccapp-sec--split.et_pb_section{ background:linear-gradient(180deg,#0B1013 0,#0A2A2E 60%,#0A2A2E 340px,#FFFFFF 340px)!important; }
.ccapp-sec--split .ccapp-orgs__head h2{ color:#fff!important; }
.ccapp-sec--split .ccapp-orgs__head p{ color:#CFE0E2!important; }
.ccapp-sec--split .ccapp-orgs__head .ccapp-eyebrow{ color:var(--b-pop)!important; }
body.ccapp-site-home .ccapp-sec--split .ccapp-orgs__head .ccapp-eyebrow{ color:#2AD2C9!important; }
/* card text keeps its own colors — the band rules above must not reach it */
.ccapp-sec--split .ccapp-orgcard p,.ccapp-sec--split .ccapp-orgcard__desc{ color:var(--ccapp-ink-soft)!important; }
.ccapp-sec--split .ccapp-orgcard h3,.ccapp-sec--split .ccapp-orgcard li{ color:var(--ccapp-ink)!important; }
.ccapp-sec--split .ccapp-orgcards{ margin-top:36px; }
@media (max-width:980px){ .ccapp-sec--split.et_pb_section{ background:linear-gradient(180deg,#0A2A2E 0,#0A2A2E 300px,#FFFFFF 300px)!important; padding-top:44px!important; } }
.ccapp-orgcard{ box-shadow:var(--ccapp-shadow-lift); border:0; transition:transform .22s ease, box-shadow .22s ease; }
.ccapp-orgcard:hover{ transform:translateY(-6px); box-shadow:0 40px 70px -30px rgba(7,26,30,.6); }
.ccapp-orgcard__bar{ height:10px; }
/* heading scale */
.ccapp-sec h2,.ccapp-cta h2{ font-size:50px!important; }
.ccapp-sec--center h2{ max-width:16ch; margin-left:auto!important; margin-right:auto!important; }
/* program cards */
.ccapp-card.et_pb_blurb{ box-shadow:var(--ccapp-shadow-card); border:0; transition:transform .22s ease, box-shadow .22s ease; }
.ccapp-card.et_pb_blurb:hover{ transform:translateY(-6px); box-shadow:0 36px 64px -28px rgba(7,26,30,.55); }
.ccapp-card .et_pb_image_wrap{ overflow:hidden; }
.ccapp-card .et_pb_image_wrap img{ transition:transform .5s ease; }
.ccapp-card.et_pb_blurb:hover .et_pb_image_wrap img{ transform:scale(1.06); }
/* press band on dark */
.ccapp-sec--dark .ccapp-papers a{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#fff; backdrop-filter:blur(6px); transition:transform .2s ease, background .2s ease; }
.ccapp-sec--dark .ccapp-papers a:hover{ background:rgba(255,255,255,.12); transform:translateX(4px); }
.ccapp-sec--dark .ccapp-papers__kind{ color:#9FBFC2; }
.ccapp-sec--dark .ccapp-papers__pdf{ color:var(--b-pop); }
body.ccapp-site-home .ccapp-sec--dark .ccapp-papers__pdf{ color:#2AD2C9; }
.ccapp-sec--dark a{ color:#fff; }
/* blog + post hovers */
.ccapp-post__img{ transition:transform .5s ease, box-shadow .3s ease; }
.ccapp-post:hover .ccapp-post__img{ transform:translateY(-4px); box-shadow:var(--ccapp-shadow-card); }
/* RADT band gets depth */
.ccapp-band{ box-shadow:0 30px 60px -30px rgba(42,17,69,.8); position:relative; overflow:hidden; }
.ccapp-band::before{ content:""; position:absolute; width:520px; height:520px; right:-160px; top:-260px; border-radius:50%;
background:radial-gradient(circle, rgba(255,255,255,.14), transparent 65%); pointer-events:none; }
.ccapp-band__links a{ transition:transform .18s ease; }
.ccapp-band__links a:hover{ transform:translateX(4px); }
/* --- motion layer --- */
.ccapp-motion-on .ccapp-reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }
.ccapp-motion-on .ccapp-reveal.is-in{ opacity:1; transform:none; }
.ccapp-motion-subtle .ccapp-reveal{ transform:translateY(10px); transition-duration:.45s; }
@media (prefers-reduced-motion: reduce){
.ccapp-reveal{ opacity:1!important; transform:none!important; transition:none!important; }
.ccapp-card.et_pb_blurb:hover,.ccapp-orgcard:hover{ transform:none; }
}
@media (max-width:980px){
.ccapp-hero.et_pb_section{ padding:56px 0 72px!important; }
.ccapp-hero h1{ font-size:38px!important; }
.ccapp-sec h2,.ccapp-cta h2{ font-size:31px!important; }
.ccapp-stats{ grid-template-columns:1fr; gap:18px; margin-top:34px; padding-top:24px; }
.ccapp-stat__num{ font-size:40px; }
.ccapp-sec--overlap.et_pb_section{ margin-top:-40px!important; }
}
/* ---------- 13. Phone links ---------- */
a.ccapp-tel{ color:inherit; text-decoration:none; border-bottom:1px dotted currentColor; }
a.ccapp-tel:hover{ border-bottom-style:solid; }
.ccapp-net a.ccapp-tel,.ccapp-legal a.ccapp-tel{ border-bottom:0; }
/* =====================================================================
14. Dark spine — footer, stats and card fixes (v2.2)
===================================================================== */
.ccapp-orgcard{ background:#FFFFFF!important; }
/* stats: white numbers on a spectrum rule (the gradient text was too dim) */
.ccapp-stat__num,body.ccapp-site-home .ccapp-stat__num{ color:#FFFFFF!important; background:none!important; -webkit-text-fill-color:#fff; }
.ccapp-stat{ position:relative; padding-top:18px; }
.ccapp-stat::before{ content:""; position:absolute; top:0; left:0; width:56px; height:4px; border-radius:4px; background:var(--b-bar); }
body.ccapp-site-home .ccapp-stat::before{ background:var(--ccapp-spectrum); }
/* --- dark footer --- */
.ccapp-foot.et_pb_section{ background:linear-gradient(160deg,#0B1013 0%,#0A2A2E 58%,#0B4A4E 100%)!important; }
body.ccapp-site-mem .ccapp-foot.et_pb_section{ background:linear-gradient(160deg,#0B1013 0%,#024548 60%,#017B83 100%)!important; }
body.ccapp-site-cred .ccapp-foot.et_pb_section{ background:linear-gradient(160deg,#120A1C 0%,#2A1145 60%,#52208A 100%)!important; }
body.ccapp-site-edu .ccapp-foot.et_pb_section{ background:linear-gradient(160deg,#0B1013 0%,#12524E 60%,#1E958F 100%)!important; }
body.ccapp-site-rr .ccapp-foot.et_pb_section{ background:linear-gradient(160deg,#0F0E0D 0%,#1F1D1B 60%,#3A3532 100%)!important; }
.ccapp-foot.et_pb_section::before{ background:var(--ccapp-spectrum); height:4px; }
.ccapp-foot p,.ccapp-foot li,.ccapp-foot a,.ccapp-foot .ccapp-orgs__item a{ color:#CFE0E2!important; }
.ccapp-foot a:hover,.ccapp-foot .ccapp-orgs__item a:hover{ color:#FFFFFF!important; }
.ccapp-foot h2,.ccapp-foot .ccapp-foot__heading,.ccapp-foot .ccapp-orgs__title{ color:#FFFFFF!important; }
.ccapp-foot strong{ color:#FFFFFF; }
.ccapp-foot .et_pb_social_media_follow li a.icon{ background:rgba(255,255,255,.08)!important; border:1px solid rgba(255,255,255,.22)!important; }
.ccapp-foot .et_pb_social_media_follow li a.icon::before{ color:#FFFFFF!important; }
.ccapp-foot .et_pb_social_media_follow li a.icon:hover{ background:var(--b-pop)!important; border-color:var(--b-pop)!important; }
.ccapp-foot .et_pb_social_media_follow li a.icon:hover::before{ color:var(--ccapp-ink)!important; }
.ccapp-foot__menu .et-menu > li > a{ color:#CFE0E2!important; }
.ccapp-foot__menu .et-menu > li > a:hover{ color:#fff!important; }
/* the ad keeps a light card so banner artwork still reads */
.ccapp-foot__ad{ display:inline-block; padding:14px 18px!important; background:rgba(255,255,255,.92); border-radius:14px; }
.ccapp-foot__ad::before{ color:#5B5856; }
.ccapp-foot .ccapp-foot__adrow{ text-align:center; }
.ccapp-legal{ background:rgba(0,0,0,.45); border-top:1px solid rgba(255,255,255,.12); color:#B9C9CB; }
.ccapp-legal a{ color:#B9C9CB!important; }
/* ---------- 15. Split section: paint the band BEHIND the cards ---------- */
.ccapp-sec--split.et_pb_section,
body.ccapp-site-home .ccapp-sec--split.et_pb_section{ background:transparent!important; position:relative; overflow:hidden; }
.ccapp-sec--split.et_pb_section::before{ content:""; position:absolute; left:0; right:0; top:0; height:340px; z-index:0;
background:linear-gradient(135deg,#0B1013 0%,#0A2A2E 55%,#0B4A4E 100%); }
.ccapp-sec--split.et_pb_section > .et_pb_row{ position:relative; z-index:1; }
.ccapp-sec--split .ccapp-orgcard{ background:#FFFFFF!important; }
@media (max-width:980px){ .ccapp-sec--split.et_pb_section::before{ height:300px; } }
/* =====================================================================
16. Inner pages, blog archive and single post
===================================================================== */
/* page hero (Divi section class: ccapp-page-hero) */
.ccapp-page-hero.et_pb_section{ position:relative; overflow:hidden; padding:64px 0 72px!important;
background:linear-gradient(135deg,#0A1F22 0%,#0C3438 55%,#0B4A4E 100%)!important; }
body.ccapp-site-home .ccapp-page-hero.et_pb_section{ background:linear-gradient(135deg,#0B1013 0%,#0A2A2E 45%,#0B4A4E 100%)!important; }
body.ccapp-site-mem .ccapp-page-hero.et_pb_section{ background:linear-gradient(135deg,#02282B 0%,#024548 55%,#017B83 100%)!important; }
body.ccapp-site-cred .ccapp-page-hero.et_pb_section{ background:linear-gradient(135deg,#150A22 0%,#2A1145 55%,#52208A 100%)!important; }
body.ccapp-site-edu .ccapp-page-hero.et_pb_section{ background:linear-gradient(135deg,#0A2A28 0%,#12524E 55%,#1E958F 100%)!important; }
body.ccapp-site-rr .ccapp-page-hero.et_pb_section{ background:linear-gradient(135deg,#0F0E0D 0%,#1F1D1B 55%,#3A3532 100%)!important; }
.ccapp-page-hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--b-stripe); }
body.ccapp-site-home .ccapp-page-hero::after{ background:var(--ccapp-spectrum); }
.ccapp-page-hero .et_pb_row{ width:100%!important; max-width:1320px!important; padding:0 24px!important; }
.ccapp-page-hero h1{ color:#fff!important; font-family:var(--ccapp-font)!important; font-size:52px!important; line-height:1.08!important;
font-weight:700!important; letter-spacing:-.02em; max-width:18ch; margin:14px 0 16px!important; }
.ccapp-page-hero p{ color:#CFE0E2!important; font-size:19px!important; line-height:1.7!important; max-width:70ch; }
.ccapp-page-hero .ccapp-eyebrow{ color:var(--b-pop)!important; }
body.ccapp-site-home .ccapp-page-hero .ccapp-eyebrow{ color:#2AD2C9!important; }
.ccapp-crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-family:var(--ccapp-font); font-size:14px; color:#9FBFC2; margin-bottom:18px; }
.ccapp-crumb a{ color:#9FBFC2!important; text-decoration:none; }
.ccapp-crumb a:hover{ color:#fff!important; }
.ccapp-crumb [aria-current]{ color:#fff; font-weight:600; }
.ccapp-crumb__sep{ opacity:.5; }
/* page body */
.ccapp-page.et_pb_section{ background:#fff!important; padding:72px 0!important; }
.ccapp-page .et_pb_row{ width:100%!important; max-width:1320px!important; padding:0 24px!important; }
.ccapp-page h2{ font-family:var(--ccapp-font)!important; font-size:30px!important; font-weight:700!important; color:var(--ccapp-ink)!important; margin:0 0 12px!important; }
.ccapp-page h3{ font-family:var(--ccapp-font)!important; font-size:21px!important; font-weight:700!important; color:var(--ccapp-ink)!important; }
.ccapp-page p,.ccapp-page li{ font-size:18px!important; line-height:1.8!important; color:var(--ccapp-ink)!important; }
.ccapp-page .et_pb_text{ max-width:74ch; }
.ccapp-page .et_pb_text + .et_pb_text{ margin-top:22px!important; }
.ccapp-quote{ margin:24px 0 0; padding:28px 32px; border-radius:16px; color:#fff!important;
background:linear-gradient(125deg,#0A1F22 0%,#0B3B40 55%,#016A71 100%); font-size:24px!important; line-height:1.45!important; font-weight:600; }
.ccapp-quote span{ display:block; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--b-pop); margin-bottom:10px; }
body.ccapp-site-home .ccapp-quote span{ color:#2AD2C9; }
/* "In this section" sidebar */
.ccapp-aside{ background:#fff; border:1px solid var(--ccapp-line); border-radius:16px; padding:22px 24px; display:flex; flex-direction:column;
box-shadow:var(--ccapp-shadow-card); position:sticky; top:24px; }
.ccapp-aside__title{ font-family:var(--ccapp-font); font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ccapp-ink-soft); margin-bottom:8px; }
.ccapp-aside__link{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 0; border-bottom:1px solid var(--ccapp-line);
color:var(--ccapp-ink)!important; text-decoration:none; font-size:15px; font-weight:500; }
.ccapp-aside__link:last-child{ border-bottom:0; }
.ccapp-aside__link:hover{ color:var(--b-600)!important; }
.ccapp-aside__link.is-current{ color:var(--b-600)!important; font-weight:700; }
body.ccapp-site-edu .ccapp-aside__link.is-current,body.ccapp-site-edu .ccapp-aside__link:hover{ color:var(--ccapp-edu-800)!important; }
/* value / feature cards on inner pages */
.ccapp-tiles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.ccapp-tile{ background:#fff; border-radius:16px; padding:26px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--ccapp-shadow-card); }
.ccapp-tile h3{ margin:0!important; font-size:19px!important; }
.ccapp-tile p{ margin:0; font-size:15px!important; line-height:1.65!important; color:var(--ccapp-ink-soft)!important; }
.ccapp-tile__icon{ width:44px; height:44px; border-radius:12px; background:rgba(var(--b-glow-rgb),.14); color:var(--b-600); display:flex; align-items:center; justify-content:center; }
body.ccapp-site-home .ccapp-tile__icon{ background:#E8F6F6; color:#017B83; }
/* blog archive + single post */
.ccapp-archive .ccapp-posts{ grid-template-columns:repeat(3,minmax(0,1fr)); }
body.single-post #main-content .container,body.archive #main-content .container,body.blog #main-content .container{ max-width:1320px; padding:0 24px; width:100%; }
body.single-post .entry-title,body.archive .entry-title{ font-family:var(--ccapp-font)!important; font-weight:700!important; letter-spacing:-.015em; }
body.single-post .post-meta,body.archive .post-meta{ font-size:14px; color:var(--ccapp-ink-soft); }
body.single-post .entry-content{ font-size:18px; line-height:1.8; color:var(--ccapp-ink); max-width:74ch; }
body.single-post .entry-content h2{ font-size:28px; font-weight:700; margin-top:1.6em; }
body.single-post .entry-content a{ color:var(--b-600); }
body.single-post #sidebar .widget_search input,body.archive #sidebar .widget_search input{ border-radius:10px; }
@media (max-width:1100px){ .ccapp-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } .ccapp-archive .ccapp-posts{ grid-template-columns:1fr; } }
@media (max-width:980px){
.ccapp-page-hero.et_pb_section{ padding:36px 0 44px!important; }
.ccapp-page-hero h1{ font-size:32px!important; }
.ccapp-page-hero p{ font-size:17px!important; }
.ccapp-page.et_pb_section{ padding:44px 0!important; }
.ccapp-page p,.ccapp-page li{ font-size:17px!important; }
.ccapp-aside{ position:static; }
.ccapp-tiles{ grid-template-columns:1fr; }
}
/* ---------- 17. Font safety net ----------
Divi sets Poppins globally on these sites; this makes our own components independent of that. */
.ccapp-page-hero,.ccapp-page,.ccapp-sec,.ccapp-cta,.ccapp-hero,.ccapp-foot,.ccapp-net,.ccapp-hdr,
.ccapp-tile,.ccapp-tiles,.ccapp-aside,.ccapp-crumb,.ccapp-orgcard,.ccapp-post,.ccapp-papers,.ccapp-band,.ccapp-quote,
.ccapp-page p,.ccapp-page li,.ccapp-page h1,.ccapp-page h2,.ccapp-page h3{ font-family:var(--ccapp-font); }
/* ---------- 18. Header base color beats Divi's generated CSS ----------
Measured on staging 2026-09-30, logged out: the header rendered near-WHITE
(#F9F9F9) with the white logo and white menu text on top of it — unreadable.
Section 3 sets the base through the `background` shorthand at (0,2,0). Divi's
Theme Builder emits, inline in the page:
.et-l--header > .et_builder_inner_content .et_pb_section.et_pb_section_1_tb_header
{ background-color:#F9F9F9!important }
which is (0,4,0) and wins the background-COLOR while our gradients still win
the background-IMAGE — hence glow over white instead of glow over near-black.
The class is repeated to reach (0,5,0). No ID hack, still ccapp- scoped, and
the header no longer depends on Divi's generated CSS being in any given state
— Divi rewrites that block on every layout save. */
.et-l--header > .et_builder_inner_content .et_pb_section.ccapp-hdr.ccapp-hdr{
background-color:var(--hdr-base)!important;
background-image:var(--hdr-glow)!important;
}
/* ---------- 19. Header lockup centers on a phone ----------
Measured at 373px: the Divi Image module carries max-width:33% from the
Theme Builder, so its box is 107px wide while the lockup itself draws 231px
(its width comes from the fixed height). The image overflowed its own box to
the right — computed margin-right:-123px — and sat 45px right of the chip and
the menu, which are both properly centered.
Give the module the full width below the desktop breakpoint and the image's
own `margin:0 auto` does the centering. Class repeated for the same reason as
section 18: Divi's generated CSS outranks a single class. */
@media (max-width:980px){
.et-l--header > .et_builder_inner_content .et_pb_image.ccapp-hdr__logo.ccapp-hdr__logo{
max-width:100%!important;
margin-left:auto!important;
margin-right:auto!important;
}
.ccapp-hdr__logo img{ max-width:min(380px,86vw); }
}
/* ---------- 20. Hero: the image centers on the text, and floats ----------
Measured at 1440px: the hero row is display:block, so the two columns sat
top-aligned — text column 608px, image column 304px. That left ~300px of
empty gradient under the photo and made the right side look unfinished.
Larry: "too much space under the inmage. and make the image floating."
Flex + center on the row only above the stacking breakpoint; below it the
columns stack and centering would be meaningless. float:none because Divi's
block rows float their columns, which flex would otherwise fight.
Measured after: row center 817, image center 817. */
@media (min-width:981px){
.ccapp-hero .et_pb_row{ display:flex!important; align-items:center!important; }
.ccapp-hero .et_pb_row > .et_pb_column{ float:none!important; }
}
/* The float itself. Tied to the Customizer motion setting like every other
movement in this theme, so switching to Subtle or None stops it, and
reduced-motion stops it regardless of the setting. The ::after glow is a
child of the module, so it travels with the photo instead of detaching. */
@keyframes ccapp-float{
0%,100%{ transform:translateY(0); }
50% { transform:translateY(-14px); }
}
body.ccapp-motion-full .ccapp-hero__img{
animation:ccapp-float 6s ease-in-out infinite;
will-change:transform;
}
@media (prefers-reduced-motion:reduce){
.ccapp-hero__img{ animation:none!important; }
}
/* ---------- 21. An empty site chip takes no room ----------
ccapp.us suppresses the chip (the lockup right below already says CCAPP), but
the Divi Code module holding it still carries margin-bottom:26px from section
3, which left a gap where the chip used to be. */
.ccapp-hdr .ccapp-hdr__chip.et_pb_module:not(:has(.ccapp-chip)){
display:none!important;
margin:0!important;
}
/* ---------- 22. The stats strip adapts to how many stats there are ----------
The grid was a hard repeat(3,...). With the organizations stat removed, two
items sat in the first two of three columns and hugged the left edge, leaving
~430px of dead space on the right at 1440px.
auto-fit means the row divides by the number of stats actually rendered, so
two sit evenly across the full width and three still behave as before. It
also means changing the slots in motion.php never needs a CSS change. */
.ccapp-stats{
grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important;
}
/* ---------- 23. The home tiles show the whole picture ----------
Larry, 2026-10-11, pointing at live ccapp.us: the tiles there are TALL.
Measured: every tile image is portrait - 303x400 (RH 404x533), ratio 0.757 -
and live renders them whole at 321x424. The remodel was cropping them to
`height:200px; object-fit:cover`, a 1.89 landscape letterbox that threw away
more than half of each one. These are flyers, magazine covers and event
artwork; cropping them to a strip destroys the thing itself. Same mistake
Larry pulled me up on in August: "you are eliminating my cards and images".
ccapp.us shows the full portrait tile. The other four sites keep the short
crop - Larry: "the other sites have the smaller cards."
aspect-ratio rather than height:auto so one odd-sized image can never break
the row; at 0.757 sources nothing is actually cropped. */
body.ccapp-site-home .ccapp-card .et_pb_image_wrap img{
height:auto!important;
aspect-ratio:303/400;
object-fit:cover;
}
/* ---------- 24. Tiles: a fresher, more modern treatment ----------
Larry, 2026-10-11: "see what you can do to make them look nicer, some
styling that matches the new theme, shaddow, or something. make it more
modern, fresh."
Deliberately nothing is drawn ON the artwork - these tiles are flyers, a
magazine cover and event art, and covering them is the thing Larry has
objected to twice. Everything added lives in the caption or around the
card. Applies to every CCAPP site; only the tile HEIGHT differs per site
(section 23).
- two-layer shadow (a tight contact shadow plus a soft cast one) instead of
the single soft blur, which is what makes a card sit on the page rather
than float vaguely above it
- 18px radius, matching the hero image
- a brand hairline that draws left-to-right across the top of the caption
on hover - on ccapp.us --b-bar is the spectrum, so it ties to the header
- the title warms to the brand color, and an arrow travels in at the bottom
right of the caption, opposite the short label. Putting it there rather
than after the title matters: appended to a two-line title it wrapped onto
a line of its own.
- the whole tile is the click target, via a stretched link on the title
- keyboard focus gets a real ring, and everything stops under
prefers-reduced-motion
---------------------------------------------------------------------- */
.ccapp-card.et_pb_blurb{
position:relative;
border-radius:18px;
background:#fff;
box-shadow:0 1px 2px rgba(7,26,30,.06), 0 14px 34px -22px rgba(7,26,30,.45);
transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s cubic-bezier(.2,.7,.3,1);
}
.ccapp-card.et_pb_blurb:hover{
transform:translateY(-8px);
box-shadow:0 2px 4px rgba(7,26,30,.08),
0 40px 70px -30px rgba(7,26,30,.6),
0 0 0 1px rgba(var(--b-glow-rgb),.18);
}
.ccapp-card .et_pb_blurb_container{ position:relative; padding:20px 22px 22px; }
.ccapp-card .et_pb_blurb_container::before{
content:""; position:absolute; left:0; top:0; height:3px; width:100%;
background:var(--b-bar);
transform:scaleX(0); transform-origin:left;
transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.ccapp-card.et_pb_blurb:hover .et_pb_blurb_container::before{ transform:scaleX(1); }
.ccapp-card .et_pb_module_header a{ color:inherit!important; text-decoration:none!important; }
.ccapp-card.et_pb_blurb:hover .et_pb_module_header{ color:var(--b-600)!important; }
.ccapp-card .et_pb_blurb_description{
display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
}
.ccapp-card .et_pb_blurb_description p{ margin:0!important; }
.ccapp-card .et_pb_blurb_description::after{
content:"\2192";
flex:0 0 auto; font-size:18px; line-height:1; color:var(--b-600);
transform:translateX(-6px); opacity:0;
transition:transform .32s cubic-bezier(.2,.7,.3,1), opacity .32s ease;
}
.ccapp-card.et_pb_blurb:hover .et_pb_blurb_description::after{ transform:translateX(0); opacity:1; }
.ccapp-card .et_pb_module_header a::after{ content:""; position:absolute; inset:0; z-index:3; }
.ccapp-card .et_pb_module_header a:focus-visible::after{
outline:3px solid var(--b-600); outline-offset:3px; border-radius:18px;
}
.ccapp-card.et_pb_blurb:hover .et_pb_image_wrap img{ transform:scale(1.05); }
@media (prefers-reduced-motion:reduce){
.ccapp-card.et_pb_blurb,
.ccapp-card .et_pb_image_wrap img,
.ccapp-card .et_pb_blurb_container::before,
.ccapp-card .et_pb_blurb_description::after{ transition:none!important; }
.ccapp-card.et_pb_blurb:hover{ transform:none; }
}
/* ---------- 25. Close the gap under the tile image ----------
Larry, 2026-10-12: "there is extra white space between the image and the
nice line you made."
Divi 5 lays the blurb out as a flex column (.et_pb_blurb_content carries
.et_flex_module) with gap:30px. That gap sat between the artwork and the
caption, so the brand hairline - which is pinned to the top of the caption -
was floating 30px below the picture instead of riding its bottom edge.
The caption's own 20px top padding is the breathing room; the flex gap was
just extra. Measured: 30px -> 0, card 623px -> 593px. */
.ccapp-card .et_pb_blurb_content{
gap:0!important;
row-gap:0!important;
}
/* ---------- 26. The split band follows the heading ----------
Larry, 2026-10-12: "this looks terrible."
The dark band was a fixed `height:340px` on the section's ::before. The
heading now wraps to three lines, so the head block ran to 489px while the
band stopped at 340 - the lede, which is deliberately light (#CFE0E2) for a
dark background, landed on white and became unreadable. The cards had also
stopped overlapping the band entirely, which was the whole point of the
"cards over a dark band" treatment.
Any fixed number re-breaks the moment the copy changes, so the band is now
the HEADING ROW itself: it cannot be shorter than its own content. The cards
are pulled up to overlap it. Measured: head 0-639, cards overlap 35px,
no horizontal overflow (the full-bleed trick is inside overflow:hidden). */
.ccapp-sec--split.et_pb_section::before{ content:none!important; }
.ccapp-sec--split.et_pb_section{ padding-top:0!important; }
.ccapp-sec--split .ccapp-orgs__head{
position:relative;
padding-top:72px!important;
padding-bottom:150px!important;
margin-bottom:-96px!important;
}
.ccapp-sec--split .ccapp-orgs__head::before{
content:""; position:absolute; z-index:0;
left:50%; margin-left:-50vw; width:100vw; top:0; bottom:0;
background:linear-gradient(135deg,#0B1013 0%,#0A2A2E 60%,#0A2A2E 100%);
}
.ccapp-sec--split .ccapp-orgs__head > *{ position:relative; z-index:1; }
.ccapp-sec--split .ccapp-orgcards__row{ position:relative; z-index:2; }
@media (max-width:980px){
.ccapp-sec--split .ccapp-orgs__head{
padding-top:44px!important; padding-bottom:120px!important; margin-bottom:-76px!important;
}
}
/* ---------- 27. The copyright bar reaches the bottom ----------
Larry: "is the light green intentional below the dark green bar in teh
footer? looks like a mistake." It was a mistake. Divi puts padding:25px 0 on
every column, so 25px of the footer's gradient showed below the legal bar -
and at that point the gradient has run to its lighter teal, which read as a
stray light-green strip. Same 25px column padding that put a dark strip over
the tiles back in August. */
/* Superseded. The -25px was cancelling Divi's 25px column padding on ccapp.us,
but Divi's generated column padding differs per install: on Membership it is
already 0, so the negative margin pushed the legal strip 25px PAST the end of
the footer - it painted on the body background as a grey bar under the site
and clipped the copyright line. Cancel the padding explicitly instead, which
is true on every install. */
.ccapp-foot .ccapp-foot__legalrow .et_pb_column,
.ccapp-foot .ccapp-foot__legalrow .et_pb_module{ padding:0!important; margin:0!important; }
.ccapp-foot .ccapp-legal{ margin:0!important; }
/* ---------- 28. Landing page hero — one treatment, every page ----------
Larry, 2026-10-12: "the current landing page heros look terrible. what you
come up with should be the same on all landing pages. make it look amazing,
give it wow factor."
What was there: three of the thirteen pages carried a Divi fullwidth-header
module with a teal-washed stock photo behind it; the other ten had no hero
at all and dropped the reader straight into body copy. Nothing was shared,
so nothing could be fixed once.
What this is: the theme prints the hero itself (inc/page-parts.php, on
et_before_main_content), so every landing page gets the same one and a new
page gets it for free. The three legacy modules come out of those layouts.
The look is built from the three moves the rest of the site already uses,
so an inner page reads as the same building rather than an annex:
1. the header's LAYERED GLOW vocabulary, not a flat gradient
2. the homepage hero's POINTER-REACTIVE light (--gx/--gy, same script)
3. the homepage's signature CONTENT-LIFTS-OVER-THE-BAND overlap
Per-company base gradients are kept from section 16 — color signals which
site you are on, and that rule is not mine to change.
---------------------------------------------------------------------- */
.ccapp-phero{
position:relative; isolation:isolate; overflow:hidden;
font-family:var(--ccapp-font);
padding:clamp(38px,4.8vw,70px) 0 clamp(76px,8.6vw,132px);
background:linear-gradient(135deg,#0B1013 0%,#0A2A2E 45%,#0B4A4E 100%);
}
body.ccapp-site-mem .ccapp-phero{ background:linear-gradient(135deg,#02282B 0%,#024548 55%,#017B83 100%); }
body.ccapp-site-cred .ccapp-phero{ background:linear-gradient(135deg,#150A22 0%,#2A1145 55%,#52208A 100%); }
body.ccapp-site-edu .ccapp-phero{ background:linear-gradient(135deg,#0A2A28 0%,#12524E 55%,#1E958F 100%); }
body.ccapp-site-rr .ccapp-phero{ background:linear-gradient(135deg,#0F0E0D 0%,#1F1D1B 55%,#3A3532 100%); }
/* ---- the light. Three drifting orbs + a grid + one glow that follows the
pointer. All of it decorative, all of it behind the type. ---- */
.ccapp-phero__fx{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.ccapp-phero__orb{
position:absolute; display:block; border-radius:50%;
filter:blur(70px); opacity:.62; will-change:transform;
}
.ccapp-phero__orb--a{ width:min(760px,54vw); aspect-ratio:1; left:-8vw; top:-42%;
background:radial-gradient(circle,rgba(95,36,159,.85),rgba(95,36,159,0) 68%); }
.ccapp-phero__orb--b{ width:min(680px,48vw); aspect-ratio:1; right:-10vw; bottom:-56%;
background:radial-gradient(circle,rgba(42,210,201,.70),rgba(42,210,201,0) 68%); }
.ccapp-phero__orb--c{ width:min(560px,40vw); aspect-ratio:1; left:36%; top:-64%;
background:radial-gradient(circle,rgba(var(--b-glow-rgb),.95),rgba(var(--b-glow-rgb),0) 70%); }
.ccapp-phero__grid{
position:absolute; inset:0; opacity:.55;
background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
background-size:72px 72px;
-webkit-mask-image:radial-gradient(ellipse 72% 108% at 18% 0%,#000 0%,rgba(0,0,0,0) 70%);
mask-image:radial-gradient(ellipse 72% 108% at 18% 0%,#000 0%,rgba(0,0,0,0) 70%);
}
.ccapp-phero__fx::after{
content:""; position:absolute; inset:0;
background:linear-gradient(100deg, rgba(4,9,11,.74) 0%, rgba(4,9,11,.42) 34%, rgba(4,9,11,0) 68%),
linear-gradient(to top, rgba(4,9,11,.45) 0%, rgba(4,9,11,0) 26%);
}
.ccapp-phero__track{
position:absolute; inset:0; z-index:1;
background:radial-gradient(ellipse 46% 68% at var(--gx,64%) var(--gy,18%),
rgba(var(--b-glow-rgb),.30), rgba(0,0,0,0) 62%);
}
/* ---- the type ---- */
.ccapp-phero__inner{
position:relative; z-index:2;
max-width:1440px; margin:0 auto; padding:0 52px;
}
.ccapp-phero .ccapp-crumb{
display:inline-flex; flex-wrap:wrap; align-items:center; gap:9px;
margin:0 0 22px; padding:7px 15px; border-radius:999px;
background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15);
-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
font-size:13px; line-height:1.3; letter-spacing:.01em; color:#CFE0E2;
}
.ccapp-phero .ccapp-crumb a{ color:#CFE0E2!important; text-decoration:none; }
.ccapp-phero .ccapp-crumb a:hover{ color:#fff!important; }
.ccapp-phero .ccapp-crumb [aria-current]{ color:#fff; font-weight:600; }
.ccapp-phero .ccapp-crumb__sep{ opacity:.42; }
.ccapp-phero__rule{
display:block; width:68px; height:5px; margin:0 0 18px; border-radius:999px;
background:var(--b-bar,var(--ccapp-spectrum));
box-shadow:0 0 24px rgba(var(--b-glow-rgb),.85);
}
.ccapp-phero__title{
margin:0!important; padding:0!important;
color:#fff!important; font-family:var(--ccapp-font)!important; font-weight:800!important;
font-size:clamp(32px,5.2vw,60px)!important; line-height:1.05!important;
letter-spacing:-.025em!important; max-width:19ch; text-wrap:balance;
text-shadow:0 14px 44px rgba(0,0,0,.45);
}
.ccapp-phero__sub{
margin:18px 0 0!important; max-width:62ch;
color:#CFE0E2!important; font-size:clamp(16px,1.25vw,19px)!important; line-height:1.7!important;
}
/* ---- the ad sits directly under the hero, and it is the thing that lifts ----
The "Hub - Top Banner" placement is injected right after .ccapp-hero (home) or
.ccapp-phero (every landing page), so on a landing page it lands between the
hero and #main-content. It takes the cards-over-a-band lift; the body below
then runs flush into it. */
body.ccapp-has-phero #main-content{ position:relative; z-index:4; background:#fff; }
/* no ad on the page: the body itself lifts, as before */
body.ccapp-has-phero:not(:has(#et-main-area > .ccapp-entity-placement)) #main-content{
margin-top:calc(-1 * clamp(32px,4.4vw,60px));
border-radius:clamp(18px,2.4vw,30px) clamp(18px,2.4vw,30px) 0 0;
box-shadow:0 -26px 64px -32px rgba(7,26,30,.5);
}
/* ---- motion. Everything below is gated on the Customizer motion setting and
switched off again for prefers-reduced-motion by ccapp-motion.js. ---- */
body.ccapp-motion-on .ccapp-phero__orb--a{ animation:ccapp-orb-a 26s ease-in-out infinite; }
body.ccapp-motion-on .ccapp-phero__orb--b{ animation:ccapp-orb-b 31s ease-in-out infinite; }
body.ccapp-motion-on .ccapp-phero__orb--c{ animation:ccapp-orb-c 22s ease-in-out infinite; }
@keyframes ccapp-orb-a{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(6%,8%,0) scale(1.14); } }
@keyframes ccapp-orb-b{ 0%,100%{ transform:translate3d(0,0,0) scale(1.06); } 50%{ transform:translate3d(-7%,-6%,0) scale(.94); } }
@keyframes ccapp-orb-c{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(-5%,10%,0) scale(1.1); } }
body.ccapp-motion-on .ccapp-phero__track{ transition:background-position .3s ease; }
body.ccapp-motion-on .ccapp-phero .ccapp-crumb,
body.ccapp-motion-on .ccapp-phero__title,
body.ccapp-motion-on .ccapp-phero__sub{ animation:ccapp-phero-in .72s cubic-bezier(.22,.8,.25,1) both; }
body.ccapp-motion-on .ccapp-phero .ccapp-crumb{ animation-delay:.04s; }
body.ccapp-motion-on .ccapp-phero__rule { animation:ccapp-phero-rule .8s cubic-bezier(.22,.8,.25,1) .16s both; }
body.ccapp-motion-on .ccapp-phero__title{ animation-delay:.12s; }
body.ccapp-motion-on .ccapp-phero__sub { animation-delay:.2s; }
@keyframes ccapp-phero-in { from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes ccapp-phero-rule{ from{ opacity:0; width:0; } to{ opacity:1; width:68px; } }
/* ---- responsive ---- */
@media (max-width:1100px){
.ccapp-phero__inner{ padding:0 32px; }
.ccapp-phero__grid{ background-size:56px 56px; }
}
@media (max-width:980px){
.ccapp-phero__orb{ filter:blur(56px); opacity:.55; }
.ccapp-phero__title{ max-width:none; }
}
@media (max-width:767px){
.ccapp-phero{ padding:28px 0 clamp(60px,16vw,88px); }
.ccapp-phero__inner{ padding:0 22px; }
.ccapp-phero .ccapp-crumb{ font-size:12px; margin-bottom:16px; padding:6px 12px; }
.ccapp-phero__rule{ width:52px; height:4px; margin-bottom:14px; }
.ccapp-phero__title{ font-size:clamp(27px,7.4vw,34px)!important; letter-spacing:-.02em!important; }
.ccapp-phero__sub{ margin-top:14px!important; font-size:16px!important; line-height:1.6!important; }
.ccapp-phero__grid{ background-size:44px 44px; opacity:.4; }
body.ccapp-has-phero #et-main-area > .ccapp-entity-placement,
body.ccapp-has-phero:not(:has(#et-main-area > .ccapp-entity-placement)) #main-content{
margin-top:-26px; border-radius:16px 16px 0 0;
}
@keyframes ccapp-phero-rule{ from{ opacity:0; width:0; } to{ opacity:1; width:52px; } }
}
@media (prefers-reduced-motion:reduce){
.ccapp-phero__orb{ animation:none!important; }
.ccapp-phero__track{ transition:none!important; }
.ccapp-phero .ccapp-crumb,.ccapp-phero__rule,.ccapp-phero__title,.ccapp-phero__sub{ animation:none!important; }
}
/* ---------- 29. Landing page CONTENT — dressed to match ----------
Larry, 2026-10-12: "don't forget to dress up the content on the pages to
match. without changing the content, you are changing the look and feel of
the content to match the new design. make it pop, wow factor."
Not one word of copy changes here. Everything below is a look applied to
the Divi modules the pages are already built from, scoped to
body.ccapp-has-phero so the homepage (which has its own components) is
untouched. Pages keep working in the Divi builder exactly as before.
---------------------------------------------------------------------- */
body.ccapp-has-phero #main-content{ font-family:var(--ccapp-font); }
/* ---- type scale. Sizes and weights everywhere; colors only where Divi has
told us the module sits on a light background, so nothing goes
invisible on a dark band. ---- */
body.ccapp-has-phero #main-content h1,
body.ccapp-has-phero #main-content h2,
body.ccapp-has-phero #main-content h3,
body.ccapp-has-phero #main-content h4,
body.ccapp-has-phero #main-content h5,
body.ccapp-has-phero #main-content h6{ font-family:var(--ccapp-font)!important; }
/* Several pages were built with an
per section (the real page title now
lives in the hero), so a content h1 is treated as a section heading too. */
body.ccapp-has-phero #main-content h2,
body.ccapp-has-phero #main-content .et_pb_text_inner h1{
font-weight:800!important; font-size:clamp(25px,2.4vw,37px)!important;
line-height:1.16!important; letter-spacing:-.022em!important; padding-bottom:0!important;
}
body.ccapp-has-phero #main-content h3{
font-weight:700!important; font-size:clamp(20px,1.7vw,26px)!important;
line-height:1.25!important; letter-spacing:-.015em!important;
}
body.ccapp-has-phero #main-content h4{
font-weight:600!important; font-size:clamp(17px,1.25vw,19px)!important; line-height:1.45!important;
}
body.ccapp-has-phero #main-content .et_pb_bg_layout_light h2,
body.ccapp-has-phero #main-content .et_pb_bg_layout_light h3,
body.ccapp-has-phero #main-content .et_pb_bg_layout_light .et_pb_text_inner h1{ color:var(--ccapp-ink)!important; }
body.ccapp-has-phero #main-content .et_pb_bg_layout_light h4{ color:var(--b-600)!important; }
/* body copy. Not every page wraps its text in
— Contact Us puts it in bare
divs — so the size is set on the module and the common children. */
body.ccapp-has-phero #main-content .et_pb_text_inner,
body.ccapp-has-phero #main-content .et_pb_text_inner > div,
body.ccapp-has-phero #main-content .et_pb_text_inner p,
body.ccapp-has-phero #main-content .et_pb_text_inner li{
font-size:17px!important; line-height:1.78!important;
}
body.ccapp-has-phero #main-content .et_pb_text_inner > div.container{ width:100%!important; max-width:none!important; }
body.ccapp-has-phero #main-content .et_pb_bg_layout_light .et_pb_text_inner,
body.ccapp-has-phero #main-content .et_pb_bg_layout_light .et_pb_text_inner > div,
body.ccapp-has-phero #main-content .et_pb_bg_layout_light .et_pb_text_inner p,
body.ccapp-has-phero #main-content .et_pb_bg_layout_light .et_pb_text_inner li{ color:#4A4845!important; }
body.ccapp-has-phero #main-content .et_pb_text_inner strong{ color:var(--ccapp-ink); font-weight:700; }
body.ccapp-has-phero #main-content .et_pb_text_inner a:not(.et_pb_button){
color:var(--b-600); text-decoration:none;
background-image:linear-gradient(var(--b-pop),var(--b-pop));
background-size:100% 1px; background-position:0 100%; background-repeat:no-repeat;
transition:background-size .22s ease, color .18s ease;
}
body.ccapp-has-phero #main-content .et_pb_text_inner a:not(.et_pb_button):hover{
color:var(--b)!important; background-size:100% 2px;
}
/* a short brand rule under the heading that opens a text block */
body.ccapp-has-phero #main-content .et_pb_text_inner > h1:first-child::after,
body.ccapp-has-phero #main-content .et_pb_text_inner > h2:first-child::after{
content:""; display:block; width:56px; height:4px; border-radius:999px;
background:var(--b-bar); margin:16px 0 4px;
}
body.ccapp-has-phero #main-content .et_pb_text_align_center .et_pb_text_inner > :is(h1,h2):first-child::after{ margin-left:auto; margin-right:auto; }
body.ccapp-has-phero #main-content .et_pb_text_align_right .et_pb_text_inner > :is(h1,h2):first-child::after{ margin-left:auto; }
/* ---- lists get icons instead of browser bullets ---- */
body.ccapp-has-phero #main-content .et_pb_text_inner ul{ list-style:none!important; padding-left:0!important; }
body.ccapp-has-phero #main-content .et_pb_text_inner ul > li{ position:relative; padding-left:30px; margin-bottom:9px; }
body.ccapp-has-phero #main-content .et_pb_text_inner ul > li::before{
content:""; position:absolute; left:3px; top:.62em; width:9px; height:9px; border-radius:3px;
background:var(--b-bar); box-shadow:0 0 0 4px rgba(var(--b-glow-rgb),.12);
}
body.ccapp-has-phero #main-content .et_pb_text_inner ol{ list-style:none!important; padding-left:0!important; counter-reset:ccappol; }
body.ccapp-has-phero #main-content .et_pb_text_inner ol > li{
counter-increment:ccappol; position:relative; padding-left:46px; margin-bottom:14px;
}
body.ccapp-has-phero #main-content .et_pb_text_inner ol > li::before{
content:counter(ccappol); position:absolute; left:0; top:.08em;
display:flex; align-items:center; justify-content:center; width:30px; height:30px;
border-radius:10px; background:rgba(var(--b-glow-rgb),.13); color:var(--b-600);
font-family:var(--ccapp-font); font-weight:700; font-size:14px; line-height:1;
}
/* a list item that only wraps another list is scaffolding, not a step —
no bullet, no number, no indent (the Complaints page nests like this) */
body.ccapp-has-phero #main-content .et_pb_text_inner li:has(> ol:only-child),
body.ccapp-has-phero #main-content .et_pb_text_inner li:has(> ul:only-child){
padding-left:0!important; margin-bottom:0!important; counter-increment:none;
}
body.ccapp-has-phero #main-content .et_pb_text_inner li:has(> ol:only-child)::before,
body.ccapp-has-phero #main-content .et_pb_text_inner li:has(> ul:only-child)::before{ display:none!important; }
body.ccapp-has-phero #main-content .et_pb_text_inner li > ol,
body.ccapp-has-phero #main-content .et_pb_text_inner li > ul{ margin-top:10px; }
/* ---- images: rounded, lifted, and they breathe on hover ---- */
body.ccapp-has-phero #main-content .et_pb_image .et_pb_image_wrap{
display:block; overflow:hidden; border-radius:18px;
box-shadow:0 20px 46px -26px rgba(7,26,30,.55), 0 2px 6px rgba(7,26,30,.07);
}
body.ccapp-has-phero #main-content .et_pb_image .et_pb_image_wrap img{
display:block; width:100%; height:auto;
transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
body.ccapp-has-phero #main-content .et_pb_image:hover .et_pb_image_wrap img{ transform:scale(1.045); }
/* small marks (logos, badges, icons) keep their shape */
body.ccapp-has-phero #main-content .et_pb_blurb .et_pb_image_wrap,
body.ccapp-has-phero #main-content .et_pb_image.ccapp-plain .et_pb_image_wrap{ border-radius:0; box-shadow:none; }
/* ---- buttons ---- */
body.ccapp-has-phero #main-content .et_pb_button,
body.ccapp-has-phero #main-content .et_pb_button:hover{
font-family:var(--ccapp-font)!important; font-weight:600!important; font-size:16px!important;
letter-spacing:.005em!important; line-height:1.2!important;
padding:14px 30px!important; border:0!important; border-radius:999px!important;
background:linear-gradient(135deg,var(--b) 0%,var(--b-600) 100%)!important;
color:#fff!important;
}
body.ccapp-has-phero #main-content .et_pb_button{
display:inline-block; box-shadow:0 14px 30px -16px rgba(var(--b-glow-rgb),.95);
transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
body.ccapp-has-phero #main-content .et_pb_button::after,
body.ccapp-has-phero #main-content .et_pb_button::before{ display:none!important; }
body.ccapp-has-phero #main-content .et_pb_button:hover{
transform:translateY(-2px); filter:brightness(1.07);
box-shadow:0 22px 40px -18px rgba(var(--b-glow-rgb),1);
}
body.ccapp-has-phero #main-content .et_pb_button:focus-visible{
outline:3px solid var(--b-pop); outline-offset:3px;
}
/* ---- blurbs become cards ---- */
body.ccapp-has-phero #main-content .et_pb_blurb{
position:relative; background:#fff; border:1px solid var(--ccapp-line); border-radius:18px;
padding:26px 26px 24px!important;
box-shadow:0 12px 30px -24px rgba(7,26,30,.55);
transition:transform .26s cubic-bezier(.2,.7,.2,1), box-shadow .26s ease, border-color .26s ease;
}
body.ccapp-has-phero #main-content .et_pb_blurb:hover{
transform:translateY(-6px); border-color:rgba(var(--b-glow-rgb),.42);
box-shadow:0 30px 56px -30px rgba(7,26,30,.55);
}
body.ccapp-has-phero #main-content .et_pb_blurb::before{
content:""; position:absolute; left:26px; right:26px; top:0; height:3px; border-radius:0 0 3px 3px;
background:var(--b-bar); transform:scaleX(0); transform-origin:left;
transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
body.ccapp-has-phero #main-content .et_pb_blurb:hover::before{ transform:scaleX(1); }
/* narrow columns (quarters, fifths) can't afford 26px of padding either side */
body.ccapp-has-phero #main-content .et_pb_column_1_3 .et_pb_blurb,
body.ccapp-has-phero #main-content .et_pb_column_1_4 .et_pb_blurb,
body.ccapp-has-phero #main-content .et_pb_column_1_5 .et_pb_blurb,
body.ccapp-has-phero #main-content .et_pb_column_1_6 .et_pb_blurb{ padding:20px 18px 18px!important; }
body.ccapp-has-phero #main-content .et_pb_column_1_3 .et_pb_blurb::before,
body.ccapp-has-phero #main-content .et_pb_column_1_4 .et_pb_blurb::before,
body.ccapp-has-phero #main-content .et_pb_column_1_5 .et_pb_blurb::before,
body.ccapp-has-phero #main-content .et_pb_column_1_6 .et_pb_blurb::before{ left:18px; right:18px; }
body.ccapp-has-phero #main-content .et_pb_blurb .et_pb_module_header,
body.ccapp-has-phero #main-content .et_pb_blurb .et_pb_blurb_description{ overflow-wrap:break-word; hyphens:none; }
/* a row of single-card columns lines up: Divi floats the columns, which leaves
them ragged, so the row becomes a flex container and the card fills its column */
body.ccapp-has-phero #main-content .et_pb_row:has(> .et_pb_column > .et_pb_blurb:only-child){
display:flex; flex-wrap:wrap; align-items:stretch;
}
body.ccapp-has-phero #main-content .et_pb_row:has(> .et_pb_column > .et_pb_blurb:only-child)::before,
body.ccapp-has-phero #main-content .et_pb_row:has(> .et_pb_column > .et_pb_blurb:only-child)::after{ display:none; }
body.ccapp-has-phero #main-content .et_pb_column:has(> .et_pb_blurb:only-child){ display:flex; }
body.ccapp-has-phero #main-content .et_pb_column:has(> .et_pb_blurb:only-child) > .et_pb_blurb{ flex:1 1 auto; }
/* in a narrow column an icon beside the text leaves too little room for the
heading ("PROFESSIONALIS / M"), so the icon goes above it instead */
body.ccapp-has-phero #main-content .et_pb_column_1_4 .et_pb_blurb.et_pb_blurb_position_left .et_pb_blurb_content,
body.ccapp-has-phero #main-content .et_pb_column_1_5 .et_pb_blurb.et_pb_blurb_position_left .et_pb_blurb_content,
body.ccapp-has-phero #main-content .et_pb_column_1_6 .et_pb_blurb.et_pb_blurb_position_left .et_pb_blurb_content{
display:flex!important; flex-direction:column!important; align-items:flex-start!important; gap:12px!important;
}
body.ccapp-has-phero #main-content .et_pb_column_1_4 .et_pb_blurb.et_pb_blurb_position_left .et_pb_main_blurb_image,
body.ccapp-has-phero #main-content .et_pb_column_1_5 .et_pb_blurb.et_pb_blurb_position_left .et_pb_main_blurb_image,
body.ccapp-has-phero #main-content .et_pb_column_1_6 .et_pb_blurb.et_pb_blurb_position_left .et_pb_main_blurb_image{
width:auto!important; margin:0!important; padding:0!important;
}
body.ccapp-has-phero #main-content .et_pb_column_1_4 .et_pb_blurb .et_pb_module_header,
body.ccapp-has-phero #main-content .et_pb_column_1_5 .et_pb_blurb .et_pb_module_header,
body.ccapp-has-phero #main-content .et_pb_column_1_6 .et_pb_blurb .et_pb_module_header{ font-size:17px!important; }
body.ccapp-has-phero #main-content .et_pb_blurb .et_pb_module_header{
font-family:var(--ccapp-font)!important; font-weight:700!important;
font-size:19px!important; line-height:1.3!important; color:var(--ccapp-ink)!important;
}
body.ccapp-has-phero #main-content .et_pb_blurb .et_pb_blurb_description{
font-size:16px!important; line-height:1.7!important; color:#4A4845!important;
}
body.ccapp-has-phero #main-content .et_pb_blurb .et_pb_main_blurb_image .et_pb_only_image_mode_wrap{
display:inline-flex; align-items:center; justify-content:center;
width:54px; height:54px; border-radius:15px;
background:linear-gradient(135deg,rgba(var(--b-glow-rgb),.18),rgba(var(--b-glow-rgb),.05));
}
body.ccapp-has-phero #main-content .et_pb_blurb .et-pb-icon{ color:var(--b)!important; }
/* ---- the call-to-action module goes dark, like the hero ---- */
body.ccapp-has-phero #main-content .et_pb_promo{
position:relative; overflow:hidden; border-radius:24px!important;
padding:clamp(28px,4vw,52px)!important; border:0!important;
background:linear-gradient(135deg,#0B1013 0%,#0A2A2E 45%,#0B4A4E 100%)!important;
box-shadow:0 30px 64px -38px rgba(7,26,30,.8);
}
body.ccapp-has-phero #main-content .et_pb_promo::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(ellipse 55% 85% at 85% 10%, rgba(var(--b-glow-rgb),.45), transparent 62%);
}
body.ccapp-has-phero #main-content .et_pb_promo > *{ position:relative; z-index:1; }
body.ccapp-has-phero #main-content .et_pb_promo h2,
body.ccapp-has-phero #main-content .et_pb_promo h3,
body.ccapp-has-phero #main-content .et_pb_promo .et_pb_module_header{ color:#fff!important; }
body.ccapp-has-phero #main-content .et_pb_promo p,
body.ccapp-has-phero #main-content .et_pb_promo .et_pb_promo_description{ color:#CFE0E2!important; }
/* ---- toggles / accordions ---- */
body.ccapp-has-phero #main-content .et_pb_toggle{
background:#fff!important; border:1px solid var(--ccapp-line)!important; border-radius:16px!important;
padding:20px 24px!important; box-shadow:0 12px 30px -26px rgba(7,26,30,.55);
transition:border-color .2s ease, box-shadow .2s ease;
}
body.ccapp-has-phero #main-content .et_pb_toggle + .et_pb_toggle{ margin-top:14px; }
body.ccapp-has-phero #main-content .et_pb_toggle_open{ border-color:rgba(var(--b-glow-rgb),.45)!important; }
body.ccapp-has-phero #main-content .et_pb_toggle_title{
font-family:var(--ccapp-font)!important; font-weight:700!important;
font-size:18px!important; color:var(--ccapp-ink)!important;
}
body.ccapp-has-phero #main-content .et_pb_toggle_title::before{ color:var(--b)!important; }
/* ---- dividers ---- */
body.ccapp-has-phero #main-content .et_pb_divider::before{
border-top:2px solid rgba(var(--b-glow-rgb),.3)!important;
}
/* ---- form fields ---- */
body.ccapp-has-phero #main-content input[type="text"],
body.ccapp-has-phero #main-content input[type="email"],
body.ccapp-has-phero #main-content input[type="tel"],
body.ccapp-has-phero #main-content input[type="url"],
body.ccapp-has-phero #main-content input[type="number"],
body.ccapp-has-phero #main-content input[type="date"],
body.ccapp-has-phero #main-content input[type="search"],
body.ccapp-has-phero #main-content input[type="password"],
body.ccapp-has-phero #main-content select,
body.ccapp-has-phero #main-content textarea{
font-family:var(--ccapp-font)!important; font-size:16px!important; line-height:1.5!important;
padding:13px 16px!important; border:1px solid var(--ccapp-line)!important; border-radius:12px!important;
background-color:#fff!important; color:var(--ccapp-ink)!important; box-shadow:none!important;
transition:border-color .18s ease, box-shadow .18s ease;
}
body.ccapp-has-phero #main-content input[type="text"]:focus,
body.ccapp-has-phero #main-content input[type="email"]:focus,
body.ccapp-has-phero #main-content input[type="tel"]:focus,
body.ccapp-has-phero #main-content input[type="url"]:focus,
body.ccapp-has-phero #main-content input[type="number"]:focus,
body.ccapp-has-phero #main-content input[type="date"]:focus,
body.ccapp-has-phero #main-content input[type="search"]:focus,
body.ccapp-has-phero #main-content input[type="password"]:focus,
body.ccapp-has-phero #main-content select:focus,
body.ccapp-has-phero #main-content textarea:focus{
outline:none!important; border-color:var(--b)!important;
box-shadow:0 0 0 4px rgba(var(--b-glow-rgb),.16)!important;
}
body.ccapp-has-phero #main-content input[type="submit"],
body.ccapp-has-phero #main-content button[type="submit"]{
font-family:var(--ccapp-font)!important; font-weight:600!important; font-size:16px!important;
padding:14px 32px!important; border:0!important; border-radius:999px!important; cursor:pointer;
background:linear-gradient(135deg,var(--b) 0%,var(--b-600) 100%)!important; color:#fff!important;
box-shadow:0 14px 30px -16px rgba(var(--b-glow-rgb),.95);
transition:transform .2s ease, filter .2s ease;
}
body.ccapp-has-phero #main-content input[type="submit"]:hover,
body.ccapp-has-phero #main-content button[type="submit"]:hover{ transform:translateY(-2px); filter:brightness(1.07); }
/* form labels read as labels, whichever form plugin drew them */
body.ccapp-has-phero #main-content label,
body.ccapp-has-phero #main-content .frm_primary_label,
body.ccapp-has-phero #main-content .et_pb_contact_form_label{
font-family:var(--ccapp-font)!important; font-weight:600!important;
font-size:15px!important; color:var(--ccapp-ink)!important;
}
body.ccapp-has-phero #main-content .frm_description,
body.ccapp-has-phero #main-content .frm_primary_label + .frm_description{
font-size:14px!important; color:var(--ccapp-ink-soft)!important;
}
body.ccapp-has-phero #main-content input[type="checkbox"],
body.ccapp-has-phero #main-content input[type="radio"]{ accent-color:var(--b); width:auto!important; }
/* ---- blog cards on the archive / post lists ---- */
body.ccapp-has-phero #main-content .et_pb_post{
background:#fff; border:1px solid var(--ccapp-line); border-radius:18px; overflow:hidden;
box-shadow:0 14px 34px -26px rgba(7,26,30,.55);
transition:transform .26s cubic-bezier(.2,.7,.2,1), box-shadow .26s ease;
}
body.ccapp-has-phero #main-content .et_pb_post:hover{
transform:translateY(-5px); box-shadow:0 30px 56px -30px rgba(7,26,30,.55);
}
body.ccapp-has-phero #main-content .et_pb_post .et_pb_image_container{ margin:0 0 18px!important; }
body.ccapp-has-phero #main-content .et_pb_post .entry-title{
font-family:var(--ccapp-font)!important; font-weight:700!important; font-size:21px!important; line-height:1.3!important;
}
/* ---- scroll reveal for the page body (JS adds .ccapp-reveal; without JS
everything simply stays visible) ---- */
body.ccapp-has-phero.ccapp-motion-on #main-content .ccapp-reveal{ will-change:opacity,transform; }
/* ---- responsive ---- */
@media (max-width:980px){
body.ccapp-has-phero #main-content .et_pb_blurb{ padding:22px 20px 20px!important; }
body.ccapp-has-phero #main-content .et_pb_blurb::before{ left:20px; right:20px; }
}
@media (max-width:767px){
body.ccapp-has-phero #main-content .et_pb_text_inner p,
body.ccapp-has-phero #main-content .et_pb_text_inner li{ font-size:16px!important; line-height:1.72!important; }
body.ccapp-has-phero #main-content .et_pb_image .et_pb_image_wrap{ border-radius:14px; }
body.ccapp-has-phero #main-content .et_pb_button,
body.ccapp-has-phero #main-content .et_pb_button:hover,
body.ccapp-has-phero #main-content input[type="submit"],
body.ccapp-has-phero #main-content button[type="submit"]{ padding:13px 26px!important; font-size:15px!important; }
body.ccapp-has-phero #main-content .et_pb_promo{ border-radius:18px!important; }
body.ccapp-has-phero #main-content .et_pb_text_inner > h1:first-child::after,
body.ccapp-has-phero #main-content .et_pb_text_inner > :is(h1,h2):first-child::after{ width:46px; height:3px; margin-top:12px; }
}
@media (prefers-reduced-motion:reduce){
body.ccapp-has-phero #main-content .et_pb_blurb:hover,
body.ccapp-has-phero #main-content .et_pb_post:hover,
body.ccapp-has-phero #main-content .et_pb_button:hover,
body.ccapp-has-phero #main-content input[type="submit"]:hover{ transform:none; }
body.ccapp-has-phero #main-content .et_pb_image:hover .et_pb_image_wrap img{ transform:none; }
}
/* ---------- 30. The header shrinks as you scroll, and stays put ----------
Larry: "the menu part of the header should be sticky ... it should shrink
some on scroll" - and, after a version that only pinned: "you didn't shrink
the menu on scroll" ... "shrinking is [important], as it leaves less real
estate for the page."
Four earlier attempts detached the menu row from the header and re-attached
it at the top as a separate fixed bar, hiding the seam with a slide, then a
morph, then a fade. That hand-off can never be smooth: at the instant it
happens the element changes position scheme AND width, so there is nothing
continuous for the browser to interpolate.
Now there is no hand-off at all. The header is fixed from the first paint and
a spacer of its FULL height holds its place, so the page below never moves.
Scroll drives one number, --ccapp-p (0 at the top, 1 once compressed), and
every dimension below is a calc() off it. Each frame is an interpolation of
the one before, so there is no moment that can look wrong.
479px of header compresses to about 70px.
---------------------------------------------------------------------- */
:root{ --ccapp-p:0; }
/* if the script hasn't run there is no spacer, so the header stays in flow
rather than covering the page */
body:has(.ccapp-hdr-spacer) #page-container .et-l--header,
body:has(.ccapp-hdr-spacer) .et-l--header{
position:fixed!important;
top:var(--ccapp-abh,0px)!important;
left:0; right:0;
z-index:999999;
}
.ccapp-hdr-spacer{ width:100%; }
html{ scroll-padding-top:calc(var(--ccapp-hdr-bar,80px) + var(--ccapp-abh,0px) + 12px); }
/* Divi gives every column `padding:25px 0`. Both header columns carry it, so
100px of the compressed header was empty column padding - the same default
that has now caused four separate spacing bugs on this project. Both measured
at exactly 25px, so this reproduces the full-size header at p=0 and reclaims
the lot at p=1. */
.et-l--header .et_pb_column{
padding-top:calc(25px - 25px * var(--ccapp-p))!important;
padding-bottom:calc(25px - 25px * var(--ccapp-p))!important;
}
/* the network bar closes first */
.ccapp-net{ opacity:calc(1 - var(--ccapp-p) * 1.6); }
.ccapp-net__inner{ height:calc(40px - 40px * var(--ccapp-p)); overflow:hidden; }
/* the header's own white space closes */
.ccapp-hdr.et_pb_section{
padding-top:calc(64px - 58px * var(--ccapp-p))!important;
padding-bottom:calc(10px - 5px * var(--ccapp-p))!important;
box-shadow:0 18px 34px -24px rgba(0,0,0,calc(.7 * var(--ccapp-p)));
}
/* the site chip closes with everything else. ccapp.us suppresses its chip, so
this only shows up once a company site is built. */
.ccapp-hdr .ccapp-hdr__chip.et_pb_module{
margin-bottom:calc(20px - 20px * var(--ccapp-p))!important;
max-height:calc(40px - 40px * var(--ccapp-p));
overflow:hidden;
opacity:calc(1 - var(--ccapp-p) * 1.8);
}
/* the big lockup shrinks away - height, not transform, so the space closes too */
.ccapp-hdr .ccapp-hdr__logo.et_pb_module,
.ccapp-hdr__logo{ margin-bottom:calc(84px - 84px * var(--ccapp-p))!important; }
/* section 19 sets these heights as `body.ccapp-site-home .ccapp-hdr__logo img`,
so the shrink has to match that specificity or the logo keeps its 112px and
leaves a tall empty band once it has faded out. */
.ccapp-hdr__logo img,
body.ccapp-site-home .ccapp-hdr__logo img{
height:calc(var(--ccapp-logo-h) * (1 - var(--ccapp-p)))!important;
}
.ccapp-hdr__logo img{ opacity:calc(1 - var(--ccapp-p) * 1.5); }
/* the menu row tightens */
.ccapp-hdr__menu.et_pb_module{
height:calc(69px - 15px * var(--ccapp-p));
display:flex; align-items:center; justify-content:center;
}
.ccapp-hdr__menu.et_pb_menu{ border-top-color:rgba(255,255,255,calc(.12 - .12 * var(--ccapp-p)))!important; }
.ccapp-hdr__menu .et_pb_menu__menu > nav > ul > li > a{
font-size:calc(15px - 1px * var(--ccapp-p))!important;
}
/* a small lockup fades in at the left of the compressed bar. It lives inside
the menu row and is absolutely positioned, so only its opacity ever changes. */
.ccapp-stickylogo{
position:absolute; left:clamp(16px,4vw,52px); top:50%; transform:translateY(-50%);
line-height:0; opacity:calc(var(--ccapp-p) * 2.2 - 1.2);
pointer-events:auto;
}
/* cropped to the swoosh + wordmark: in the master file that is cols 0-412 of
720 on a 181 tall canvas, so the width is height x 412/181 */
/* Only the ccapp.us master is a stacked lockup with a tagline block that has to
be cropped off (cols 0-412 of 720 on a 181 canvas). The company lockups are a
single line - "CCAPP MEMBERSHIP" - and just scale down. */
.ccapp-stickylogo img{
display:block; height:var(--ccapp-logo-sm,24px); width:auto; max-width:min(280px,46vw);
object-fit:contain; object-position:left center;
filter:drop-shadow(0 4px 14px rgba(0,0,0,.4));
}
body.ccapp-site-home .ccapp-stickylogo img{ width:68px; object-fit:cover; }
/* the menu keeps clear of the lockup once the bar has compressed */
.ccapp-hdr__menu.et_pb_module{
padding-left:calc((var(--ccapp-stickylogo-w,0px) + clamp(16px,4vw,52px) + 28px) * var(--ccapp-p));
}
@media (max-width:980px){
.ccapp-hdr.et_pb_section{
padding-top:calc(40px - 34px * var(--ccapp-p))!important;
}
.ccapp-hdr .ccapp-hdr__logo.et_pb_module,
.ccapp-hdr__logo{ margin-bottom:calc(50px - 50px * var(--ccapp-p))!important; }
.ccapp-hdr__logo img,
body.ccapp-site-home .ccapp-hdr__logo img{
height:calc(var(--ccapp-logo-h-mob) * (1 - var(--ccapp-p)))!important;
}
.ccapp-hdr__menu.et_pb_module{ height:calc(64px - 12px * var(--ccapp-p)); justify-content:flex-end; }
.ccapp-stickylogo img{ height:20px; max-width:40vw; }
body.ccapp-site-home .ccapp-stickylogo img{ width:59px; height:26px; }
/* the menu is right-aligned on phones, so it never needs the reserve */
.ccapp-hdr__menu.et_pb_module{ padding-left:0; }
.ccapp-hdr__menu .et_mobile_menu{ max-height:calc(100vh - var(--ccapp-hdr-bar,80px) - 60px); overflow-y:auto; }
}
/* ---------- 31. The ad zone ----------
Larry: "i don't like the flow from the hero to the ads to the next section on
both sites."
He was looking at a wall. On ccapp.us the homepage was running the hero, then
the injected CCAPP banner on its own white band, then #mvBanner on a SECOND
white band, then the next section - about 500px of stacked advertising with
two hard seams in it, and both banners stretched to the full width of the
page so they read as content rather than as sponsorship.
One treatment now, both sites and every page: the ad zone is a single white
card that lifts over the bottom of the hero, the same move the landing pages
already make, so the hero and the ads read as one composition instead of
three bands. Inside it the banners are capped at a banner width and captioned
"Sponsored", which is what actually tells a reader this is an ad - and it
lets the strip be short.
Which element lifts depends on what the page has, with no JS:
landing page the injected placement, after .ccapp-phero
ccapp.us home the injected placement, after .ccapp-hero
Membership home .ccapp-adrow, because nothing is injected there and
the adjacent-sibling selector only matches when the
ad row really does follow the hero
------------------------------------------------------------------------- */
body.ccapp-has-phero #et-main-area > .ccapp-entity-placement,
body:not(.ccapp-has-phero) .ccapp-hero + .ccapp-entity-placement,
body:not(.ccapp-has-phero) .ccapp-hero + .ccapp-adrow.et_pb_section{
position:relative; z-index:4;
margin-top:calc(-1 * clamp(30px,4.2vw,58px));
padding:clamp(16px,1.9vw,22px) clamp(16px,4vw,52px) clamp(10px,1.3vw,16px)!important;
background:#fff!important; text-align:center;
border-radius:clamp(18px,2.4vw,30px) clamp(18px,2.4vw,30px) 0 0;
box-shadow:0 -26px 64px -32px rgba(7,26,30,.5);
}
/* the second slot carries on inside the same card, with no seam */
.ccapp-adrow.et_pb_section{ background:#fff!important; padding:4px 0 14px!important; }
/* Divi's row and column defaults (27px + 25px) were adding 52px between the
two slots, which is what made them read as two separate bands. */
.ccapp-adrow .et_pb_row,
.ccapp-adrow .et_pb_column{ padding:0!important; margin-bottom:0!important; }
/* a banner is a banner: captioned once per zone, and never wider than one.
The Data Hub ships `.cchub-slot img{ max-width:100%!important }`, so the cap
has to be !important to land. */
.ccapp-entity-placement::before,
.ccapp-adrow .et_pb_code::before{
content:"Sponsored"; display:block;
font-family:var(--ccapp-font); font-size:11px; font-weight:600;
letter-spacing:.12em; text-transform:uppercase; color:var(--ccapp-ink-soft);
margin:0 0 9px;
}
/* one caption for the zone: the second slot only labels itself when it is the
only slot (Membership, where nothing is injected) */
.ccapp-adrow .et_pb_code::before{ display:none; }
.ccapp-hero + .ccapp-adrow .et_pb_code::before{ display:block; }
.ccapp-entity-placement img,
.ccapp-adrow img{
display:block; margin:0 auto; max-width:min(100%,970px)!important; height:auto; border-radius:10px;
}
.ccapp-entity-placement a,.ccapp-adrow a{ display:inline-block; max-width:min(100%,970px); }
/* no ad on the page: the body takes the lift back, as before */
body.ccapp-has-phero:not(:has(#et-main-area > .ccapp-entity-placement)) #main-content{
margin-top:calc(-1 * clamp(32px,4.4vw,60px));
border-radius:clamp(18px,2.4vw,30px) clamp(18px,2.4vw,30px) 0 0;
box-shadow:0 -26px 64px -32px rgba(7,26,30,.5);
}
body.ccapp-has-phero #main-content{ position:relative; z-index:4; background:#fff; }
@media (max-width:767px){
body.ccapp-has-phero #et-main-area > .ccapp-entity-placement,
body:not(.ccapp-has-phero) .ccapp-hero + .ccapp-entity-placement,
body:not(.ccapp-has-phero) .ccapp-hero + .ccapp-adrow.et_pb_section,
body.ccapp-has-phero:not(:has(#et-main-area > .ccapp-entity-placement)) #main-content{
margin-top:-24px; border-radius:16px 16px 0 0;
}
}
/* ---------- 32. Tile rows need air between them ----------
Larry: "the tiles are too close together."
Measured on both homepages: the columns are 70px apart, which is fine, but
the two tile ROWS were 0px apart - the bottom of row 1 was the top of row 2,
so the six tiles read as one block. Divi's own row margin is zeroed here and
the blurb carries none of its own.
Written against any row of .ccapp-card so it holds wherever tiles are used,
rather than against the two row classes the ccapp.us homepage happens to use.
---------------------------------------------------------------------- */
.et_pb_row:has(> .et_pb_column > .ccapp-card) + .et_pb_row:has(> .et_pb_column > .ccapp-card){
margin-top:36px!important;
}
/* below the stacking breakpoint every card is its own row */
@media (max-width:980px){
.et_pb_column:has(> .ccapp-card) + .et_pb_column:has(> .ccapp-card){ margin-top:28px!important; }
.et_pb_row:has(> .et_pb_column > .ccapp-card) + .et_pb_row:has(> .et_pb_column > .ccapp-card){
margin-top:28px!important;
}
}
/* =====================================================================
33. EVERY page, dressed
Larry, 2026-10-12: "each membership page needs reworking. they are
terrible looking. make them amazing with wow factor, just don't change
the information." ... "actually every page needs this facelift."
Section 29 dressed the plain pages. This one takes on what those pages
were actually built from over the years: a second image band under the
hero repeating the title, per-module fonts and colors, Divi counters and
team members in their factory look, stray empty modules, and Divi's own
scroll animation leaving whole rows stranded at opacity 0.
Still not one word of copy changes. ccapp-pagedress.js reads the page and
labels each section for what it is; everything below is the look.
===================================================================== */
/* ---- 33a. the brand face wins -------------------------------------------
Pages carry per-module font settings from whoever built them - Cormorant
Garamond, Noto Serif, Rubik, Oswald, Libre Franklin, Source Sans Pro. Divi
writes those with !important, so this has to out-specify them rather than
out-shout them. Icon fonts are left alone. */
body.ccapp-has-phero #main-content :is(p,li,td,th,dt,dd,span,strong,b,em,i,u,s,a,
h1,h2,h3,h4,h5,h6,blockquote,label,figcaption,div.et_pb_text_inner,
.et_pb_module_header,.et_pb_blurb_description,.et_pb_toggle_title,
.et_pb_member_position,.et_pb_counter_title,.et_pb_counter_amount,
.et_pb_promo_description,.et_pb_slide_description,.et_pb_button){
font-family:var(--ccapp-font)!important;
}
body.ccapp-has-phero #main-content :is(.et-pb-icon,.et_pb_font_icon,.dashicons,
[class^="fa-"],[class*=" fa-"],.fa,.fas,.far,.fab,.et_pb_social_icon a){ font-family:inherit!important; }
body.ccapp-has-phero #main-content :is(.et-pb-icon,.et_pb_font_icon){ font-family:ETmodules!important; }
/* ---- 33b. nothing is left invisible --------------------------------------
Divi hides an animated module until its waypoint fires. On these pages the
waypoint regularly never fires and the module stays at opacity 0 - which is
most of why the pages read as "terrible": half the content is not there. */
body.ccapp-has-phero #main-content .et-waypoint:not(.et-animated),
body.ccapp-has-phero #main-content [class*="et_pb_animation_"]:not(.et-animated){
opacity:1!important; animation:none!important;
}
body.ccapp-has-phero #main-content .ccapp-shown{ opacity:1!important; }
/* ---- 33c. a steady rhythm ------------------------------------------------ */
body.ccapp-has-phero #main-content .et_pb_section.ccapp-s--plain{
padding-top:clamp(44px,5vw,76px)!important; padding-bottom:clamp(44px,5vw,76px)!important;
}
/* Every other plain section gets a wash, faded at both edges so the sections
read as one page rather than a stack of boxes. It is painted as a layer
underneath the content, never as the section's own background-image: a
section that turns out to carry a photograph must never have it replaced. */
body.ccapp-has-phero #main-content .et_pb_section.ccapp-s--wash{ position:relative; }
body.ccapp-has-phero #main-content .et_pb_section.ccapp-s--wash::before{
content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background:linear-gradient(180deg,#fff 0%,var(--ccapp-wash) 9%,var(--ccapp-wash) 91%,#fff 100%);
}
body.ccapp-has-phero #main-content .et_pb_section.ccapp-s--wash > *:not(.et-pb-parallax-wrapper):not(.et_parallax_bg):not(.et_pb_section_video_bg){ position:relative; z-index:1; }
body.ccapp-has-phero #main-content .ccapp-void{ display:none!important; }
/* ---- 33d. the band under the hero ----------------------------------------
Pages that open with their own image section now sit directly under the
page hero. Left alone that is two heroes in a row, usually with the title
said twice. The band keeps its picture and its copy, loses the echo, and
gets a scrim so the type holds up over any photograph. */
body.ccapp-has-phero #main-content .ccapp-dupe{ display:none!important; }
body.ccapp-has-phero #main-content .et_pb_section.ccapp-band{
position:relative; isolation:isolate;
padding-top:clamp(40px,4.5vw,64px)!important; padding-bottom:clamp(40px,4.5vw,64px)!important;
background-size:cover!important; background-position:center!important;
}
/* the scrim goes on whatever element carries the photograph - often the row
rather than the section */
body.ccapp-has-phero #main-content .ccapp-scrim{ position:relative; }
body.ccapp-has-phero #main-content .ccapp-scrim::before{
content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(100deg,rgba(7,23,26,.92) 0%,rgba(7,23,26,.72) 46%,rgba(7,23,26,.28) 100%);
}
/* Divi's parallax and video backgrounds are absolutely positioned children of
the section. They keep their own positioning - give them position:relative
and the picture collapses to nothing - so they are only pushed under the
scrim, and everything else is lifted above it. */
body.ccapp-has-phero #main-content .ccapp-scrim > :is(.et-pb-parallax-wrapper,.et_parallax_bg,.et_pb_section_video_bg){ z-index:0; }
body.ccapp-has-phero #main-content .ccapp-scrim > *:not(.et-pb-parallax-wrapper):not(.et_parallax_bg):not(.et_pb_section_video_bg){
position:relative; z-index:2;
}
body.ccapp-has-phero #main-content .ccapp-band :is(h1,h2,h3,h4,.et_pb_text_inner,
.et_pb_text_inner > div,.et_pb_text_inner p,.et_pb_text_inner li,.et_pb_blurb_description){
color:#F2F7F8!important;
}
body.ccapp-has-phero #main-content .ccapp-band .et_pb_text_inner strong{ color:#fff!important; }
body.ccapp-has-phero #main-content .ccapp-band .et_pb_text_inner a:not(.et_pb_button){
color:var(--b-pop)!important; background-image:linear-gradient(var(--b-pop),var(--b-pop))!important;
}
body.ccapp-has-phero #main-content .ccapp-band .et_pb_text_inner{ max-width:62ch; }
/* the band's own heading reads as a deck, not a second page title */
body.ccapp-has-phero #main-content .ccapp-band .et_pb_text_inner > :is(h1,h2):first-child::after{
background:var(--b-pop)!important;
}
/* ---- 33e. dark sections keep their type legible -------------------------- */
body.ccapp-has-phero #main-content .ccapp-s--dark :is(h1,h2,h3,h4,.et_pb_text_inner,
.et_pb_text_inner > div,.et_pb_text_inner p,.et_pb_text_inner li){ color:#EDF3F4!important; }
body.ccapp-has-phero #main-content .ccapp-s--dark .et_pb_blurb{
background:rgba(255,255,255,.06)!important; border-color:rgba(255,255,255,.14)!important;
box-shadow:none!important;
}
body.ccapp-has-phero #main-content .ccapp-s--dark .et_pb_blurb :is(h1,h2,h3,h4,.et_pb_blurb_description,p,li){ color:#EDF3F4!important; }
/* ---- 33f. counters become measures, not blocks ---------------------------
Divi draws a flat gray box with a flat colored box inside it. Same numbers,
same labels - a rounded track, a brand fill with a sheen, and the figure
set in the brand face. */
body.ccapp-has-phero #main-content .et_pb_counters{
display:grid; gap:18px; margin:6px 0 0; padding:0; list-style:none!important;
}
body.ccapp-has-phero #main-content .et_pb_counters .et_pb_counter_title{
display:block; margin:0 0 9px; padding:0;
font-family:var(--ccapp-font)!important; font-weight:600!important; font-size:15px!important;
letter-spacing:.005em; color:var(--ccapp-ink-soft)!important; text-align:left!important;
}
body.ccapp-has-phero #main-content .et_pb_counters .et_pb_counter_container{
position:relative; overflow:hidden; height:54px!important; border-radius:14px!important;
background:linear-gradient(180deg,#EEF2F6,#E6ECF2)!important;
box-shadow:inset 0 1px 2px rgba(7,26,30,.08)!important; border:0!important;
}
body.ccapp-has-phero #main-content .et_pb_counters .et_pb_counter_amount{
position:relative; height:54px!important; line-height:54px!important; border-radius:14px!important;
background:linear-gradient(135deg,var(--b) 0%,var(--b-600) 70%,var(--b-deep) 100%)!important;
box-shadow:0 10px 24px -16px rgba(var(--b-glow-rgb),.9)!important;
padding:0 18px!important; text-align:left!important;
font-family:var(--ccapp-font)!important; font-weight:800!important; font-size:26px!important;
letter-spacing:-.02em!important; color:#fff!important;
transition:width 1.1s cubic-bezier(.2,.7,.2,1);
}
/* a soft sheen along the top of the fill */
body.ccapp-has-phero #main-content .et_pb_counters .et_pb_counter_amount::after{
content:""; position:absolute; inset:0 0 50% 0; border-radius:14px 14px 0 0;
background:linear-gradient(180deg,rgba(255,255,255,.18),transparent); pointer-events:none;
}
/* Divi lays a second copy of the figure over the empty part of the track and
fades the whole bar in from opacity 0 on a waypoint. The bar is already the
right width in the markup, so the fade is all risk and no gain: one figure,
always visible. */
body.ccapp-has-phero #main-content .et_pb_counters .et_pb_counter_amount.overlay{ display:none!important; }
body.ccapp-has-phero #main-content .et_pb_counters,
body.ccapp-has-phero #main-content .et_pb_counters .et_pb_counter_amount{ opacity:1!important; }
body.ccapp-has-phero #main-content .et_pb_counters .et_pb_counter_amount_number{
font-size:inherit!important; font-weight:inherit!important; color:#fff!important;
}
@media (min-width:981px){
body.ccapp-has-phero #main-content .et_pb_counters{ gap:22px; }
}
/* ---- 33g. people look like people ---------------------------------------- */
body.ccapp-has-phero #main-content .et_pb_team_member{
background:#fff; border:1px solid var(--ccapp-line); border-radius:18px;
padding:24px 22px 20px!important; text-align:center;
box-shadow:0 12px 30px -24px rgba(7,26,30,.55);
transition:transform .26s cubic-bezier(.2,.7,.2,1), box-shadow .26s ease, border-color .26s ease;
}
body.ccapp-has-phero #main-content .et_pb_team_member:hover{
transform:translateY(-5px); border-color:rgba(var(--b-glow-rgb),.4);
box-shadow:0 28px 52px -30px rgba(7,26,30,.55);
}
body.ccapp-has-phero #main-content .et_pb_team_member .et_pb_team_member_image{
float:none!important; margin:0 auto 16px!important; max-width:172px; border-radius:50%;
overflow:hidden; padding:4px; background:var(--b-bar);
box-shadow:0 14px 30px -18px rgba(var(--b-glow-rgb),.9);
}
body.ccapp-has-phero #main-content .et_pb_team_member .et_pb_team_member_image img{
display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; object-position:center top;
border-radius:50%; background:#fff;
}
body.ccapp-has-phero #main-content .et_pb_team_member .et_pb_team_member_description{ padding:0!important; }
body.ccapp-has-phero #main-content .et_pb_team_member h4,
body.ccapp-has-phero #main-content .et_pb_team_member .et_pb_module_header{
font-size:19px!important; font-weight:700!important; color:var(--ccapp-ink)!important; margin-bottom:2px!important;
}
body.ccapp-has-phero #main-content .et_pb_team_member .et_pb_member_position{
display:block; font-size:13px!important; font-weight:700!important; letter-spacing:.08em;
text-transform:uppercase; color:var(--b-600)!important; margin-bottom:10px;
}
/* ---- 33h. dividers, tables, media ---------------------------------------- */
body.ccapp-has-phero #main-content .et_pb_divider:before{
border-top:0!important; height:2px; background:linear-gradient(90deg,
rgba(var(--b-glow-rgb),0) 0%, rgba(var(--b-glow-rgb),.45) 18%, rgba(var(--b-glow-rgb),.45) 82%, rgba(var(--b-glow-rgb),0) 100%);
}
.ccapp-tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:18px 0; border-radius:14px;
border:1px solid var(--ccapp-line); box-shadow:0 12px 30px -26px rgba(7,26,30,.5); }
body.ccapp-has-phero #main-content .ccapp-tablewrap table{ width:100%; border-collapse:collapse; margin:0!important; border:0!important; }
body.ccapp-has-phero #main-content .ccapp-tablewrap :is(th,td){
padding:13px 16px!important; border:0!important; border-bottom:1px solid var(--ccapp-line)!important;
font-size:15.5px!important; line-height:1.6!important; text-align:left; vertical-align:top;
}
body.ccapp-has-phero #main-content .ccapp-tablewrap th{
background:var(--ccapp-wash); font-weight:700!important; color:var(--ccapp-ink)!important;
letter-spacing:.01em; white-space:nowrap;
}
body.ccapp-has-phero #main-content .ccapp-tablewrap tr:last-child :is(th,td){ border-bottom:0!important; }
body.ccapp-has-phero #main-content .ccapp-tablewrap tbody tr:hover :is(th,td){ background:rgba(var(--b-glow-rgb),.04); }
body.ccapp-has-phero #main-content :is(.et_pb_video_box,.et_pb_slider,.et_pb_code iframe,.et_pb_text iframe){
border-radius:18px!important; overflow:hidden!important;
box-shadow:0 22px 48px -28px rgba(7,26,30,.6)!important;
}
body.ccapp-has-phero #main-content :is(.et_pb_code,.et_pb_text) iframe{ max-width:100%; border:0!important; }
/* ---- 33i. accordions match the toggles ----------------------------------- */
body.ccapp-has-phero #main-content .et_pb_accordion_item{
background:#fff!important; border:1px solid var(--ccapp-line)!important; border-radius:16px!important;
margin-bottom:12px!important; padding:4px 6px!important;
box-shadow:0 10px 26px -24px rgba(7,26,30,.55); transition:border-color .2s ease, box-shadow .2s ease;
}
body.ccapp-has-phero #main-content .et_pb_accordion_item.et_pb_toggle_open{
border-color:rgba(var(--b-glow-rgb),.4)!important; box-shadow:0 20px 44px -28px rgba(7,26,30,.6);
}
body.ccapp-has-phero #main-content .et_pb_accordion_item .et_pb_toggle_title{
font-size:17px!important; font-weight:700!important; color:var(--ccapp-ink)!important; padding-right:40px!important;
}
/* ---- 33j. legacy accents come back to the brand -------------------------- */
body.ccapp-has-phero #main-content .et_pb_promo,
body.ccapp-has-phero #main-content .et_pb_cta{ border-radius:22px!important; }
body.ccapp-has-phero #main-content .et_pb_blurb .et_pb_main_blurb_image .et_pb_image_wrap{
border-radius:14px; overflow:hidden;
}
/* Divi's own "read more" style links */
body.ccapp-has-phero #main-content .more-link{ font-weight:700; color:var(--b-600)!important; }
/* ---- 33k. responsive ----------------------------------------------------- */
@media (max-width:980px){
body.ccapp-has-phero #main-content .et_pb_section.ccapp-s--plain{
padding-top:40px!important; padding-bottom:40px!important;
}
body.ccapp-has-phero #main-content .et_pb_section.ccapp-band{
padding-top:34px!important; padding-bottom:34px!important;
}
body.ccapp-has-phero #main-content .et_pb_counters .et_pb_counter_container,
body.ccapp-has-phero #main-content .et_pb_counters .et_pb_counter_amount{
height:46px!important; line-height:46px!important;
}
body.ccapp-has-phero #main-content .et_pb_counters .et_pb_counter_amount{ font-size:21px!important; }
body.ccapp-has-phero #main-content .et_pb_team_member .et_pb_team_member_image{ max-width:140px; }
}
/* ---- 33l. a readable measure ---------------------------------------------
A paragraph running the full 1080px of a 4_4 column is about 150 characters
a line; the eye loses its place. Full-width text blocks are capped at a
sane measure and keep whatever alignment the page already gave them. */
body.ccapp-has-phero #main-content .et_pb_column_4_4 > .et_pb_text .et_pb_text_inner{ max-width:78ch; }
body.ccapp-has-phero #main-content .et_pb_column_4_4 > .et_pb_text.et_pb_text_align_center .et_pb_text_inner{ margin-left:auto; margin-right:auto; }
body.ccapp-has-phero #main-content .et_pb_column_4_4 > .et_pb_text.et_pb_text_align_right .et_pb_text_inner{ margin-left:auto; }
/* tables, forms and embeds are not prose - they keep the full column */
body.ccapp-has-phero #main-content .et_pb_column_4_4 > .et_pb_text .et_pb_text_inner:has(table,iframe,form,img){ max-width:none; }