/* ========================================================================== divi-overrides.css — WordPress and Divi corrections ONLY. Nothing in this file is part of the design system. Design-system rules go in dehaven.css, which the static sections also load; anything added here reaches the WordPress pages alone and will silently drift the two halves apart. Everything here exists to stop Divi's own defaults from fighting the system. ========================================================================== */ /* --- 1. Let the page ground show through -------------------------------- Divi paints #et-main-area and every section with its own background, which would cover the desert gradient and the grain layer on . */ #page-container, #et-main-area, #main-content, .et_pb_section, .et_pb_row, .et_pb_column { background-color: transparent; } /* Divi's fixed-nav offset assumes Divi's own header, which we replace. */ #page-container { padding-top: 0 !important; } /* --- 2. Hand typography back to the design system ------------------------ Divi sets font-family, size, colour and line-height on body and headings from the Theme Customizer. Those declarations are more specific than ours, so they have to be neutralised rather than merely overridden. */ body, .et_pb_text, .et_pb_module, #et-main-area p, #et-main-area li { font-family: var(--font-body); color: var(--text); line-height: 1.7; } #et-main-area h1, #et-main-area h2, #et-main-area h3, #et-main-area h4, #et-main-area h5, #et-main-area h6, .et_pb_module h1, .et_pb_module h2, .et_pb_module h3, .et_pb_module h4, .et_pb_module h5, .et_pb_module h6 { font-family: var(--font-head); color: var(--bone); letter-spacing: var(--tracking-head); line-height: 1.15; padding-bottom: 0; /* Divi adds bottom padding to every heading */ } #et-main-area h1 { font-size: var(--step-3); } #et-main-area h2 { font-size: var(--step-2); } #et-main-area h3 { font-size: var(--step-1); } #et-main-area a { color: var(--clay); } #et-main-area a:hover { color: var(--brass); } /* Our own components must never inherit Divi's heading sizing. */ #et-main-area .card__title { font-size: var(--step-1); } #et-main-area .card--feature .card__title { font-size: var(--step-2); } #et-main-area .hero__title { font-size: var(--step-4); } /* --- 3. Divi's Blog module as ministry update cards ---------------------- The Ministry landing page uses Divi's Blog module. This reshapes its default article markup into the card component without needing a custom module. */ .et_pb_blog_grid .et_pb_post { position: relative; display: flex; flex-direction: column; padding: clamp(1.3rem, 1rem + 1.2vw, 2rem); border: 1px solid var(--hair); border-radius: var(--radius); background: linear-gradient(165deg, var(--ink-high), var(--ink-raised) 62%); box-shadow: var(--shadow); transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease); } .et_pb_blog_grid .et_pb_post:hover { transform: translateY(-4px); border-color: var(--hair-strong); box-shadow: var(--shadow-lift); } .et_pb_blog_grid .entry-title { font-size: var(--step-1); margin-bottom: .4rem; } .et_pb_blog_grid .entry-title a { color: var(--bone); text-decoration: none; } .et_pb_blog_grid .entry-title a:hover { color: var(--brass); } .et_pb_blog_grid .post-content, .et_pb_blog_grid .post-content p { color: var(--text-dim); } /* Divi's post meta line — date, author, categories. */ .et_pb_blog_grid .post-meta, .et_pb_blog_grid .post-meta a { font-family: var(--font-head); font-size: var(--step--2); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-faint); text-decoration: none; } .et_pb_blog_grid .post-meta a:hover { color: var(--brass); } .et_pb_blog_grid .et_pb_image_container { border-radius: var(--radius-sm); overflow: hidden; } .et_pb_blog_grid .more-link { display: inline-flex; align-items: center; gap: .5rem; margin-top: auto; padding-top: .9rem; font-family: var(--font-head); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .12em; color: var(--clay); text-decoration: none; } /* Pagination */ .pagination a, .wp-pagenavi a, .wp-pagenavi span { font-family: var(--font-head); font-size: var(--step--1); letter-spacing: .1em; color: var(--text-dim); } /* --- 4. Single post ------------------------------------------------------ */ .single .entry-content { max-width: var(--measure); } .single .entry-content > * + * { margin-top: 1.1em; } .single .entry-content li::marker { color: var(--brass); } /* --- 5. Divi buttons ----------------------------------------------------- */ #et-main-area .et_pb_button, #et-main-area .et_pb_button:hover { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; border-radius: var(--radius-sm); border: 1px solid var(--hair-strong); color: var(--bone); background: linear-gradient(180deg, rgba(200, 150, 62, .18), rgba(200, 150, 62, .06)); padding: .8rem 1.5rem; transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); } #et-main-area .et_pb_button:hover { background: linear-gradient(180deg, rgba(200, 150, 62, .30), rgba(200, 150, 62, .12)); border-color: var(--brass); transform: translateY(-2px); } /* Divi appends an arrow glyph via ::after; ours is part of the component. */ #et-main-area .et_pb_button::after { color: var(--brass); } /* --- 6. Forms — FluentForms (ministry subscribe) and comments ------------ */ .fluentform input[type="text"], .fluentform input[type="email"], .fluentform textarea, .fluentform select, #et-main-area input[type="text"], #et-main-area input[type="email"], #et-main-area textarea { font-family: var(--font-body); font-size: var(--step-0); color: var(--bone); background: var(--ink-raised); border: 1px solid var(--hair); border-radius: var(--radius-sm); padding: .7rem .9rem; width: 100%; } .fluentform input::placeholder, #et-main-area input::placeholder { color: var(--text-faint); } .fluentform input:focus, .fluentform textarea:focus { outline: 2px solid var(--brass); outline-offset: 2px; border-color: var(--brass); } .fluentform .ff-btn-submit { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .14em; background: linear-gradient(180deg, var(--clay), #8F3F2A); border: 0; border-radius: var(--radius-sm); color: #FBF4E8; padding: .8rem 1.5rem; cursor: pointer; } .fluentform .ff-btn-submit:hover { background: linear-gradient(180deg, #C4623F, var(--clay)); } /* --- 7. Complianz cookie banner ------------------------------------------ */ .cmplz-cookiebanner { background: var(--ink-raised) !important; border: 1px solid var(--hair) !important; border-radius: var(--radius) !important; color: var(--text) !important; font-family: var(--font-body) !important; } .cmplz-cookiebanner .cmplz-title { font-family: var(--font-head) !important; color: var(--bone) !important; } .cmplz-cookiebanner .cmplz-btn { font-family: var(--font-head) !important; letter-spacing: .1em; } /* --- 8. WordPress admin bar --------------------------------------------- */ body.admin-bar .site-header { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .site-header { top: 46px; } } /* --- 9. Visual Builder --------------------------------------------------- Inside the builder, sticky positioning and the fixed grain overlay make modules hard to grab. Neutralise both while editing only. */ body.et-fb .site-header { position: static; } body.et-fb::before { display: none; } /* -------------------------------------------------------------------------- 10. REPLACE DIVI'S CHROME The site header and footer are rendered by the child theme on wp_body_open and wp_footer, so that WordPress and the hand-built static pages carry identical markup. Divi's own header/footer are markup in header.php and footer.php rather than anything hookable, so they are hidden here. -------------------------------------------------------------------------- */ #top-header, #main-header, #main-footer, #footer-bottom, .et_slide_in_menu_container, .et_pb_scroll_top { display: none !important; } /* Divi reserves space for its fixed header on every page. */ #page-container { padding-top: 0 !important; margin-top: 0 !important; } .et_non_fixed_nav #page-container, .et_fixed_nav #page-container { padding-top: 0 !important; } /* Divi's default (non-builder) page markup: kill the sidebar and the auto-printed title, since our page content carries its own hero. */ #main-content .container::before { display: none; } /* the sidebar rule */ #sidebar { display: none; } #left-area { width: 100%; padding-right: 0; float: none; } .main_title { display: none; } #main-content > .dehaven-main { padding-block: 0 0; } /* -------------------------------------------------------------------------- 11. SINGLE POST + ARCHIVE (child theme templates) -------------------------------------------------------------------------- */ .dh-single { padding-block: clamp(2.5rem, 2rem + 3vw, 4rem) 0; } .dh-single__head { margin-bottom: 1.8rem; } .dh-single__title { font-size: var(--step-3); margin: .5rem 0 .6rem; } .dh-single__meta { font-family: var(--font-head); font-size: var(--step--2); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-faint); margin: 0; } .dh-single__image { margin-block: 1.8rem; border: 1px solid var(--hair); border-radius: var(--radius); overflow: hidden; } .dh-single__image img { width: 100%; display: block; } .dh-postnav { display: flex; justify-content: space-between; gap: var(--gap); flex-wrap: wrap; margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--hair-soft); font-family: var(--font-head); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; } .dh-postnav a { color: var(--text-dim); text-decoration: none; } .dh-postnav a:hover { color: var(--brass); } .dh-pagination { margin-top: 2.5rem; } .dh-pagination .nav-links { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; } .dh-pagination .page-numbers { display: grid; place-items: center; min-width: 2.4rem; height: 2.4rem; padding-inline: .6rem; border: 1px solid var(--hair-soft); border-radius: var(--radius-sm); font-family: var(--font-head); font-size: var(--step--1); color: var(--text-dim); text-decoration: none; } .dh-pagination .page-numbers:hover { border-color: var(--brass); color: var(--bone); } .dh-pagination .page-numbers.current { background: rgba(200, 150, 62, .14); border-color: var(--hair-strong); color: var(--bone); } /* the_excerpt() wraps in

; inside a card that should not add its own margin. */ .card__body > p:last-child { margin-bottom: 0; }