/* Header Top ------------------------------- */ .header-top { //background: var(--dark); background: var(--upei-red); //color: var(--light); color: var(--light); } .header-top a { color: var(--light); } .header-top a:hover, .header-top i { color: var(--primary); } .header-top-block { text-align: center; } /* Header ------------------------------- */ .header { //background: var(--secondary); background: #fff; color: #ffffff; } .header a, .page-header a { color: var(--primary); color: var(--dark-grey); } .header-container { padding: 1rem 0; } .site-brand img { max-height: 50px; display: block; } .site-name { font-family: var(--heading-font); color: var(--primary); font-weight: 700; //font-size: 2rem !important; font-size: ms(2); } .site-name a:hover { color: var(--primary); } /* Header -> Main menu */ .mobile-menu { border-top: 2px solid #ffffff; border-bottom: 2px solid #ffffff; } .mobile-menu span { background-color: #ffffff; } .menu-wrap { font-family: var(--heading-font); font-weight: 700; .menu a { color: var(--dark-grey); } } .menu-wrap ul.menu > li { margin-left: 6px; } .menu-wrap ul.menu li > a { padding: 10px; } .menu-wrap ul.menu { font-size:ms(0); } /* Header -> search block region */ .search-icon { width: 36px; height: 36px; } .search-icon img { max-height: 30px; } .search-box { background-color: var(--dark); } .search-box-content .block-title, .search-box-content form label { color: var(--light); } .search-box-content input[type='search'] { background: url(../images/icons/search-icon.svg) top right no-repeat; color: #ffffff; -webkit-text-fill-color: #ffffff; border-bottom: 2px solid var(--border); } .search-box-content input[type='search']:focus { background: url(../images/icons/search-icon.svg) top right no-repeat; border: 0; border-bottom: 2px solid var(--border); } .search-box-content input[type='search']:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px var(--dark) inset; background-color: transparent; color: #ffffff; } .header-search-close { border: 3px solid var(--primary); } /* Header -> Page header */ .page-header { //background: var(--secondary); background: #fff; color: var(--upei-green); box-shadow: inset 0px 11px 8px -10px #ccc, inset 0px -11px 8px -10px #ccc; } .page-header a:hover { color: #ffffff; } .region-page-header { align-items: center; } .breadcrumb { color: var(--light); } .page-header .page-title { color: #ffffff; color: var(--upei-green); color: var(--dark); font-variant: small-caps; }