/* Theme Name: Custom Theme URI: # Description: Custom Author: SEO National Author URI: https://www.seonational.com Template: Divi Version: 1.0.0 Tags: Custom Text Domain: # */ /* =Theme customization starts here -------------------------------------------------------------- */ /* GLOBAL */ /* fix header parallax on Firefox */ .gecko .et_pb_section_parallax .et_pb_parallax_css { -webkit-transform: none !important; } /* NAVIGATION */ /* sub-menu dropdown text size */ #top-menu li li a { font-size: 16px !important; line-height: normal !important; } /* remove the divider line below the main menu */ /* header#main-header.et-fixed-header, #main-header { -webkit-box-shadow:none !important; -moz-box-shadow:none !important; box-shadow:none !important; } */ /* hide drop down arrow when main nav item has sub-nav drop-down menu links */ /* #top-menu .menu-item-has-children > a:first-child::after, #et-secondary-nav .menu-item-has-children > a:first-child::after { content: none !important; }*/ /* hides the right padding that becomes unnecessary after the dropdown arrow is removed above */ /* #top-menu .menu-item-has-children { padding-right: 0 !important; } */ /* main menu custom CTA button */ .menu-CTA a, .et-fixed-header #top-menu .menu-CTA a { color: #fff !important; margin-top: -1px; text-align:center !important;} .menu-CTA{ background: #04683a; height: 40px; padding: 12px 12px 10px 12px !important; border-radius: 20px; border: 2px solid #04683a; } .menu-CTA:hover a{color:#04683a !important;} .menu-CTA:hover{cursor:pointer;} @media all and (max-width:981px) { .menu-CTA { height: auto; }} .menu-CTA:hover { background: #fff; border: 2px solid #04683a; color: #04683a; } .menu-CTA a:hover { color: #04683a !important; } /* shrink menu size on mid-resolutions so it all fits on screen in one row */ @media all and (max-width:1400px){ #top-menu li, #top-menu li a { font-size: 16px !important; } } /* YOAST */ #breadcrumbs { padding: 10px; background: #ffffff; text-align: center !important; font-size: 12px; } #breadcrumbs a, #breadcrumbs span, #breadcrumbs strong { color: #333; } .home #breadcrumbs { display: none !important; } /* hide breadcrumbs on home page */ /* WOOCOMMERCE */ mark.count, /* hide yellow highlighting of category product quantities on category index pages */ .woocommerce-breadcrumb, /* hide default Woocommerce breadcrumbs above the product details */ .single-product .description_tab, .single-product .additional_information_tab, .single-product h2 /* hide long description tab headers and "additional" tab on product pages */ { display: none; } .archive ul.products .product { text-align: center; } /* center product images/text/buttons on product category pages */ .woocommerce button.button.alt.disabled { background: none !important; } /* center product text, prices, and CTA */ body.archive li.product, .et_pt_shop li.product { text-align: center; } /* customize the buttons added on Woocommerce category pages produced by the edit in functions.php file */ /* remove weird padding on hover */ .woocommerce ul.products li.product a:hover { color: #fff; padding-right: 1em; } .woocommerce ul.products li.product a::after { display: none; } .woocommerce ul.products li.product a:hover{padding-right:0px !important;} /* WooCommerce native reviews */ .woocommerce.et_pb_button_helper_class #respond input#submit, .woocommerce-page.et_pb_button_helper_class #respond input#submit { background: #04683a; color: #fff !important; } /* fix color on review submit button */ /* FOOTER */ /* footer menu */ #menu-footer-menu a { color: #efefef; } #footer-info a { font-weight: normal; } .footer-external-credits { font-size: 11px; } /* RESPONSIVE */ @media all and (min-width:1405px){ } @media all and (min-width:1100px) and (max-width:1404px) { } @media all and (min-width:982px) and (max-width:1099px){ } @media all and (max-width:981px) { } /* MOBILE MENU */ /* change the mobile menu icon color */ /*.mobile_menu_bar_toggle::before { color: #fff !important; }*/ /* change the top border line color on expanded mobile menu */ /*.et_mobile_menu { border-top: 3px solid #fff !important; }*/ /* hide sub-sub-menu on mobile */ /*#mobile_menu ul.sub-menu ul.sub-menu { display: none !important; }*/ /* MISCELLANEOUS */ /* format Divi blog grid */ .et_pb_blog_grid .et_pb_post { margin-bottom: 60px !important; overflow: hidden; font-size: 14px; line-height: normal; } .et_pb_blog_grid .et_pb_image_container { overflow: hidden; } @media all and (min-width:1200px) { .et_pb_blog_grid .et_pb_post { width: 320px; height: 520px; } .et_pb_blog_grid .et_pb_image_container { width: 320px; height: 200px; } } .et_pb_post .entry-featured-image-url{ margin-bottom:0px !important;} .blog-grid .et_pb_image_container img{height: 200px !important; object-fit: cover !important;} .blog-grid .et_pb_image_container {margin-bottom:15px !important;} .wp-caption p.wp-caption-text{line-height:1.2em !important;} /* WP Customer Reviews plugin */ /* remove colored blockquote indent */ .wpcr3_in_content blockquote { border: none; } /* hide website's company name from displaying before all reviews */ .wpcr3_item_name { display: none; } /* bold custom review questions and line break the answers */ .wpcr3_review_custom_label { font-weight: 700; clear: both; margin-top: 15px; } /*Customizing the hello bar */ .hellobar-btn {border: none; background-color: #ffffff; padding: 7px 10px; cursor: pointer; display: inline-block; color:#693e91 !important; margin-left:5px; border-radius: 10px;margin-top: 7px; margin-bottom: 7px;} .hello-bar p{text-align:center;} .hellobar-text {padding-top: 7px !important; padding-bottom: 7px !important;line-height:1.3;} /* Video transcript toggle for AudioObject schema */ .video-transcripts .et_pb_toggle_close { background-color: #f4f4f4 !important; padding: 20px !important;} .video-transcripts .et_pb_toggle_open { background-color: #ffffff !important; padding: 20px !important;} .video-transcripts .et_pb_toggle { border: 1px solid #d9d9d9 !important;} .video-transcripts .et_pb_toggle_close .et_pb_toggle_title:before { content: "\E050"; position: absolute; right: 0; font-size: 16px; color: #ccc; top: 50%; margin-top: -.5em;} .video-transcripts .et_pb_toggle_open .et_pb_toggle_title:before { content: "\E04F";position: absolute; right: 0; font-size: 16px; color: #ccc; top: 50%; margin-top: -.5em;} .video-transcripts .et_pb_toggle .et_pb_toggle_title:before { right: 0; left: auto; font-family: ETmodules!important; speak: none; font-style: normal; font-weight: 400; -webkit-font-feature-settings: normal; font-feature-settings: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-shadow: 0 0; direction: ltr;} .video-transcripts .et_pb_toggle .et_pb_toggle_title{cursor: pointer; position: relative; padding: 0 50px 0 0;} .video-transcripts .et_pb_toggle_content { padding-top: 20px; position: relative;} /* Video lightbox on mobile */ @media all and (max-width: 767px) { .pp_pic_holder.pp_default .ppt{width:100% !important;margin-left:5px !important;} .pp_pic_holder.pp_default .pp_content #pp_full_res iframe{width:100% !important; height:100vh !important; max-height:300px;} .pp_pic_holder.pp_default .pp_details{background-color: transparent !important;} .pp_pic_holder.pp_default .pp_details .pp_close{top:-7px !important; right:0px !important;} } @media all and (max-height: 500px) and (min-width:768px) { div.pp_default .pp_content_container .pp_left, div.pp_default .pp_top .pp_left, div.pp_default .pp_top .pp_middle, div.pp_default .pp_top .pp_right, div.pp_default .pp_bottom .pp_left, div.pp_default .pp_bottom .pp_middle, div.pp_default .pp_bottom .pp_right, div.pp_default .pp_content_container .pp_right{background-color: #000 !important; background: none !important;} .pp_pic_holder.pp_default{width:100% !important; left:0px !important; } .pp_pic_holder.pp_default .pp_content {width:100% !important; height:250px !important; } .pp_pic_holder.pp_default .ppt{width:100% !important;margin-left:5px !important;} .pp_pic_holder.pp_default .pp_content #pp_full_res iframe{width:100% !important; height:250px !important;} .pp_pic_holder.pp_default .pp_details{background-color: transparent !important;} .pp_pic_holder.pp_default .pp_details .pp_close{top:-7px !important; left:0px !important;} } /* Disable transition to improve CLS */ body .et_pb_button, body .et_pb_button:after, body .et_pb_button:before, .et-menu a, .et-menu a:hover, .et_pb_social_media_follow li a.icon:before {transition: 0s !important;} :root { /* Core palette (from the design's colour table) */ --dbts-ink: #14140f; /* headings, footer background */ --dbts-ink-soft: #4a473c; /* body copy */ --dbts-paper: #ffffff; /* page white */ --dbts-paper-dim: #f8f4ec; /* paper cream — alternating sections + strips */ --dbts-paper-muted: #9c998c; /* text on the dark footer */ --dbts-line: #e3ddcd; /* card + section borders */ --dbts-line-dark: #2c2b24; /* dividers on the dark footer */ --dbts-tear: #d9d2c0; /* dashed "tear line" rule */ --dbts-accent: #1f6b45; /* green — primary action, accents, rules */ --dbts-accent-dim: #14472e; /* green, pressed/dark */ --dbts-accent-tint: #eef4ef; /* green tint — eyebrow chips */ --dbts-accent-soft: #d5ecdf; /* light green text on the green CTA band */ --dbts-slate: #6b6757; /* muted text */ --dbts-field-border: #cfc7b4; /* form input border */ --dbts-footer-head: #faf7ef; /* footer headings */ --dbts-error: #b3261e; /* validation (design has none; added for CF7) */ --white: #fff; /* Type */ --dbts-display: 'Source Serif 4', Georgia, serif; --dbts-body: 'Source Sans 3', system-ui, -apple-system, sans-serif; --dbts-text-btn: 'Source Sans 3 Bold', system-ui, -apple-system, sans-serif; /* Rhythm */ --dbts-wrap: 1280px; /* content cap; mirror in Customizer > Layout Settings */ --dbts-gutter: 46px; /* the design's section side padding */ --dbts-gap: 24px; /* base grid gap */ --dbts-section-y: 54px; /* dominant vertical rhythm */ --dbts-radius: 0; /* the design is flat — no rounded corners anywhere */ } /* ========================================================================== 2. GLOBAL / TYPOGRAPHY Audience is 70+, so the body floor is 19px throughout. Sizes are set in rem against a 16px root, so 19px = 1.1875rem, 24px = 1.5rem, etc. ========================================================================== */ html { scroll-behavior: smooth; } body { background: var(--dbts-paper); color: var(--dbts-ink-soft); font-family: var(--dbts-body); font-size: 19px; /* body floor for an older audience */ font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; } a { text-decoration: none; color: var(--dbts-accent); } a:hover { color: var(--dbts-accent-dim); } /* Divi injects a weight onto body copy if none is set explicitly. */ body, p, li, td, .et_pb_text p { font-weight: 400; } /* Section headings are heavy (900); card titles are 700. Both stated at .et_pb_module specificity so Divi's own heading weight can't override them. */ h1, .et_pb_module h1, h2, .et_pb_module h2 { font-weight: 900; } h3, .et_pb_module h3, h4, .et_pb_module h4 { font-weight: 700; } h1, .et_pb_module h1 { font-size: 58px; line-height: 1.06; letter-spacing: -0.025em; } /* 58px */ h2, .et_pb_module h2 { font-size: 2.875rem; } /* 46px */ h3, .et_pb_module h3 { font-size: 1.5rem; letter-spacing: -0.01em; } /* 24px */ h1, h2, h3, h4, h5, h6, .et_pb_module h1, .et_pb_module h2, .et_pb_module h3, .et_pb_module h4 { font-family: var(--dbts-display); line-height: 1.08; letter-spacing: -0.02em; color: var(--dbts-ink); padding-bottom: 0; margin: 0 0 0.35em; } p:last-child, .et_pb_text p:last-child { margin-bottom: 0; } /* Shared section intro paragraph — the muted lead under an h2 */ .dbts-lede { font-size: 1.4375rem; color: var(--dbts-slate); max-width: 80ch; } /* 23px */ /* ========================================================================== 3. LAYOUT ========================================================================== */ .et_pb_section { padding: var(--dbts-section-y) 0; background-color: var(--dbts-paper); border-top: 1px solid var(--dbts-line); /* the 1px rule between every band */ } .et_pb_section:first-of-type { border-top: none; } /* Matches Divi's own inline selector, which would otherwise win. */ body .et_pb_row:not([class*="et_flex_column"]) { width: 100%; max-width: var(--dbts-wrap); padding-left: var(--dbts-gutter) !important; padding-right: var(--dbts-gutter) !important; margin-left: auto; margin-right: auto; } .dbts-grid .et_pb_module { margin-bottom: 0; } /* ========================================================================== 5. HEADER / NAVIGATION ========================================================================== */ #main-header { background-color: var(--dbts-paper); border-bottom: 3px solid var(--dbts-accent); box-shadow: none; } /* Header container matches the page content container so the logo lines up with the content edge below it. */ #main-header .container { width: 100%; max-width: var(--dbts-wrap); padding-left: var(--dbts-gutter); padding-right: var(--dbts-gutter); margin-left: auto; margin-right: auto; padding-top: 0; overflow-x: clip; } #top-menu li a { font-family: var(--dbts-body); font-size: 1.1875rem; /* 19px */ font-weight: 400; color: var(--dbts-ink); opacity: 1; } #top-menu li a:hover, #top-menu-nav>ul>li>a:hover, #top-menu li.current-menu-item a { color: var(--dbts-accent); opacity: 1 !important; } /* ========================================================================== 6. BUTTONS Flat: green fill, white text, no radius, no shadow, generous padding. ========================================================================== */ .et_pb_button, .dbts-btn { /* display: inline-flex; */ align-items: center; gap: 8px; font-family: var(--dbts-body); font-weight: normal; font-size: 1.5625rem; line-height: 1; padding: 23px 40px !important; border-radius: var(--dbts-radius); border: 2px solid transparent; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } /* --- Nav CTA --- WordPress puts menu classes on the
  • , so these reach through to the anchor. Applied via the `dbts-nav-cta` menu item class. */ #top-menu li.dbts-nav-cta { padding-right: 0; display: inline-block; vertical-align: middle; } #top-menu li.dbts-nav-cta > a { display: inline-flex; align-items: center; background-color: var(--dbts-accent); color: #fff !important; font-size: 1.1875rem; /* 19px */ line-height: 1.2; padding: 14px 24px !important; border: 2px solid var(--dbts-accent) !important; border-radius: var(--dbts-radius); opacity: 1; font-family: var(--dbts-text-btn); } .et_mobile_menu li.dbts-nav-cta > a { background-color: var(--dbts-accent); color: #fff !important; font-weight: 700; text-align: center; margin: 10px 5%; width: 90%; border-radius: var(--dbts-radius); border-bottom: none; } /* ========================================================================== 8. FOOTER Dark band. Divi's default footer is #main-footer; a Theme Builder global footer is wrapped in .et-l--footer. Both selected so either works. ========================================================================== */ #main-footer, .et-l--footer { background-color: var(--dbts-ink); color: var(--dbts-paper-muted); } #main-footer, .et-l--footer { font-size: 1.125rem; line-height: 1.7; } #main-footer a, .et-l--footer a { color: var(--dbts-paper-muted); } #main-footer a:hover, .et-l--footer a:hover { color: #fff; } /* Footer column heading + the wordmark in the footer. */ .et-l--footer .dbts-foot-head, #main-footer .dbts-foot-head { color: var(--dbts-footer-head); display: block; margin-bottom: 8px; font-weight: 700; } .et-l--footer .dbts-wordmark, #main-footer .dbts-wordmark { color: var(--dbts-footer-head); font-size: 1.5rem; line-height: 1.15; } /* Footer link lists — real