/* * The theme's own header, restyled to the homepage reference. CSS only: no markup, order or * visibility rule is touched, so the menus, login, the CRM button and both mobile slide-outs behave * as they do everywhere else. Loaded by listin-home.php only while the new homepage renders, and * every rule starts with body.lh-home, so no other page can see any of it. * * Written against the markup both themes share (the parents' template-parts/header/*, which the * listin-child and houzez-child overrides keep): * desktop .header-main-wrap > .header-desktop.header-v1|v4 (#header-section) > .header-inner-wrap * > .navbar > .logo.logo-desktop|logo-splash, nav.main-nav > ul.navbar-nav > li.nav-item > a.nav-link, * .login-register > ul.login-register-nav (login / favourites / phone / .btn-create-listing), * or .logged-in-nav-wrap (avatar + .logged-in-nav dropdown + .btn-create-listing) * two-row .header-v2|v3|v5 > .header-top (logo, contact) + .header-bottom#header-section (nav): only the nav row is dark * mobile .header-mobile > .toggle-button-left | .logo-mobile | .toggle-button-right * slide-outs .nav-mobile > #nav-mobile.main-nav (left: menu, CRM, dashboard) + #navi-user.navi-login-register (right: profile, log out) * * Colours are the reference's header values (its --navy bar, #c1cee0 links, #72c9ff active with a * #64baff underline, #2875f0 pill). The theme paints its header from option-driven inline CSS, so * every selector here is longer than the theme's own; !important appears only where the theme itself * uses it (see the transparent-header block). */ body.lh-home { --lh-hd-bg: #112440; --lh-hd-line: #263b57; --lh-hd-link: #c1cee0; --lh-hd-sign: #cedaeb; --lh-hd-active: #72c9ff; --lh-hd-under: #64baff; --lh-hd-btn: #2875f0; --lh-hd-btn-hover: #0751cf; --lh-hd-ink: #23364e; --lh-hd-blue: #1264ee; --lh-hd-pale: #eef4ff; --lh-hd-rule: #e5eaf1; --lh-hd-font: Manrope, Arial, Helvetica, sans-serif; } /* ------------------------------------------------------------ the bar */ body.lh-home .header-main-wrap .header-v1, body.lh-home .header-main-wrap .header-v4, body.lh-home .header-main-wrap .header-v6, body.lh-home .header-main-wrap .header-v6 .header-top, body.lh-home .header-main-wrap .header-v2 .header-bottom, body.lh-home .header-main-wrap .header-v3 .header-bottom, body.lh-home .header-main-wrap .header-v5 .header-bottom { background-color: var(--lh-hd-bg); border-color: var(--lh-hd-line); } body.lh-home .header-main-wrap .header-v1, body.lh-home .header-main-wrap .header-v4 { border-bottom: 1px solid var(--lh-hd-line); } /* the reference's bar is 79px tall; the theme's own is whatever its option says (90px here) */ body.lh-home .header-main-wrap .header-v1 .header-inner-wrap, body.lh-home .header-main-wrap .header-v1 .navbar-logged-in-wrap, body.lh-home .header-main-wrap .header-v4 .header-inner-wrap, body.lh-home .header-main-wrap .header-v4 .navbar-logged-in-wrap { height: 79px; line-height: 79px; } /* The theme's "transparent header" option (it is on for some front pages) lays the bar over the first section (header style 4 only, so there is no v1 case) and keeps it clear with !important; the homepage's own hero starts below the bar, so the bar sits in the flow and is navy, not clear. !important only because the theme's rule has it. */ body.lh-home .header-main-wrap.header-transparent-wrap { position: relative; } body.lh-home .header-main-wrap.header-transparent-wrap .header-v4 { background-color: var(--lh-hd-bg) !important; border-bottom: 1px solid var(--lh-hd-line); } /* ------------------------------------------------------------ logo */ body.lh-home .header-main-wrap .header-desktop .logo img { height: 42px; width: auto; max-width: none; } /* ------------------------------------------------------------ type */ body.lh-home .header-main-wrap .main-nav, body.lh-home .header-main-wrap .login-register, body.lh-home .header-main-wrap .logged-in-nav, body.lh-home .header-main-wrap .btn-phone-number, body.lh-home .header-main-wrap .btn.btn-create-listing, body.lh-home .header-main-wrap .main-nav .dropdown-menu { font-family: var(--lh-hd-font); text-transform: none; letter-spacing: 0; } /* ------------------------------------------------------------ menu links, active underline */ body.lh-home .header-main-wrap .header-desktop .main-nav .navbar-nav > .nav-item > a.nav-link { position: relative; background-color: transparent; color: var(--lh-hd-link); font-size: 13px; font-weight: 500; transition: color 0.2s; } body.lh-home .header-main-wrap .header-desktop .main-nav .navbar-nav > .nav-item > a.nav-link:hover, body.lh-home .header-main-wrap .header-desktop .main-nav .navbar-nav > .nav-item > a.nav-link:focus, body.lh-home .header-main-wrap .header-desktop .main-nav .navbar-nav > .nav-item > a.nav-link:active, body.lh-home .header-main-wrap .header-desktop .main-nav .navbar-nav > .nav-item.show > a.nav-link { background-color: transparent; color: #fff; } body.lh-home .header-main-wrap .header-desktop .main-nav .navbar-nav > .nav-item.current-menu-item > a.nav-link, body.lh-home .header-main-wrap .header-desktop .main-nav .navbar-nav > .nav-item.current_page_item > a.nav-link, body.lh-home .header-main-wrap .header-desktop .main-nav .navbar-nav > .nav-item.current-menu-ancestor > a.nav-link, body.lh-home .header-main-wrap .header-desktop .main-nav .navbar-nav > .nav-item.current-menu-parent > a.nav-link, body.lh-home .header-main-wrap .header-desktop .main-nav .navbar-nav > .nav-item.current_page_ancestor > a.nav-link { color: var(--lh-hd-active); } /* :before, not :after: the theme's dropdown caret already uses a.dropdown-toggle:after */ body.lh-home .header-main-wrap .header-desktop .main-nav .navbar-nav > .nav-item.current-menu-item > a.nav-link:before, body.lh-home .header-main-wrap .header-desktop .main-nav .navbar-nav > .nav-item.current_page_item > a.nav-link:before, body.lh-home .header-main-wrap .header-desktop .main-nav .navbar-nav > .nav-item.current-menu-ancestor > a.nav-link:before, body.lh-home .header-main-wrap .header-desktop .main-nav .navbar-nav > .nav-item.current-menu-parent > a.nav-link:before, body.lh-home .header-main-wrap .header-desktop .main-nav .navbar-nav > .nav-item.current_page_ancestor > a.nav-link:before { content: ''; position: absolute; left: 15px; right: 15px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--lh-hd-under); } /* a sub-menu drops onto the page, so it stays a light card with readable ink */ body.lh-home .header-main-wrap .main-nav .dropdown-menu { border: 1px solid var(--lh-hd-rule); border-radius: 12px; box-shadow: 0 14px 30px rgba(16, 41, 74, 0.14); } body.lh-home .header-main-wrap .main-nav .navbar-nav .nav-item .nav-item a { color: var(--lh-hd-ink); font-size: 13px; font-weight: 500; } body.lh-home .header-main-wrap .main-nav .navbar-nav .nav-item .nav-item a:hover, body.lh-home .header-main-wrap .main-nav .navbar-nav .nav-item .nav-item a:active { color: var(--lh-hd-blue); background-color: var(--lh-hd-pale); } /* ------------------------------------------------------------ login, favourites, phone: the reference's .signin */ body.lh-home .header-main-wrap .header-desktop .login-register-nav a:not(.btn-create-listing), body.lh-home .header-main-wrap .header-desktop .login-register-nav .btn-icon-login-register, body.lh-home .header-main-wrap .header-desktop .btn-phone-number a { color: var(--lh-hd-sign); font-size: 12px; font-weight: 500; background-color: transparent; } body.lh-home .header-main-wrap .header-desktop .login-register-nav a:not(.btn-create-listing):hover, body.lh-home .header-main-wrap .header-desktop .login-register-nav .btn-icon-login-register:hover, body.lh-home .header-main-wrap .header-desktop .btn-phone-number a:hover { color: #fff; } /* the login icon opens a theme dropdown (favourites): that card is light, so its links stay dark */ body.lh-home .header-main-wrap .header-desktop .login-register-nav .dropdown-menu a:not(.btn-create-listing) { color: var(--lh-hd-ink); } body.lh-home .header-main-wrap .header-desktop .login-register-nav .dropdown-menu a:not(.btn-create-listing):hover { color: var(--lh-hd-blue); } /* ------------------------------------------------------------ the pill: the reference's .btn.btn-small (Create a Listing, in the bar and both slide-outs) */ body.lh-home .header-main-wrap .btn-create-listing, body.lh-home .nav-mobile .btn-create-listing, body.lh-home .navi-login-register .btn-create-listing { background-color: var(--lh-hd-btn); border: 1px solid transparent; border-radius: 9px; color: #fff; font-family: var(--lh-hd-font); font-size: 12px; font-weight: 600; line-height: 38px; height: 40px; padding: 0 16px; text-transform: none; letter-spacing: 0; white-space: nowrap; transition: background-color 0.2s, transform 0.2s; } body.lh-home .header-main-wrap .btn-create-listing:hover, body.lh-home .header-main-wrap .btn-create-listing:focus, body.lh-home .header-main-wrap .btn-create-listing:active, body.lh-home .nav-mobile .btn-create-listing:hover, body.lh-home .nav-mobile .btn-create-listing:focus, body.lh-home .nav-mobile .btn-create-listing:active, body.lh-home .navi-login-register .btn-create-listing:hover, body.lh-home .navi-login-register .btn-create-listing:focus, body.lh-home .navi-login-register .btn-create-listing:active { background-color: var(--lh-hd-btn-hover); border-color: transparent; color: #fff; } body.lh-home .header-main-wrap .btn-create-listing:hover { transform: translateY(-1px); } /* ------------------------------------------------------------ mobile bar */ body.lh-home .header-main-wrap .header-mobile { height: 65px; background-color: var(--lh-hd-bg); border-bottom: 1px solid var(--lh-hd-line); } body.lh-home .header-main-wrap .header-mobile .toggle-button-left, body.lh-home .header-main-wrap .header-mobile .toggle-button-right { color: var(--lh-hd-sign); } /* ------------------------------------------------------------ the two slide-outs: white panels, the reference's mobile-menu ink */ body.lh-home .nav-mobile .main-nav, body.lh-home .nav-mobile .navi-login-register, body.lh-home .nav-mobile .logged-in-nav, body.lh-home .nav-mobile .btn-create-listing { font-family: var(--lh-hd-font); text-transform: none; letter-spacing: 0; } body.lh-home .nav-mobile .main-nav .nav-item a, body.lh-home .nav-mobile .logged-in-nav a, body.lh-home .navi-login-register .main-nav .nav-item a { color: var(--lh-hd-ink); border-bottom-color: var(--lh-hd-rule); font-size: 13px; font-weight: 500; } body.lh-home .nav-mobile .main-nav .nav-item a:hover, body.lh-home .nav-mobile .main-nav .nav-item a:active, body.lh-home .nav-mobile .main-nav .nav-item.current-menu-item > a, body.lh-home .nav-mobile .main-nav .nav-item.current_page_item > a, body.lh-home .nav-mobile .main-nav .nav-item.current-menu-ancestor > a, body.lh-home .nav-mobile .logged-in-nav a:hover, body.lh-home .nav-mobile .logged-in-nav a:active, body.lh-home .nav-mobile .logged-in-nav a.active { color: var(--lh-hd-blue); background-color: var(--lh-hd-pale); } body.lh-home .nav-mobile .main-nav .nav-item .nav-item a { color: var(--lh-hd-ink); } /* a current item inside a sub-menu keeps its blue (the rule above would otherwise win by coming later) */ body.lh-home .nav-mobile .main-nav .nav-item .nav-item.current-menu-item > a, body.lh-home .nav-mobile .main-nav .nav-item .nav-item.current_page_item > a, body.lh-home .nav-mobile .main-nav .nav-item .nav-item.current-menu-ancestor > a { color: var(--lh-hd-blue); background-color: var(--lh-hd-pale); } body.lh-home .nav-mobile .main-nav .nav-item .nav-item a:hover { color: var(--lh-hd-blue); } /* ------------------------------------------------------------ keyboard focus The theme removes outlines, so Tab needs a ring of its own. Light ring on the navy bar, blue ring on the white panels and cards. Desktop menu links fill the bar's full height, so their ring sits inside them. */ body.lh-home .header-main-wrap .header-desktop a:focus-visible, body.lh-home .header-main-wrap .logo a:focus-visible { outline: 2px solid var(--lh-hd-active); outline-offset: 2px; } body.lh-home .header-main-wrap .header-desktop .main-nav .navbar-nav > .nav-item > a.nav-link:focus-visible { outline-offset: -4px; } body.lh-home .header-main-wrap .header-desktop .dropdown-menu a:focus-visible, body.lh-home .header-main-wrap .header-desktop .logged-in-nav a:focus-visible, body.lh-home .nav-mobile a:focus-visible, body.lh-home .navi-login-register a:focus-visible { outline: 2px solid var(--lh-hd-blue); outline-offset: -2px; } /* !important on `outline` only: the theme ends every button and .btn focus with `outline: 0 !important` (the mobile toggles are