, not on the column. Keep one bar: logo left, menu right.
*/
@media (max-width: 980px) {
body #page-container .iwe-header > .et_pb_row {
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
}
body #page-container .iwe-header > .et_pb_row > .et_pb_column {
width: auto !important; /* overrides Divi's stacked 100% column width */
margin: 0 !important; /* overrides Divi's mobile column bottom margin */
}
body #page-container .iwe-header > .et_pb_row > .et_pb_column:first-child { flex: 0 0 auto; }
body #page-container .iwe-header > .et_pb_row > .et_pb_column:nth-child(2) { flex: 1 1 auto; display: flex; justify-content: flex-end; }
body #page-container .iwe-header > .et_pb_row > .et_pb_column:last-child { display: none; }
/* Divi sizes the dropdown to its nearest positioned ancestor. With the menu
column shrunk to the hamburger, the panel was ~60px wide and wrapped every
item. Release those ancestors so the panel spans the whole header row. */
body #page-container .iwe-header > .et_pb_row { position: relative; }
body #page-container .iwe-header > .et_pb_row > .et_pb_column:nth-child(2),
body #page-container .iwe-header .et_pb_menu,
body #page-container .iwe-header .et_pb_menu_inner_container,
body #page-container .iwe-header .et_pb_menu__wrap,
body #page-container .iwe-header .et_mobile_nav_menu,
body #page-container .iwe-header .mobile_nav { position: static; }
body #page-container .iwe-header .et_mobile_menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
width: auto;
padding: 8px 20px;
box-shadow: 0 18px 40px rgba(16, 24, 44, .35);
}
body #page-container .iwe-header .et_mobile_menu li a {
padding: 14px 0;
white-space: nowrap;
font-size: 13px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
}
body #page-container .iwe-header .et_mobile_menu li:last-child a { border-bottom: 0; }
}
/* Footer: stack the columns on every phone width. Two-across at 480-767px
broke the email address mid-word ("...CO / M"). */
@media (max-width: 767px) {
body #page-container .iwe-footer .et_pb_row > .et_pb_column {
width: 100% !important; /* overrides Divi's 47.25% phone-landscape column width */
margin-right: 0 !important; /* overrides Divi's column gutter */
}
body #page-container .iwe-footer .et_pb_row > .et_pb_column:not(:last-child) { margin-bottom: 30px; }
}
/* Homepage header button: ivory with deep green text. Copper merged into the
hero's copper band on wide screens; ivory reads against the band, the
photograph and the green panel alike. Inner pages keep the deep-teal button. */
body.iwe-home #page-container .iwe-header a.et_pb_button.iwe-header__cta {
color: #0b3a2e;
background: var(--iwe-ivory);
border-color: var(--iwe-ivory);
box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
body.iwe-home #page-container .iwe-header a.et_pb_button.iwe-header__cta:hover {
color: var(--iwe-ivory);
background: #0b3a2e;
border-color: var(--iwe-ivory);
}
/* -------------------------------------------------------------------------
Deferred Theme Builder CSS (404, category and other archive pages).
On pages with no Divi builder content, Divi loads the header and footer
styles as "et-core-unified-cpt-deferred" CSS, prefixed with
`.et-db #et-boc .et-l`. That prefix outranks the `body #page-container`
rules above, so the crests rendered at 500px / 350px on phones and the
inner-page header lost its ivory bar. These repeat the key rules with the
same prefix plus html body, which breaks the specificity tie that the
later-loading deferred file would otherwise win.
------------------------------------------------------------------------- */
html body.et-db #et-boc .et-l .iwe-header .iwe-header__logo img {
width: clamp(120px, 8vw, 148px);
max-width: 100%;
height: auto;
}
html body.et-db #et-boc .et-l .iwe-footer .iwe-footer__logo img {
width: clamp(72px, 8vw, 120px);
max-width: 100%;
height: auto;
}
html body:not(.iwe-home).et-db #et-boc .et-l .iwe-header.et_pb_section {
background-color: var(--iwe-ivory) !important; /* overrides Divi's deferred transparent !important */
}
@media (max-width: 980px) {
html body.et-db #et-boc .et-l .iwe-header .iwe-header__logo .et_pb_image_wrap,
html body.et-db #et-boc .et-l .iwe-footer .iwe-footer__logo .et_pb_image_wrap { display: inline-block; }
html body.et-db #et-boc .et-l .iwe-header .iwe-header__logo img { width: 120px; }
html body.et-db #et-boc .et-l .iwe-footer .iwe-footer__logo img { width: 88px; }
html body.et-db #et-boc .et-l .iwe-header > .et_pb_row {
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
position: relative;
}
html body.et-db #et-boc .et-l .iwe-header > .et_pb_row > .et_pb_column {
width: auto !important; /* overrides Divi's stacked 100% column width */
margin: 0 !important; /* overrides Divi's mobile column bottom margin */
}
html body.et-db #et-boc .et-l .iwe-header > .et_pb_row > .et_pb_column:first-child { flex: 0 0 auto; }
html body.et-db #et-boc .et-l .iwe-header > .et_pb_row > .et_pb_column:nth-child(2) { flex: 1 1 auto; display: flex; justify-content: flex-end; position: static; }
html body.et-db #et-boc .et-l .iwe-header > .et_pb_row > .et_pb_column:last-child { display: none; }
}
@media (max-width: 767px) {
html body.et-db #et-boc .et-l .iwe-footer .et_pb_row > .et_pb_column {
width: 100% !important; /* overrides Divi's deferred phone column width */
margin-right: 0 !important;
}
}
/* -------------------------------------------------------------------------
Sticky header (all pages). assets/js/header.js adds body.iwe-header-stuck
once the visitor scrolls past the header; the header is then fixed to the
top, slides down into view, gains a solid background and tightens up.
Each rule is repeated with the `html body.et-db #et-boc .et-l` prefix so it
also wins on pages that load Divi's deferred Theme Builder CSS.
------------------------------------------------------------------------- */
@keyframes iwe-header-slide {
from { transform: translateY(-100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
body.iwe-header-stuck #page-container .iwe-header.et_pb_section,
html body.iwe-header-stuck.et-db #et-boc .et-l .iwe-header.et_pb_section {
position: fixed;
top: var(--wp-admin--admin-bar--height, 0px);
left: 0;
right: 0;
width: 100%;
z-index: 9990;
box-shadow: 0 10px 30px rgba(16, 24, 44, .18);
animation: iwe-header-slide .45s var(--iwe-ease) both;
}
/* Keep the header's space in the page so content doesn't jump up. */
body.iwe-header-stuck:not(.iwe-home) #et-boc .et-l--header {
min-height: var(--iwe-header-h, 0px);
}
/* Homepage: the header floats over the hero, so it needs its own ground. */
body.iwe-home.iwe-header-stuck #page-container .iwe-header.et_pb_section {
background-color: rgba(11, 58, 46, .96) !important; /* overrides Divi's transparent header background !important */
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
/* Inner pages keep their ivory bar, slightly translucent. */
body.iwe-header-stuck:not(.iwe-home) #page-container .iwe-header.et_pb_section,
html body.iwe-header-stuck:not(.iwe-home).et-db #et-boc .et-l .iwe-header.et_pb_section {
background-color: rgba(247, 240, 227, .97) !important; /* overrides Divi's transparent header background !important */
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
/* Tighter bar and smaller crest while stuck. */
body.iwe-header-stuck #page-container .iwe-header > .et_pb_row,
html body.iwe-header-stuck.et-db #et-boc .et-l .iwe-header > .et_pb_row {
padding-top: 8px;
padding-bottom: 8px;
transition: padding .35s var(--iwe-ease);
}
body.iwe-header-stuck #page-container .iwe-header .iwe-header__logo img,
html body.iwe-header-stuck.et-db #et-boc .et-l .iwe-header .iwe-header__logo img {
width: clamp(52px, 4.4vw, 70px);
}
@media (max-width: 980px) {
body.iwe-header-stuck #page-container .iwe-header .iwe-header__logo img,
html body.iwe-header-stuck.et-db #et-boc .et-l .iwe-header .iwe-header__logo img {
width: 48px;
}
}
@media (prefers-reduced-motion: reduce) {
body.iwe-header-stuck #page-container .iwe-header.et_pb_section,
html body.iwe-header-stuck.et-db #et-boc .et-l .iwe-header.et_pb_section {
animation: none;
}
}
/* IWE-VB-IMAGE-SHIM ---------------------------------------------------
Sections converted from hand-written HTML into Image modules.
Divi wraps the picture in a span, which lands between the container the
design gives a height to and the img that fills it, so rules such as
.iwe-c-hero__media img { height: 100%; object-fit: cover } stop
resolving and the photograph shows uncropped.
Making the span a full-height block hands the img back the parent it
had as plain markup. Where the module has no height of its own,
height: 100% resolves to auto, so this does nothing. Only pictures
this conversion created carry iwe-vb-img, so images the designs
already size themselves are untouched.
--------------------------------------------------------------------- */
.et_pb_module.et_pb_image.iwe-vb-img > .et_pb_image_wrap {
display: block;
height: 100%;
}
/* Divi Text modules set overflow-wrap: break-word, which the Code modules
these replaced never did. On a narrow column that is enough to split a
long word such as QUESTIONS across two lines, so it is turned back off
for converted wording only. */
.et_pb_text.iwe-vb-text,
.et_pb_text.iwe-vb-text .et_pb_text_inner {
overflow-wrap: normal;
word-wrap: normal;
}
/* iwe-prose-underline
Brand guidelines section 11: keep links underlined; never use colour alone
for meaning. Scoped to links inside running text.
Only "p a" is matched, never "li a". The footer menu is a < li < ul, so
leaving list items out excludes it without needing an exception, while
links in sentences are a < p. The legal pages name their own containers
below because their lists are prose, not navigation. */
.et_pb_text_inner p a:not(.iwe-link):not(.iwe-c-btn),
.iwe-p-legal__body a,
.iwe-p-legal__contact a,
.iwe-c-details__text a,
.iwe-c-privacy a,
.iwe-c-faq__intro a,
.iwe-c__wrap p a:not(.iwe-link):not(.iwe-c-btn) {
text-decoration: underline;
text-underline-offset: .18em;
text-decoration-thickness: 1px;
}
/* The footer address is the one list marked up as a paragraph - .iwe-foot-address
IS the , not a wrapper around one - so it
does fall inside the rule above and has to be taken back out. The selector
deliberately carries the same :not() pair as the rule it overrides: without
them it has three classes against four and loses on specificity, which is
exactly how the first attempt at this underlined the whole footer. */
.et_pb_text_inner .iwe-foot-address a:not(.iwe-link):not(.iwe-c-btn),
.iwe-p-legal__toc a,
.iwe-p-legal__related a {
text-decoration: none;
}
.et_pb_text_inner .iwe-foot-address a:not(.iwe-link):not(.iwe-c-btn):hover,
.iwe-p-legal__toc a:hover,
.iwe-p-legal__related a:hover {
text-decoration: underline;
text-underline-offset: .18em;
}