/* * Divi 5 override stylesheet. * Enqueued as handle 'style-divi5' and re-printed at the very end of * by divi-child/functions.php, so it loads AFTER all other CSS (Divi * structural CSS, Supreme modules, the main custom-css/style.css, and the * Theme Options / et-core-unified CSS). Add Divi 4 → 5 fixes here; overrides * win on the cascade WITHOUT needing !important. */ /* ============================================================= PAGE: Our Story (/our-story/) ============================================================= */ /* Recent Recognition award logos. Divi 5 forces image modules to display:block via '.et_pb_image.et_block_module{display:block}', a new D5 default that does not exist in Divi 4. On the live (D4) site these logos default to inline-block and flow in a row (6/row desktop, 3/row tablet, 2/row mobile); on D5 they stack vertically. Restoring inline-block reproduces the live layout at every breakpoint — the per-logo widths/spacing already come from the module settings, so they reflow on their own. Scoped to #recognition so no other image module on the site is affected. */ #recognition .et_pb_image { display: inline-block; vertical-align: top; } /* ============================================================= PAGE: Home ============================================================= */ #story_work_sect{gap: 30px;} /* ============================================================= PAGE: Our Story ============================================================= */ .et_pb_blurb_content .et_pb_main_blurb_image.et_animated{opacity: 1;} .clientstoreidsbox{gap:20px;} #stats .et_block_row_4col{gap: 20px;} body.page-id-258937 .et_clickable.lt .et_pb_text_19 div p { font-weight: 700;} body.page-id-258937 .et_pb_row_8 {padding-left: 20px;padding-right: 20px;} input#user-phone::placeholder { color: #00000087 !important; } /* ============================================================= PAGE: Blog Page ============================================================= */ body.blog .lt.custom-blog-section{display: flex;} body.blog .lt.custom-blog-section .customblogs{padding-right: 34px;} .mi-talk-form form > div{width: 100%;} .mi-talk-form form > div.et_contact_bottom_container{width: auto;} .et_pb_section_3_tb_body.et_pb_section{padding-right: 20px;} /* ============================================================= PAGE: Single Project Layout ============================================================= */ body.single.single-project #main-content .et_builder_inner_content .et_block_section:nth-child(2){display: block;} body.single.single-project #main-content #story_work_sect{gap:0px;} body.archive.category .categoryws ~ .et_block_section { display: block;} body.archive.category .categoryws ~ .et_block_section .blog-newsletter-form{ margin-left: 0; margin-right: 0px; width: 100%; max-width: 100%; } #join-team-page input#mce-FNAME::placeholder, #join-team-page input#mce-LNAME::placeholder{ color:#fff; } @media (max-width: 1668px) { .et_block_section.why-study-section{padding-bottom: 50px;} .why-study-section .col-left{margin-right: 0px !important;} .why-study-section .et_pb_column.right-col { width: calc(100% - 380px - 50px); } .why-study-section > div{flex-wrap: nowrap;} } @media screen and (max-width:1480px){ .workforce-survey-section .et_pb_text_32{max-width: 100%;} .why-study-section .heading-h2 {max-width: 35%;} .section-the-value-over-time .heading-h2 {max-width: 50%;} .section-losing-access .heading-h2 h2 {font-size: 66px;} .workforce-survey-section .heading-h2 { max-width: 75%;} .section-the-value-over-time .small-heading {max-width: 100%;} } @media screen and (max-width:1280px) { .newsletters-section .newsletters-row .et_pb_column:first-child .newsletters-col { margin-right: 50px !important; max-width: calc(100% - 50px) !important; } .newsletters-section .newsletters-row .newsletters-col{ width: 100%; } .newsletters-section .newsletters-row .newsletters-col h5 { line-height: 1.2em; font-size: 39px; } .newsletters-section { padding: 120px 0 !important; } /* new why now page*/ .section-with-bg .et_pb_text_15{max-width: 90%;} .section-the-value-over-time .et_pb_text_25{max-width: 60%;} .video-bg-section-the-data-reveals .et_pb_text_28{max-width: 100%;} .why-study-section .heading-h2 {max-width: 50%;} .section-losing-access .heading-h2 {max-width: 100%;} .workforce-survey-section .heading-h2 { max-width: 70%;} .workforce-survey-section .col-one .et_pb_text_33 { max-width: 85%;} .section-the-value-over-time .et_pb_text_22 { max-width: 50%; } .section-with-bg .text-one .et_pb_text_inner p{font-size: 48px;} .section-with-bg .text-two .et_pb_text_inner p{font-size: 28px;} .section-losing-access .heading-h2 h2 {font-size: 48px; } } @media (max-width: 1024px) { #story_work_sect{max-width: 49% !important;} .et_pb_row_31#story_work_sect{gap: 20px;} #build-your-dream-team .et_pb_cta_3.et_pb_promo{padding: 0px;} .blended-teams-work-section .et_block_row.images-row > div{width: 100%; margin-right: 0;} .section-the-value-over-time .heading-h2 {max-width: 100%;} .section-the-value-over-time .small-heading {max-width: 100%;} .section-the-value-over-time .et_pb_text_99 {max-width: 50%;} .section-with-bg .text-one .et_pb_text_inner p { font-size: 30px; } .section-with-bg .text-two .et_pb_text_inner p{font-size: 20px;} } @media (max-width:980px) { .staff-mem.staffbox .et_pb_team_member{display: flex !important;} #story_work_sect .et_pb_cta_2, #story_work_sect .et_pb_cta_3{max-width: 100%;} #story_work_sect.et_block_row .et_pb_column{margin-bottom: 0px;} .et_pb_menu_2_tb_footer.et_pb_menu.et_pb_menu--without-logo{display: flex;justify-self: center;align-items: center;} .et_block_row .et_pb_column{margin-bottom: 0px;} header .et_pb_menu_1_tb_header .et_pb_menu_inner_container.et_flex_module{display: flex;justify-content: center;align-items: center;gap: 0px;flex-direction: column;} #home-playbook .et_block_row{display: flex;justify-content: center;align-items: center;flex-wrap: wrap;} #home-playbook .et_block_row > div{width: 100% !important;} #story_work_sect > div {max-width: 100% !important;} #story_work_sect > div .work_us_clmn{max-width: 100% !important;} .et-l--footer .et_pb_menu--style-inline_centered_logo .et_pb_menu_inner_container { flex: 1 1 100%; width: 100%; justify-content: center; } #stats .et_block_row_4col{gap: 0px;} body.blog .lt.custom-blog-section{flex-direction: column;} .newsletters-section .newsletters-row .newsletters-col h5{font-size: 30px;} } @media (max-width:769px) { #story_work_sect { max-width: 80% !important; } .et_pb_blurb_content .et_pb_main_blurb_image.et_animated{display: block !important;} #staff .et_pb_team_member_image.et-waypoint.et_pb_animation_off.et-animated { text-align: center !important; } .et_pb_team_member_description .et_pb_team_member_description_content p {text-align: center;} .why-study-section > div { flex-wrap: wrap; } .why-study-section .right-col { width: 100%; } .why-study-section .et_pb_column.right-col { width: 100%; } .why-study-section .heading-h2 { max-width: 100%; } .why-study-section .col-left .et_pb_image.et_pb_module{text-align: center;} .section-losing-access .heading-h2 h2 { font-size: 25px; } #gptw .et_pb_blurb_content .et_pb_main_blurb_image.et_animated{display: unset !important;} #gptw .et_pb_blurb_content .et_pb_blurb_container{margin-top: 30px;} #after-you-apply .consult-faq-section .et_pb_blurb.et_pb_bg_layout_light.et_pb_blurb_position_top{margin-bottom: 0px !important;} body.category .customblogs .et_pb_ajax_pagination_container > .et_pb_blog_posts{justify-content: space-between;} body.category .customblogs .et_pb_ajax_pagination_container > .et_pb_blog_posts > article { margin-right: 0px;} } /* ============================================================= PAGE: Blog (/blog/) — post grid layout to match live ============================================================= */ /* Divi 5 renders this blog module as a CSS grid (.et_pb_blog_posts.et_grid_module). The template asks for 2 columns, but a generic D5 default rule '.et_grid_module.et_pb_ajax_pagination_container{--column-count:4}' has the same specificity as the template's '--column-count:2' and wins by load order, so posts render ~4-up and ~144px wide. The legacy D4 custom CSS '.customblogs .et_pb_post{width:46%;float:left}' (written for D4's float grid) then fights the CSS grid, squashing titles to one word per line. Fix: pin the grid to 2 columns (1 on phone, matching the template), and let the grid — not the legacy float/width — size the posts. Also drop the card border the D5 grid adds (live has none; padding/bg/gap already match). */ body.blog .customblogs .et_pb_blog_posts { --column-count: 2 !important; } body.blog .customblogs .et_pb_post { width: auto !important; float: none !important; margin-right: 0 !important; border: 0 !important; } @media (max-width: 767px) { body.blog .customblogs .et_pb_blog_posts { --column-count: 1 !important; } .newsletters-section{padding: 0px !important;} body .newsletters-section .newsletters-row .first-col.form-col .first{max-width: 540px !important;} body.page-id-21 .newsletters-section{padding: 50px !important;} } /* Blog content/sidebar column widths. Live sets the blog content column to 70% and the sidebar to 27% via '.blog .et_pb_gutters2 .et_pb_column_3_5 / _2_5'. Divi 5 removed the 'et_pb_gutters2' class from rows, so those rules no longer match and the sidebar falls back to the wider default 2_5 (~38%). That makes the search bar (full column) wider than the newsletter box (max-width 291px), leaving a gap on the right and a mismatch. Restoring 70/27 makes the sidebar 292px so the search and newsletter are equal width and aligned, exactly like live. Desktop only (>=981px); below that the columns stack as normal. */ @media (min-width: 981px) { .blog .et_pb_column_3_5 { width: 70% !important; } .blog .et_pb_column_2_5 { width: 27% !important; } } @media (max-width: 480px) { body.blog .lt.custom-blog-section .customblogs { padding-right: 0; } .et_pb_blog_1_tb_body{width: 100%;} } @media (max-width: 420px) { .et_pb_section_6#solut_page_head{min-height: 316px;} } /* ============================================================= PAGE: Category archives (/category/*) — restore the post grid ============================================================= */ /* Divi 5 inserts an extra wrapper, '.et_pb_blog_posts', between '.et_pb_ajax_pagination_container' and the
elements; that wrapper does not exist in Divi 4. The legacy Customizer CSS (Appearance → Customize → Additional CSS) still assumes the D4 structure and puts the flex context on the pagination container, then floats the posts inside it: body.category .et_pb_ajax_pagination_container{display:flex;flex-wrap:wrap} .customblogs .et_pb_post{width:46%!important;float:left;margin:0 4% 0 0} On D5 that flex context now applies to the new wrapper instead of the posts, so the wrapper is a single shrink-to-fit flex item whose only content is floated — it collapses and the posts disappear from every category archive. Fix: give the new wrapper the flex context the pagination container used to provide for the posts. The existing 46% (desktop) / 100% (<=767px) width rules then lay the posts out exactly as on live: 2-up desktop, stacked mobile. The /blog/ index already has the equivalent fix above, scoped to body.blog. */ body.category .customblogs .et_pb_ajax_pagination_container > .et_pb_blog_posts { display: flex; flex-wrap: wrap; width: 100%; }