Current Path : /home/theafprt/conviviality360.com/wp-content/themes/hueman/assets/front/css/_parts/ |
Current File : /home/theafprt/conviviality360.com/wp-content/themes/hueman/assets/front/css/_parts/0_4_header.css |
/* ------------------------------------------------------------------------- * * Section: Header /* ------------------------------------------------------------------------- */ #header { background: #454e5c; position: relative; padding-bottom: 60px;} /*.is-scrolling #header{z-index: 100; }*/ #header .hu-pad { padding-top: 30px; padding-bottom: 30px; } #header .container-inner { position: relative; } .mobile-title-logo-in-header { display: none;} .site-title { font-size: 2.625em; font-weight: 600; letter-spacing: -0.5px; float: left; line-height: 1.4285em; padding: 10px 0; } .site-title a { display: block; color: #fff; max-width: 100%; } .site-title a img { display: block; max-width: 100%; max-height: 60px; height: auto; padding: 0; margin: 0 auto; -webkit-border-radius: 0; border-radius: 0; width: auto; } .site-description { font-size: 1em; font-style: italic; color: #fff; color: rgba(255,255,255,0.5); float: left; margin-left: 20px; line-height: 60px; padding: 10px 0; } .site-image { display: block; margin: 0 auto; max-height: 400px; width: auto;} /* new-site-image + #header-image-wrap height introduced March 2020 for https://github.com/presscustomizr/hueman/issues/852 april 2020 : .header-img-natural-height and .hu-header-img-full-width added for https://github.com/presscustomizr/hueman/issues/877 */ #header-image-wrap { max-height: 400px;} .hu-header-img-natural-height #header-image-wrap { max-height: none;} .new-site-image { display: block; margin: 0 auto; width: 100%;} .hu-header-img-full-width .new-site-image { width:auto; } /* Header Widget Zone Common */ #header-widgets{ display: none;} /*#header-widgets h3 { display: none; }*/ #header-widgets img { display: block; } /* ------------------------------------------------------------------------- * * Header with Nimble template /* ------------------------------------------------------------------------- */ .nimble-template-enabled #header {padding-bottom:0px;} .nimble-template-enabled #page {padding-bottom:0px;margin-top:0px;} .nimble-template-enabled .main-inner {min-height: inherit;} /* ------------------------------------------------------------------------- * * Header Search /* ------------------------------------------------------------------------- */ /* Search in topbar + default styling */ .toggle-search { color: #fff; font-size: 18px; line-height: 24px; cursor: pointer; padding: 13px 20px; display: block; position: absolute; right: 0; top: -50px; -webkit-box-shadow: -1px 0 0 rgba(255,255,255,0.1); box-shadow: -1px 0 0 rgba(255,255,255,0.1); background: none; border: none; } .toggle-search:hover, .toggle-search.active { background: rgba(0,0,0,0.15); color: #fff; } .search-expand { display: none; background: #121d30; position: absolute; top: 0; right: 0; width: 340px; -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.1); box-shadow: 0 1px 0 rgba(255,255,255,0.1); } .is-scrolled .topbar-transparent .search-expand { background: #121d30; background : rgba(18, 29, 48, 0.90); } .search-expand-inner { background: rgba(0,0,0,0.15); padding: 15px; } .search-expand .themeform input { width: 100%; border: 2px solid #e2e2e2; border-radius: 0; } .search-expand .themeform input:focus { } /* Search in header nav */ #main-header-search .toggle-search { top: inherit; float: left; position: relative; z-index: 1; -webkit-box-shadow: none; box-shadow: none; } #main-header-search .search-expand { background: #454e5c; display: none; left: 0px; top: 50px; } /* ------------------------------------------------------------------------- * * Header mobile menu /* ------------------------------------------------------------------------- */ #header #nav-mobile { background-color: #454e5c; } .is-scrolled .topbar-transparent #nav-mobile{ background: #454e5c; background : rgba(69,78,92,0.90); } /* ------------------------------------------------------------------------- * * Header nav topbar /* ------------------------------------------------------------------------- */ #nav-topbar.nav-container { /* default top bar color */ background:#121d30; -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2),0 1px 0 rgba(255,255,255,0.15); box-shadow: 0 0 5px rgba(0,0,0,0.2),0 1px 0 rgba(255,255,255,0.15); /* -webkit-transition: height 0.35s ease-in-out; -moz-transition: height 0.35s ease-in-out; -o-transition: height 0.35s ease-in-out; transition: height, transform 0.35s ease-in-out;*/ -webkit-transition: -webkit-transform 0.35s ease-in-out, height 0.25s ease-in-out, background-color 0.45s ease-in-out; -moz-transition: -moz-transform 0.35s ease-in-out, height 0.25s ease-in-out, background-color 0.45s ease-in-out; -o-transition: -o-transform 0.35s ease-in-out, height 0.25s ease-in-out, background-color 0.45s ease-in-out; transition: transform 0.35s ease-in-out, height 0.25s ease-in-out, background-color 0.45s ease-in-out; } .is-scrolled .topbar-transparent #nav-topbar.nav-container { background: #121d30; background : rgba(18, 29, 48, 0.90); } .topbar-toggle-down { position: absolute; z-index: 10; right: 0; width: 60px; height: 50px; text-align: center; cursor: pointer; /*background: rgba(18, 29, 48, 0.8);*/ display: none; } .topbar-toggle-down i.fa-angle-double-up { display: none; } .topbar-toggle-down i { font-size: 30px; color: #fff; padding: 10px 0; -webkit-transition: -webkit-transform, opacity, .25s ease; -moz-transition: -moz-transform, opacity, .25s ease; -o-transition: -o-transform, opacity, .25s ease; transition: transform, opacity, .25s ease; opacity: 0.6; } .topbar-toggle-down i[data-toggle="down"]:hover { -webkit-transform: translateY(3px); -moz-transform: translateY(3px); -o-transform: translateY(3px); transform: translateY(3px); opacity: 1; } .topbar-toggle-down i[data-toggle="up"]:hover { -webkit-transform: translateY(-3px); -moz-transform: translateY(-3px); -o-transform: translateY(-3px); transform: translateY(-3px); opacity: 1; } /* ------------------------------------------------------------------------- * * Header nav header /* ------------------------------------------------------------------------- */ #nav-header.nav-container { background: #454e5c; z-index: 97; -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 -1px 0 rgba(0,0,0,0.2), inset 1px 0 0 rgba(0,0,0,0.2), inset -1px 0 0 rgba(0,0,0,0.2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 -1px 0 rgba(0,0,0,0.2), inset 1px 0 0 rgba(0,0,0,0.2), inset -1px 0 0 rgba(0,0,0,0.2); } #nav-header .container { padding: 0 15px; } /* ------------------------------------------------------------------------- * * OLD NAV TOGGLE ( can be set in option ) for TOPNAV, MOBILE AND HEADER NAV /* ------------------------------------------------------------------------- */ #nav-topbar .nav-toggle, #nav-header .nav-toggle, #nav-mobile .nav-toggle { background: transparent; color: #fff; -webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,0.06); box-shadow: inset 1px 0 0 rgba(255,255,255,0.06); } #nav-topbar .nav-text, #nav-header .nav-text, #nav-header .nav-text { color: #fff; color: rgba(255,255,255,0.7); } /* ------------------------------------------------------------------------- * * Header STICKY MENUS /* ------------------------------------------------------------------------- */ /*.is-scrolled #header .nav-container.mobile-sticky, .is-scrolled #header .nav-container.desktop-sticky, .is-scrolled #header .search-expand { background-color: #38383a; background-color: rgba(56, 56, 58, 0.9); }*/ .is-scrolled #header .sticky-visible { -webkit-box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.3); } .mobile-menu { display: none; } .mobile-menu .mobile-search { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 6px 14px 15px; } .mobile-menu .mobile-search input.search { width: 100% } /* ------------------------------------------------------------------------- * * Logo and tagline on top of a banner image /* ------------------------------------------------------------------------- */ #header-image-wrap .central-header-zone { position: absolute; top: 0; left: 0; right: 0; } /* ------------------------------------------------------------------------- * * HEADER MEDIA QUERIES FOR TOPNAV, MAIN HEADER NAV, MOBILE NAV, STICKY MENU /* ------------------------------------------------------------------------- */ /* TOP NAV */ @media only screen and (min-width: 720px) { /* fixed nav */ /* .full-width #nav-topbar.nav-container { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 999; max-height: 50px; overflow: hidden;}*/ /*.full-width.topbar-enabled #header { padding-top: 50px; } .full-width #nav-topbar.nav-container { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 999;} .full-width.admin-bar #nav-topbar.nav-container { top: 32px; }*/ /*.header-desktop-sticky.topbar-enabled #header { padding-top: 50px; } .header-desktop-sticky #nav-topbar.nav-container { position: fixed; top: 0; left: 0; right: 0; z-index: 999;} .header-desktop-sticky.admin-bar #nav-topbar.nav-container { top: 32px; } .full-width #nav-topbar.nav-container { width : 100%;}*/ /* common */ #nav-topbar .nav { } #nav-topbar .nav li a { color: #fff; color: rgba(255,255,255,0.7); } /* level 1 */ #nav-topbar .nav > li { border-right: none; } #nav-topbar .nav > li > a:hover, #nav-topbar .nav > li:hover > a { background-color: rgba(0,0,0,0.1); } #nav-topbar .nav li > a:hover, #nav-topbar .nav li:hover > a, #nav-topbar .nav li.current_page_item > a, #nav-topbar .nav li.current-menu-item > a, #nav-topbar .nav li.current-menu-ancestor > a, #nav-topbar .nav li.current-post-parent > a { color: #fff; } /* level 2 & 3 */ #nav-topbar .nav ul { background: #121d30 url(../img/opacity-10.png) repeat; } /* .topbar-transparent #nav-topbar .nav ul { background: #121d30 url(../img/opacity-10.png) repeat;background : rgba(18, 29, 48, 1) url(../img/opacity-10.png) repeat; }*/ .is-scrolled .topbar-transparent #nav-topbar.desktop-sticky .nav ul { background: #121d30 url(../img/opacity-10.png) repeat; background-color: rgba(18,29,48,.90); } #nav-topbar .nav ul li { box-shadow: 0 1px 0 rgba(255,255,255,0.06); -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.06); } #nav-topbar .nav ul li:last-child { box-shadow: none; -webkit-box-shadow: none; } /* New top bar */ #nav-topbar.desktop-sticky { /*max-height: 50px;*/ height: 50px; overflow: hidden; } .nav ul.sub-menu { display: none; } /* HEADER WIDGET ZONE*/ .header-ads-desktop #header-widgets { float: right; display: block; } } /* TOP NAV */ @media only screen and (max-width: 719px) { #header { z-index : 9999 } /* common */ #nav-topbar .container { padding-left: 0; } /* HEADER WIDGET ZONE*/ .header-ads-mobile #header-widgets { float:none; display: block; text-align: center; padding-top: 50px; position: relative;} .both-menus-mobile-on.header-ads-mobile #header-widgets{ top: 0;} /* LOGO AND TAGLINE GROUP */ #header .logo-tagline-group{display: none;} #header.both-menus-mobile-on .logo-tagline-group{display: block;} } /* HEADER NAV */ @media only screen and (min-width: 720px) { /* common */ #nav-header .nav { } #nav-header .nav li a { color: #fff; color: rgba(255,255,255,0.7); } /* level 1 */ #nav-header .nav > li { border-right: none; } #nav-header .nav > li > a:hover, #nav-header .nav > li:hover > a { background: rgba(0,0,0,0.1); } #nav-header .nav li > a:hover, #nav-header .nav li:hover > a, #nav-header .nav li.current_page_item > a, #nav-header .nav li.current-menu-item > a, #nav-header .nav li.current-menu-ancestor > a, #nav-header .nav li.current-post-parent > a { color: #fff; } /* level 2 & 3 */ #nav-header .nav ul { background: #454e5c url(../img/opacity-10.png) repeat; } #nav-header .nav ul li { box-shadow: 0 1px 0 rgba(255,255,255,0.06); -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.06); } #nav-header .nav ul li:last-child { box-shadow: none; -webkit-box-shadow: none; } } @media only screen and (max-width: 719px) { /* common */ #nav-header.nav-container { border-left: 0; border-right: 0; } #nav-header .container { padding: 0; } #nav-header .nav { padding-bottom: 20px; } #header-image-wrap { position: relative; } } /* MOBILE MENU : RULES FOR MENU ITEMS BELOW 719px => Applies to mobile menu if set to topnav, main or mobile */ @media only screen and (max-width: 719px) { #header .nav-container .nav li a { color: #fff; color: rgba(255,255,255,0.9); border-top: 1px solid rgba(255,255,255,0.06); } #header .hu-dropdown-toggle { color: #fff; color: rgba(255,255,255,0.9); } /* level 1 */ #header .nav-container .nav li > a:hover { background: rgba(0,0,0,0.15); color: #fff; } #header .nav-container .nav li.current_page_item > a, #header .nav-container .nav li.current-menu-item > a, #header .nav-container .nav li.current-post-parent > a { text-decoration: underline; background: rgba(0,0,0,0.15); color: #fff; } #header .hu-dropdown-toggle:hover #header .nav-container .nav li.current_page_item > .hu-dropdown-toggle, #header .nav-container .nav li.current-menu-item > .hu-dropdown-toggle, #header .nav-container .nav li.current-post-parent > .hu-dropdown-toggle { color: #fff } } /* STICKY MENU */ @media only screen and (max-width: 719px) { .mobile-menu { display: block; } .desktop-menu { display: none; } .fixed-header-on .mobile-sticky { position: fixed; width: 100%; -webkit-transition: -webkit-transform 0.35s ease-in-out,background-color 0.4s ease-in-out; -moz-transition: -moz-transform 0.35s ease-in-out,background-color 0.4s ease-in-out; -o-transition: -o-transform 0.35s ease-in-out,background-color 0.4s ease-in-out; transition: -webkit-transform 0.35s ease-in-out,-moz-transform 0.35s ease-in-out,-o-transform 0.35s ease-in-out,transform 0.35s ease-in-out,background-color 0.4s ease-in-out; } .fixed-header-on .mobile-sticky.fast { -webkit-transition: -webkit-transform 0.10s ease-in-out,background-color 0.4s ease-in-out; -moz-transition: -moz-transform 0.10s ease-in-out,background-color 0.4s ease-in-out; -o-transition: -o-transform 0.10s ease-in-out,background-color 0.4s ease-in-out; transition: -webkit-transform 0.10s ease-in-out,-moz-transform 0.10s ease-in-out,-o-transform 0.10s ease-in-out,transform 0.10s ease-in-out,background-color 0.4s ease-in-out; } .header-mobile-sticky #header-image-wrap { position: relative; } /* Make sure that we don't need to wait DOM ready js event to have the mobile menu sticky */ /* Otherwise, while waiting for fixed-header-on class to be added ( typically longer if we have a header image ), we might see an unwanted layer of header content disappearing when sticky header set */ .header-mobile-sticky .mobile-sticky { position: fixed; width: 100%; } .header-mobile-sticky #header-image-wrap { padding-top: 50px; } /* Fixes https://github.com/presscustomizr/hueman/issues/527 */ .header-mobile-sticky #header { min-height: 50px; } } /* STICKY MENU */ @media only screen and (min-width: 720px) { .header-desktop-sticky.topbar-enabled #header { padding-top: 50px; } .header-desktop-sticky #nav-topbar.nav-container { position: fixed; z-index: 999; top: 0;} .header-desktop-sticky.admin-bar #nav-topbar.nav-container { top: 32px; } .full-width #nav-topbar.nav-container { width : 100%; top: 0; left: 0; right: 0; } .fixed-header-on .desktop-sticky { position: fixed; } .full-width .fixed-header-on .desktop-sticky { width: 100%; } .boxed .desktop-sticky { width: 1380px; } .fixed-header-on .topbar-toggle-down { -webkit-transition:background-color 0.4s ease-in-out; -moz-transition: background-color 0.4s ease-in-out; -o-transition: background-color 0.4s ease-in-out; transition: background-color 0.4s ease-in-out; } } /* NEW RULES FOR MOBILE MENUS BASED ON USER OPTIONS */ @media only screen and (max-width: 719px) { /* TITLE AND LOGO IN ACTIVE MOBILE MENU ( if not both menus are enabled for mobiles ) */ #header .mobile-title-logo-in-header { display: block; float: left; height: 50px; line-height: 50px; width: 75vw; position: relative; } .both-menus-mobile-on .mobile-title-logo-in-header {display: none!important;} #header .mobile-title-logo-in-header .site-title { height: 100%; width: auto; /*text-align: center;*/ z-index: 3; overflow: hidden; left: 13px; position: relative; max-width: 72vw; line-height: inherit; padding: 0; } #header .mobile-title-logo-in-header .site-title a img { max-height: 45px; max-width: 75%; margin: inherit; } #header .mobile-title-logo-in-header .site-title a { font-size: 0.6em; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; display: inline-block; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); position: absolute; color: #fff; } /* .central-header-zone { display: none;} .both-menus-mobile-on .central-header-zone { display: block;}*/ /* #nav-topbar { display: none;} .top-menu-mobile-on #nav-topbar { display: block; } #nav-header { display: none; } .main-menu-mobile-on #nav-header {display: block; }*/ .both-menus-mobile-on #nav-topbar, .both-menus-mobile-on #nav-header { display: block; } /* set nav-topbar to position fixed if both menu mobile are actived */ /* adjust the header padding top */ .top-menu-mobile-on #nav-topbar .toggle-search { display: none;} /* Hide main-header-search */ #main-header-search { display: none; } }