/* Theme Name: Clapp & Co. Theme URI: https://clappand.co Description: Divi Child theme for Clapp & Co. website. Author: Clapp & Co. Template: Divi Version: 1.6.2 */ /* ==== Tighten all headings site-wide — removes Divi's default 10px below ==== */ h1, h2, h3, h4, h5, h6 { padding-bottom: 0 !important; } /* ==== Desktop-only line breaks — hidden on phones so text wraps naturally ==== */ @media (max-width: 1150px) { .desktop-break { display: none; } } /* ==== Email optin layout (applies to .upper-optin module on homepage) ==== */ .upper-optin.et_pb_newsletter .et_pb_newsletter_fields { --flex-direction: row; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 12px; } .upper-optin.et_pb_newsletter .et_pb_newsletter_fields > p { display: flex !important; flex: 1 1 auto !important; margin: 0 !important; padding: 0 !important; min-height: 47px !important; } .upper-optin.et_pb_newsletter .et_pb_newsletter_button_wrap { flex: 0 0 auto !important; } .upper-optin .et_pb_newsletter_fields input, .upper-optin .et_pb_newsletter_button { box-sizing: border-box !important; height: 100% !important; width: 100% !important; display: flex !important; align-items: center !important; margin: 0 !important; } .upper-optin .et_pb_newsletter_button { justify-content: center !important; white-space: nowrap !important; } /* Stack to full-width on phones */ @media (max-width: 767px) { .upper-optin.et_pb_newsletter .et_pb_newsletter_fields { --flex-direction: column; flex-direction: column !important; flex-wrap: wrap !important; } .upper-optin.et_pb_newsletter .et_pb_newsletter_fields > p, .upper-optin.et_pb_newsletter .et_pb_newsletter_button_wrap { flex: 1 1 100% !important; } } /* ==== Homepage Accordions (Strategy / Leadership / Energy) ==== */ body:not(.et-fb) .accordion-panel { display: none; } .accordion-trigger { cursor: pointer; } /* Arrow flips on open */ .accordion-trigger .et_pb_image img { transition: transform 0.45s ease; } .accordion-trigger.is-open .et_pb_image img { transform: rotate(180deg); } /* ==== Sticky label band (accordion panels) ==== */ /* Pin below the nav when stuck (!important beats Divi's row position) */ .cc-stick { position: sticky !important; top: 53px; z-index: 50; } /* Logged-in offset: clear the 32px WP admin bar too */ .admin-bar .cc-stick { top: 85px; } /* Band reads as clickable (it closes its panel) */ .sticky-label-band { cursor: pointer; } /* Free overflow Divi clips on these ancestors, which traps sticky */ #page-container, .et_builder_inner_content { overflow: visible !important; } /* ==== Accordion feature image: cover-crop inside a sized box ==== */ .cc-cover-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* ==== Scroll-reveal: box fills keyline → tint as it enters view ==== */ .cc-box { background-color: #fff; border: 1px solid #b3dae5; transition: background-color 1s ease, border-color 1s ease; } .cc-box.is-revealed { background-color: #f4f9fa; border-color: transparent; } /* ==== Slide-in panel ==== */ /* The sticky nav is a Divi section carrying an inline z-index of 10000. The scrim is authored inside a different Divi section, and Divi sections create their own stacking context, which traps the scrim's z-index inside it. panel.js moves the scrim to on load so these values compete honestly: nav 10000, scrim 100000, panel 100001. */ .cc-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.45); opacity: 0; pointer-events: none; transition: opacity 0.4s ease; z-index: 100000; } .cc-scrim.is-open { opacity: 1; pointer-events: auto; } /* The panel is a plain frame: background, width, clipping, position. NO padding. Content spacing lives in the canvases (set in the builder) and, for the article view, on .cc-article below. Keeping padding off the panel means its white background never paints over a bleed element pushed toward the edge with a negative margin. */ .et_pb_section.cc-panel { position: fixed !important; top: 0; right: 0; height: 100% !important; width: 85%; max-width: 1120px; background: #fff; transform: translateX(100%); transition: transform 0.45s cubic-bezier(0.4,0,0.2,1); z-index: 100001; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 !important; } .et_pb_section.cc-panel.is-open { transform: translateX(0); } /* The host row and column that wrap each Canvas Portal stay neutral. They are just the mount point; the canvas controls its own spacing. Child combinator so the canvas's own rows and columns inside the portal are untouched. */ #ccPanel > .et_pb_row, #ccPanel > .et_pb_row > .et_pb_column { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* Clear the WP admin bar when logged in */ .admin-bar .et_pb_section.cc-panel { top: 32px; height: calc(100% - 32px) !important; } /* ==== Shared panel chrome (close row) ==== One close row sits at the top of #ccPanel, built in the visual builder. It exists only on the homepage, where the panel lives, so it needs no standalone-page guard. panel.js writes the section name into .cc-panel-label as each view opens, because the panel switches views client-side and Divi dynamic content cannot follow a client-side switch. Design lives in the builder; only these structural bits are here. */ /* The click target. Put cc-panel-close on the Image module (the X) in the builder. Behaviour only; all visible design is set on the module. */ .cc-panel-close { cursor: pointer; } /* Pin the panel's close row to the top of the scrolling panel. Add the cc-panel-chrome class to the row in the builder. The .et_pb_row prefix and !important are needed to beat Divi's own position:relative on rows. Use this rather than Divi's native sticky, which writes z-index:10000 inline at runtime and would collide with the panel's own stacking. */ .et_pb_row.cc-panel-chrome { position: sticky !important; top: 0; z-index: 5; background: #f4f9fa; } .cc-view { display: none; } .cc-view.is-active { display: block; } /* Marker class only. The real scroll lock is set from panel.js on both and , plus a capture-phase wheel handler, because Divi's smoothscroll.js scrolls the page programmatically. */ body.cc-panel-open { overflow: hidden; } @media (max-width: 782px) { .admin-bar .et_pb_section.cc-panel { top: 46px; height: calc(100% - 46px) !important; } } @media (max-width: 767px) { .et_pb_section.cc-panel { width: 90%; } /* The slide-in panel (#ccPanel) is fixed and parked off-screen to the right via translateX(100%). Clip horizontal overflow so that parked position doesn't add page scroll width on mobile. Standard partner to an off-canvas panel, not a hack masking a too-wide element. */ body { overflow-x: hidden; } } /* ==== Panels: hidden in the Visual Builder ==== The builder renders real front-end CSS, so a fixed, translated panel is unreachable there. The panel holds only Canvas Portals and one Code module, and the canvases are edited from the Canvas Workshop page. Structure stays editable in wireframe view. */ body.et-fb .et_pb_section.cc-panel, body.et-bfb .et_pb_section.cc-panel, body.et-fb .cc-scrim, body.et-bfb .cc-scrim, body.et-fb .et_pb_section.cc-scrim-host, body.et-bfb .et_pb_section.cc-scrim-host { display: none !important; } /* ==== Article ==== Not a canvas, so its spacing and type live here rather than in the builder. Type matched to the Partnerships canvas: Header Regular for title/subheads in navy (#00355E) and softer blue (#436387); Body Light for copy at 18/30. Paragraph rhythm is left to the inherited p padding-bottom (18px), same as the canvas Text module, so margins are zeroed on p/li to avoid doubling the gap. The 60px padding matches the canvas gutter so the left edge stays put when switching between an article and a canvas view. */ .cc-article { padding: 60px; } .cc-article-eyebrow { font-family: "Header Regular", Helvetica, Arial, sans-serif; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 20px; color: #436387; opacity: 0.75; } .cc-article-eyebrow:empty { display: none; } /* Title — matches the canvas H1 (Header Regular, navy) */ .cc-article-title { font-family: "Header Regular", Helvetica, Arial, sans-serif; font-size: 44px; font-weight: 500; line-height: 54px; color: #00355E; margin: 0 0 24px; max-width: 800px; } /* Deck / excerpt — matches the canvas subhead (Header Regular, softer blue) */ .cc-article-deck p { font-family: "Header Regular", Helvetica, Arial, sans-serif; font-size: 26px; font-weight: 500; line-height: 34px; color: #436387; margin: 0 0 40px; padding-bottom: 0; opacity: 1; } .cc-article-figure { margin: 0 0 56px; } .cc-article-figure img { width: 100%; height: auto; display: block; } /* Body — matches canvas body (Body Light, 18/30, black). Spacing comes from the inherited p padding-bottom (18px); margin zeroed so it doesn't double. */ .cc-article-body p { font-family: "Body Light", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 500; line-height: 30px; color: #000; margin: 0; } /* Subheaders — matches the canvas subhead treatment (Header Regular, softer blue) */ .cc-article-body h2 { font-family: "Header Regular", Helvetica, Arial, sans-serif; font-size: 31px; font-weight: 500; line-height: 39px; color: #436387; margin: 48px 0 16px; } .cc-article-body h3 { font-family: "Header Regular", Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 32px; color: #436387; margin: 36px 0 12px; } .cc-article-body img { width: 100%; height: auto; margin: 32px 0; } .cc-article-body blockquote { margin: 40px 0; padding-left: 24px; border-left: 2px solid #b3dae5; font-family: "Header Regular", Helvetica, Arial, sans-serif; font-size: 24px; line-height: 34px; color: #436387; } /* Lists — Body Light to match body; margin zeroed, inherited padding spaces them */ .cc-article-body ul, .cc-article-body ol { font-family: "Body Light", Helvetica, Arial, sans-serif; font-size: 18px; line-height: 30px; color: #000; margin: 0 0 0 24px; } .cc-loading { opacity: 0.5; } @media (max-width: 767px) { .cc-article { padding: 25px; } .cc-article-title { font-size: 32px; line-height: 40px; } .cc-article-deck p { font-size: 21px; line-height: 29px; } .cc-article-body p { font-size: 16px; line-height: 28px; } .cc-article-body h2 { font-size: 26px; line-height: 33px; margin-top: 30px; } .cc-article-eyebrow { font-size: 13px; } .cc-article-figure { margin-bottom: 40px; } } /* ==== Article — Theme Builder (standalone post) wrapper bridges ==== The overlay uses clean markup (h1.cc-article-title). Divi's native post modules nest the real element inside wrappers, so these selectors re-apply the same styling to the Divi structure. Overlay is unaffected. */ /* Title: Post Title module nests the h1 inside .et_pb_title_container */ .cc-article-title h1, .cc-article-title .et_pb_title_container, .et_pb_title_container.cc-article-title h1 { font-family: "Header Regular", Helvetica, Arial, sans-serif; font-size: 44px; font-weight: 500; line-height: 54px; color: #00355E; margin: 0 0 24px; } /* Eyebrow (category) and deck (excerpt): Text module wraps content in .et_pb_text_inner */ .cc-article-eyebrow .et_pb_text_inner, .cc-article-eyebrow .et_pb_text_inner p { font-family: "Header Regular", Helvetica, Arial, sans-serif; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #436387; opacity: 0.75; margin: 0; } .cc-article-deck .et_pb_text_inner p { font-family: "Header Regular", Helvetica, Arial, sans-serif; font-size: 26px; font-weight: 500; line-height: 34px; color: #436387; margin: 0 0 40px; padding-bottom: 0; } /* Featured Image module */ .cc-article-figure .et_pb_image_wrap, .cc-article-figure img { display: block; width: 100%; height: auto; } /* Body: Post Content module outputs into .et_pb_post_content */ .cc-article-body.et_pb_post_content p, .cc-article-body .et_pb_post_content p { font-family: "Body Light", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 500; line-height: 30px; color: #000; margin: 0; } .cc-article-body.et_pb_post_content h2, .cc-article-body .et_pb_post_content h2 { font-family: "Header Regular", Helvetica, Arial, sans-serif; font-size: 31px; font-weight: 500; line-height: 39px; color: #436387; margin: 48px 0 16px; } .cc-article-body.et_pb_post_content h3, .cc-article-body .et_pb_post_content h3 { font-family: "Header Regular", Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 32px; color: #436387; margin: 36px 0 12px; } /* Homepage Blog module circles: crop only. SIZE is set in the builder (Blog module > Design > Sizing > Image Max Width + Max Height, kept equal to stay round). These rules just make whatever box the builder produces render as a filled circle. */ .cc-writings .et_pb_image_container, .cc-writings .et_pb_post .entry-featured-image-url { margin: 0 auto 24px; border-radius: 50%; overflow: hidden; display: block; } .cc-writings .et_pb_image_container img, .cc-writings .et_pb_post .entry-featured-image-url img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 50%; display: block; } /* Writings archive loop: crop the loop Image module into a circle. Crop only. SIZE is set in the builder (Loop Image module > Design > Sizing > Image Max Width + Max Height, kept equal to stay round). These rules just make whatever box the builder produces render as a filled circle. Aimed at the Image module's markup (.et_pb_image > .et_pb_image_wrap > img). */ .cc-writings-loop .et_pb_image, .cc-writings-loop .et_pb_image_wrap { border-radius: 50%; overflow: hidden; flex-shrink: 0; } .cc-writings-loop .et_pb_image_wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 50%; display: block; } /* Mobile hamburger → X morph. Divi draws the hamburger as a font glyph in .mobile_menu_bar::before. On open, Divi swaps .mobile_nav.closed → .mobile_nav.opened. Swap the glyph to an X and rotate for a morph feel. */ .mobile_nav .mobile_menu_bar::before { display: inline-block; transition: transform 0.3s ease; } .mobile_nav.opened .mobile_menu_bar::before { content: "\4d" !important; /* Divi ETmodules close/X glyph */ transform: rotate(180deg); } /* ==== Mobile nav: opened dropdown (tablet/phone, <= 980px) ==== Divi's opened mobile menu is a position:absolute ul that slides down from the bar. These rules make it full width, align the item text to the site's 25px gutter, restyle the item dividers as soft hairlines for the dark background, and remove the browser's blue tap-highlight. The top border sits on the first item (not the ul) so it reveals with the menu instead of flashing in ahead of the slide; same reason the top gap is a margin on the first item rather than the ul. */ /* Logo left edge to the 25px gutter */ .et_pb_menu__logo { padding-left: 25px; } /* Hamburger inset from the right gutter, nudged to optically center in the bar */ .mobile_menu_bar { padding-right: 15px; padding-bottom: 5px; } /* The dropdown itself carries no padding or top border; spacing lives on the items so it animates in cleanly */ .et_pb_menu .et_mobile_menu { padding: 0px; border-top: none; } /* Per-item divider (soft white hairline reads on the dark panel) + inner spacing */ .et_pb_menu .et_mobile_menu li { border-bottom: 1px solid rgba(255, 255, 255, 0.10); padding-left: 5px; padding-top: 2px; padding-bottom: 2px; } /* Top line and top gap ride on the first item so they reveal with the slide, not before it */ .et_pb_menu .et_mobile_menu li.et_first_mobile_item { border-top: 1px solid rgba(255, 255, 255, 0.10); margin-top: 11px; } /* Dividers sit between items only, so no rule under the last one */ .et_pb_menu .et_mobile_menu li:last-child { border-bottom: none; } /* Kill the mobile browser's blue tap-highlight box */ .et_pb_menu .et_mobile_menu a { -webkit-tap-highlight-color: transparent; } /* No hover/active background fill on tap */ .et_pb_menu .et_mobile_menu a:hover, .et_pb_menu .et_mobile_menu a:focus, .et_pb_menu .et_mobile_menu a:active { background-color: transparent; }