/* ===================================================================== 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); } /* The stripe overhangs the header by 2px, and that is deliberate. The header's height is a calc() driven by --ccapp-p, so while it is shrinking its bottom edge lands on a fraction of a pixel: a sub-pixel gap opens between it and the section below and the white page behind flashes through as a hairline under the menu, on every page with a section background (Larry caught it; measured up to 1.04px). The overhang means that gap can only ever show the stripe. It must stay a pseudo-element - --b-stripe is a GRADIENT on the hub, and a gradient inside box-shadow makes the whole declaration invalid. */ .ccapp-hdr.et_pb_section::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:8px; background:var(--b-stripe); z-index:1; } .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; } /* ...but never above the WordPress admin bar. #wpadminbar is z-index 110000, so a site header at 999999 swallows its drop-downs: Larry could see the Themes/Widgets/Menus menu but not click it. Signed-in only - the public header keeps the high z-index so nothing on a page can cover it. */ body.admin-bar:has(.ccapp-hdr-spacer) #page-container .et-l--header, body.admin-bar:has(.ccapp-hdr-spacer) .et-l--header{ z-index:99999; } .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 16px 30px -18px rgba(0,0,0,calc(.62 * 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; } /* An icon font must NOT inherit the body face - its glyphs live in the Private Use Area and Poppins has none of them, so every Divi icon rendered as an empty box (Larry: "icons are still missing"). The rule below used to list .et-pb-icon and .et_pb_font_icon too, and it BEAT the ETmodules rule that follows it: :is() takes the specificity of its most specific argument, and `.et_pb_social_icon a` made it (1,2,2) against (1,2,1). Measured in the page: computed font-family on a blurb icon was Poppins. So the icon classes come OUT of the inherit list. */ body.ccapp-has-phero #main-content :is(.dashicons, [class^="fa-"],[class*=" fa-"],.fa,.fas,.far,.fab){ font-family:inherit!important; } body.ccapp-has-phero #main-content :is(.et-pb-icon,.et_pb_font_icon, .et_pb_social_icon a,.et_pb_toggle_title,.et_pb_accordion_title)::before, body.ccapp-has-phero #main-content :is(.et-pb-icon,.et_pb_font_icon){ font-family:ETmodules!important; font-weight:400!important; font-style:normal!important; font-variant:normal!important; text-transform:none!important; line-height:1!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; } /* ---- 33m. a plugin's own page keeps its own rhythm ---------------------- The elections portal draws full-bleed bands with their own spacing. The section rhythm in 33c sat on top of that and opened ~150px of white between every band; ccapp-pagedress.js marks those sections and they keep clear. */ body.ccapp-has-phero #main-content .et_pb_section.ccapp-s--portal{ padding-top:0!important; padding-bottom:0!important; } body.ccapp-has-phero #main-content .et_pb_section.ccapp-s--portal > .et_pb_row{ padding-top:0!important; padding-bottom:0!important; width:100%!important; max-width:none!important; } /* ---------- 34. Corporate identity and mission --------------------------- Two sentences that used to sit as one grey paragraph block. Same words: the labels they already carried become the headings, and the mission - the thing the organisation exists for - gets the weight. ---------------------------------------------------------------------- */ .ccapp-identsec.et_pb_section{ padding-top:clamp(36px,4vw,64px)!important; padding-bottom:clamp(36px,4vw,64px)!important; } .ccapp-ident{ display:grid; gap:24px; grid-template-columns:1fr 1.22fr; align-items:stretch; } .ccapp-ident__card{ position:relative; overflow:hidden; padding:30px 32px 32px; border-radius:22px; background:#fff; border:1px solid var(--ccapp-line); box-shadow:0 18px 44px -34px rgba(7,26,30,.6); transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; } .ccapp-ident__card:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -36px rgba(7,26,30,.6); } .ccapp-ident__label{ display:block; margin-bottom:14px; padding-bottom:12px; font-family:var(--ccapp-font); font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--b-600); border-bottom:1px solid rgba(var(--b-glow-rgb),.22); } .ccapp-ident__card p{ margin:0!important; font-family:var(--ccapp-font); font-size:17px!important; line-height:1.72!important; color:#4A4845!important; } /* the mission carries the weight */ .ccapp-ident__card--mission{ border:0; color:#EAF4F5; background:linear-gradient(130deg,#07171A 0%,var(--b-deep) 46%,var(--b-mid) 100%); box-shadow:0 26px 60px -30px rgba(var(--b-glow-rgb),.75); } .ccapp-ident__card--mission::before{ content:"\201C"; position:absolute; right:14px; top:-26px; z-index:0; font-family:Georgia,'Times New Roman',serif; font-size:190px; line-height:1; color:rgba(255,255,255,.07); pointer-events:none; } .ccapp-ident__card--mission::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(ellipse 60% 80% at 85% 0%,rgba(var(--b-glow-rgb),.45),transparent 70%); } .ccapp-ident__card--mission > *{ position:relative; z-index:1; } .ccapp-ident__card--mission .ccapp-ident__label{ color:var(--b-pop); border-bottom-color:rgba(255,255,255,.22); } .ccapp-ident__card--mission p{ color:#E7F3F4!important; font-size:18.5px!important; line-height:1.68!important; } @media (max-width:980px){ .ccapp-ident{ grid-template-columns:1fr; gap:18px; } .ccapp-ident__card{ padding:24px 22px 26px; } .ccapp-ident__card p{ font-size:16px!important; } .ccapp-ident__card--mission p{ font-size:17px!important; } } /* ---------- 35. The board cards set their own name size ------------------ Section 29 gives every content h3 a page-wide scale, which is right for prose and wrong for a card: at 26px the two longest names on the board ("Guillermo Rodriguez", "Shirley Poordawood") wrapped to two lines while everyone else sat on one. The plugin sizes those names from the card's own width; this lets it, by out-specifying the id-scoped rule above. ---------------------------------------------------------------------- */ body.ccapp-has-phero #main-content .cce-board .cce-dir h3{ font-size:clamp(13px,7.4cqw,23px)!important; line-height:1.2!important; font-weight:800!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } @supports not (width:1cqw){ body.ccapp-has-phero #main-content .cce-board .cce-dir h3{ font-size:clamp(14px,1.45vw,23px)!important; } } /* ---------- 36. The election card keeps its own colors ------------------- Section 29 colors body copy for the page, and section 33e colors everything inside a dark section - both reach into the election call-to-action card and washed its headline out to the same grey as its body text. The card is a component: it decides its own colors wherever it is dropped. ---------------------------------------------------------------------- */ body.ccapp-has-phero #main-content .cce-cta{ background:#fff!important; } body.ccapp-has-phero #main-content .cce-cta .cce-cta-kicker{ color:var(--b-600)!important; } body.ccapp-has-phero #main-content .cce-cta .cce-cta-step{ color:#1F2A2E!important; font-weight:800!important; } body.ccapp-has-phero #main-content .cce-cta .cce-cta-line{ color:#55606A!important; } body.ccapp-has-phero #main-content .cce-cta .cce-cta-btn{ color:#fff!important; } body.ccapp-has-phero #main-content .cce-cta .cce-cta-clock .cce-clock-n{ color:#2AD2C9!important; } body.ccapp-has-phero #main-content .cce-cta .cce-cta-clock .cce-clock-u{ color:rgba(255,255,255,.72)!important; } body.ccapp-has-phero #main-content .cce-cta .cce-cta-clock .cce-clock-l{ color:rgba(255,255,255,.9)!important; } body.ccapp-has-phero #main-content .cce-cta .cce-cta-clock .cce-clock-d{ color:#07171A!important; } /* and the section it sits in gets room, not a photograph */ body.ccapp-has-phero #main-content .ccapp-ctasec.et_pb_section{ padding-top:clamp(28px,3vw,44px)!important; padding-bottom:clamp(4px,1vw,12px)!important; } /* ---------- 37. The top of the Board page - direction B ---------------- Larry picked B from the four prototypes: the election is a thin full-width RIBBON running straight out of the hero - an announcement strip, the shape that already means "act on this" - and the two statements below get a tinted field of their own so they read as a separate, considered block. Two different kinds of object, no white page with cards floating on it. The band has to sit FLUSH under the hero, so on any page whose first section is the ribbon the cards-over-a-band lift (section 31) is cancelled: no -60px pull, no rounded top, no upward shadow. Every other page keeps it. ---------------------------------------------------------------------- */ body.ccapp-has-phero:has(#main-content .ccapp-ctasec) #main-content{ margin-top:0!important; border-radius:0!important; box-shadow:none!important; } /* ---- the ribbon ---- */ body.ccapp-has-phero #main-content .ccapp-ctasec.et_pb_section{ position:relative; z-index:2; overflow:hidden; margin-top:0; border-radius:0; padding:clamp(16px,1.9vw,24px) 0!important; background:linear-gradient(90deg,#012F33 0%,var(--b-deep) 42%,var(--b-600) 100%)!important; } /* a fine diagonal weave, so the band has a surface instead of being flat */ body.ccapp-has-phero #main-content .ccapp-ctasec.et_pb_section::before{ display:none!important; } body.ccapp-has-phero #main-content .ccapp-ctasec.et_pb_section::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5; background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 13px); } body.ccapp-has-phero #main-content .ccapp-ctasec > .et_pb_row{ position:relative; z-index:1; } /* the card becomes one row: copy | countdown | button. display:contents lets the button out of .cce-cta-main without changing the plugin markup, so the same shortcode still renders as a CARD everywhere else it is used. */ body.ccapp-has-phero #main-content .ccapp-ctasec .cce-cta{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:clamp(18px,3vw,42px); align-items:center; background:none!important; border:0!important; border-radius:0!important; box-shadow:none!important; margin:0!important; /* room on the right for the button, which is placed absolutely so the copy stack is not stretched by it. The shorthand has to come LAST or it wins. */ padding:0 clamp(184px,17vw,244px) 0 0!important; } body.ccapp-has-phero #main-content .ccapp-ctasec .cce-cta-main{ display:block; } body.ccapp-has-phero #main-content .ccapp-ctasec .cce-cta-kicker{ color:var(--b-pop)!important; margin:0 0 5px!important; } body.ccapp-has-phero #main-content .ccapp-ctasec .cce-cta-step{ margin:0!important; color:#fff!important; font-size:clamp(18px,2vw,23px)!important; font-weight:700!important; letter-spacing:-.015em!important; line-height:1.25!important; } body.ccapp-has-phero #main-content .ccapp-ctasec .cce-cta-line{ margin:4px 0 0!important; color:rgba(255,255,255,.7)!important; font-size:14.5px!important; line-height:1.5!important; } body.ccapp-has-phero #main-content .ccapp-ctasec .cce-cta-btn{ position:absolute; right:0; top:50%; transform:translateY(-50%); margin:0!important; white-space:nowrap; background:var(--b-pop2,#2AD2C9)!important; color:#07171A!important; box-shadow:0 10px 26px -14px rgba(0,0,0,.6); } body.ccapp-has-phero #main-content .ccapp-ctasec .cce-cta-btn:hover{ background:#4EE0D8!important; } /* the countdown is inline on the band, divided off by a hairline */ body.ccapp-has-phero #main-content .ccapp-ctasec .cce-cta-clock{ grid-column:2; align-self:center; display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto auto; column-gap:13px; align-items:center; justify-items:start; text-align:left; background:none!important; border:0!important; border-radius:0!important; border-left:1px solid rgba(255,255,255,.2)!important; padding:2px 0 2px clamp(16px,2.6vw,38px)!important; margin:0!important; } body.ccapp-has-phero #main-content .ccapp-ctasec .cce-cta-clock .cce-clock-n{ grid-column:1; grid-row:1/-1; color:#2AD2C9!important; font-size:clamp(34px,3.6vw,46px)!important; font-weight:800!important; line-height:.9!important; letter-spacing:-.03em!important; } body.ccapp-has-phero #main-content .ccapp-ctasec .cce-cta-clock .cce-clock-u{ grid-column:2; grid-row:1; color:#fff!important; font-size:13.5px!important; font-weight:700!important; letter-spacing:0!important; text-transform:none!important; } body.ccapp-has-phero #main-content .ccapp-ctasec .cce-cta-clock .cce-clock-l, body.ccapp-has-phero #main-content .ccapp-ctasec .cce-cta-clock .cce-clock-d{ grid-column:2; color:rgba(255,255,255,.78)!important; font-size:12.5px!important; font-weight:500!important; background:none!important; padding:0!important; border-radius:0!important; line-height:1.45!important; } body.ccapp-has-phero #main-content .ccapp-ctasec .cce-cta-clock .cce-clock-l{ grid-row:2; } body.ccapp-has-phero #main-content .ccapp-ctasec .cce-cta-clock .cce-clock-d{ grid-row:3; } /* ---- the statements get a field of their own ---- */ body.ccapp-has-phero #main-content .ccapp-identsec.et_pb_section{ position:relative; background:var(--ccapp-wash)!important; padding-top:clamp(44px,5vw,72px)!important; padding-bottom:clamp(44px,5vw,70px)!important; } body.ccapp-has-phero #main-content .ccapp-identsec.et_pb_section::before{ content:""!important; display:block!important; position:absolute; inset:0 0 auto; height:210px; z-index:0; pointer-events:none; background:linear-gradient(180deg,rgba(var(--b-glow-rgb),.09),transparent)!important; } body.ccapp-has-phero #main-content .ccapp-identsec > .et_pb_row{ position:relative; z-index:1; } /* even height, and the mission takes the wider column */ body.ccapp-has-phero #main-content .ccapp-ident{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:stretch; gap:clamp(22px,3vw,34px); } @media (max-width:900px){ body.ccapp-has-phero #main-content .ccapp-ctasec.et_pb_section{ padding:22px 0!important; } body.ccapp-has-phero #main-content .ccapp-ctasec .cce-cta{ grid-template-columns:minmax(0,1fr); padding:0!important; } body.ccapp-has-phero #main-content .ccapp-ctasec .cce-cta-clock{ grid-column:1; justify-content:start; margin-top:16px!important; border-left:0!important; border-top:1px solid rgba(255,255,255,.2)!important; padding:14px 0 0!important; } body.ccapp-has-phero #main-content .ccapp-ctasec .cce-cta-btn{ position:static!important; transform:none!important; display:inline-flex!important; margin-top:18px!important; } } /* ---------- 38. The page kit -------------------------------------------- The Board page settled the language: full-width brand bands, tinted fields, labelled panels, even-height cards, nothing left as a plain white slab. These are the reusable pieces that carry it onto the rest of the site. Every one is scoped to a landing page (.ccapp-has-phero) so nothing here can reach the homepages. ---------------------------------------------------------------------- */ /* --- the first section on a page pays back the hero lift ---------------- #main-content is pulled clamp(32px,4.4vw,60px) UP into the hero (31), so a first section that does not account for it opens hard against the hero. */ body.ccapp-has-phero #main-content .ccapp-firstsec.et_pb_section{ padding-top:calc(clamp(32px,4.4vw,60px) + clamp(30px,3.4vw,52px))!important; border-radius:clamp(18px,2.4vw,30px) clamp(18px,2.4vw,30px) 0 0; } /* --- section heading: eyebrow, title, hairline -------------------------- */ body.ccapp-has-phero #main-content .ccapp-sechead{ margin:0 0 clamp(24px,3vw,38px); } body.ccapp-has-phero #main-content .ccapp-sechead .ccapp-eyebrow{ display:block; margin-bottom:10px; } body.ccapp-has-phero #main-content .ccapp-sechead h2{ margin:0!important; font-size:clamp(25px,3vw,36px)!important; font-weight:800!important; letter-spacing:-.025em!important; line-height:1.16!important; color:var(--ccapp-ink)!important; } body.ccapp-has-phero #main-content .ccapp-sechead h2::after{ content:""; display:block; width:46px; height:3px; border-radius:2px; background:var(--b); margin-top:14px; } /* --- lede: the photograph and the statement of record ------------------- */ body.ccapp-has-phero #main-content .ccapp-ledesec.et_pb_section{ background:#fff!important; } body.ccapp-has-phero #main-content .ccapp-lede{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(26px,4vw,56px); align-items:center; } body.ccapp-has-phero #main-content .ccapp-lede__fig{ margin:0; position:relative; border-radius:20px; overflow:hidden; box-shadow:0 30px 64px -38px rgba(7,26,30,.65); } body.ccapp-has-phero #main-content .ccapp-lede__fig::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(140deg,rgba(var(--b-glow-rgb),.26),transparent 58%); } body.ccapp-has-phero #main-content .ccapp-lede__fig img{ display:block; width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; } body.ccapp-has-phero #main-content .ccapp-lede__copy h2{ margin:6px 0 16px!important; font-size:clamp(27px,3.3vw,40px)!important; font-weight:800!important; letter-spacing:-.028em!important; line-height:1.1!important; color:var(--ccapp-ink)!important; } body.ccapp-has-phero #main-content .ccapp-lede__copy p{ margin:0!important; font-size:clamp(16.5px,1.7vw,19.5px)!important; line-height:1.66!important; color:#4A4845!important; } body.ccapp-has-phero #main-content .ccapp-lede__copy em{ color:#0C3135; font-style:italic; } /* --- numbered value cards ----------------------------------------------- */ body.ccapp-has-phero #main-content .ccapp-valuesec.et_pb_section{ background:var(--ccapp-wash)!important; } body.ccapp-has-phero #main-content .ccapp-values{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2.4vw,28px); align-items:stretch; } body.ccapp-has-phero #main-content .ccapp-value{ position:relative; overflow:hidden; background:#fff; border:1px solid var(--ccapp-line); border-radius:20px; padding:clamp(26px,3vw,34px) clamp(22px,2.6vw,30px); box-shadow:0 18px 44px -34px rgba(7,26,30,.6); transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; } body.ccapp-has-phero #main-content .ccapp-value:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -36px rgba(7,26,30,.6); } body.ccapp-has-phero #main-content .ccapp-value__n{ display:block; font-size:34px; font-weight:800; line-height:1; letter-spacing:-.03em; color:rgba(var(--b-glow-rgb),.34); margin-bottom:14px; } body.ccapp-has-phero #main-content .ccapp-value p{ margin:0!important; font-size:16px!important; line-height:1.7!important; color:#4A4845!important; } /* --- the envisioned future, as a checked list --------------------------- */ body.ccapp-has-phero #main-content .ccapp-futuresec.et_pb_section{ background:#fff!important; } body.ccapp-has-phero #main-content ul.ccapp-future{ list-style:none; margin:0!important; padding:0!important; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.2vw,26px); } body.ccapp-has-phero #main-content ul.ccapp-future > li{ position:relative; margin:0!important; padding:22px 24px 22px 58px!important; border-radius:16px; background:linear-gradient(145deg,rgba(var(--b-glow-rgb),.08),rgba(var(--b-glow-rgb),.02)); border:1px solid rgba(var(--b-glow-rgb),.2); font-size:15.5px; line-height:1.68; color:#3C4A4D; } /* the disc, and the tick centred IN it. Both are hung off the same point - the disc's centre - so the tick cannot drift out of the circle the way it did when each carried its own hand-worked offset. */ body.ccapp-has-phero #main-content ul.ccapp-future > li::before{ content:""; position:absolute; left:31px; top:35px; width:20px; height:20px; border-radius:50%; transform:translate(-50%,-50%); background:var(--b); box-shadow:0 0 0 4px rgba(var(--b-glow-rgb),.14); } body.ccapp-has-phero #main-content ul.ccapp-future > li::after{ content:""; position:absolute; left:31px; top:35px; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; border-radius:1px; transform:translate(-50%,-62%) rotate(45deg); } /* --- the goal, as a band ------------------------------------------------ */ body.ccapp-has-phero #main-content .ccapp-goalsec.et_pb_section{ position:relative; overflow:hidden; padding:0!important; background:linear-gradient(118deg,#012F33 0%,var(--b-deep) 46%,var(--b-600) 100%)!important; } body.ccapp-has-phero #main-content .ccapp-goalsec.et_pb_section::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5; background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 13px); } body.ccapp-has-phero #main-content .ccapp-goalsec > .et_pb_row{ position:relative; z-index:1; } body.ccapp-has-phero #main-content .ccapp-goal{ padding:clamp(40px,4.6vw,66px) 0; text-align:center; } body.ccapp-has-phero #main-content .ccapp-goal .ccapp-eyebrow{ color:var(--b-pop)!important; display:block; margin-bottom:14px; } body.ccapp-has-phero #main-content .ccapp-goal p{ margin:0 auto!important; max-width:22ch; font-size:clamp(23px,3.1vw,38px)!important; font-weight:800!important; letter-spacing:-.025em!important; line-height:1.18!important; color:#fff!important; } /* --- figures ------------------------------------------------------------ */ body.ccapp-has-phero #main-content .ccapp-policysec.et_pb_section{ background:#fff!important; } body.ccapp-has-phero #main-content .ccapp-figs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.2vw,26px); margin:0 0 clamp(26px,3.2vw,40px); } body.ccapp-has-phero #main-content .ccapp-fig{ border-radius:18px; padding:clamp(22px,2.6vw,30px) clamp(18px,2.2vw,26px); background:linear-gradient(150deg,#024548 0%,#013C40 100%); color:#fff; box-shadow:0 24px 54px -34px rgba(2,59,63,.8); } body.ccapp-has-phero #main-content .ccapp-fig b{ display:block; font-size:clamp(28px,3.4vw,42px); font-weight:800; line-height:1; letter-spacing:-.035em; color:var(--b-pop); } body.ccapp-has-phero #main-content .ccapp-fig span{ display:block; margin-top:10px; font-size:14px; line-height:1.5; color:rgba(255,255,255,.8); } body.ccapp-has-phero #main-content .ccapp-prose p{ margin:0 0 16px!important; font-size:16.5px!important; line-height:1.76!important; color:#4A4845!important; } body.ccapp-has-phero #main-content .ccapp-prose p:last-child{ margin-bottom:0!important; } body.ccapp-has-phero #main-content .ccapp-prose b{ color:#1F2A2E; font-weight:700; } /* --- the policy points, and the close ----------------------------------- */ body.ccapp-has-phero #main-content .ccapp-whysec.et_pb_section{ background:var(--ccapp-wash)!important; } body.ccapp-has-phero #main-content .ccapp-points{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2.4vw,28px); align-items:stretch; } body.ccapp-has-phero #main-content .ccapp-point{ background:#fff; border:1px solid var(--ccapp-line); border-radius:20px; padding:clamp(24px,2.8vw,32px); box-shadow:0 18px 44px -34px rgba(7,26,30,.6); border-top:3px solid var(--b); } body.ccapp-has-phero #main-content .ccapp-point h3{ margin:0 0 10px!important; font-size:18px!important; font-weight:800!important; letter-spacing:-.01em!important; color:var(--ccapp-ink)!important; } body.ccapp-has-phero #main-content .ccapp-point p{ margin:0!important; font-size:15.5px!important; line-height:1.7!important; color:#4A4845!important; } body.ccapp-has-phero #main-content .ccapp-closing{ margin-top:clamp(26px,3.2vw,40px); padding:clamp(28px,3.2vw,40px); border-radius:20px; background:#fff; border:1px solid var(--ccapp-line); } body.ccapp-has-phero #main-content .ccapp-closing p{ margin:0 0 14px!important; font-size:16.5px!important; line-height:1.76!important; color:#4A4845!important; } body.ccapp-has-phero #main-content .ccapp-closing__btn{ display:inline-flex; align-items:center; gap:9px; margin-top:6px; padding:14px 24px; border-radius:10px; text-decoration:none; background:var(--b-600); color:#fff!important; font-weight:700; font-size:15.5px; line-height:1; } body.ccapp-has-phero #main-content .ccapp-closing__btn:hover{ background:var(--b); } @media (max-width:900px){ body.ccapp-has-phero #main-content .ccapp-lede, body.ccapp-has-phero #main-content .ccapp-values, body.ccapp-has-phero #main-content ul.ccapp-future, body.ccapp-has-phero #main-content .ccapp-figs, body.ccapp-has-phero #main-content .ccapp-points{ grid-template-columns:minmax(0,1fr); } body.ccapp-has-phero #main-content .ccapp-firstsec.et_pb_section{ padding-top:calc(24px + 30px)!important; border-radius:16px 16px 0 0; } } /* ---------- 39. Contact pieces ------------------------------------------ Same kit, two more parts: the ways to reach a person (routes, phone band, offices) and the closure list. Nothing here is Contact-Us-only - a route card suits any page that hands someone off to an inbox. ---------------------------------------------------------------------- */ body.ccapp-has-phero #main-content .ccapp-lede2{ max-width:74ch; } body.ccapp-has-phero #main-content .ccapp-lede2__org{ margin:0 0 4px!important; font-size:clamp(17px,1.8vw,21px)!important; font-weight:700!important; color:var(--ccapp-ink)!important; letter-spacing:-.015em!important; } body.ccapp-has-phero #main-content .ccapp-lede2__brands{ margin:0 0 22px!important; font-size:15px!important; color:var(--b-600)!important; letter-spacing:.01em!important; } body.ccapp-has-phero #main-content .ccapp-notice{ position:relative; padding:20px 24px 20px 26px; border-radius:14px; background:linear-gradient(145deg,rgba(var(--b-glow-rgb),.09),rgba(var(--b-glow-rgb),.03)); border:1px solid rgba(var(--b-glow-rgb),.22); border-left:4px solid var(--b); } body.ccapp-has-phero #main-content .ccapp-notice p{ margin:0!important; font-size:16px!important; line-height:1.7!important; color:#3C4A4D!important; } body.ccapp-has-phero #main-content .ccapp-notice__sub{ margin-top:8px!important; font-size:14px!important; color:#5B6A6D!important; } /* --- who to write to --- */ body.ccapp-has-phero #main-content .ccapp-routesec.et_pb_section{ background:var(--ccapp-wash)!important; } body.ccapp-has-phero #main-content .ccapp-routes{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.2vw,24px); align-items:stretch; } body.ccapp-has-phero #main-content .ccapp-route{ display:flex; flex-direction:column; gap:8px; text-decoration:none; background:#fff; border:1px solid var(--ccapp-line); border-radius:18px; padding:clamp(22px,2.6vw,28px); border-left:4px solid var(--b); box-shadow:0 18px 44px -34px rgba(7,26,30,.6); transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; } body.ccapp-has-phero #main-content .ccapp-route:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -36px rgba(7,26,30,.6); } body.ccapp-has-phero #main-content .ccapp-route__for{ font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--b-600); } body.ccapp-has-phero #main-content .ccapp-route__to{ font-size:clamp(16px,1.7vw,19px); font-weight:700; color:var(--ccapp-ink); word-break:break-word; } body.ccapp-has-phero #main-content .ccapp-routes__note{ margin:clamp(18px,2.2vw,26px) 0 0!important; font-size:15.5px!important; color:#5B6A6D!important; } /* --- the phone, as a band --- */ body.ccapp-has-phero #main-content .ccapp-phonesec.et_pb_section{ position:relative; overflow:hidden; padding:0!important; background:linear-gradient(118deg,#012F33 0%,var(--b-deep) 46%,var(--b-600) 100%)!important; } body.ccapp-has-phero #main-content .ccapp-phonesec.et_pb_section::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5; background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 13px); } body.ccapp-has-phero #main-content .ccapp-phonesec > .et_pb_row{ position:relative; z-index:1; } body.ccapp-has-phero #main-content .ccapp-phone{ padding:clamp(34px,4vw,56px) 0; text-align:center; } body.ccapp-has-phero #main-content .ccapp-phone .ccapp-eyebrow{ color:var(--b-pop)!important; display:block; margin-bottom:12px; } body.ccapp-has-phero #main-content .ccapp-phone__num{ margin:0 0 10px!important; } body.ccapp-has-phero #main-content .ccapp-phone__num a{ font-size:clamp(30px,4vw,52px)!important; font-weight:800; letter-spacing:-.035em; color:#fff!important; text-decoration:none; } body.ccapp-has-phero #main-content .ccapp-phone__num a:hover{ color:var(--b-pop)!important; } body.ccapp-has-phero #main-content .ccapp-phone__hrs{ margin:0!important; font-size:clamp(15px,1.6vw,17.5px)!important; color:rgba(255,255,255,.8)!important; } /* --- the form --- */ body.ccapp-has-phero #main-content .ccapp-formsec.et_pb_section{ background:#fff!important; } body.ccapp-has-phero #main-content .ccapp-formsec .et_pb_contact_form_container{ max-width:760px; } body.ccapp-has-phero #main-content .ccapp-formsec .et_pb_contact_field input, body.ccapp-has-phero #main-content .ccapp-formsec .et_pb_contact_field textarea{ border:1px solid var(--ccapp-line)!important; border-radius:12px!important; background:var(--ccapp-wash)!important; padding:14px 16px!important; font-family:var(--ccapp-font)!important; font-size:16px!important; color:var(--ccapp-ink)!important; } body.ccapp-has-phero #main-content .ccapp-formsec .et_pb_contact_field input:focus, body.ccapp-has-phero #main-content .ccapp-formsec .et_pb_contact_field textarea:focus{ border-color:var(--b)!important; background:#fff!important; box-shadow:0 0 0 4px rgba(var(--b-glow-rgb),.14)!important; outline:none!important; } body.ccapp-has-phero #main-content .ccapp-formsec .et_pb_contact_submit{ border-radius:10px!important; background:var(--b-600)!important; color:#fff!important; border:0!important; padding:14px 26px!important; font-weight:700!important; font-size:15.5px!important; } body.ccapp-has-phero #main-content .ccapp-formsec .et_pb_contact_submit:hover{ background:var(--b)!important; } /* --- offices --- */ body.ccapp-has-phero #main-content .ccapp-officesec.et_pb_section{ background:var(--ccapp-wash)!important; } body.ccapp-has-phero #main-content .ccapp-offices{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.2vw,26px); align-items:stretch; } body.ccapp-has-phero #main-content .ccapp-office{ background:#fff; border:1px solid var(--ccapp-line); border-radius:20px; padding:clamp(24px,2.8vw,32px); border-top:3px solid var(--b); box-shadow:0 18px 44px -34px rgba(7,26,30,.6); } body.ccapp-has-phero #main-content .ccapp-office__label{ display:block; margin-bottom:12px; padding-bottom:10px; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--b-600); border-bottom:1px solid rgba(var(--b-glow-rgb),.22); } body.ccapp-has-phero #main-content .ccapp-office p{ margin:0!important; font-size:16px!important; line-height:1.72!important; color:#4A4845!important; } /* --- holidays --- */ body.ccapp-has-phero #main-content .ccapp-holsec.et_pb_section{ background:#fff!important; } body.ccapp-has-phero #main-content .ccapp-hols{ display:flex; flex-wrap:wrap; gap:12px; } body.ccapp-has-phero #main-content .ccapp-hol{ display:inline-block; padding:12px 18px; border-radius:99px; background:linear-gradient(145deg,rgba(var(--b-glow-rgb),.1),rgba(var(--b-glow-rgb),.03)); border:1px solid rgba(var(--b-glow-rgb),.24); font-size:15px; font-weight:600; color:#1F3A3D; } @media (max-width:900px){ body.ccapp-has-phero #main-content .ccapp-routes, body.ccapp-has-phero #main-content .ccapp-offices{ grid-template-columns:minmax(0,1fr); } } /* ---------- 40. No bright band under a stuck menu ------------------------ Larry sent a recording. What appears under the menu while scrolling is not a rendering gap - the geometry is clean, measured frame by frame - it is the header's own 6px brand stripe sitting over whatever slides up beneath it: on ccapp.us the white ad card, on a landing page the white body card. A bright band between a compact dark bar and a flat white card reads as a hole in the page. So the stripe belongs to the TOP of the page, not to the stuck bar: it is covered by the header's own colour as the header shrinks, and the bar gets a real shadow instead, so content reads as passing UNDER it. The 2px overhang stays either way, so the sub-pixel seam stays closed. ---------------------------------------------------------------------- */ .ccapp-hdr.et_pb_section::before{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:8px; z-index:2; background:var(--hdr-base); opacity:var(--ccapp-p,0); pointer-events:none; } /* ---------- 41. Two things measured in the page, not guessed -------------- 1. ICONS. Divi icons are holding a Private Use Area glyph (U+E052 and friends). The typography rule above matches them through its `span` branch and forces the body face on them, and Poppins has no PUA glyphs, so every icon rendered as an empty box. Proved in the page: setting font-family:ETmodules inline took the glyph from 21px wide to 32px. The earlier ETmodules rule ties on specificity and loses the cascade, so this one repeats the class to put it beyond argument. 2. THE MAP ROW. The district finder was dropped onto Individual Membership in a section whose row came out 1320px wide while every other row on the page measures 1080px - so the map ran wider than the page it sits in. ---------------------------------------------------------------------- */ body.ccapp-has-phero #main-content .et-pb-icon.et-pb-icon.et-pb-icon, body.ccapp-has-phero #main-content .et_pb_font_icon.et_pb_font_icon.et_pb_font_icon{ font-family:ETmodules!important; font-weight:400!important; font-style:normal!important; font-variant:normal!important; text-transform:none!important; line-height:1!important; -webkit-font-smoothing:antialiased; } body.ccapp-has-phero #main-content .ccapp-mapsec > .et_pb_row{ max-width:1080px!important; width:90%!important; margin-left:auto!important; margin-right:auto!important; } /* ---------- 42. Cards on a line are the same size ------------------------ The page dresser marks a row of blurbs .ccapp-cardgrid and records how many columns and how many rows it holds. The columns step out of the way with display:contents so every card is a grid item; grid-auto-flow:column keeps the original reading order, and 1fr rows make every card on a line match. ---------------------------------------------------------------------- */ body.ccapp-has-phero #main-content .et_pb_row.ccapp-cardgrid{ display:grid!important; grid-template-columns:repeat(var(--ccapp-cg-cols,2),minmax(0,1fr)); grid-template-rows:repeat(var(--ccapp-cg-rows,1),1fr); grid-auto-flow:column; gap:clamp(18px,2.2vw,28px); align-items:stretch; } body.ccapp-has-phero #main-content .et_pb_row.ccapp-cardgrid > .et_pb_column{ display:contents!important; width:auto!important; margin:0!important; } body.ccapp-has-phero #main-content .et_pb_row.ccapp-cardgrid > .et_pb_column > .et_pb_blurb{ height:100%!important; margin:0!important; display:flex!important; flex-direction:column; } @media (max-width:980px){ body.ccapp-has-phero #main-content .et_pb_row.ccapp-cardgrid{ grid-template-columns:minmax(0,1fr); grid-template-rows:none; grid-auto-flow:row; } } /* ---------- 43. Content is NEVER invisible ------------------------------ THE white space on scroll. Measured on Individual Membership after a full load: 18 elements still at opacity 0, among them rows 862px and 1494px tall. The scroll reveal (.ccapp-reveal) and Divi's own waypoint animation both start at opacity 0 and wait for a trigger that regularly never fires - behind a fixed header, below the fold on load, after a late script. So the page shows a blank band that pops in as you scroll, on every page, under every section. Larry has reported it as "white space on scroll" repeatedly and none of my earlier fixes went anywhere near it. Nothing on a page may be hidden waiting for a trigger. The entrance is movement only: it can be missed without costing anyone the content. ---------------------------------------------------------------------- */ .ccapp-motion-on .ccapp-reveal, .ccapp-motion-on .ccapp-reveal.is-in, body.ccapp-has-phero #main-content .et-waypoint, body.ccapp-has-phero #main-content [class*="et_pb_animation_"], body.ccapp-has-phero #main-content .et_animated, body.ccapp-has-phero #main-content .et_pb_main_blurb_image{ opacity:1!important; animation-fill-mode:none!important; } .ccapp-motion-on .ccapp-reveal{ transform:translateY(14px); } .ccapp-motion-on .ccapp-reveal.is-in{ transform:none; } @media (prefers-reduced-motion:reduce){ .ccapp-motion-on .ccapp-reveal{ transform:none!important; transition:none!important; } } /* ---------- 44. The walkthrough card ------------------------------------ Was a narrow text column beside a raw 700x800 third-party iframe with its own scrollbars. Now one card: the copy panel and the action panel are grid items on the same row, so both are full height whatever the copy does. ---------------------------------------------------------------------- */ body.ccapp-has-phero #main-content .ccapp-walkthrough{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); align-items:stretch; overflow:hidden; border-radius:22px; background:#fff; border:1px solid var(--ccapp-line); box-shadow:0 24px 54px -36px rgba(7,26,30,.6); } body.ccapp-has-phero #main-content .ccapp-walkthrough__copy{ padding:clamp(28px,3.2vw,40px); display:flex; flex-direction:column; justify-content:center; gap:12px; } body.ccapp-has-phero #main-content .ccapp-walkthrough__copy .ccapp-eyebrow{ color:var(--b-600); } body.ccapp-has-phero #main-content .ccapp-walkthrough__copy h3{ margin:0!important; font-size:clamp(20px,2.2vw,26px)!important; font-weight:800!important; letter-spacing:-.02em!important; line-height:1.2!important; color:var(--ccapp-ink)!important; } body.ccapp-has-phero #main-content .ccapp-walkthrough__copy p{ margin:0!important; font-size:16.5px!important; line-height:1.72!important; color:#4A4845!important; } body.ccapp-has-phero #main-content .ccapp-walkthrough__panel{ position:relative; overflow:hidden; padding:clamp(26px,3vw,36px); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:14px; background:linear-gradient(145deg,#024548 0%,#013C40 55%,var(--b-600) 100%); } body.ccapp-has-phero #main-content .ccapp-walkthrough__panel::after{ content:""; position:absolute; width:360px; height:360px; right:-140px; top:-150px; border-radius:50%; background:radial-gradient(circle,rgba(42,210,201,.26),transparent 66%); } body.ccapp-has-phero #main-content .ccapp-walkthrough__mark{ position:relative; z-index:1; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.26); } body.ccapp-has-phero #main-content .ccapp-walkthrough__mark::before{ content:""; width:0; height:0; margin-left:4px; border-left:15px solid var(--b-pop); border-top:9px solid transparent; border-bottom:9px solid transparent; } body.ccapp-has-phero #main-content .ccapp-walkthrough__meta{ position:relative; z-index:1; margin:0!important; font-size:13px!important; font-weight:700!important; letter-spacing:.06em!important; text-transform:uppercase!important; color:rgba(255,255,255,.72)!important; } body.ccapp-has-phero #main-content .ccapp-walkthrough__btn{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:9px; padding:14px 24px; border-radius:10px; text-decoration:none; line-height:1; background:var(--b-pop2,#2AD2C9); color:#07171A!important; font-weight:700; font-size:15.5px; } body.ccapp-has-phero #main-content .ccapp-walkthrough__btn:hover{ background:#4EE0D8; } @media (max-width:900px){ body.ccapp-has-phero #main-content .ccapp-walkthrough{ grid-template-columns:minmax(0,1fr); } } /* ---------- 45. Sections must not stack 150px of nothing ---------------- THE white band Larry keeps seeing. Measured on Individual Membership at 1920x1020, in page coordinates: last painted content of section 0 ends at y1923 section 0 still runs to y1985 (76px bottom padding) section 1 starts at y1985, its first row begins at y2075 (76px top) -> 152px of absolutely nothing between one block of content and the next and the same again at every section join: bands of 183px, 134px, 134px and 149px on one page. On white sections that is a blank screen sliding past as you scroll. It is not a seam, not a flash and not an animation: it is two sections' padding added together. Where two sections meet, the join pays once, not twice. Sections built with the page kit set their own padding deliberately and are left alone. ---------------------------------------------------------------------- */ body.ccapp-has-phero #main-content .et_pb_section:not(.ccapp-ctasec):not(.ccapp-identsec):not(.ccapp-ledesec):not(.ccapp-valuesec):not(.ccapp-futuresec):not(.ccapp-goalsec):not(.ccapp-policysec):not(.ccapp-whysec):not(.ccapp-routesec):not(.ccapp-phonesec):not(.ccapp-formsec):not(.ccapp-officesec):not(.ccapp-holsec):not(.ccapp-mapsec):not(.ccapp-s--portal){ padding-bottom:clamp(26px,3vw,42px)!important; } body.ccapp-has-phero #main-content .et_pb_section + .et_pb_section:not(.ccapp-ctasec):not(.ccapp-identsec):not(.ccapp-ledesec):not(.ccapp-valuesec):not(.ccapp-futuresec):not(.ccapp-goalsec):not(.ccapp-policysec):not(.ccapp-whysec):not(.ccapp-routesec):not(.ccapp-phonesec):not(.ccapp-formsec):not(.ccapp-officesec):not(.ccapp-holsec):not(.ccapp-mapsec):not(.ccapp-s--portal):not(.ccapp-firstsec){ padding-top:clamp(26px,3vw,42px)!important; } /* a row carrying almost nothing should not reserve a screenful either */ body.ccapp-has-phero #main-content .et_pb_row + .et_pb_row{ padding-top:clamp(10px,1.4vw,20px)!important; } /* a heading row belongs to the row beneath it (page dresser step 2c) */ body.ccapp-has-phero #main-content .et_pb_row.ccapp-titlerow{ padding-bottom:0!important; } body.ccapp-has-phero #main-content .et_pb_row.ccapp-titlerow .et_pb_module{ margin-bottom:0!important; } body.ccapp-has-phero #main-content .et_pb_row.ccapp-undertitle{ padding-top:clamp(14px,1.6vw,22px)!important; } /* ---------- 46. A section's own padding is the only padding at a join ---- After 45 the joins still measured 115-127px of nothing, because Divi gives every row 27px top and bottom as well: 42 + 27 + 27 + 42 at each boundary. The first row in a section and the last row in a section give theirs back - the section is already spacing itself. Measured on Individual Membership: the join under the walkthrough card was 115px, the one above "Information About Annual Membership" 127px. ---------------------------------------------------------------------- */ body.ccapp-has-phero #main-content .et_pb_section > .et_pb_row:first-child{ padding-top:0!important; } body.ccapp-has-phero #main-content .et_pb_section > .et_pb_row:last-child{ padding-bottom:0!important; } /* an empty column takes no width (page dresser 2d) */ body.ccapp-has-phero #main-content .et_pb_column.ccapp-emptycol{ display:none!important; } body.ccapp-has-phero #main-content .et_pb_row.ccapp-trimmedrow > .et_pb_column:not(.ccapp-emptycol){ width:100%!important; max-width:100%!important; margin-right:0!important; float:none!important; } /* two columns that each hold a nested section stand the same height, so a short one cannot leave half the page blank (page dresser 2d) */ body.ccapp-has-phero #main-content .et_pb_row.ccapp-evencols{ display:flex!important; align-items:stretch!important; flex-wrap:wrap; gap:clamp(18px,2.2vw,30px); } body.ccapp-has-phero #main-content .et_pb_row.ccapp-evencols > .et_pb_column{ float:none!important; margin-right:0!important; display:flex!important; flex-direction:column; flex:1 1 320px; width:auto!important; } body.ccapp-has-phero #main-content .et_pb_row.ccapp-evencols > .et_pb_column > .et_pb_section{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:flex-start; } /* ---------- 47. The spacer can never show white ------------------------- Belt and braces behind the header spacer fix. ccapp-header.js now keeps .ccapp-hdr-spacer exactly as tall as the fixed header, so no strip can open between them. If that script ever fails to load, is deferred past first paint, or is out-measured by a font swap, the spacer must still not be a white hole under the menu: it carries the header's own background, so the worst case is a few pixels of header colour instead of a white band. This is the defect Larry reported for days - on load, on refresh and on scroll, on every page. ---------------------------------------------------------------------- */ .ccapp-hdr-spacer{ background:var(--hdr-base,#0E0D12); } /* ---------- 48. The contact form is a card, on every site ---------------- Three things were wrong when the Formidable form went back on the contact pages, and all three come from the same mistake: the form was left to whatever each install's Formidable style settings happened to be. ccapp.us fine - that page carries .ccapp-has-phero so sections 1-47 reached it. membership labels sat INLINE beside the fields and the form ran the full 1272px of the row. Measured, not guessed: .frm_primary_label computed display:inline, width:auto. education raw Formidable defaults - Lucida Grande, square fields, recovery a blue #4199E1 submit button. Cause: both contact pages still carry a legacy Divi fullwidth-header module, so ccapp_phero_context() opts the page out, the body never gets .ccapp-has-phero, and EVERY rule in this file that starts with that class is dead on the page. So the form is styled here WITHOUT the .ccapp-has-phero gate. The brand tokens live on :root and body.ccapp-site-*, which are always present, so each site still draws its own colour: teal on Education, purple on Credentialing, black on Recovery Residences. ---------------------------------------------------------------------- */ /* the frame */ .ccapp-formwrap{ max-width:760px; margin-inline:auto; background:#fff; border:1px solid var(--ccapp-line); border-radius:22px; padding:clamp(24px,3.4vw,40px); box-shadow:var(--ccapp-shadow-card,0 18px 40px -24px rgba(7,26,30,.45)); } .ccapp-formwrap .frm_forms, .ccapp-formwrap .frm_form_fields{ max-width:none; } /* a form dropped on a page without the wrapper still must not run full bleed */ .frm_forms{ max-width:760px; margin-inline:auto; } .ccapp-formwrap .frm_forms{ max-width:none; margin-inline:0; } /* labels ALWAYS sit above their field */ .frm_forms .frm_primary_label{ display:block!important; float:none!important; width:auto!important; text-align:left!important; padding:0 0 7px!important; margin:0!important; font-family:var(--ccapp-font)!important; font-weight:600!important; font-size:15px!important; line-height:1.4!important; color:var(--ccapp-ink)!important; } .frm_forms .frm_form_field > .frm_primary_label + *{ margin-top:0; } .frm_forms .frm_required{ color:#C1392B!important; font-weight:600; } .frm_forms .frm_description, .frm_forms .frm_primary_label + .frm_description{ font-family:var(--ccapp-font)!important; font-size:13.5px!important; color:var(--ccapp-ink-soft)!important; margin-top:6px!important; } .frm_forms .frm_form_field{ margin-bottom:20px!important; } /* fields */ .frm_forms input[type="text"], .frm_forms input[type="email"], .frm_forms input[type="tel"], .frm_forms input[type="url"], .frm_forms input[type="number"], .frm_forms input[type="date"], .frm_forms input[type="search"], .frm_forms input[type="password"], .frm_forms select, .frm_forms textarea{ width:100%!important; box-sizing:border-box!important; 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; height:auto!important; transition:border-color .18s ease, box-shadow .18s ease; } .frm_forms textarea{ min-height:168px!important; resize:vertical; } .frm_forms input[type="text"]:focus, .frm_forms input[type="email"]:focus, .frm_forms input[type="tel"]:focus, .frm_forms input[type="url"]:focus, .frm_forms input[type="number"]:focus, .frm_forms input[type="date"]:focus, .frm_forms input[type="search"]:focus, .frm_forms input[type="password"]:focus, .frm_forms select:focus, .frm_forms textarea:focus{ outline:none!important; border-color:var(--b)!important; box-shadow:0 0 0 4px rgba(var(--b-glow-rgb),.16)!important; } .frm_forms input::placeholder, .frm_forms textarea::placeholder{ color:#9AA4AD!important; opacity:1; } /* the First / Last sub-labels under a name field */ .frm_forms .frm_form_field .frm_primary_label ~ .frm_grid_container > div > label, .frm_forms label.frm_screen_reader + input + label{ font-size:13px!important; } /* submit */ .frm_forms .frm_submit{ margin-top:4px!important; } .frm_forms input[type="submit"], .frm_forms button[type="submit"], .frm_forms .frm_button_submit{ font-family:var(--ccapp-font)!important; font-weight:600!important; font-size:16px!important; padding:14px 34px!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; width:auto!important; box-shadow:0 14px 30px -16px rgba(var(--b-glow-rgb),.95); transition:transform .2s ease, filter .2s ease; } .frm_forms input[type="submit"]:hover, .frm_forms button[type="submit"]:hover, .frm_forms .frm_button_submit:hover{ transform:translateY(-2px); filter:brightness(1.07); } /* Education teal is a LIGHT colour - white on #2AD2C9 is 1.88:1 and unreadable. The gradient there starts at the 600 step instead. */ body.ccapp-site-edu .frm_forms input[type="submit"], body.ccapp-site-edu .frm_forms button[type="submit"], body.ccapp-site-edu .frm_forms .frm_button_submit{ background:linear-gradient(135deg,var(--b-mid) 0%,var(--b-600) 100%)!important; } /* messages */ .frm_forms .frm_error, .frm_forms .frm_error_style{ font-family:var(--ccapp-font)!important; font-size:14px!important; border-radius:12px!important; } .frm_forms .frm_message, .frm_forms .frm_success_style{ font-family:var(--ccapp-font)!important; border:1px solid var(--ccapp-line)!important; border-left:4px solid var(--b)!important; border-radius:12px!important; background:var(--ccapp-wash)!important; color:var(--ccapp-ink)!important; padding:18px 20px!important; } @media (max-width:767px){ .ccapp-formwrap{ border-radius:18px; padding:22px 18px 24px; } .frm_forms input[type="submit"], .frm_forms button[type="submit"], .frm_forms .frm_button_submit{ width:100%!important; padding:13px 26px!important; } } /* ---------- 49. Nav cards ----------------------------------------------- The Education home page carried nine navigation tiles. Measured, not assumed: SEVEN OF THE NINE WERE NOT LINKS AT ALL, so the home page's whole navigation grid was decoration. The cards below are links, and the grid makes every card on a line the same height whatever the copy does. The picture is kept - Larry has said on two sites now that he wants images on the tiles, and the complaint was never "no images", it was the particular pictures: a chalkboard reading "ABOUT US", a pile of question marks, a COVID virus render. Those are dropped and better frames from the same library put in their place. ---------------------------------------------------------------------- */ .ccapp-navgrid{ display:grid; gap:clamp(16px,1.8vw,24px); grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); } .ccapp-navcard{ display:flex; flex-direction:column; min-height:100%; background:#fff; border:1px solid var(--ccapp-line); border-radius:18px; text-decoration:none!important; color:var(--ccapp-ink)!important; box-shadow:var(--ccapp-shadow-card,0 18px 40px -24px rgba(7,26,30,.45)); position:relative; overflow:hidden; isolation:isolate; transition:transform .24s cubic-bezier(.2,.7,.2,1), box-shadow .24s ease; } .ccapp-navcard:hover{ transform:translateY(-6px); box-shadow:0 34px 60px -28px rgba(7,26,30,.55); } .ccapp-navcard:focus-visible{ outline:3px solid var(--b); outline-offset:3px; } /* the picture */ .ccapp-navcard__img{ display:block; width:100%; height:180px; flex:0 0 auto; object-fit:cover; object-position:center 40%; transition:transform .5s ease; } .ccapp-navcard:hover .ccapp-navcard__img{ transform:scale(1.06); } .ccapp-navcard__shot{ display:block; overflow:hidden; position:relative; } /* the brand rule that wipes in under the picture on hover */ .ccapp-navcard__shot::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:linear-gradient(90deg,var(--b) 0%,var(--b-pop) 100%); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; } .ccapp-navcard:hover .ccapp-navcard__shot::after{ transform:scaleX(1); } .ccapp-navcard__body{ display:flex; flex-direction:column; gap:8px; padding:20px 22px 22px; flex:1 1 auto; } .ccapp-navcard__t{ font-family:var(--ccapp-font); font-weight:700; font-size:18px; line-height:1.3; color:var(--ccapp-ink); } .ccapp-navcard__d{ font-family:var(--ccapp-font); font-size:14.5px; line-height:1.6; color:var(--ccapp-ink-soft); margin:0; flex:1 1 auto; } .ccapp-navcard__go{ font-family:var(--ccapp-font); font-weight:600; font-size:14px; color:var(--b-600); display:inline-flex; align-items:center; gap:7px; margin-top:2px; } .ccapp-navcard__go::after{ content:""; width:16px; height:2px; background:currentColor; border-radius:2px; transition:width .24s ease; } .ccapp-navcard:hover .ccapp-navcard__go::after{ width:26px; } .ccapp-navcard__go--ext::before{ content:"\2197"; font-weight:700; } body.ccapp-site-rr .ccapp-navcard__go{ color:var(--ccapp-ink); } @media (max-width:767px){ .ccapp-navgrid{ grid-template-columns:minmax(0,1fr); } .ccapp-navcard{ border-radius:16px; } .ccapp-navcard__img{ height:165px; } .ccapp-navcard__body{ padding:18px 20px 20px; } } @media (prefers-reduced-motion:reduce){ .ccapp-navcard,.ccapp-navcard__img,.ccapp-navcard__shot::after,.ccapp-navcard__go::after{ transition:none; } .ccapp-navcard:hover{ transform:none; } .ccapp-navcard:hover .ccapp-navcard__img{ transform:none; } } /* ---------- 50. The "what we do" trio ---------------------------------- Three statements of what the Education Institute actually does, taken from its own mission line, set as numbered panels rather than another card row so the page has two different rhythms instead of one repeated four times. ---------------------------------------------------------------------- */ .ccapp-trio{ display:grid; gap:clamp(18px,2vw,26px); grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); } .ccapp-trio__i{ position:relative; padding:28px 24px 26px; border-radius:18px; background:var(--ccapp-wash); border:1px solid var(--ccapp-line); display:flex; flex-direction:column; gap:9px; } .ccapp-trio__n{ font-family:var(--ccapp-font); font-weight:800; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--b-600); } .ccapp-trio__n::after{ content:""; display:block; width:34px; height:3px; border-radius:3px; margin-top:9px; background:linear-gradient(90deg,var(--b) 0%,var(--b-pop) 100%); } .ccapp-trio__h{ font-family:var(--ccapp-font); font-weight:700; font-size:19px; line-height:1.3; color:var(--ccapp-ink); } .ccapp-trio__p{ font-family:var(--ccapp-font); font-size:15px; line-height:1.65; color:var(--ccapp-ink-soft); margin:0; } /* ---------- 51. Home grid corrections, measured ------------------------ Measured on the rebuilt Education home at four widths: 1440 navgrid auto-fit resolved to 4 columns -> 4 + 4 + 1, leaving a lone orphan card on its own line. Nine tiles want three columns. 1180 3 x 3, correct. 820 trio auto-fit resolved to 2 columns -> 2 + 1, and the lone card measured 312px against its neighbours' 343px. every width: the hero's two buttons disagreed about case - "Education for certification" computed text-transform:none, "FIND A SCHOOL" computed uppercase. Card heights inside a line were already equal at every width (306/306/306/306, 329 x 4, 275 x 3) - the grid was doing its job, so nothing is changed there. ---------------------------------------------------------------------- */ @media (min-width:1100px){ .ccapp-navgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (min-width:980px){ .ccapp-trio{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width:979px){ .ccapp-trio{ grid-template-columns:minmax(0,1fr); } } /* one case for both buttons, decided here rather than left to Divi */ .ccapp-btn.et_pb_button, .ccapp-btn-outline.et_pb_button{ text-transform:none!important; letter-spacing:0!important; } /* ---------- 52. The hero pathway card ---------------------------------- At 1440 the Education hero was text across the left 40% and 860px of empty gradient to its right. Rather than fill it with the stock photography this remodel is removing, it carries the three credential routes - which is the question most people arrive on this site asking. ---------------------------------------------------------------------- */ .ccapp-pathcard{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:20px; padding:26px 24px 20px; backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); } .ccapp-pathcard__t{ display:block; font-family:var(--ccapp-font); font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--b-pop); margin-bottom:16px; } .ccapp-path{ display:flex; align-items:flex-start; gap:14px; padding:14px 10px 14px 0; text-decoration:none!important; border-top:1px solid rgba(255,255,255,.13); transition:padding-left .22s ease; } .ccapp-path:first-of-type{ border-top:0; } .ccapp-path:hover{ padding-left:8px; } .ccapp-path:focus-visible{ outline:2px solid var(--b-pop); outline-offset:2px; border-radius:8px; } .ccapp-path__k{ flex:0 0 auto; min-width:62px; padding:4px 9px; border-radius:7px; background:rgba(255,255,255,.14); color:#fff; text-align:center; font-family:var(--ccapp-font); font-weight:800; font-size:12.5px; letter-spacing:.04em; } .ccapp-path__b{ display:block; } .ccapp-path__n{ display:block; font-family:var(--ccapp-font); font-weight:600; font-size:16px; line-height:1.3; color:#fff; } .ccapp-path__d{ display:block; font-family:var(--ccapp-font); font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.72); margin-top:3px; } .ccapp-path__go{ margin-left:auto; align-self:center; color:var(--b-pop); font-weight:700; font-size:18px; line-height:1; flex:0 0 auto; transition:transform .22s ease; } .ccapp-path:hover .ccapp-path__go{ transform:translateX(4px); } /* Recovery Residences' hero is near-black; its pop colour is white */ body.ccapp-site-rr .ccapp-pathcard__t, body.ccapp-site-rr .ccapp-path__go{ color:#fff; } @media (max-width:980px){ .ccapp-pathcard{ margin-top:26px; } } @media (prefers-reduced-motion:reduce){ .ccapp-path,.ccapp-path__go{ transition:none; } .ccapp-path:hover{ padding-left:0; } } /* ---------- 53. The course requirements table -------------------------- Three pages - AADC School Application, Prevention Specialist and Peer Recovery (CRPM) - carried their entire content as a PNG screenshot of a Word table. Measured: 0 characters of text on the AADC page, 46 on Prevention, 38 on Peer Recovery. Nothing for Google to index, nothing a screen reader can read, nothing selectable, and the picture only showed the first three rows of a six-row form. The real requirements are now marked up as a table, read out of the source .docx files in the media library rather than retyped off the picture. On a phone each row becomes its own block with the column name in front of the value, because a three-column table does not fit 390px. ---------------------------------------------------------------------- */ .ccapp-reqs{ margin:0; } .ccapp-reqs table{ width:100%; border-collapse:separate; border-spacing:0; font-family:var(--ccapp-font); font-size:15.5px; line-height:1.55; background:#fff; border:1px solid var(--ccapp-line); border-radius:16px; overflow:hidden; box-shadow:var(--ccapp-shadow-card,0 18px 40px -24px rgba(7,26,30,.45)); } .ccapp-reqs caption{ caption-side:top; text-align:left; padding:0 2px 12px; font-family:var(--ccapp-font); font-size:14px; color:var(--ccapp-ink-soft); } .ccapp-reqs thead th{ background:var(--b-deep); color:#fff; text-align:left; font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; padding:14px 18px; vertical-align:middle; } .ccapp-reqs tbody th{ text-align:left; font-weight:600; color:var(--ccapp-ink); padding:15px 18px; vertical-align:top; border-top:1px solid var(--ccapp-line); } .ccapp-reqs tbody td{ padding:15px 18px; vertical-align:top; color:var(--ccapp-ink-soft); border-top:1px solid var(--ccapp-line); } .ccapp-reqs tbody tr:nth-child(even) th, .ccapp-reqs tbody tr:nth-child(even) td{ background:var(--ccapp-wash); } .ccapp-reqs .ccapp-reqs__n{ display:inline-grid; place-items:center; min-width:26px; height:26px; padding:0 7px; margin-right:10px; border-radius:7px; vertical-align:2px; background:color-mix(in srgb, var(--b) 16%, #fff); color:var(--b-600); font-weight:800; font-size:12.5px; } .ccapp-reqs .ccapp-reqs__hrs{ white-space:nowrap; font-weight:600; color:var(--ccapp-ink); } @media (max-width:767px){ .ccapp-reqs table,.ccapp-reqs thead,.ccapp-reqs tbody, .ccapp-reqs tr,.ccapp-reqs th,.ccapp-reqs td{ display:block; } .ccapp-reqs thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } .ccapp-reqs table{ border:0; background:transparent; box-shadow:none; border-radius:0; } .ccapp-reqs tbody tr{ background:#fff!important; border:1px solid var(--ccapp-line); border-radius:14px; padding:4px 2px 6px; margin-bottom:14px; box-shadow:var(--ccapp-shadow-card,0 18px 40px -24px rgba(7,26,30,.45)); } .ccapp-reqs tbody th,.ccapp-reqs tbody td{ border-top:0!important; background:transparent!important; padding:10px 16px; } .ccapp-reqs tbody td::before{ content:attr(data-l); display:block; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ccapp-ink-soft); margin-bottom:3px; } } /* ---------- 54. Download row ------------------------------------------- The form itself is a .docx in the media library. It was never linked from any of the three pages - the picture of it was the whole page. ---------------------------------------------------------------------- */ .ccapp-dl{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); } .ccapp-dl__i{ display:flex; align-items:center; gap:14px; padding:18px 20px; background:#fff; border:1px solid var(--ccapp-line); border-radius:14px; text-decoration:none!important; color:var(--ccapp-ink)!important; transition:transform .2s ease, box-shadow .2s ease; } .ccapp-dl__i:hover{ transform:translateY(-3px); box-shadow:0 22px 44px -26px rgba(7,26,30,.5); } .ccapp-dl__i:focus-visible{ outline:3px solid var(--b); outline-offset:3px; } .ccapp-dl__ico{ flex:0 0 auto; width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:color-mix(in srgb, var(--b) 14%, #fff); color:var(--b-600); } .ccapp-dl__ico svg{ width:20px; height:20px; } .ccapp-dl__n{ display:block; font-family:var(--ccapp-font); font-weight:700; font-size:15.5px; line-height:1.3; } .ccapp-dl__m{ display:block; font-family:var(--ccapp-font); font-size:13px; color:var(--ccapp-ink-soft); margin-top:2px; } body.ccapp-site-rr .ccapp-dl__ico{ background:#EFEFEE; color:var(--ccapp-ink); } /* ---------- 55. The outline button was never outlined ------------------- Found while checking the call-to-action on the AADC page. The rule body.ccapp-has-phero #main-content .et_pb_button { background: ... !important } gives every Divi button the filled brand gradient, and at (0,3,2) it outranks .ccapp-btn-outline.et_pb_button at (0,2,0) - both !important, so the more specific one wins. The outline variant has therefore been rendering as a second filled button on EVERY page that carries the theme hero, on all five sites. It looked correct only on the two front pages, which get no hero and so never matched the rule at all. Proved by reading the matched rules off the live page rather than guessing: .ccapp-btn-outline.et_pb_button was matching and losing. Both variants are restated here at the same specificity as the rule that beat them, and the outline takes its colour from the section it sits on - white on a dark band, brand colour on a light one. A second button that looks identical to the first is not a second button. ---------------------------------------------------------------------- */ body.ccapp-has-phero #main-content .ccapp-btn.et_pb_button, body.ccapp-has-phero #main-content .ccapp-btn.et_pb_button:hover{ background:linear-gradient(135deg,var(--b) 0%,var(--b-600) 100%)!important; border:0!important; color:#fff!important; } /* Education teal is light: white on #2AD2C9 is 1.88:1. Start the gradient at the mid step there so the label stays readable. */ body.ccapp-site-edu.ccapp-has-phero #main-content .ccapp-btn.et_pb_button, body.ccapp-site-edu.ccapp-has-phero #main-content .ccapp-btn.et_pb_button:hover{ background:linear-gradient(135deg,var(--b-mid) 0%,var(--b-600) 100%)!important; } /* outline, on a light section */ body.ccapp-has-phero #main-content .ccapp-btn-outline.et_pb_button, body.ccapp-has-phero #main-content .ccapp-btn-outline.et_pb_button:hover{ background:transparent!important; border:2px solid var(--b-600)!important; color:var(--b-600)!important; box-shadow:none!important; } body.ccapp-has-phero #main-content .ccapp-btn-outline.et_pb_button:hover{ background:color-mix(in srgb, var(--b) 10%, transparent)!important; } /* outline, on a dark band - the hero, the CTA, any section the dresser marked dark or image-backed */ body.ccapp-has-phero #main-content .ccapp-hero .ccapp-btn-outline.et_pb_button, body.ccapp-has-phero #main-content .ccapp-cta .ccapp-btn-outline.et_pb_button, body.ccapp-has-phero #main-content .ccapp-ctasec .ccapp-btn-outline.et_pb_button, body.ccapp-has-phero #main-content .ccapp-s--dark .ccapp-btn-outline.et_pb_button, body.ccapp-has-phero #main-content .ccapp-s--img .ccapp-btn-outline.et_pb_button, body.ccapp-has-phero #main-content .ccapp-hero .ccapp-btn-outline.et_pb_button:hover, body.ccapp-has-phero #main-content .ccapp-cta .ccapp-btn-outline.et_pb_button:hover, body.ccapp-has-phero #main-content .ccapp-ctasec .ccapp-btn-outline.et_pb_button:hover, body.ccapp-has-phero #main-content .ccapp-s--dark .ccapp-btn-outline.et_pb_button:hover, body.ccapp-has-phero #main-content .ccapp-s--img .ccapp-btn-outline.et_pb_button:hover{ border-color:rgba(255,255,255,.75)!important; color:#fff!important; } body.ccapp-has-phero #main-content .ccapp-hero .ccapp-btn-outline.et_pb_button:hover, body.ccapp-has-phero #main-content .ccapp-cta .ccapp-btn-outline.et_pb_button:hover, body.ccapp-has-phero #main-content .ccapp-ctasec .ccapp-btn-outline.et_pb_button:hover, body.ccapp-has-phero #main-content .ccapp-s--dark .ccapp-btn-outline.et_pb_button:hover, body.ccapp-has-phero #main-content .ccapp-s--img .ccapp-btn-outline.et_pb_button:hover{ background:rgba(255,255,255,.14)!important; } /* a filled button on a dark band keeps its fill, but on Education the pop tint reads better there than the mid step */ body.ccapp-site-edu.ccapp-has-phero #main-content .ccapp-cta .ccapp-btn.et_pb_button, body.ccapp-site-edu.ccapp-has-phero #main-content .ccapp-hero .ccapp-btn.et_pb_button{ background:linear-gradient(135deg,var(--b-pop) 0%,var(--b-mid) 100%)!important; color:var(--ccapp-ink)!important; } /* ---------- 56. The content-area accordion ------------------------------- MEASURED on /certification/ before this existed: 15,559 characters of body text in ONE unbroken run of Divi text modules, with 5 of the page's 6 H1s inside it. The ADC and AADC academic content areas are the substance of that page - every area carries a paragraph or a bullet list that a school has to match its curriculum against - so compressing them into a two-column requirements table would have thrown the content away. They become a native

/ accordion instead: every word is still in the DOM for Google and for a screen reader (details content is NOT hidden from the accessibility tree the way display:none is when it is expanded, and search engines index closed details), the page scans in a screenful, and each area is linkable. No JavaScript.
ships in every browser the site supports. ---------------------------------------------------------------------- */ .ccapp-acc{ display:grid; gap:12px; } .ccapp-acc__i{ background:#fff; border:1px solid var(--ccapp-line); border-radius:16px; overflow:hidden; transition:box-shadow .25s ease, border-color .25s ease; } .ccapp-acc__i[open]{ border-color:color-mix(in srgb, var(--b) 45%, #fff); box-shadow:0 20px 48px -32px rgba(7,26,30,.55); } .ccapp-acc__i > summary{ display:flex; align-items:flex-start; gap:14px; cursor:pointer; list-style:none; padding:18px clamp(18px,2.2vw,24px); font-family:var(--ccapp-font); font-weight:700; font-size:clamp(16px,1.7vw,18.5px); line-height:1.35; color:var(--ccapp-ink); } .ccapp-acc__i > summary::-webkit-details-marker{ display:none; } .ccapp-acc__i > summary:hover{ background:var(--ccapp-wash); } .ccapp-acc__i > summary:focus-visible{ outline:3px solid var(--b); outline-offset:-3px; } .ccapp-acc__n{ flex:0 0 auto; display:inline-grid; place-items:center; min-width:28px; height:28px; padding:0 8px; border-radius:8px; background:color-mix(in srgb, var(--b) 16%, #fff); color:var(--b-600); font-weight:800; font-size:13px; } .ccapp-acc__t{ flex:1 1 auto; } /* the chevron is drawn, not an icon font - the theme loads no icon font here */ .ccapp-acc__i > summary::after{ content:""; flex:0 0 auto; width:11px; height:11px; margin:6px 2px 0 0; border-right:2.5px solid var(--b-600); border-bottom:2.5px solid var(--b-600); transform:rotate(45deg); transition:transform .22s ease; } .ccapp-acc__i[open] > summary::after{ transform:rotate(-135deg); } .ccapp-acc__b{ padding:2px clamp(18px,2.2vw,24px) 22px; border-top:1px solid var(--ccapp-line); margin-top:-1px; } .ccapp-acc__b > *:first-child{ margin-top:16px!important; } body.ccapp-has-phero #main-content .ccapp-acc__b p{ font-size:15.5px!important; line-height:1.72!important; color:var(--ccapp-ink-soft)!important; margin:0 0 12px!important; } body.ccapp-has-phero #main-content .ccapp-acc__b ul{ margin:0 0 12px!important; padding:0!important; list-style:none!important; } body.ccapp-has-phero #main-content .ccapp-acc__b li{ position:relative; padding:0 0 0 22px!important; margin:0 0 9px!important; font-size:15.5px!important; line-height:1.66!important; color:var(--ccapp-ink-soft)!important; } body.ccapp-has-phero #main-content .ccapp-acc__b li::before{ content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px; border-radius:2px; background:var(--b); } .ccapp-acc__hrs{ display:inline-block; margin-left:10px; padding:3px 9px; border-radius:99px; vertical-align:2px; background:var(--ccapp-wash); border:1px solid var(--ccapp-line); font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--b-600); white-space:nowrap; } @media (max-width:600px){ .ccapp-acc__i > summary{ font-size:16px; padding:16px 16px; gap:10px; } .ccapp-acc__hrs{ display:block; margin:7px 0 0; width:max-content; } .ccapp-acc__b{ padding:2px 16px 18px; } } /* ---------- 57. The two people the scholarship funds are named for ------- MEASURED: the obituaries of Norm Blacksher and Dana Anderson are carried in the post_content of SIX pages (scholarships, donations, das-apply, nbs-apply, das-fund-donation, nbs-fund-donation) inside Divi rows whose disabledOn is set for every breakpoint - 2,400 characters of real, written, human content rendering NOWHERE on any of the six. They are real and they are the reason the funds exist, so they get one place on the Scholarships page and a link from everywhere else, instead of six hidden copies. ---------------------------------------------------------------------- */ .ccapp-memo{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.2vw,24px); align-items:start; } .ccapp-memo__i{ background:#fff; border:1px solid var(--ccapp-line); border-radius:20px; padding:clamp(22px,2.6vw,30px); border-top:4px solid var(--b); box-shadow:0 20px 48px -34px rgba(7,26,30,.6); } .ccapp-memo__k{ display:block; font-family:var(--ccapp-font); font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--b-600); margin-bottom:8px; } body.ccapp-has-phero #main-content .ccapp-memo__n{ margin:0 0 4px!important; font-size:clamp(19px,2.1vw,23px)!important; font-weight:800!important; line-height:1.2!important; color:var(--ccapp-ink)!important; } .ccapp-memo__d{ display:block; font-family:var(--ccapp-font); font-size:13.5px; color:var(--ccapp-ink-soft); margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--ccapp-line); } body.ccapp-has-phero #main-content .ccapp-memo__i p{ font-size:15px!important; line-height:1.72!important; color:var(--ccapp-ink-soft)!important; margin:0 0 11px!important; } body.ccapp-has-phero #main-content .ccapp-memo__i p:last-child{ margin-bottom:0!important; } @media (max-width:860px){ .ccapp-memo{ grid-template-columns:1fr; } } /* ---------- 58. A note panel that is not a card and not a quote ---------- Used for the "where your donation goes" statement and the "do not tell a student a school will not qualify" warning - both are policy, both were loose paragraphs indistinguishable from the body copy around them. ---------------------------------------------------------------------- */ .ccapp-note{ display:flex; gap:16px; align-items:flex-start; background:color-mix(in srgb, var(--b) 7%, #fff); border:1px solid color-mix(in srgb, var(--b) 30%, #fff); border-radius:18px; padding:clamp(20px,2.4vw,26px); } .ccapp-note__ico{ flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--b-600); color:#fff; font-weight:800; font-size:18px; line-height:1; } body.ccapp-has-phero #main-content .ccapp-note__h{ margin:0 0 6px!important; font-size:17px!important; font-weight:800!important; color:var(--ccapp-ink)!important; } body.ccapp-has-phero #main-content .ccapp-note p{ margin:0 0 9px!important; font-size:15.5px!important; line-height:1.68!important; color:var(--ccapp-ink-soft)!important; } body.ccapp-has-phero #main-content .ccapp-note p:last-child{ margin-bottom:0!important; } @media (max-width:600px){ .ccapp-note{ gap:12px; padding:18px; } .ccapp-note__ico{ width:32px; height:32px; font-size:16px; } } /* ---------- 59. A two-up fact strip for fees and deadlines --------------- /for-ceu-providers/ states two provider categories and two fees ($650 and $50) inside one 1,100-character paragraph. They are the two numbers a provider came to the page for. ---------------------------------------------------------------------- */ .ccapp-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(14px,2vw,20px); } .ccapp-fact{ background:#fff; border:1px solid var(--ccapp-line); border-radius:18px; padding:clamp(20px,2.4vw,26px); border-left:4px solid var(--b); box-shadow:0 18px 44px -34px rgba(7,26,30,.6); } .ccapp-fact__k{ display:block; font-family:var(--ccapp-font); font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--b-600); } .ccapp-fact__v{ display:block; font-family:var(--ccapp-font); font-size:clamp(28px,3.4vw,38px); font-weight:800; letter-spacing:-.03em; line-height:1.1; color:var(--ccapp-ink); margin:6px 0 8px; } .ccapp-fact__d{ display:block; font-family:var(--ccapp-font); font-size:14.5px; line-height:1.6; color:var(--ccapp-ink-soft); } /* ---------- 60. Divi's own entry title is a SECOND H1 -------------------- MEASURED on /privacy-notice-and-terms-of-service/: two H1 elements, both reading "Privacy Notice and Terms of Service". The first is the theme's page hero (h1.ccapp-phero__title). The second is Divi's page.php, which prints

on any page NOT built with the builder - privacy is a plain Gutenberg page, so it gets one. Hiding it in CSS would leave the element in the DOM and the page would still have two H1s. It is demoted to an H2 in PHP instead (see inc/page-parts.php, ccapp_demote_entry_title), and this rule only makes the demoted heading read as a page heading rather than a body H2. ---------------------------------------------------------------------- */ body.ccapp-has-phero #main-content h2.entry-title.main_title{ position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ---------- 61. The call-to-action band was unreadable on EVERY page ------ MEASURED with CSS.getMatchedStylesForNode on /renewal/, and then on /aadc-ccapp-school-application-2/, /peer-recovery-crpm/, /prevention-specialist/ and /certification/ - identical on all five: .ccapp-cta.et_pb_section background: linear-gradient(125deg, #0A1F22 0%, #0B3B40 55%, #016A71 100%) .ccapp-cta h2 color:#fff !important (0,1,1) .ccapp-cta p color:#D5E4E6!important (0,1,1) and then, declared later in this same file and FAR more specific: body.ccapp-has-phero #main-content .et_pb_bg_layout_light h2 color:var(--ccapp-ink)!important (0,4,2) body.ccapp-has-phero #main-content .et_pb_bg_layout_light .et_pb_text_inner color:#4A4845!important (0,4,2) Divi stamps et_pb_bg_layout_light on every text module unless you tell it otherwise, so the light-background rule won on the dark band. Computed colors on the live page were rgb(45,41,38) for the heading and rgb(74,72,69) for the paragraph. #2D2926 on #0B3B40 = 1.14:1 #4A4845 on #0B3B40 = 1.45:1 Both are invisible. This is the same failure mode as section 55: a !important declaration beaten by a more specific !important declaration. The fix restates the band's own colors at the same specificity as the rule that was beating them. Contrast is checked against the LIGHTEST stop of the gradient, #016A71, because that is the worst case: #FFFFFF on #016A71 = 5.86:1 heading AA pass #E4EFF0 on #016A71 = 5.00:1 paragraph AA pass #B6F4EF on #016A71 = 4.87:1 eyebrow 13px AA pass The eyebrow is NOT --b-pop here. #2AD2C9 on #016A71 measures 3.54:1, and at 13px/700 it is not large text, so it would fail. #B6F4EF is a lighter step of the same hue that passes. ---------------------------------------------------------------------- */ body.ccapp-has-phero #main-content .ccapp-cta h2, body.ccapp-has-phero #main-content .ccapp-cta h3, body.ccapp-has-phero #main-content .ccapp-cta .et_pb_bg_layout_light h2, body.ccapp-has-phero #main-content .ccapp-cta .et_pb_bg_layout_light h3{ color:#fff!important; } body.ccapp-has-phero #main-content .ccapp-cta p, body.ccapp-has-phero #main-content .ccapp-cta li, body.ccapp-has-phero #main-content .ccapp-cta .et_pb_bg_layout_light .et_pb_text_inner, body.ccapp-has-phero #main-content .ccapp-cta .et_pb_bg_layout_light .et_pb_text_inner p, body.ccapp-has-phero #main-content .ccapp-cta .et_pb_bg_layout_light .et_pb_text_inner li{ color:#E4EFF0!important; } body.ccapp-has-phero #main-content .ccapp-cta .ccapp-eyebrow, body.ccapp-has-phero #main-content .ccapp-cta .et_pb_bg_layout_light .ccapp-eyebrow{ color:#B6F4EF!important; background:rgba(255,255,255,.08); padding:7px 13px; border-radius:99px; } body.ccapp-has-phero #main-content .ccapp-cta a:not(.et_pb_button){ color:#B6F4EF!important; text-decoration-color:rgba(182,244,239,.5); } /* the same band under its other name, used by the contact/about layouts */ body.ccapp-has-phero #main-content .ccapp-sec--dark h2, body.ccapp-has-phero #main-content .ccapp-sec--dark .et_pb_bg_layout_light h2{ color:#fff!important; } body.ccapp-has-phero #main-content .ccapp-sec--dark .et_pb_bg_layout_light .et_pb_text_inner, body.ccapp-has-phero #main-content .ccapp-sec--dark .et_pb_bg_layout_light .et_pb_text_inner p{ color:#E4EFF0!important; } /* ---------- 62. Two and four cards should not leave a hole --------------- MEASURED on /certification/: .ccapp-navgrid computes to "408px 408px 408px" from repeat(auto-fit,minmax(...)). With two cards that leaves a third of the row empty; with four it drops the fourth card onto a line of its own. Both read as a rendering fault rather than a layout. The count is known when the layout is built, so the layout says it. ---------------------------------------------------------------------- */ @media (min-width:981px){ .ccapp-navgrid.ccapp-navgrid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .ccapp-navgrid.ccapp-navgrid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* ---------- 63. The phone band had the same fault as the CTA band -------- MEASURED on /contact-us/ after section 61 went in: the number and the eyebrow were right, the hours line was not. .ccapp-phone__hrs declared rgba(255,255,255,.8) at (0,4,1) beaten by body.ccapp-has-phero #main-content .et_pb_bg_layout_light .et_pb_text_inner p #4A4845 !important at (0,4,2) Computed color on the live page: rgb(74,72,69) on the band's lightest stop #18736E - 1.35:1. The same cause as section 61, a different band, because this one is built from a Divi TEXT module rather than a code module and so carries et_pb_bg_layout_light. Contrast is checked against #18736E, the lightest stop of linear-gradient(118deg,#012F33,var(--b-deep),var(--b-600)) on Education: #FFFFFF on #18736E = 5.65:1 the number #DCEBEA on #18736E = 4.61:1 the hours #B6F4EF on #18736E = 4.70:1 the eyebrow (#2AD2C9 on #18736E = 3.07:1 - which is why the eyebrow is not --b-pop) ---------------------------------------------------------------------- */ body.ccapp-has-phero #main-content .ccapp-phonesec p, body.ccapp-has-phero #main-content .ccapp-phonesec .et_pb_bg_layout_light .et_pb_text_inner, body.ccapp-has-phero #main-content .ccapp-phonesec .et_pb_bg_layout_light .et_pb_text_inner p, body.ccapp-has-phero #main-content .ccapp-phone__hrs{ color:#DCEBEA!important; } body.ccapp-has-phero #main-content .ccapp-phonesec h2, body.ccapp-has-phero #main-content .ccapp-phonesec .ccapp-phone__num a, body.ccapp-has-phero #main-content .ccapp-phonesec .et_pb_bg_layout_light h2{ color:#fff!important; } body.ccapp-has-phero #main-content .ccapp-phonesec .ccapp-eyebrow, body.ccapp-has-phero #main-content .ccapp-phonesec .et_pb_bg_layout_light .ccapp-eyebrow{ color:#B6F4EF!important; } /* ---------- 64. The two memorial cards were 692px and 589px ------------- MEASURED on /scholarships/: .ccapp-memo was align-items:start, so each card sized to its own obituary and the pair ended 103px apart. Side by side that reads as a rendering fault, not as a choice. They stretch now; the shorter one simply has more white at the foot, which is what a pair of panels on a line is supposed to look like. ---------------------------------------------------------------------- */ .ccapp-memo{ align-items:stretch; } .ccapp-memo__i{ display:flex; flex-direction:column; } /* ---------- 65. A standing picture beside an intro paragraph ------------- MEASURED on /contact-us/ at 1440 before this change: the intro row was 1320px wide and 265px tall, the longest line of text ended at x=922, and 458px of that row - a third of its width - was empty. The page carried no photograph anywhere in #main-content, measured: 0 images over 40x40px. The row is now 3_5 + 2_5 and the second column holds this picture. NAMED ccapp-pic, NOT ccapp-fig. The first build of this used .ccapp-fig and the picture came out inside a dark teal rounded frame. That was not a bug in this rule: .ccapp-fig is already the STATISTIC card further up this file (line ~2298) - a teal gradient panel with a big number in and a caption in , 18px radius, 30px/26px padding. Measured on the rendered page: padding 30px 26px, radius 18px, inherited whole. The class was taken; the answer was a different name, not an override war. It is deliberately NOT a card: no border, no shadow, no label. A card here would read as a link, and it is not one. */ .ccapp-pic{ margin:0; padding:0; border:0; border-radius:14px; overflow:hidden; line-height:0; background:#EDF2F4; } .ccapp-pic img{ display:block; width:100%; height:auto; object-fit:cover; aspect-ratio:3/2; border-radius:inherit; } /* at 980 Divi stacks the columns; the picture then sits under the text and a 3:2 crop would be ~560px tall on a phone, so it flattens to a band. */ @media (max-width:980px){ .ccapp-pic{ margin-top:22px; } .ccapp-pic img{ aspect-ratio:16/7; } } /* ---------- 66. A legacy Divi button on Education was 1.88:1 ----------- MEASURED on /find-a-school/: the "Download Application" button carries no .ccapp-btn class, so section 55's Education fix misses it and it falls through to the generic rule, whose gradient starts at raw --b #2AD2C9. Computed on the live page: color rgb(255,255,255) over linear-gradient(135deg, rgb(42,210,201) 0%, rgb(24,115,110) 100%). White on #2AD2C9 is 1.88:1 - the left end of the label is unreadable and the whole label is under the 4.5:1 AA threshold. Scope measured, not assumed: exactly 1 bare button on the page, and every remodelled .ccapp-btn elsewhere uses dark #2D2926 on teal at 8.55:1. The fix makes a bare button look like every other button on the site rather than inventing a third button style. ---------------------------------------------------------------------- */ body.ccapp-site-edu.ccapp-has-phero #main-content .et_pb_button:not(.ccapp-btn):not(.ccapp-btn-outline), body.ccapp-site-edu.ccapp-has-phero #main-content .et_pb_button:not(.ccapp-btn):not(.ccapp-btn-outline):hover{ background:linear-gradient(135deg,var(--b) 0%,var(--b-mid) 100%)!important; color:#2D2926!important; } /* ---------- 67. The credential routes, moved out of the hero ----------- The Education hero now carries the floating photograph that ccapp.us and Membership carry, so the four credential routes moved to a band of their own directly beneath it. .ccapp-pathcard was written for a DARK hero: translucent white fill, white type, a .14 white chip. Dropped on a light section every one of those is invisible. The band restates them for light, and spreads the four routes across the full width instead of stacking them in a narrow column. ---------------------------------------------------------------------- */ .ccapp-routes .ccapp-pathcard{ background:transparent; border:0; padding:0; backdrop-filter:none; -webkit-backdrop-filter:none; display:grid; gap:clamp(14px,1.6vw,20px); grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); } .ccapp-routes .ccapp-pathcard__t{ grid-column:1/-1; color:var(--b-600); margin:0 0 2px; } .ccapp-routes .ccapp-path{ flex-direction:column; align-items:flex-start; gap:10px; border-top:0; padding:22px 20px 20px; background:#fff; border:1px solid var(--ccapp-line); border-radius:16px; box-shadow:var(--ccapp-shadow-card,0 18px 40px -24px rgba(7,26,30,.45)); transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease; } .ccapp-routes .ccapp-path:hover{ padding-left:20px; transform:translateY(-5px); box-shadow:0 30px 56px -28px rgba(7,26,30,.55); } .ccapp-routes .ccapp-path__k{ min-width:0; padding:5px 11px; border-radius:8px; background:color-mix(in srgb, var(--b) 16%, #fff); color:var(--b-600); font-size:12.5px; } .ccapp-routes .ccapp-path__n{ color:var(--ccapp-ink); font-size:17px; font-weight:700; } .ccapp-routes .ccapp-path__d{ color:var(--ccapp-ink-soft); margin-top:4px; } .ccapp-routes .ccapp-path__go{ margin-left:0; align-self:flex-start; color:var(--b-600); font-size:20px; } .ccapp-routes .ccapp-path:hover .ccapp-path__go{ transform:translateX(4px); } @media (prefers-reduced-motion:reduce){ .ccapp-routes .ccapp-path{ transition:none; } .ccapp-routes .ccapp-path:hover{ transform:none; } } /* ---------- 68. Education's filled button on a LIGHT section ------------ Section 55 gives Education's .ccapp-btn white text on a gradient starting at --b-mid #1E958F. Measured on the rebuilt directory pages, which are the first Education pages to put a filled button on a light section: "Start a school application" #fff on #1E958F = 3.65:1 FAILS AA "What approval involves" #fff on #1E958F = 3.65:1 FAILS AA It never showed before because on a dark .ccapp-cta band a different rule already gives dark ink on teal, which measures 7.66:1 on the same pages. Education teal is a LIGHT colour - that is the whole trap in the brand: white on #2AD2C9 is 1.88:1 and white on the mid step is not much better. The fix is the one the dark band already uses: dark ink #2D2926 on teal, 7.66:1, and it also makes the button look the same wherever it lands. ---------------------------------------------------------------------- */ body.ccapp-site-edu.ccapp-has-phero #main-content .ccapp-btn.et_pb_button, body.ccapp-site-edu.ccapp-has-phero #main-content .ccapp-btn.et_pb_button:hover{ background:linear-gradient(135deg,var(--b) 0%,var(--b-mid) 100%)!important; color:#2D2926!important; } /* ---------- 69. The membership landing kit ---------------------------- Larry on the Individual and Program landing pages: "they aren't dynamic... the look needs to be more modern, more inviting, more informative." Read off the live pages before changing anything: * every block is centre-aligned, including multi-line body copy, and each call-to-action puts its explanation BELOW its button, so the label is read before the thing that explains it * the 50% / 80% / 70% discounts are drawn as PROGRESS BARS. A discount is not progress toward anything - the device encodes nothing, it just looks like three half-finished loading bars * Individual Membership carries 0 images across 6,376px * Program Membership opens with 200 words of "About Us" before giving anyone a reason to join, over 8,843px This kit supplies the pieces that replace those: a left-aligned offer block, a working dues calculator in place of the fake bars, and a filter over the benefit cards that are already written. ---------------------------------------------------------------------- */ /* ---- the offer block: label, explanation, then the button ---- */ .ccapp-offer{ display:grid; gap:clamp(16px,2vw,24px); grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); } .ccapp-offer__i{ display:flex; flex-direction:column; gap:9px; padding:24px 22px 22px; background:#fff; border:1px solid var(--ccapp-line); border-radius:16px; box-shadow:var(--ccapp-shadow-card,0 18px 40px -24px rgba(7,26,30,.45)); } .ccapp-offer__k{ font-family:var(--ccapp-font); font-weight:800; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--b-600); } .ccapp-offer__h{ font-family:var(--ccapp-font); font-weight:700; font-size:19px; line-height:1.3; color:var(--ccapp-ink); } .ccapp-offer__d{ font-family:var(--ccapp-font); font-size:14.5px; line-height:1.6; color:var(--ccapp-ink-soft); margin:0; flex:1 1 auto; } .ccapp-offer__i .ccapp-offer__go{ align-self:flex-start; margin-top:4px; font-family:var(--ccapp-font); font-weight:700; font-size:14.5px; color:var(--b-600); text-decoration:none; display:inline-flex; align-items:center; gap:8px; } .ccapp-offer__go::after{ content:""; width:18px; height:2px; background:currentColor; border-radius:2px; transition:width .22s ease; } .ccapp-offer__i:hover .ccapp-offer__go::after{ width:28px; } /* ---- the dues line ---- */ .ccapp-dues{ display:inline-flex; align-items:baseline; gap:10px; padding:10px 18px; border-radius:999px; background:color-mix(in srgb, var(--b) 12%, #fff); border:1px solid var(--ccapp-line); } .ccapp-dues__n{ font-family:var(--ccapp-font); font-weight:800; font-size:26px; color:var(--b-600); font-variant-numeric:tabular-nums; } .ccapp-dues__l{ font-family:var(--ccapp-font); font-weight:600; font-size:13.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ccapp-ink-soft); } /* ---- the calculator, which replaces the three fake progress bars ---- */ .ccapp-calc{ display:grid; gap:clamp(20px,2.6vw,30px); grid-template-columns:1fr; align-items:start; } @media (min-width:860px){ .ccapp-calc{ grid-template-columns:1.05fr .95fr; } } .ccapp-calc__opts{ display:flex; flex-direction:column; } .ccapp-calc__o{ display:flex; gap:13px; align-items:flex-start; padding:13px 2px; cursor:pointer; border-bottom:1px solid var(--ccapp-line); } .ccapp-calc__o:last-child{ border-bottom:0; } .ccapp-calc__o input{ margin-top:3px; width:18px; height:18px; accent-color:var(--b); flex:0 0 auto; cursor:pointer; } .ccapp-calc__n{ font-family:var(--ccapp-font); font-weight:600; font-size:15.5px; color:var(--ccapp-ink); display:block; } .ccapp-calc__d{ font-family:var(--ccapp-font); font-size:13.5px; color:var(--ccapp-ink-soft); display:block; margin-top:2px; } .ccapp-calc__v{ margin-left:auto; font-family:var(--ccapp-font); font-weight:700; font-size:15.5px; color:var(--b-600); font-variant-numeric:tabular-nums; white-space:nowrap; flex:0 0 auto; } .ccapp-calc__fee{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:18px; } .ccapp-calc__fee label{ font-family:var(--ccapp-font); font-size:13.5px; color:var(--ccapp-ink-soft); } .ccapp-calc__fee input[type="number"]{ width:120px!important; padding:9px 12px!important; border:1px solid var(--ccapp-line)!important; border-radius:10px!important; font-family:var(--ccapp-font)!important; font-size:15px!important; background:#fff!important; color:var(--ccapp-ink)!important; font-variant-numeric:tabular-nums; } .ccapp-calc__panel{ background:linear-gradient(145deg,var(--b-deep) 0%,var(--b-600) 100%); color:#fff; border-radius:18px; padding:clamp(22px,2.8vw,30px); box-shadow:0 30px 60px -28px rgba(7,26,30,.6); } .ccapp-calc__row{ display:flex; justify-content:space-between; gap:14px; padding:10px 0; font-size:15px; border-bottom:1px solid rgba(255,255,255,.18); font-variant-numeric:tabular-nums; font-family:var(--ccapp-font); } .ccapp-calc__row:last-of-type{ border-bottom:0; } .ccapp-calc__big{ font-family:var(--ccapp-font); font-weight:800; font-size:clamp(36px,5vw,50px); line-height:1; margin-top:16px; font-variant-numeric:tabular-nums; } .ccapp-calc__cap{ font-family:var(--ccapp-font); font-size:14px; opacity:.86; margin:8px 0 0; } .ccapp-calc__verdict{ margin-top:16px; padding:13px 15px; border-radius:11px; background:rgba(255,255,255,.15); font-family:var(--ccapp-font); font-size:14.5px; font-weight:600; } /* ---- benefit filter ---- */ .ccapp-benfilter{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:20px; } .ccapp-benfilter button{ font-family:var(--ccapp-font); font-size:14px; padding:9px 17px; border-radius:999px; cursor:pointer; border:1px solid var(--ccapp-line); background:#fff; color:var(--ccapp-ink); transition:background .16s ease, border-color .16s ease, color .16s ease; } .ccapp-benfilter button:hover{ border-color:var(--b); } .ccapp-benfilter button[aria-pressed="true"]{ background:var(--b-600); border-color:var(--b-600); color:#fff; font-weight:600; } .ccapp-benfilter button:focus-visible{ outline:3px solid var(--b); outline-offset:2px; } .ccapp-bengrid{ display:grid; gap:clamp(13px,1.6vw,18px); grid-template-columns:repeat(auto-fit,minmax(245px,1fr)); } .ccapp-ben{ border:1px solid var(--ccapp-line); border-radius:15px; padding:19px 18px; background:#fff; min-width:0; display:flex; flex-direction:column; gap:6px; box-shadow:var(--ccapp-shadow-card,0 18px 40px -24px rgba(7,26,30,.45)); } .ccapp-ben__tag{ font-family:var(--ccapp-font); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--b-600); } .ccapp-ben__n{ font-family:var(--ccapp-font); font-weight:700; font-size:16px; line-height:1.3; color:var(--ccapp-ink); } .ccapp-ben__d{ font-family:var(--ccapp-font); font-size:14px; line-height:1.6; color:var(--ccapp-ink-soft); margin:0; flex:1 1 auto; } .ccapp-ben__go{ align-self:flex-start; font-family:var(--ccapp-font); font-weight:700; font-size:14px; color:var(--b-600); text-decoration:none; margin-top:4px; } .ccapp-bencount{ font-family:var(--ccapp-font); font-size:13.5px; color:var(--ccapp-ink-soft); margin-top:16px; } @media (max-width:767px){ .ccapp-offer{ grid-template-columns:minmax(0,1fr); } .ccapp-bengrid{ grid-template-columns:minmax(0,1fr); } .ccapp-calc__panel{ border-radius:15px; } } @media (prefers-reduced-motion:reduce){ .ccapp-offer__go::after,.ccapp-benfilter button{ transition:none; } } /* ---------- 70. Calculator panel text, and benefit cards with a shape --- Two defects, both measured on the live page rather than guessed: 1. .ccapp-calc__cap sampled 1.53:1 FROM PAINTED PIXELS - text rgb(1,115,122) on rgb(1,85,90), teal on teal and effectively invisible. The panel sets colour:#fff on itself, but the theme's own paragraph rule inside #main-content is more specific and repainted the

brand teal. Opacity cannot rescue a wrong colour, so the colour is stated outright. (My first probe called this 1.42:1 and ALSO called the verdict chip 1.00:1; the chip is really 7.25:1 - it has a semi-transparent white background the probe read as solid white. Pixels settled it.) 2. The benefit cards were nine identical white rectangles. Larry: "these cards are blah. plain. not wow factor." Short cards also left a dead gap where the description stretched to push the link down. They now carry a category colour, a mark, and a top edge that wipes in - and the two biggest draws run as wide feature cards with a photograph, so the grid has a hierarchy instead of nine things shouting equally. ---------------------------------------------------------------------- */ /* --- 1. the panel --- */ body #main-content .ccapp-calc__panel, body #main-content .ccapp-calc__panel p, body #main-content .ccapp-calc__panel span, body #main-content .ccapp-calc__panel div{ color:#fff!important; } body #main-content .ccapp-calc__cap{ opacity:.9; } /* --- 2. benefit cards --- */ .ccapp-bengrid{ grid-auto-rows:1fr; } .ccapp-ben{ position:relative; overflow:hidden; isolation:isolate; padding:22px 20px 20px; gap:7px; transition:transform .24s cubic-bezier(.2,.7,.2,1), box-shadow .24s ease; } .ccapp-ben::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg,var(--ben-a,var(--b)) 0%,var(--ben-b,var(--b-pop)) 100%); transform:scaleX(0); transform-origin:left; transition:transform .32s ease; } .ccapp-ben:hover{ transform:translateY(-6px); box-shadow:0 34px 60px -28px rgba(7,26,30,.55); } .ccapp-ben:hover::before{ transform:scaleX(1); } /* the category mark */ .ccapp-ben__ico{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; margin-bottom:4px; background:color-mix(in srgb, var(--ben-a,var(--b)) 15%, #fff); color:var(--ben-a,var(--b-600)); } .ccapp-ben__ico svg{ width:21px; height:21px; display:block; } /* the category chip, which replaces the tiny grey caption */ .ccapp-ben__tag{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; padding:4px 10px; border-radius:999px; font-size:10.5px; background:color-mix(in srgb, var(--ben-a,var(--b)) 13%, #fff); color:var(--ben-a,var(--b-600)); } /* one hue per category, all inside the Membership brand */ .ccapp-ben[data-c="save"] { --ben-a:#008C95; --ben-b:#2AD2C9; } .ccapp-ben[data-c="grow"] { --ben-a:#016A71; --ben-b:#00A9B4; } .ccapp-ben[data-c="voice"] { --ben-a:#0B3B40; --ben-b:#1E958F; } /* the description no longer stretches, so a short card is short, not hollow */ .ccapp-ben__d{ flex:0 1 auto; } .ccapp-ben__go{ margin-top:auto; padding-top:10px; } /* --- the two feature cards --- */ .ccapp-ben--feature{ grid-column:span 2; flex-direction:row; align-items:stretch; gap:0; padding:0; } .ccapp-ben--feature .ccapp-ben__shot{ flex:0 0 44%; min-width:0; overflow:hidden; position:relative; } .ccapp-ben--feature .ccapp-ben__shot img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; } .ccapp-ben--feature:hover .ccapp-ben__shot img{ transform:scale(1.06); } .ccapp-ben--feature .ccapp-ben__body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:7px; padding:22px 22px 20px; } .ccapp-ben--feature .ccapp-ben__ico{ display:none; } .ccapp-ben--feature .ccapp-ben__n{ font-size:19px; } @media (max-width:900px){ .ccapp-ben--feature{ grid-column:span 1; flex-direction:column; } .ccapp-ben--feature .ccapp-ben__shot{ flex:0 0 auto; height:170px; } } @media (prefers-reduced-motion:reduce){ .ccapp-ben,.ccapp-ben::before,.ccapp-ben--feature .ccapp-ben__shot img{ transition:none; } .ccapp-ben:hover{ transform:none; } } /* ---------- 71. The employer dashboard call-to-action row -------------- Larry: "we need an amazing call to action row to have them test the dashboard out and take them to the demo page on the mag site. open in new tab." It goes high on the Program Membership page, because the dashboard is the newest reason to join and the old page buried it under 200 words of About Us. The demo destination is https://counselormagazine.com/ccapp-employer-dashboard/demo/ - verified 200 and publicly reachable. NOT /cehub/employer, which is the real logged-in dashboard and bounces to a login screen. ---------------------------------------------------------------------- */ .ccapp-dash{ position:relative; overflow:hidden; isolation:isolate; border-radius:22px; background:linear-gradient(135deg,var(--b-deep) 0%,var(--b-600) 55%,var(--b-mid) 100%); color:#fff; padding:clamp(26px,3.6vw,46px); box-shadow:0 36px 70px -32px rgba(7,26,30,.65); } /* a faint grid, so the band reads as a screen rather than a coloured box */ .ccapp-dash::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.16; background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px); background-size:46px 46px; mask-image:radial-gradient(120% 90% at 85% 15%,#000 0%,transparent 70%); -webkit-mask-image:radial-gradient(120% 90% at 85% 15%,#000 0%,transparent 70%); } .ccapp-dash__grid{ display:grid; gap:clamp(22px,3vw,40px); grid-template-columns:1fr; align-items:center; } @media (min-width:880px){ .ccapp-dash__grid{ grid-template-columns:1.1fr .9fr; } } .ccapp-dash__tag{ display:inline-block; padding:5px 13px; border-radius:999px; margin-bottom:14px; background:rgba(255,255,255,.17); font-family:var(--ccapp-font); font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; } body #main-content .ccapp-dash h2, body #main-content .ccapp-dash h3{ color:#fff!important; margin:0 0 12px!important; } body #main-content .ccapp-dash p{ color:rgba(255,255,255,.92)!important; margin:0 0 10px!important; } .ccapp-dash__lede{ font-size:17px!important; line-height:1.65!important; max-width:52ch; } .ccapp-dash__acts{ display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; } .ccapp-dash__btn{ display:inline-flex; align-items:center; gap:9px; padding:14px 26px; border-radius:999px; font-family:var(--ccapp-font); font-weight:700; font-size:15.5px; text-decoration:none!important; background:#fff; color:var(--b-deep)!important; box-shadow:0 16px 34px -18px rgba(0,0,0,.6); transition:transform .2s ease, box-shadow .2s ease; } .ccapp-dash__btn:hover{ transform:translateY(-3px); box-shadow:0 24px 44px -18px rgba(0,0,0,.7); } .ccapp-dash__btn--ghost{ background:transparent; color:#fff!important; border:2px solid rgba(255,255,255,.6); box-shadow:none; } .ccapp-dash__btn--ghost:hover{ background:rgba(255,255,255,.14); box-shadow:none; } .ccapp-dash__btn svg{ width:17px; height:17px; flex:0 0 auto; } .ccapp-dash__btn:focus-visible{ outline:3px solid #fff; outline-offset:3px; } /* the little screen mock on the right - drawn, not a screenshot, so it never goes stale when the real dashboard changes */ .ccapp-dash__screen{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); border-radius:15px; padding:17px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .ccapp-dash__bar{ display:flex; gap:6px; margin-bottom:14px; } .ccapp-dash__bar i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.4); } .ccapp-dash__stat{ display:flex; align-items:baseline; gap:9px; margin-bottom:13px; } .ccapp-dash__pct{ font-family:var(--ccapp-font); font-weight:800; font-size:38px; line-height:1; font-variant-numeric:tabular-nums; } .ccapp-dash__pl{ font-family:var(--ccapp-font); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.85; } .ccapp-dash__meter{ height:8px; border-radius:99px; background:rgba(255,255,255,.22); overflow:hidden; margin-bottom:14px; } .ccapp-dash__meter span{ display:block; height:100%; border-radius:99px; background:#fff; } .ccapp-dash__rows{ display:flex; flex-direction:column; gap:8px; } .ccapp-dash__r{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:9px; background:rgba(255,255,255,.1); font-family:var(--ccapp-font); font-size:13.5px; } .ccapp-dash__dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; } .ccapp-dash__dot--ok{ background:#6EE7B7; } .ccapp-dash__dot--due{ background:#FCD34D; } .ccapp-dash__dot--late{ background:#FCA5A5; } .ccapp-dash__r b{ margin-left:auto; font-variant-numeric:tabular-nums; font-weight:700; } /* the money comparison */ .ccapp-vs{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin-top:6px; } .ccapp-vs__i{ padding:20px; border-radius:15px; border:1px solid var(--ccapp-line); background:#fff; } .ccapp-vs__i--ours{ border-color:var(--b); box-shadow:0 0 0 3px color-mix(in srgb,var(--b) 16%,transparent); } .ccapp-vs__k{ font-family:var(--ccapp-font); font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--b-600); } .ccapp-vs__n{ font-family:var(--ccapp-font); font-weight:800; font-size:clamp(28px,3.4vw,38px); line-height:1.05; margin-top:8px; color:var(--ccapp-ink); font-variant-numeric:tabular-nums; } .ccapp-vs__d{ font-family:var(--ccapp-font); font-size:13.5px; color:var(--ccapp-ink-soft); margin-top:7px; } @media (max-width:767px){ .ccapp-dash{ border-radius:18px; } .ccapp-dash__btn{ width:100%; justify-content:center; } } @media (prefers-reduced-motion:reduce){ .ccapp-dash__btn{ transition:none; } .ccapp-dash__btn:hover{ transform:none; } } /* ---------- 72. Spacing inside the kit components ---------------------- Larry on the rebuilt Program page: "some things look plain, some text is too close to things." Checked at 1440 and 390 and corrected here: * .ccapp-dues sat hard against the paragraph above and below it, because it lives inside a

the theme gives no extra room to * an

used as a sub-heading inside a section had the section's paragraph spacing, not a heading's, so it crowded the text under it * the eyebrow sat directly on its h2 with no breathing room * offer and benefit cards had tighter inner padding than the kit's own cards elsewhere, so they read as plainer than the rest of the page ---------------------------------------------------------------------- */ body #main-content p .ccapp-dues{ margin:10px 0 6px; } body #main-content .ccapp-dues{ padding:12px 22px; } body #main-content .ccapp-dues__n{ font-size:28px; } /* an eyebrow needs air under it before the heading starts */ body #main-content .ccapp-eyebrow{ margin-bottom:10px; } body #main-content .ccapp-eyebrow + h2{ margin-top:0!important; } /* a sub-heading inside a section, not a paragraph */ body #main-content .ccapp-sec h3{ margin:0 0 14px!important; line-height:1.3; } /* the kit's cards get the same inner room as the rest of the system */ .ccapp-offer__i{ padding:26px 24px 24px; gap:10px; } .ccapp-offer{ gap:clamp(18px,2.2vw,26px); } .ccapp-ben{ padding:24px 22px 22px; gap:9px; } .ccapp-bengrid{ gap:clamp(15px,1.8vw,20px); } /* the comparison pair, which sat too close to the heading above it */ .ccapp-vs{ margin-top:22px; gap:18px; } .ccapp-vs__i{ padding:24px 22px; } .ccapp-vs__d{ margin-top:9px; line-height:1.6; } /* the trio under it needed separating from the comparison */ body #main-content .ccapp-vs + * { margin-top:8px; } .ccapp-trio{ margin-top:18px; } .ccapp-trio__i{ padding:26px 24px 24px; } /* the filter row and the count line */ .ccapp-benfilter{ margin-bottom:22px; gap:10px; } .ccapp-bencount{ margin-top:20px; } /* the dashboard band's buttons needed room under the copy */ .ccapp-dash__acts{ margin-top:24px; gap:13px; } body #main-content .ccapp-dash p:last-of-type{ margin-bottom:0!important; } /* ---------- 73. Headings must not sit on their own paragraph ----------- MEASURED on the rebuilt Program Membership page at 1440 AND 390: seven pairs of stacked text elements had a vertical gap of exactly 0px - "One membership for the whole organization." / its lede the lede / the $500 dues chip "A 40-person program pays a fraction..." / its sub-line "Benefits of program membership." / "Pick what matters..." "The largest statewide organization..." / its first paragraph that paragraph / the next paragraph "Ready to stop chasing?" / its paragraph Divi's text module gives a

a bottom margin but nothing re-establishes the space BETWEEN a heading and the paragraph after it, or between two paragraphs, once a module holds several elements. Every one of those headings is followed immediately by body copy, which is what Larry meant by "some text is too close to things." ---------------------------------------------------------------------- */ body #main-content .et_pb_text_inner :is(h1,h2,h3,h4) + p, body #main-content .et_pb_text_inner :is(h1,h2,h3,h4) + ul, body #main-content .et_pb_text_inner :is(h1,h2,h3,h4) + ol{ margin-top:14px!important; } body #main-content .et_pb_text_inner p + p{ margin-top:16px!important; } body #main-content .et_pb_text_inner p + :is(h2,h3,h4){ margin-top:30px!important; } body #main-content .et_pb_text_inner ul + p, body #main-content .et_pb_text_inner p + ul{ margin-top:14px!important; } /* the eyebrow is a span above a heading, so it needs its own rule */ body #main-content .et_pb_text_inner .ccapp-eyebrow{ display:inline-block; margin-bottom:12px; } /* a lede paragraph before the dues chip */ body #main-content .et_pb_text_inner p + p > .ccapp-dues{ margin-top:4px; } /* ---------- 74. What a LOOK at the page found that measuring did not --- I ran a gap-detector over the Program page and reported it clean. It was not: the detector only compared STACKED elements, so it was blind to two spans colliding on ONE line and to text running past a card's edge. Larry sent a screenshot of exactly that. Fixed here, from looking at the page. 1. .ccapp-vs__i is a plain div, so its children stayed INLINE: "CCAPP, ALL IN" and "$4,500" rendered on the same line, the label squashed against the number, and in the second card "$6,000-$12,000+" ran out past the card border. 2. That number is the longest string on the page and was sized with the same clamp as the short one, so it could not fit. 3. "And that is before the rest of it." sat hard under the comparison cards with no separation. 4. Every benefit card pushed "Learn more" to its bottom edge with margin-top:auto while the grid forced equal heights - so a short card opened a hole between its text and its link. That is the "blah, plain" Larry keeps pointing at: cards that are mostly empty. 5. The closing call to action crammed its chip, heading, copy and buttons into the left third of a full-width dark band, leaving two thirds empty. ---------------------------------------------------------------------- */ /* 1 + 2. the comparison pair */ .ccapp-vs__i{ display:flex; flex-direction:column; gap:4px; min-width:0; } .ccapp-vs__k{ display:block; } .ccapp-vs__n{ display:block; margin-top:4px; min-width:0; font-size:clamp(26px,2.6vw,34px); line-height:1.1; overflow-wrap:break-word; hyphens:none; } .ccapp-vs__d{ display:block; } /* 3. the line under the pair */ body #main-content .ccapp-sec .ccapp-vs + h3, body #main-content .et_pb_text_inner h3.ccapp-after-vs{ margin-top:38px!important; } /* 4. content clusters at the top of a card; the slack falls below the link, where it reads as padding instead of a hole */ .ccapp-ben__go{ margin-top:6px!important; padding-top:0; } .ccapp-ben__d{ flex:0 0 auto; } /* 5. the closing band gets a centred, measured column */ .ccapp-cta .ccapp-cta__row .et_pb_column{ max-width:760px; margin-inline:auto!important; float:none!important; } .ccapp-cta .et_pb_text_inner{ text-align:center; } .ccapp-cta .et_pb_text_inner .ccapp-eyebrow{ margin-inline:auto; } .ccapp-cta .et_pb_text_inner p{ margin-inline:auto; max-width:60ch; } .ccapp-cta .et_pb_button_module_wrapper{ display:inline-block; } .ccapp-cta .et_pb_button_module_wrapper + .et_pb_button_module_wrapper{ margin-left:12px; } @media (max-width:560px){ .ccapp-cta .et_pb_button_module_wrapper{ display:block; } .ccapp-cta .et_pb_button_module_wrapper + .et_pb_button_module_wrapper{ margin-left:0; margin-top:12px; } } /* ---------- 75. The three routes in, with weight ---------------------- NOTE ON THE CLASS NAME: this was first written as .ccapp-route and that name was ALREADY TAKEN - the contact-page routing component at section 56 uses it, and its rule body.ccapp-has-phero #main-content .ccapp-route { background:#fff } outranks a bare .ccapp-route--lead at (0,3,2) against (0,1,0). The lead card therefore rendered WHITE with white text on it - invisible. Measured from the computed style, not guessed. Renamed to .ccapp-join throughout. The first version of this row was three identical white rectangles with a small caption, a bold line, grey copy and a teal link. Larry, for the third time on a card component: "this is plain." It is plain because nothing on it has any rank. All three routes looked equally important when one of them - program membership - is the thing almost every visitor is there for, and because the only colour on a white card was 13px of eyebrow text. So: the primary route is a dark brand panel carrying its price at display size, and the other two are white cards with a permanent colour edge and a real icon tile rather than a caption. The hierarchy is the design. ---------------------------------------------------------------------- */ .ccapp-joinrow{ display:grid; gap:clamp(16px,2vw,24px); grid-template-columns:repeat(auto-fit,minmax(265px,1fr)); align-items:stretch; } .ccapp-join{ position:relative; display:flex; flex-direction:column; gap:10px; min-width:0; padding:28px 26px 26px; border-radius:18px; overflow:hidden; isolation:isolate; background:#fff; border:1px solid var(--ccapp-line); box-shadow:var(--ccapp-shadow-card,0 18px 40px -24px rgba(7,26,30,.45)); transition:transform .24s cubic-bezier(.2,.7,.2,1), box-shadow .24s ease; } .ccapp-join:hover{ transform:translateY(-6px); box-shadow:0 34px 62px -28px rgba(7,26,30,.55); } /* a permanent colour edge, not one that only appears on hover */ .ccapp-join::before{ content:""; position:absolute; inset:0 0 auto 0; height:5px; background:linear-gradient(90deg,var(--r-a,var(--b)) 0%,var(--r-b,var(--b-pop)) 100%); } .ccapp-join__ico{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; margin-bottom:2px; background:color-mix(in srgb, var(--r-a,var(--b)) 15%, #fff); color:var(--r-a,var(--b-600)); } .ccapp-join__ico svg{ width:23px; height:23px; } .ccapp-join__k{ font-family:var(--ccapp-font); font-size:11.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--r-a,var(--b-600)); } .ccapp-join__h{ font-family:var(--ccapp-font); font-weight:700; font-size:20px; line-height:1.25; color:var(--ccapp-ink); } .ccapp-join__p{ font-family:var(--ccapp-font); font-size:14.5px; line-height:1.6; color:var(--ccapp-ink-soft); margin:0; } .ccapp-join__price{ font-family:var(--ccapp-font); font-weight:800; font-size:34px; line-height:1; color:var(--ccapp-ink); font-variant-numeric:tabular-nums; margin-top:2px; } .ccapp-join__price small{ font-size:13.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ccapp-ink-soft); margin-left:7px; } .ccapp-join__go{ margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:9px; padding:12px 24px; border-radius:999px; text-decoration:none!important; font-family:var(--ccapp-font); font-weight:700; font-size:14.5px; background:color-mix(in srgb, var(--r-a,var(--b)) 12%, #fff); color:var(--r-a,var(--b-600))!important; transition:background .18s ease, transform .18s ease; } .ccapp-join__go:hover{ background:color-mix(in srgb, var(--r-a,var(--b)) 20%, #fff); transform:translateX(2px); } .ccapp-join__go:focus-visible{ outline:3px solid var(--r-a,var(--b)); outline-offset:3px; } /* the primary route carries the weight */ .ccapp-join--lead{ background:linear-gradient(145deg,var(--b-deep) 0%,var(--b-600) 60%,var(--b-mid) 100%); border-color:transparent; color:#fff; box-shadow:0 34px 66px -28px rgba(7,26,30,.7); } .ccapp-join--lead::before{ background:rgba(255,255,255,.5); } .ccapp-join--lead .ccapp-join__ico{ background:rgba(255,255,255,.18); color:#fff; } body #main-content .ccapp-join--lead .ccapp-join__k{ color:var(--b-pop)!important; } body #main-content .ccapp-join--lead .ccapp-join__h, body #main-content .ccapp-join--lead .ccapp-join__price{ color:#fff!important; } body #main-content .ccapp-join--lead .ccapp-join__p{ color:rgba(255,255,255,.88)!important; } body #main-content .ccapp-join--lead .ccapp-join__price small{ color:rgba(255,255,255,.75)!important; } .ccapp-join--lead .ccapp-join__go{ background:#fff; color:var(--b-deep)!important; } .ccapp-join--lead .ccapp-join__go:hover{ background:#EAF4F4; } /* a flag so it reads as the usual choice */ .ccapp-join__flag{ position:absolute; top:18px; right:18px; padding:4px 11px; border-radius:999px; background:rgba(255,255,255,.2); color:#fff; font-family:var(--ccapp-font); font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } /* per-route hues, all inside the Membership brand */ .ccapp-join[data-r="biz"] { --r-a:#016A71; --r-b:#00A9B4; } .ccapp-join[data-r="pac"] { --r-a:#0B3B40; --r-b:#1E958F; } @media (max-width:767px){ .ccapp-joinrow{ grid-template-columns:minmax(0,1fr); } .ccapp-join{ padding:24px 22px 22px; } } @media (prefers-reduced-motion:reduce){ .ccapp-join,.ccapp-join__go{ transition:none; } .ccapp-join:hover{ transform:none; } } /* ---------- 76. The About band, which was a wall of grey ------------- Larry: "also blah." It was two paragraphs of body copy on a pale band and nothing else - and the paragraphs were hiding every number CCAPP owns: 500,000 Californians a year, more than 100 program members, the majority of DHCS-licensed sites, the only statewide consortium covering every modality. Those are the proof. They belong at display size, not buried mid-sentence. .ccapp-stat already exists but is built for a dark band (white numerals), and this band is light; a third dark band on the page would also be one too many after the dashboard and the closing call to action. So this is its light twin. ---------------------------------------------------------------------- */ .ccapp-proof{ display:grid; gap:clamp(16px,2vw,24px); grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); margin:clamp(24px,3vw,34px) 0 0; } .ccapp-proof__i{ display:flex; flex-direction:column; gap:7px; min-width:0; padding:22px 20px 20px; border-radius:16px; background:#fff; border:1px solid var(--ccapp-line); box-shadow:var(--ccapp-shadow-card,0 18px 40px -24px rgba(7,26,30,.45)); position:relative; overflow:hidden; } .ccapp-proof__i::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg,var(--b) 0%,var(--b-pop) 100%); } .ccapp-proof__n{ font-family:var(--ccapp-font); font-weight:800; line-height:1; font-size:clamp(30px,3.4vw,42px); color:var(--b-600); font-variant-numeric:tabular-nums; letter-spacing:-.02em; } .ccapp-proof__n.is-word{ font-size:clamp(21px,2.2vw,27px); line-height:1.15; } .ccapp-proof__l{ font-family:var(--ccapp-font); font-size:13.5px; line-height:1.5; color:var(--ccapp-ink-soft); } @media (max-width:767px){ .ccapp-proof{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:420px){ .ccapp-proof{ grid-template-columns:minmax(0,1fr); } } /* ---------- 77. Partner logos on the benefit cards -------------------- Larry: "the partnership offers need their logos." The five that exist in the library have nothing in common dimensionally - BHAP is a 3600x3600 square, Van Wagner 1623x617, WeRecover a 500x500 JPEG on a white ground, HerdmanHealth a 259x43 wordmark and Affinity24 only 133x86. Dropped straight into a card they would each sit at a different size and baseline. So every logo sits on the same plate: a fixed-height box, contained, left aligned. Whatever the file's shape, the optical weight lines up across the row. The plate is white because two of these are supplied on white and would otherwise show a pale box against a tinted card. Affinity24 and HerdmanHealth are capped by their own resolution - the plate is deliberately short so neither is asked to scale past its pixels. ---------------------------------------------------------------------- */ .ccapp-ben__logo{ display:flex; align-items:center; justify-content:flex-start; height:46px; margin-bottom:6px; padding:6px 10px; width:fit-content; max-width:100%; background:#fff; border:1px solid var(--ccapp-line); border-radius:10px; } .ccapp-ben__logo img{ max-height:100%; max-width:170px; width:auto; height:auto; object-fit:contain; display:block; } /* a card with a logo does not also need the category mark */ .ccapp-ben:has(.ccapp-ben__logo) .ccapp-ben__ico{ display:none; } @media (max-width:767px){ .ccapp-ben__logo{ height:42px; } .ccapp-ben__logo img{ max-width:150px; } } /* ---------- 78. Small benefit cards, and the dialog behind Read more ------ The cards were sized by their longest neighbour, so "Two free e-blasts a year" - two sentences - sat in a box built for six, with a third of it empty. Rather than pad the short ones, every card now shows three clamped lines and a Read more button, and the full text moves into a dialog. The dialog is a real

element parked on the body, so Escape, the backdrop and the focus return are the browser's job, and no "#main-content p" rule can reach inside it and repaint the copy. Nothing on a card face links out any more. The old Learn more pointed at a mailto: address on one card and back at the current page on four others. The real destination, where there is one, now sits in the dialog next to a contact link that is always there. ------------------------------------------------------------------- */ /* --- 78a. the card, smaller --- */ .ccapp-bengrid{ grid-template-columns:repeat(auto-fit,minmax(216px,1fr)); gap:clamp(12px,1.4vw,16px); } .ccapp-ben{ padding:17px 16px 15px; gap:5px; border-radius:14px; } .ccapp-ben__ico{ width:34px; height:34px; border-radius:10px; margin-bottom:3px; } .ccapp-ben__ico svg{ width:17px; height:17px; } .ccapp-ben__tag{ padding:3px 9px; font-size:10px; } .ccapp-ben__n{ font-size:15.5px; line-height:1.32; } .ccapp-ben__d{ font-size:13.5px; line-height:1.55; margin:1px 0 0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; } .ccapp-ben__logo{ height:36px; padding:5px 9px; margin-bottom:4px; border-radius:9px; } .ccapp-ben__logo img{ max-width:132px; } /* the only control on a card face */ .ccapp-ben__more{ margin-top:auto; padding:9px 0 0; border:0; background:none; cursor:pointer; align-self:flex-start; display:inline-flex; align-items:center; gap:6px; font-family:var(--ccapp-font); font-weight:700; font-size:13.5px; color:var(--ben-a,var(--b-600)); } .ccapp-ben__more svg{ width:15px; height:15px; transition:transform .2s ease; } .ccapp-ben__more:hover svg{ transform:translateX(3px); } .ccapp-ben__more:focus-visible{ outline:3px solid var(--b); outline-offset:3px; border-radius:4px; } /* the two picture cards keep their photograph but lose their extra height */ .ccapp-ben--feature .ccapp-ben__body{ padding:18px 18px 15px; gap:5px; } .ccapp-ben--feature .ccapp-ben__n{ font-size:17px; } .ccapp-ben--feature .ccapp-ben__d{ -webkit-line-clamp:4; } /* the last two categories had no hue of their own and fell back to the section colour, which made partner offers look like everything else */ .ccapp-ben[data-c="reach"] { --ben-a:#00737C; --ben-b:#36C6C0; } .ccapp-ben[data-c="partner"]{ --ben-a:#114E66; --ben-b:#00A9B4; } /* --- 78b. the dialog ---------------------------------------------------- The band is the piece doing the work. A flat rectangle of brand colour reads as a placeholder, so it carries three things that cost nothing: a corner light, a thin arc struck through it, and the category set in white caps. The partner's logo then lifts off the band onto a plate with a real shadow, which is what makes the thing look built rather than generated. The actions sit on their own tinted shelf at the foot, so the dialog has a top, a middle and a bottom instead of one column of text. ------------------------------------------------------------------- */ /* The dialog fills the viewport and carries nothing of its own. Everything visible is the panel inside it, which is what makes "click the page to dismiss" work: any pointer landing on the dialog but not on the panel is a click on the page behind. */ .ccapp-benmodal{ position:fixed; inset:0; margin:0; padding:0; border:0; width:100vw; height:100vh; max-width:none; max-height:none; background:transparent; overflow:hidden; } .ccapp-benmodal[open]{ display:flex; align-items:center; justify-content:center; } .ccapp-benmodal__panel{ --ben-a:#008C95; --ben-b:#2AD2C9; position:relative; display:flex; flex-direction:column; overflow:hidden; width:min(600px, calc(100vw - 28px)); max-height:calc(100vh - 48px); border-radius:26px; background:#fff; color:var(--ccapp-ink); box-shadow:0 60px 110px -34px rgba(3,20,24,.68), 0 18px 40px -22px rgba(3,20,24,.5), 0 0 0 1px rgba(4,22,26,.06); } .ccapp-benmodal__panel[data-c="save"] { --ben-a:#008C95; --ben-b:#2AD2C9; } .ccapp-benmodal__panel[data-c="grow"] { --ben-a:#016A71; --ben-b:#00A9B4; } .ccapp-benmodal__panel[data-c="voice"] { --ben-a:#0B3B40; --ben-b:#1E958F; } .ccapp-benmodal__panel[data-c="reach"] { --ben-a:#00737C; --ben-b:#36C6C0; } .ccapp-benmodal__panel[data-c="partner"]{ --ben-a:#114E66; --ben-b:#00A9B4; } .ccapp-benmodal::backdrop{ background:radial-gradient(130% 120% at 50% -10%, rgba(1,62,68,.58) 0%, rgba(2,14,17,.82) 100%); backdrop-filter:blur(5px) saturate(1.2); -webkit-backdrop-filter:blur(5px) saturate(1.2); } /* entrance */ .ccapp-benmodal .ccapp-benmodal__panel{ opacity:0; transform:translateY(22px) scale(.962); } .ccapp-benmodal.is-in .ccapp-benmodal__panel{ opacity:1; transform:none; transition:opacity .3s ease, transform .44s cubic-bezier(.18,.84,.24,1); } /* ---- the band ---- */ .ccapp-benmodal__hd{ position:relative; height:124px; flex:0 0 auto; overflow:hidden; background: repeating-linear-gradient(135deg, rgba(255,255,255,.055) 0 2px, rgba(255,255,255,0) 2px 9px), linear-gradient(118deg, var(--ben-a) 0%, var(--ben-b) 100%); } .ccapp-benmodal__hd.is-shot{ height:216px; } .ccapp-benmodal__hd img{ width:100%; height:100%; object-fit:cover; display:block; } .ccapp-benmodal__hd.is-shot::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(3,20,24,.10) 0%, rgba(3,20,24,0) 40%, rgba(3,20,24,.58) 100%); } /* a light in the corner, so the band is not flat */ .ccapp-benmodal__glow{ position:absolute; width:320px; height:320px; right:-90px; top:-190px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.48) 0%, rgba(255,255,255,0) 68%); pointer-events:none; } /* one hairline arc struck through it */ .ccapp-benmodal__arc{ position:absolute; width:420px; height:420px; right:-130px; bottom:-300px; border-radius:50%; border:1.5px solid rgba(255,255,255,.3); pointer-events:none; } .ccapp-benmodal__hd.is-shot .ccapp-benmodal__glow, .ccapp-benmodal__hd.is-shot .ccapp-benmodal__arc{ display:none; } /* the category, in the band */ .ccapp-benmodal__eyebrow{ position:absolute; left:30px; top:21px; z-index:2; font-family:var(--ccapp-font); font-size:11px; font-weight:800; letter-spacing:.17em; text-transform:uppercase; color:#fff; text-shadow:0 1px 10px rgba(3,20,24,.35); } .ccapp-benmodal__hd.is-shot .ccapp-benmodal__eyebrow{ top:auto; bottom:20px; } /* Solid white on a coloured band, never a ghost button - the first thing anyone looks for is the way out. */ .ccapp-benmodal__x{ position:absolute; top:15px; right:15px; z-index:6; width:42px; height:42px; border-radius:50%; cursor:pointer; display:grid; place-items:center; background:#fff; color:#0B3B40; border:1px solid rgba(4,22,26,.1); box-shadow:0 10px 24px -8px rgba(3,20,24,.55); transition:background .18s ease, transform .22s ease, color .18s ease; } .ccapp-benmodal__x svg{ width:19px; height:19px; } .ccapp-benmodal__x:hover{ background:var(--ccapp-ink); color:#fff; transform:rotate(90deg); } .ccapp-benmodal__x:focus-visible{ outline:3px solid #fff; outline-offset:3px; } /* and a plain-language way out at the foot, for anyone who does not look at the corner */ .ccapp-benmodal__close{ margin-left:auto; border:0; background:none; cursor:pointer; padding:6px 2px; font-family:var(--ccapp-font); font-weight:600; font-size:14px; color:var(--ccapp-ink-soft); text-decoration:underline; text-underline-offset:3px; } .ccapp-benmodal__close:hover{ color:var(--ccapp-ink); } .ccapp-benmodal__close:focus-visible{ outline:3px solid var(--b); outline-offset:3px; border-radius:4px; } /* ---- the middle ---- */ .ccapp-benmodal__in{ position:relative; flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding:50px 32px 26px; display:flex; flex-direction:column; align-items:flex-start; } /* The plate hangs off the band, so it cannot live inside the scrolling middle - that box clips it. It is positioned against the panel instead, and the middle is padded to clear it. */ .ccapp-benmodal__mark{ position:absolute; left:32px; top:86px; z-index:5; } .ccapp-benmodal__panel.has-shot .ccapp-benmodal__mark{ top:178px; } .ccapp-benmodal__mark .ccapp-ben__logo{ height:72px; padding:11px 18px; margin:0; border-radius:16px; border:1px solid rgba(4,22,26,.07); box-shadow:0 20px 38px -16px rgba(3,20,24,.46), 0 2px 6px -2px rgba(3,20,24,.18); } .ccapp-benmodal__mark .ccapp-ben__logo img{ max-width:210px; } .ccapp-benmodal__mark .ccapp-ben__ico{ width:72px; height:72px; border-radius:20px; margin:0; background:#fff; border:1px solid rgba(4,22,26,.07); color:var(--ben-a); box-shadow:0 20px 38px -16px rgba(3,20,24,.46), 0 2px 6px -2px rgba(3,20,24,.18); } .ccapp-benmodal__mark .ccapp-ben__ico svg{ width:32px; height:32px; } .ccapp-benmodal__n{ font-family:var(--ccapp-font); font-weight:800; font-size:clamp(23px,2.6vw,29px); line-height:1.17; color:var(--ccapp-ink); margin:0 0 11px; letter-spacing:-.018em; max-width:20ch; } /* a short brand rule under the title, so the copy has something to hang from */ .ccapp-benmodal__n::after{ content:""; display:block; width:46px; height:3px; border-radius:3px; margin-top:13px; background:linear-gradient(90deg, var(--ben-a) 0%, var(--ben-b) 100%); } .ccapp-benmodal__d{ font-family:var(--ccapp-font); font-size:16.5px; line-height:1.74; color:var(--ccapp-ink-soft); margin:0; max-width:54ch; } /* ---- the shelf at the foot ---- */ .ccapp-benmodal__act{ flex:0 0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:11px 20px; padding:19px 32px; width:100%; background:linear-gradient(180deg,#F3FAFA 0%,#EDF7F7 100%); border-top:1px solid rgba(4,22,26,.075); } .ccapp-benmodal__go{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; padding:13px 24px; border-radius:999px; font-family:var(--ccapp-font); font-weight:700; font-size:15.5px; color:#fff; background:linear-gradient(118deg,var(--ben-a) 0%,var(--ben-b) 100%); box-shadow:0 16px 28px -14px rgba(3,20,24,.62); transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; } .ccapp-benmodal__go svg{ width:16px; height:16px; transition:transform .2s ease; } .ccapp-benmodal__go:hover{ transform:translateY(-2px); filter:saturate(1.1); color:#fff; box-shadow:0 24px 38px -16px rgba(3,20,24,.66); } .ccapp-benmodal__go:hover svg{ transform:translateX(3px); } .ccapp-benmodal__go:focus-visible{ outline:3px solid var(--ben-a); outline-offset:3px; } .ccapp-benmodal__ask{ display:inline-flex; align-items:center; gap:7px; text-decoration:none; font-family:var(--ccapp-font); font-weight:700; font-size:14.5px; color:var(--b-600); border-bottom:2px solid transparent; padding-bottom:1px; } .ccapp-benmodal__ask svg{ width:16px; height:16px; } .ccapp-benmodal__ask:hover{ color:var(--b-deep,#024548); border-bottom-color:currentColor; } .ccapp-benmodal__ask:focus-visible{ outline:3px solid var(--b); outline-offset:3px; border-radius:3px; } @media (max-width:600px){ .ccapp-benmodal__panel{ width:calc(100vw - 20px); border-radius:20px; max-height:calc(100dvh - 30px); } .ccapp-benmodal__hd{ height:104px; } .ccapp-benmodal__hd.is-shot{ height:172px; } .ccapp-benmodal__eyebrow{ left:22px; top:18px; } .ccapp-benmodal__in{ padding:40px 22px 22px; } .ccapp-benmodal__mark{ left:22px; top:72px; } .ccapp-benmodal__panel.has-shot .ccapp-benmodal__mark{ top:140px; } .ccapp-benmodal__mark .ccapp-ben__logo{ height:60px; padding:9px 14px; } .ccapp-benmodal__mark .ccapp-ben__logo img{ max-width:168px; } .ccapp-benmodal__mark .ccapp-ben__ico{ width:60px; height:60px; border-radius:17px; } .ccapp-benmodal__n{ max-width:none; } .ccapp-benmodal__d{ font-size:15.5px; } .ccapp-benmodal__act{ padding:16px 22px; } .ccapp-benmodal__go{ width:100%; justify-content:center; } } @media (prefers-reduced-motion:reduce){ .ccapp-benmodal{ opacity:1; transform:none; transition:none; } .ccapp-benmodal__go,.ccapp-benmodal__x,.ccapp-ben__more svg{ transition:none; } .ccapp-benmodal .ccapp-benmodal__panel{ opacity:1; transform:none; transition:none; } } /* ---------- 79. The footnote under the headline price ------------------- The $4,500 tile read as the price of program membership. It is not: it is $500 for the organization plus an individual membership for every credentialed person, and paying those is the program's choice. The note carries that, set quieter than the body copy but not so quiet it reads as small print. ------------------------------------------------------------------- */ .ccapp-vs__note{ font-family:var(--ccapp-font); font-size:13.5px; line-height:1.6; margin:11px 0 0; padding-top:11px; border-top:1px solid rgba(4,22,26,.1); color:var(--ccapp-ink-soft); } .ccapp-vs__note b{ font-weight:700; color:var(--ccapp-ink); } .ccapp-vs__i--ours .ccapp-vs__note{ border-top-color:rgba(4,22,26,.14); } /* ---------- 80. Three things the first cut of 78 got wrong --------------- 1. Section 70 set grid-auto-rows:1fr, so EVERY row in the grid took the height of the tallest row - and the tallest row is whichever one holds a picture card. Sixteen short cards were being sized by two tall ones. Rows now size themselves; cards still match their own row. 2. A 36px logo plate is below the floor for Affinity24 and Van Wagner, whose marks are nearly square. 44px reads. 3. The dialog scrolled on its inner box, which clipped the logo plate where it lifts onto the header band. The dialog itself scrolls now. ------------------------------------------------------------------- */ .ccapp-bengrid{ grid-auto-rows:auto; } .ccapp-ben__logo{ height:44px; padding:5px 10px; } .ccapp-ben__logo img{ max-width:148px; } /* the individual page's three ways in use the same component; its two secondary cards need their own hues */ .ccapp-join[data-r="bens"]{ --r-a:#016A71; --r-b:#00A9B4; } .ccapp-join[data-r="calc"]{ --r-a:#0B3B40; --r-b:#1E958F; } /* ---------- 81. The savings comparison, and a centring bug in the CTA ---- The comparison used to be two static tiles reading $4,500 against $6,000-$12,000+. It is now a calculator: headcount in, both sides out, with the per-seat side priced off Relias's own published figures. The layout has three bands - inputs, the two columns, the result - so the answer has somewhere to land instead of sitting inside a card. The CTA buttons: Divi renders each button module as an inline-block wrapper, and section 33 gave them a right margin only. They inherited the column's text-align: start, so the pair sat left of centre under a centred headline, offset a further 7px by the asymmetric margin. ------------------------------------------------------------------- */ /* --- 81a. the CTA buttons, centred and evenly spaced --- */ .ccapp-cta .et_pb_column{ text-align:center!important; } .ccapp-cta .et_pb_button_module_wrapper{ margin:16px 7px 0!important; } /* --- 81b. the comparison --- */ .ccapp-save{ background:linear-gradient(180deg,#FFFFFF 0%,#F6FBFB 100%); border:1px solid var(--ccapp-line); border-radius:22px; overflow:hidden; box-shadow:var(--ccapp-shadow-card,0 18px 40px -24px rgba(7,26,30,.45)); } /* inputs */ .ccapp-save__in{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 26px; padding:24px 26px; background:#fff; border-bottom:1px solid var(--ccapp-line); } .ccapp-save__f{ display:flex; flex-direction:column; gap:6px; min-width:0; } .ccapp-save__f label{ font-family:var(--ccapp-font); font-weight:700; font-size:14px; color:var(--ccapp-ink); } .ccapp-save__f input[type="number"]{ font-family:var(--ccapp-font); font-weight:800; font-size:26px; color:var(--ccapp-ink); width:100%; max-width:170px; padding:9px 13px; border-radius:11px; border:1.5px solid var(--ccapp-line); background:#fff; } .ccapp-save__f input[type="number"]:focus{ outline:none; border-color:var(--b); box-shadow:0 0 0 4px color-mix(in srgb,var(--b) 18%,#fff); } .ccapp-save__h{ font-family:var(--ccapp-font); font-size:12.5px; line-height:1.5; color:var(--ccapp-ink-soft); } .ccapp-save__opt{ grid-column:1 / -1; display:flex; align-items:flex-start; gap:11px; cursor:pointer; padding:13px 15px; border-radius:13px; background:#F3FAFA; border:1px solid var(--ccapp-line); font-family:var(--ccapp-font); font-size:13.5px; line-height:1.6; color:var(--ccapp-ink-soft); } .ccapp-save__opt input{ width:18px; height:18px; margin-top:2px; flex:0 0 auto; accent-color:var(--b); } .ccapp-save__opt b{ color:var(--ccapp-ink); font-weight:700; } /* the two columns */ .ccapp-save__cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; } .ccapp-save__c{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; padding:24px 26px 22px; border-right:1px solid var(--ccapp-line); } .ccapp-save__c:last-child{ border-right:0; } .ccapp-save__c--ours{ background:linear-gradient(145deg,#0A2F33 0%,#0B3B40 48%,#016A71 100%); border-right-color:rgba(255,255,255,.14); } .ccapp-save__k{ font-family:var(--ccapp-font); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--b-600); } .ccapp-save__n{ font-family:var(--ccapp-font); font-weight:800; font-size:clamp(30px,3.4vw,40px); line-height:1.06; letter-spacing:-.02em; color:var(--ccapp-ink); } .ccapp-save__per{ font-family:var(--ccapp-font); font-size:13px; font-weight:600; color:var(--ccapp-ink-soft); } .ccapp-save__l{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:9px; width:100%; } body #main-content .ccapp-save__l li{ font-family:var(--ccapp-font); font-size:13.5px; line-height:1.6; color:var(--ccapp-ink-soft); margin:0; padding-left:25px; position:relative; list-style:none; } body #main-content .ccapp-save__l li::before{ content:""; position:absolute; left:0; top:7px; width:15px; height:15px; border-radius:50%; background:color-mix(in srgb,var(--b) 16%,#fff); box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--b) 42%,#fff); } body #main-content .ccapp-save__l li.is-no::before{ background:#FBEDED; box-shadow:inset 0 0 0 1.5px #E7B4B4; } body #main-content .ccapp-save__l li b{ color:var(--ccapp-ink); font-weight:700; } .ccapp-save__tag{ margin-top:15px; padding:6px 12px; border-radius:999px; font-family:var(--ccapp-font); font-size:12px; font-weight:700; background:#FBEDED; color:#8A3A3A; } .ccapp-save__tag--ok{ background:#E6F5F3; color:var(--b-deep,#024548); } /* our column is dark, so its type is pinned past the section rules */ body #main-content .ccapp-save__c--ours .ccapp-save__k{ color:var(--b-pop)!important; } body #main-content .ccapp-save__c--ours .ccapp-save__n{ color:#fff!important; } body #main-content .ccapp-save__c--ours .ccapp-save__per{ color:rgba(255,255,255,.78)!important; } body #main-content .ccapp-save__c--ours .ccapp-save__l li{ color:rgba(255,255,255,.88)!important; } body #main-content .ccapp-save__c--ours .ccapp-save__l li b{ color:#fff!important; } body #main-content .ccapp-save__c--ours .ccapp-save__l li::before{ background:rgba(255,255,255,.16); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55); } body #main-content .ccapp-save__c--ours .ccapp-save__tag{ background:rgba(255,255,255,.16); color:#fff!important; } /* the answer */ .ccapp-save__out{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 28px; padding:22px 26px; border-top:1px solid var(--ccapp-line); background:linear-gradient(180deg,#F0F9F9 0%,#E8F5F5 100%); } .ccapp-save__outi{ display:flex; flex-direction:column; gap:3px; min-width:0; } .ccapp-save__ok{ font-family:var(--ccapp-font); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--b-600); } .ccapp-save__big{ font-family:var(--ccapp-font); font-weight:800; font-size:clamp(26px,3vw,36px); line-height:1.1; letter-spacing:-.02em; color:var(--ccapp-ink); } .ccapp-save__yr1{ font-family:var(--ccapp-font); font-size:13.5px; font-weight:600; color:var(--ccapp-ink-soft); } body #main-content .ccapp-save__note{ flex:1 1 260px; font-family:var(--ccapp-font); font-size:13.5px; line-height:1.65; color:var(--ccapp-ink-soft); margin:0; } body #main-content .ccapp-save__src{ font-family:var(--ccapp-font); font-size:12px; line-height:1.65; color:var(--ccapp-ink-soft); margin:0; padding:15px 26px 18px; background:#fff; border-top:1px solid var(--ccapp-line); } .ccapp-save__src a{ color:var(--b-600); text-decoration:underline; text-underline-offset:2px; } @media (max-width:860px){ .ccapp-save__in{ grid-template-columns:minmax(0,1fr); } .ccapp-save__cols{ grid-template-columns:minmax(0,1fr); } .ccapp-save__c{ border-right:0; border-bottom:1px solid var(--ccapp-line); } .ccapp-save__c--ours{ border-bottom-color:rgba(255,255,255,.14); } .ccapp-save__c:last-child{ border-bottom:0; } } /* ---------- 82. The individual calculator, now that it counts everything -- It used to count credentialing discounts only - the one benefit a member might not use in a given year, which made the answer look thin. It now counts the magazine, the NBHAP dual membership, the conference rate and the free CE hours as well, in two groups: what lands the day you join, and what you tick. ------------------------------------------------------------------- */ body #main-content .ccapp-calc__lede{ font-family:var(--ccapp-font); font-size:14px; line-height:1.6; color:var(--ccapp-ink-soft); margin:0 0 12px; } .ccapp-calc__grp{ display:block; margin:16px 0 4px; font-family:var(--ccapp-font); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--b-600); } .ccapp-calc__grp:first-child{ margin-top:0; } /* the two that come with membership read as settled, not as choices */ .ccapp-calc__o.is-fixed{ background:#F4FAFA; border-radius:10px; padding-left:12px; padding-right:12px; } .ccapp-calc__o.is-fixed input{ cursor:default; accent-color:var(--b-600); } .ccapp-calc__o.is-fixed .ccapp-calc__n::after{ content:"Included"; margin-left:8px; padding:2px 8px; border-radius:999px; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; background:#E6F5F3; color:var(--b-deep,#024548); vertical-align:1px; } .ccapp-calc__inputs{ display:grid; gap:0; } .ccapp-calc__inputs .ccapp-calc__fee{ margin-top:14px; } .ccapp-calc__fee label{ flex:1 1 220px; } body #main-content .ccapp-calc__fine{ font-size:12.5px!important; line-height:1.6; margin:14px 0 0; padding-top:13px; border-top:1px solid rgba(255,255,255,.22); opacity:.82; } /* ---------- 83. Two layout follow-ups ---------------------------------- The comparison's two footers sat at different heights because one column has five bullets and the other four; both now sit on the floor of their column. And the calculator's answer panel is a third the height of the list beside it, which left a column of empty white - it follows the list down instead. ------------------------------------------------------------------- */ .ccapp-save__tag{ margin-top:auto; } .ccapp-save__l{ margin-bottom:15px; } @media (min-width:860px){ .ccapp-calc__panel{ position:sticky; top:104px; } } .ccapp-calc__fee{ justify-content:space-between; gap:12px; } .ccapp-calc__fee label{ flex:1 1 auto; max-width:none; } /* ---------- 84. Room for the two squarish partner marks ------------------ Van Wagner's lockup is a stacked emblem over a wordmark and Affinity24's is nearly square, so a plate sized for a wide wordmark shrank both until their type was unreadable. Height goes up, width is capped, and the wide marks stay exactly where they were because the width cap, not the height, is what binds them. ------------------------------------------------------------------- */ .ccapp-ben__logo{ height:52px; padding:5px 11px; } .ccapp-ben__logo img{ max-width:160px; } .ccapp-benmodal__mark .ccapp-ben__logo{ height:80px; padding:12px 18px; } .ccapp-benmodal__mark .ccapp-ben__logo img{ max-width:230px; } .ccapp-benmodal__mark{ top:82px; } .ccapp-benmodal__panel.has-shot .ccapp-benmodal__mark{ top:174px; } .ccapp-benmodal__in{ padding-top:56px; } @media (max-width:767px){ .ccapp-ben__logo{ height:46px; } .ccapp-ben__logo img{ max-width:140px; } } @media (max-width:600px){ .ccapp-benmodal__mark{ top:68px; } .ccapp-benmodal__panel.has-shot .ccapp-benmodal__mark{ top:136px; } .ccapp-benmodal__mark .ccapp-ben__logo{ height:66px; padding:9px 14px; } .ccapp-benmodal__mark .ccapp-ben__logo img{ max-width:180px; } .ccapp-benmodal__in{ padding-top:46px; } } /* On the photo header the category sat bottom-left, which is exactly where the mark plate lands. It moves to the opposite corner. */ .ccapp-benmodal__hd.is-shot .ccapp-benmodal__eyebrow{ left:auto; right:30px; top:auto; bottom:20px; } @media (max-width:600px){ .ccapp-benmodal__hd.is-shot .ccapp-benmodal__eyebrow{ right:22px; bottom:16px; } } /* ---------- 85. The benefit half of the comparison ---------------------- Larry: "the savings is just the compliance channel savings, we have many other benefits that give savings to our program members." So the block grew a fourth band listing those at CCAPP's own published values, and the result band now shows the two halves side by side rather than one number nobody can take apart. ------------------------------------------------------------------- */ .ccapp-save__plus{ padding:24px 26px 22px; background:#fff; border-top:1px solid var(--ccapp-line); } .ccapp-save__plusk{ display:block; font-family:var(--ccapp-font); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--b-600); } body #main-content .ccapp-save__plusd{ font-family:var(--ccapp-font); font-size:13.5px; line-height:1.6; color:var(--ccapp-ink-soft); margin:7px 0 14px; max-width:62ch; } .ccapp-save__bl{ display:grid; gap:0; } .ccapp-save__b{ display:flex; align-items:flex-start; gap:12px; cursor:pointer; padding:11px 0; border-bottom:1px solid var(--ccapp-line); } .ccapp-save__b:last-child{ border-bottom:0; } .ccapp-save__b.is-fixed{ background:#F4FAFA; border-radius:10px; padding-left:12px; padding-right:12px; border-bottom:1px solid #E4F0F0; } .ccapp-save__b.is-fixed input{ cursor:default; } .ccapp-save__b input{ width:18px; height:18px; margin-top:2px; flex:0 0 auto; accent-color:var(--b); cursor:pointer; } .ccapp-save__b span:nth-child(2){ flex:1 1 auto; min-width:0; } .ccapp-save__bn{ display:block; font-family:var(--ccapp-font); font-weight:600; font-size:15px; color:var(--ccapp-ink); } .ccapp-save__b.is-fixed .ccapp-save__bn::after{ content:"Included"; margin-left:8px; padding:2px 8px; border-radius:999px; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; background:#E6F5F3; color:var(--b-deep,#024548); vertical-align:1px; } .ccapp-save__bd{ display:block; margin-top:2px; font-family:var(--ccapp-font); font-size:13px; line-height:1.5; color:var(--ccapp-ink-soft); } .ccapp-save__bv{ flex:0 0 auto; font-family:var(--ccapp-font); font-weight:800; font-size:15.5px; color:var(--b-600); white-space:nowrap; } .ccapp-save__acad{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:16px; padding-top:16px; border-top:1px solid var(--ccapp-line); } .ccapp-save__acad label{ flex:1 1 240px; font-family:var(--ccapp-font); font-weight:600; font-size:15px; color:var(--ccapp-ink); } .ccapp-save__acad input[type="number"]{ font-family:var(--ccapp-font); font-weight:800; font-size:20px; color:var(--ccapp-ink); width:104px; padding:7px 11px; border-radius:10px; border:1.5px solid var(--ccapp-line); background:#fff; } .ccapp-save__acad input[type="number"]:focus{ outline:none; border-color:var(--b); box-shadow:0 0 0 4px color-mix(in srgb,var(--b) 18%,#fff); } .ccapp-save__acad .ccapp-save__h{ flex:1 1 100%; } .ccapp-save__btot{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-top:16px; padding-top:14px; border-top:2px solid var(--ccapp-ink); font-family:var(--ccapp-font); font-weight:800; font-size:17px; color:var(--ccapp-ink); } .ccapp-save__btot span:last-child{ font-size:22px; color:var(--b-600); } /* the result band carries the two halves */ .ccapp-save__split{ display:grid; gap:9px; flex:1 1 280px; min-width:0; } .ccapp-save__sp{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; font-family:var(--ccapp-font); font-size:13.5px; color:var(--ccapp-ink-soft); padding-bottom:8px; border-bottom:1px solid rgba(4,22,26,.1); } .ccapp-save__sp:last-child{ border-bottom:0; padding-bottom:0; } .ccapp-save__spk{ min-width:0; } .ccapp-save__spv{ font-weight:800; color:var(--ccapp-ink); white-space:nowrap; } @media (max-width:560px){ .ccapp-save__bv{ font-size:14.5px; } .ccapp-save__btot{ font-size:15.5px; } .ccapp-save__btot span:last-child{ font-size:20px; } } /* ---------- 86. Dues against the other provider memberships ------------- Three tiles, ranked: ours carries the colour and the price that wins, the other two are quiet white cards. The NBHAP tile is the one that does the work, so its number is allowed to sit at the same weight as ours. ------------------------------------------------------------------- */ .ccapp-dues3{ margin-top:clamp(26px,3vw,38px); } .ccapp-dues3__k{ display:block; font-family:var(--ccapp-font); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--b-600); } body #main-content .ccapp-dues3__d{ font-family:var(--ccapp-font); font-size:15px; line-height:1.65; color:var(--ccapp-ink-soft); margin:8px 0 18px; max-width:68ch; } .ccapp-dues3__row{ display:grid; gap:clamp(13px,1.6vw,18px); grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); } .ccapp-dues3__i{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:5px; padding:22px 22px 20px; border-radius:16px; background:#fff; border:1px solid var(--ccapp-line); box-shadow:var(--ccapp-shadow-card,0 18px 40px -24px rgba(7,26,30,.45)); } .ccapp-dues3__i::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg,var(--b) 0%,var(--b-pop) 100%); } .ccapp-dues3__i--ours{ background:linear-gradient(145deg,#0A2F33 0%,#0B3B40 48%,#016A71 100%); border-color:transparent; } .ccapp-dues3__i--ours::before{ background:rgba(255,255,255,.5); } .ccapp-dues3__o{ font-family:var(--ccapp-font); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--b-600); } .ccapp-dues3__n{ font-family:var(--ccapp-font); font-weight:800; font-size:clamp(28px,3vw,34px); line-height:1.08; letter-spacing:-.02em; color:var(--ccapp-ink); display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; } .ccapp-dues3__n small{ font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ccapp-ink-soft); } body #main-content .ccapp-dues3__p{ font-family:var(--ccapp-font); font-size:13.5px; line-height:1.62; color:var(--ccapp-ink-soft); margin:7px 0 0; } body #main-content .ccapp-dues3__i--ours .ccapp-dues3__o{ color:var(--b-pop)!important; } body #main-content .ccapp-dues3__i--ours .ccapp-dues3__n{ color:#fff!important; } body #main-content .ccapp-dues3__i--ours .ccapp-dues3__n small{ color:rgba(255,255,255,.75)!important; } body #main-content .ccapp-dues3__i--ours .ccapp-dues3__p{ color:rgba(255,255,255,.88)!important; } body #main-content .ccapp-dues3__src{ font-family:var(--ccapp-font); font-size:12px; line-height:1.65; color:var(--ccapp-ink-soft); margin:14px 0 0; } .ccapp-dues3__src a{ color:var(--b-600); text-decoration:underline; text-underline-offset:2px; } /* two tiles rather than four, and each carries a closing line */ .ccapp-dues3__row--two{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); } .ccapp-dues3__i{ justify-content:flex-start; } .ccapp-dues3__tag{ margin-top:auto; padding-top:15px; align-self:flex-start; font-family:var(--ccapp-font); font-size:12.5px; font-weight:700; color:#8A3A3A; } .ccapp-dues3__tag--ok{ color:var(--b-deep,#024548); } body #main-content .ccapp-dues3__i--ours .ccapp-dues3__tag{ color:#fff!important; opacity:.92; } /* ---------- 87. The advocacy band --------------------------------------- Larry: "add our local and national advocacy, we don't charge for that and we advocate on your behalf. lobbyists are expensive." It is deliberately NOT summed into the benefit total. A program would never retain its own lobbyist, so adding six figures to a savings figure would read as a trick and take the credible half down with it. It gets its own band instead, where the number can be large and still honest. ------------------------------------------------------------------- */ .ccapp-save__adv{ position:relative; overflow:hidden; margin-top:18px; padding:20px 22px; border-radius:16px; isolation:isolate; background:linear-gradient(145deg,#0A2F33 0%,#0B3B40 50%,#016A71 100%); } .ccapp-save__adv::before{ content:""; position:absolute; width:300px; height:300px; right:-110px; top:-180px; border-radius:50%; pointer-events:none; z-index:-1; background:radial-gradient(circle, rgba(255,255,255,.17) 0%, rgba(255,255,255,0) 70%); } .ccapp-save__advk{ display:block; font-family:var(--ccapp-font); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } body #main-content .ccapp-save__advk{ color:var(--b-pop)!important; } body #main-content .ccapp-save__advp{ font-family:var(--ccapp-font); font-size:14.5px; line-height:1.68; margin:8px 0 0; color:rgba(255,255,255,.9)!important; max-width:74ch; } body #main-content .ccapp-save__advp b{ color:#fff!important; font-weight:700; } /* ---------- 88. The Academy band ---------------------------------------- What replaced the three grey cards. One photograph, one dark panel, two numbers that are allowed to be large. The picture is a real one of people studying rather than a stock metaphor, because a page selling workforce development should not illustrate it with a jigsaw. ------------------------------------------------------------------- */ .ccapp-acad{ display:grid; grid-template-columns:minmax(0,42fr) minmax(0,58fr); margin-top:clamp(26px,3vw,38px); border-radius:20px; overflow:hidden; isolation:isolate; box-shadow:0 34px 70px -34px rgba(4,22,26,.6), 0 0 0 1px rgba(4,22,26,.06); } .ccapp-acad__shot{ position:relative; min-height:300px; overflow:hidden; } .ccapp-acad__shot img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1); } .ccapp-acad:hover .ccapp-acad__shot img{ transform:scale(1.045); } /* the photograph meets the panel on a soft edge rather than a hard seam */ .ccapp-acad__shot::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,47,51,.28) 0%, rgba(10,47,51,0) 42%, rgba(10,47,51,.34) 100%); } .ccapp-acad__body{ position:relative; display:flex; flex-direction:column; align-items:flex-start; padding:clamp(26px,3vw,40px); background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, rgba(255,255,255,0) 2px 10px), linear-gradient(142deg,#0A2F33 0%,#0B3B40 50%,#016A71 100%); } .ccapp-acad__body::before{ content:""; position:absolute; width:340px; height:340px; right:-120px; top:-190px; border-radius:50%; pointer-events:none; z-index:0; background:radial-gradient(circle, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 70%); } .ccapp-acad__body > *{ position:relative; z-index:1; } .ccapp-acad__k{ font-family:var(--ccapp-font); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; } body #main-content .ccapp-acad__k{ color:var(--b-pop)!important; } body #main-content .ccapp-acad__h{ font-family:var(--ccapp-font); font-weight:800; font-size:clamp(23px,2.7vw,31px); line-height:1.16; letter-spacing:-.018em; color:#fff!important; margin:9px 0 0; max-width:19ch; } body #main-content .ccapp-acad__p{ font-family:var(--ccapp-font); font-size:15.5px; line-height:1.68; margin:13px 0 0; color:rgba(255,255,255,.88)!important; max-width:52ch; } body #main-content .ccapp-acad__p b{ color:#fff!important; font-weight:700; } .ccapp-acad__facts{ display:flex; flex-wrap:wrap; gap:14px 40px; margin:20px 0 0; padding-top:18px; border-top:1px solid rgba(255,255,255,.2); width:100%; } .ccapp-acad__f{ display:flex; flex-direction:column; gap:3px; min-width:0; } .ccapp-acad__n{ font-family:var(--ccapp-font); font-weight:800; font-size:clamp(28px,3.1vw,36px); line-height:1; letter-spacing:-.02em; } body #main-content .ccapp-acad__n{ color:#fff!important; } .ccapp-acad__l{ font-family:var(--ccapp-font); font-size:12.5px; line-height:1.45; max-width:22ch; } body #main-content .ccapp-acad__l{ color:rgba(255,255,255,.76)!important; } .ccapp-acad__go{ display:inline-flex; align-items:center; gap:9px; margin-top:22px; padding:12px 22px; border-radius:999px; text-decoration:none; font-family:var(--ccapp-font); font-weight:700; font-size:15px; background:#fff; color:var(--b-deep,#024548)!important; transition:transform .18s ease, background .18s ease; } .ccapp-acad__go svg{ width:15px; height:15px; } .ccapp-acad__go:hover{ background:#E7F4F4; transform:translateY(-2px); } .ccapp-acad__go:focus-visible{ outline:3px solid #fff; outline-offset:3px; } @media (max-width:900px){ .ccapp-acad{ grid-template-columns:minmax(0,1fr); } .ccapp-acad__shot{ min-height:0; height:220px; } .ccapp-acad__shot::after{ background:linear-gradient(180deg, rgba(10,47,51,.2) 0%, rgba(10,47,51,0) 50%, rgba(10,47,51,.3) 100%); } } @media (prefers-reduced-motion:reduce){ .ccapp-acad__shot img,.ccapp-acad__go{ transition:none; } .ccapp-acad:hover .ccapp-acad__shot img{ transform:none; } } /* ---------- 89. The credentialing half of the dashboard ----------------- The compliance dashboard page was written when the dashboard only tracked training. Credentialing merged into it, and credentialing is a different shape: training is binary, a credential can be current and never have been checked by anyone. These three components carry that distinction - a board with a Verified column, the three facts that matter, and the verification panel that is deliberately honest about what a machine can and cannot do. ------------------------------------------------------------------- */ /* --- 89a. the board --- */ .ccapp-cred{ border:1px solid var(--ccapp-line); border-radius:18px; overflow:hidden; background:#fff; box-shadow:var(--ccapp-shadow-card,0 18px 40px -24px rgba(7,26,30,.45)); } .ccapp-cred__bar{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 20px; background:linear-gradient(145deg,#0A2F33 0%,#0B3B40 55%,#016A71 100%); font-family:var(--ccapp-font); font-weight:700; font-size:14.5px; color:#fff; } .ccapp-cred__pill{ padding:4px 12px; border-radius:999px; background:rgba(255,255,255,.18); font-size:12px; font-weight:700; } .ccapp-cred__grid{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr); font-family:var(--ccapp-font); font-size:14px; color:var(--ccapp-ink-soft); } .ccapp-cred__grid > *{ padding:13px 16px; border-bottom:1px solid var(--ccapp-line); min-width:0; } .ccapp-cred__grid > *:nth-last-child(-n+4){ border-bottom:0; } .ccapp-cred__h{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--b-600); background:#F4FAFA; } .ccapp-cred__n{ font-weight:700; color:var(--ccapp-ink); } .ccapp-cred__grid .is-soon{ color:#8A5A00; font-weight:700; } .ccapp-cred__grid .is-late{ color:#8A3A3A; font-weight:700; } .ccapp-cred__s{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700; background:#EDEFEF; color:var(--ccapp-ink-soft); } .ccapp-cred__s.is-ok { background:#E6F5F3; color:var(--b-deep,#024548); } .ccapp-cred__s.is-wait{ background:#FBF2E0; color:#7A5300; } .ccapp-cred__s.is-late{ background:#FBEDED; color:#8A3A3A; } /* --- 89b. the three facts --- */ .ccapp-credf{ display:grid; gap:clamp(13px,1.6vw,18px); margin-top:clamp(20px,2.4vw,28px); grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); } .ccapp-credf__i{ display:flex; flex-direction:column; gap:5px; padding:22px 20px 20px; background:#fff; border:1px solid var(--ccapp-line); border-radius:15px; box-shadow:var(--ccapp-shadow-card,0 18px 40px -24px rgba(7,26,30,.45)); } .ccapp-credf__n{ font-family:var(--ccapp-font); font-weight:800; font-size:38px; line-height:1; letter-spacing:-.02em; color:var(--b-600); } .ccapp-credf__h{ font-family:var(--ccapp-font); font-weight:700; font-size:16px; line-height:1.3; color:var(--ccapp-ink); margin-top:4px; } body #main-content .ccapp-credf__p{ font-family:var(--ccapp-font); font-size:13.5px; line-height:1.62; color:var(--ccapp-ink-soft); margin:5px 0 0; } /* --- 89c. the verification panel --- */ .ccapp-verify{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:0; margin-top:clamp(20px,2.4vw,28px); border-radius:18px; overflow:hidden; isolation:isolate; box-shadow:0 30px 62px -30px rgba(4,22,26,.55), 0 0 0 1px rgba(4,22,26,.06); } .ccapp-verify__body{ position:relative; padding:clamp(24px,2.8vw,34px); background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, rgba(255,255,255,0) 2px 10px), linear-gradient(142deg,#0A2F33 0%,#0B3B40 50%,#016A71 100%); } .ccapp-verify__k{ display:block; font-family:var(--ccapp-font); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; } body #main-content .ccapp-verify__k{ color:var(--b-pop)!important; } body #main-content .ccapp-verify__h{ font-family:var(--ccapp-font); font-weight:800; font-size:clamp(21px,2.4vw,27px); line-height:1.18; letter-spacing:-.018em; color:#fff!important; margin:8px 0 0; max-width:22ch; } body #main-content .ccapp-verify__p{ font-family:var(--ccapp-font); font-size:15px; line-height:1.68; margin:13px 0 0; color:rgba(255,255,255,.88)!important; max-width:54ch; } body #main-content .ccapp-verify__p b{ color:#fff!important; font-weight:700; } body #main-content .ccapp-verify__fine{ font-family:var(--ccapp-font); font-size:13px; line-height:1.6; margin:16px 0 0; padding-top:14px; border-top:1px solid rgba(255,255,255,.22); color:rgba(255,255,255,.74)!important; max-width:58ch; } .ccapp-verify__card{ display:flex; flex-direction:column; justify-content:center; gap:0; padding:clamp(20px,2.4vw,28px); background:#fff; } .ccapp-verify__row{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:11px 0; border-bottom:1px solid var(--ccapp-line); font-family:var(--ccapp-font); font-size:13.5px; color:var(--ccapp-ink-soft); } .ccapp-verify__row b{ color:var(--ccapp-ink); font-weight:700; text-align:right; } .ccapp-verify__ok{ margin-top:16px; padding:11px 15px; border-radius:11px; background:#E6F5F3; color:var(--b-deep,#024548); font-family:var(--ccapp-font); font-weight:700; font-size:13.5px; } @media (max-width:860px){ .ccapp-verify{ grid-template-columns:minmax(0,1fr); } .ccapp-cred__grid{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr); font-size:13px; } .ccapp-cred__grid > *:nth-child(4n+2){ display:none; } /* drop the credential name, never Verified */ .ccapp-cred__grid > *:nth-last-child(-n+4){ border-bottom:1px solid var(--ccapp-line); } }