/* =GrabSauce — site header * ----------------------------------------------------------------------- * Divi ships a white header bar. Every page that actually renders the theme * header (the front page uses the blank template and draws its own) is dark * navy, so a white bar floated above the content and, worse, made the white * half of the logo wordmark invisible. * * Loaded on every page — the header is global, unlike podcast.css. * -------------------------------------------------------------------- */ :root { --gs-orange: #e77f24; --gs-teal: #2ec4b6; --gs-navy: #1a1a2e; --gs-navy-mid: #16213e; --gs-navy-dark: #111128; --gs-grey: #b0b0c0; --gs-mono: 'Courier New', Courier, monospace; } /* header.css came from the Explore Digital child theme and hard-codes that brand's navy (#062252) onto and #et-main-area — on grabsauce.com it showed up as a stray blue band under the header. Its 85px top padding also double-counted the fixed-header offset that #page-container already adds. */ body, body.no-scroll { background: var(--gs-navy); } #et-main-area { background: var(--gs-navy) !important; padding-top: 0; } #main-header, #main-header.et-fixed-header { background-color: var(--gs-navy-dark) !important; box-shadow: 0 1px 0 rgba(231, 127, 36, 0.35); } /* Nav */ #top-menu a, #et-top-navigation a, .et-fixed-header #top-menu a { color: var(--gs-grey) !important; font-family: var(--gs-mono); font-size: 15px; letter-spacing: .3px; } #top-menu a:hover, .et-fixed-header #top-menu a:hover { color: var(--gs-orange) !important; opacity: 1; } #top-menu li.current-menu-item > a, .et-fixed-header #top-menu li.current-menu-item > a { color: var(--gs-orange) !important; } /* Search + mobile toggles are icon fonts coloured by `color` */ #et_top_search .et-search-form input, #et_search_icon::before, .et-fixed-header #et_search_icon::before, #et_mobile_nav_menu .mobile_menu_bar::before, #et_mobile_nav_menu .select_page { color: var(--gs-grey) !important; } #et_search_icon:hover::before { color: var(--gs-orange) !important; } .et_search_outer, .container.et_search_form_container { background-color: var(--gs-navy-dark) !important; } .et-search-form input { color: var(--gs-grey); } /* Mobile dropdown panel */ #mobile_menu, .et_mobile_menu { background-color: var(--gs-navy-mid); border-top: 3px solid var(--gs-orange); } .et_mobile_menu li a { color: var(--gs-grey) !important; border-bottom: 1px solid rgba(176, 176, 192, .12); } .et_mobile_menu li a:hover { color: var(--gs-orange) !important; background-color: rgba(231, 127, 36, .08); } /* Logo — the wordmark is drawn for a dark ground and is 1200px wide at source, so cap it rather than letting Divi's inline width/height attributes win. */ #logo { max-height: 46px; width: auto; } /* ── Divi builder pages on the default (contained) template ──────────────── * Every page here is a full-bleed builder layout. On the default template Divi * nests those sections inside #left-area next to a sidebar, which boxes the * hero and leaves the stock widget column hanging off the side. Unwrap it; the * rows inside each section carry their own max-width. */ .gs-builder #main-content .container, .gs-builder #left-area { width: 100%; max-width: none; padding: 0; margin: 0; } .gs-builder #main-content .container::before { display: none; /* Divi's sidebar divider rule */ } .gs-builder #sidebar { display: none; } .gs-builder #left-area { float: none; } .gs-builder .entry-content { padding-bottom: 0; } /* Each layout opens with its own hero

; Divi's template title would be a second one saying the same thing. */ .gs-builder .main_title, .gs-builder .et_post_meta_wrapper > h1.entry-title { display: none; }