/*
Header/footer styling for the NEW design, extracted from
/Sitefinity/WebsiteTemplates/AACE_new/App_Themes/AACE_new/global/aaceNEW_styles.css
for use on the internal (non-AACE_new-theme) page templates that got the new
header/footer markup copied from AACE_New.master, WITHOUT switching those
templates over to the AACE_new theme itself.
Scope: header, primary nav, mobile nav panel, search overlay, footer, and the
social icons used in both. Deliberately excludes anything from the full theme
stylesheet that would change body typography/layout/components (h1-h6, buttons,
rows, cards, forms, etc.) - those still come from the internal templates' own
existing (old "AACE") theme.
Asset paths (fonts/images) are rewritten to absolute URLs pointing back at the
AACE_new theme folder, since this file does not live next to those assets.
Every declaration below is !important. The old "AACE" theme's stylesheet
(aace.css) is auto-injected by Sitefinity's classic Theme mechanism, which
always lands AFTER this file's in regardless of source order -
that's outside this file's control. Several selectors here overlap with old
theme rules of equal specificity (a.logo, .login a, etc.), and equal
specificity + later source order means the old theme silently wins without
!important. Confirmed via live diff against the real AACE_New.master homepage.
*/
@font-face {
font-family: "Gentleman";
src: url("/Sitefinity/WebsiteTemplates/AACE_new/App_Themes/AACE_new/global/fonts/Gentleman-600-Regular.otf") format("OpenType"), url("/Sitefinity/WebsiteTemplates/AACE_new/App_Themes/AACE_new/global/fonts/Gentleman-700-Medium.otf") format("OpenType"), url("/Sitefinity/WebsiteTemplates/AACE_new/App_Themes/AACE_new/global/fonts/Gentleman-800-Bold.otf") format("OpenType");
}
/* HEADER */
header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
background: #FFF !important;
box-shadow: 1px 1px 10px rgba(0, 0, 0, .3) !important;
z-index: 9999 !important;
min-height: 130px !important;
/* AACE_New.master's body has line-height:1.75 and font-family:Raleway
site-wide; the old theme's body uses different values (Roboto, tighter
line-height). Setting both here (not on body) keeps the fix scoped to
header/footer instead of changing typography across the whole page. */
line-height: 1.75 !important;
font-family: 'Raleway', sans-serif !important;
}
header:after {
content: '' !important;
display: block !important;
width: 100% !important;
height: 8px !important;
background: linear-gradient( 90deg, #87c540 0%, #87c540 6%, #5974b9 6%, #5974b9 28%, #d84f2b 28%, #d84f2b 50%, #f8981e 50%, #f8981e 72%, #87c540 72%, #87c540 94%, #5974b9 94%) !important;
}
/* Internal templates wrap page content in .mainrow instead of AACE_New's ,
so this compensates for the fixed header the same way `main { padding-top }`
does on AACE_New.master - without it, the header covers the top of the page. */
.mainrow {
padding-top: 165px !important;
/* The old theme's .mainrow already has margin-top:130px (its own compensation
for the OLD fixed header). That stacks with this padding-top instead of
being replaced by it, since they're different properties - zero it out. */
margin-top: 0 !important;
}
/* .stripes is a decorative divider meant to sit between the hero banner
(.row.l2Banner) and the content below it. On templates with no banner
(l3, fullwidth), it's the very first thing in .mainrow instead, showing up
as a redundant rainbow bar right under the header for no reason - hide it
only in that specific case. */
.mainrow > .stripes:first-child {
display: none !important;
}
/* The stripes divider that sits directly under the hero banner needs to be
stacked above the banner's own absolutely-positioned overlay/text layers. */
.row.l2Banner + .stripes {
position: relative !important;
z-index: 9 !important;
}
/* Bootstrap's own .row class (needed for the new header/footer grid) also
matches every .row inside the OLD theme's body content (.l2Banner,
breadsocial, l2main, adverts, etc.), which was built assuming a plain
block-level .row - not Bootstrap's flex/negative-margin behavior. The old
theme only overrides padding on things like .row.l2Banner, so Bootstrap's
display/flex-wrap/margin still apply uncontested and break the banner's
absolute-positioned overlay/text layout. Restore block-level .row
everywhere inside .mainrow, where none of it should be a Bootstrap grid row. */
.mainrow .row {
display: block !important;
flex-wrap: unset !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
padding: 0 !important;
min-height: 130px !important;
}
.mainrow .rowwrap {
padding: 0 !important;
}
.header-top {
color: #FFF !important;
background: #006095 !important;
}
.eyebrow, .login {
display: inline-block !important;
}
.header-top a {
color: #FFF !important;
}
.header-bottom>.container>.row {
position: relative !important;
}
a.logo {
display: block !important;
position: static !important;
width: auto !important;
height: 117px !important;
background: url(/Sitefinity/WebsiteTemplates/AACE_new/App_Themes/AACE_new/global/images/logo.jpg) no-repeat center !important;
background-size: contain !important;
text-indent: -9999px !important;
}
.eyebrow ul {
list-style: none !important;
margin: 0 !important;
}
.eyebrow ul li {
display: inline-block !important;
margin: 0 0 0 1rem !important;
}
.login {
display: flex !important;
align-items: center !important;
margin-left: 1rem !important;
background: #133563 !important;
font-size: 1rem !important;
/* Was "normal" - overrode the header's inherited line-height:1.75, making
"My Profile"/"Logout" compute a shorter line box than the eyebrow items
next to them and throwing off their vertical alignment. */
line-height: 1.75 !important;
}
.login-link {
display: inline-block !important;
text-decoration: none !important;
color: #FFF !important;
transition: background ease-in-out .3s !important;
}
.login i {
font-size: 1.5rem !important;
}
.login a {
color: #FFF !important;
}
.login a:hover {
text-decoration: none !important;
}
.login .dropdown-menu.show {
transform: translate3d(-31px, 25px, 0px) !important;
/* Hack for fixed positioning */
}
.memberLinks {
display: inline-block !important;
}
.memberLinks a {
display: inline-block !important;
margin: 0 .5rem !important;
}
.login:has(ul) {
background: transparent !important;
/* Keep the same 1rem gap from the eyebrow links as the base .login rule -
this used to zero it out, butting My Profile/Logout right up against
the last eyebrow link with no spacing. */
margin-left: 1rem !important;
}
.login ul {
display: flex !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.login ul li {
padding: 0 1em 0 0 !important;
white-space: nowrap !important;
}
a.btn-search {
font-size: 0 !important;
text-decoration: none !important;
color: #FFF !important;
background: #006699 !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
width: 2.5rem !important;
height: 2.5rem !important;
transition: background ease-in-out .3s !important;
}
a.btn-search:before {
content: '\f002' !important;
font-family: "Font Awesome 5 Free" !important;
font-size: 1.25rem !important;
font-weight: 900 !important;
display: inline-block !important;
min-width: 1.5rem !important;
}
a.btn-search.active:before {
content: '\f00d' !important;
}
a.btn-search:hover {
background: #133563 !important;
}
header + .search {
opacity: 0 !important;
background: #d5e8fd !important;
font-family: 'Raleway', sans-serif !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
padding: .75rem !important;
z-index: 9998 !important;
box-shadow: 1px 1px 10px rgb(0 0 0 / 30%) !important;
transition: transform ease-in-out .5s, opacity ease-out 1s !important;
/* The old theme has a generic .search { float:right; margin:1em 0;
border:1px solid #b7b7b7; width:260px; height:32px; } rule that clamps
this overlay down to a tiny bordered box, squeezing the Kendo search
input inside it - reset everything that rule sets but this file didn't
already override. */
float: none !important;
margin: 0 !important;
border: none !important;
width: auto !important;
height: auto !important;
}
header + .search.active {
opacity: 1 !important;
transform: translateY(165px) !important;
/* height of the header */
}
header + .search .col>div {
width: 100% !important;
max-width: 30em !important;
background: #FFF !important;
position: relative !important;
}
.sfsearchTxt {
width: 100% !important;
border: none !important;
padding-right: 5rem !important;
height: 2.5rem !important;
}
header + .search input[type="submit"] {
color: #FFF !important;
background: #133563 !important;
border: none !important;
padding: 0 .5rem !important;
position: absolute !important;
right: 0 !important;
height: 2.5rem !important;
/* The old theme's .search input[type="submit"] rule sets font-size:0 and a
fixed 28px width for its icon-only button design - neither was overridden
here before, so the "Search" text value was rendering invisible/clipped. */
font-size: 1rem !important;
width: auto !important;
top: 0 !important;
}
header .container, footer .container, header + .search .container {
max-width: 1400px !important;
}
/* The old theme has a generic .row { padding: 2em 0; clear: both; } rule that
collides with Bootstrap's .row class name used throughout the new header/footer
markup, adding unwanted vertical padding wherever a row isn't already protected
by a Bootstrap .py-* utility (e.g. footer-bottom's row, which has .py-4 and
isn't affected since Bootstrap utilities are already !important). */
.header-top .row, .header-bottom .row, header + .search .row, .footer-top .row {
padding: 0 !important;
clear: none !important;
}
/* OTB NAVIGATION */
/* Wasn't set explicitly before, so nav text fell through to whatever the old
theme's body font-family happens to be (Roboto) instead of matching the
homepage's Raleway. Set once here so it cascades to every nav link,
including nested submenu items. */
.main-nav {
font-family: 'Raleway', sans-serif !important;
}
.main-nav .k-menu>.k-item {
border: none !important;
}
.main-nav ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.main-nav ul > li {
float: left !important;
position: relative !important;
}
.main-nav ul > li a {
display: block !important;
padding: 0.5em 1.1em 0.4em !important;
line-height: 1.34em !important;
}
.main-nav .k-menu-group li {
float: none !important;
}
.main-nav .k-menu>.k-item .k-link {
font-weight: 900 !important;
text-decoration: none !important;
color: #153666 !important;
position: relative !important;
}
.main-nav .k-menu>.k-item .k-link .k-icon {
display: none !important;
}
.main-nav .k-menu>.k-item .k-link:after {
content: '' !important;
display: block !important;
margin: auto !important;
height: 4px !important;
width: 0px !important;
border: none !important;
background: transparent !important;
transition: width .5s ease, background-color .5s ease !important;
}
.main-nav .k-menu>.k-item .k-link:hover:after {
width: 100% !important;
background: #006095 !important;
}
.main-nav .k-menu-group {
margin-top: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
border: none !important;
border-bottom: 5px solid #006095 !important;
box-shadow: 1px 1px 5px rgba(0, 0, 0, .3) !important;
}
.main-nav .k-menu .k-menu-group>.k-item:hover {
background: #d5e8fd !important;
}
.main-nav .k-menu-group .k-item .k-link {
font-size: 1rem !important;
text-align: left !important;
font-weight: normal !important;
}
.main-nav .k-menu-group .k-item .k-link:after {
display: none !important;
}
/* Right-align the top-level menu strip */
.main-nav .k-menu:not(.k-context-menu) {
display: flex !important;
justify-content: flex-end !important;
}
/* Tighten the top-level link sizing */
.main-nav ul.k-menu > .k-item .k-link {
font-size: 1rem !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
/* Show the small caret/arrow icons inside nested popup items */
.main-nav ul.k-menu ul > .k-item .k-link .k-icon {
display: inline-flex !important;
}
.main-nav .k-svg-icon > svg {
fill: #87c540 !important;
flex: 1 1 auto !important;
}
/* Make sure Kendo's animation/popup containers lay out as blocks */
.main-nav .k-menu .k-animation-container .k-menu-group,
.main-nav .k-menu .k-item div {
display: block !important;
}
/* MVC NAVIGATION (CSS-driven flyouts - no Kendo/RadMenu client widget)
Direct child selectors only match the MVC widget's markup, where
.k-menu-group sits straight under .k-item; the WebForms/Kendo widget
wraps its popups in an extra .k-menu-popup div, so this can't fire there. */
.main-nav .k-menu > .k-item > .k-menu-group,
.main-nav .k-menu-group > .k-item > .k-menu-group {
display: none !important;
position: absolute !important;
z-index: 10002 !important;
min-width: 215px !important;
white-space: nowrap !important;
background: #FFF !important;
}
.main-nav .k-menu > .k-item > .k-menu-group {
top: 100% !important;
left: 0 !important;
}
.main-nav .k-menu-group > .k-item > .k-menu-group {
top: 0 !important;
left: 100% !important;
}
/* The rightmost root items sit at the screen edge, so their nested
flyouts (2nd-level and deeper) would run off-screen opening to the
right - flip those to open to the left instead. */
.main-nav .k-menu > .k-item:nth-last-child(-n+2) .k-menu-group > .k-item > .k-menu-group {
left: auto !important;
right: 100% !important;
}
.main-nav .k-menu > .k-item:hover > .k-menu-group,
.main-nav .k-menu > .k-item:focus-within > .k-menu-group,
.main-nav .k-menu-group > .k-item:hover > .k-menu-group,
.main-nav .k-menu-group > .k-item:focus-within > .k-menu-group {
display: block !important;
}
/* MOBILE NAVIGATION */
#sidr {
font-family: 'Raleway', sans-serif !important;
}
#btn-mobile {
display: none !important;
font-size: 0 !important;
color: #006699 !important;
line-height: 40px !important;
margin-left: 1.5rem !important;
position: relative !important;
top: .25rem !important;
}
#btn-mobile:before {
content: '\f0c9' !important;
font-family: 'Font Awesome 5 Free' !important;
font-size: 2rem !important;
font-weight: 900 !important;
display: inline-block !important;
}
a.mobile-close {
display: block !important;
text-align: center !important;
color: #133563 !important;
padding: 1rem !important;
background: #d5e8fd !important;
}
.mobile-login {
text-align: center !important;
padding: 1rem !important;
}
.mobile-eyebrow {
background: #01476e !important;
}
.mobile-eyebrow ul {
margin: 0 !important;
}
.mobile-eyebrow ul li {
border: none !important;
}
.mobile-eyebrow ul li a {
color: #FFF !important;
}
.mobile-eyebrow ul li:hover {
line-height: 48px !important;
}
.mobile-eyebrow ul li a:hover {
box-shadow: none !important;
}
.mobile-menu .k-treeview {
white-space: normal !important;
}
.mobile-menu .k-treeview .k-item {
padding: 0 !important;
}
.mobile-menu .k-treeview .k-item div {
position: relative !important;
}
.mobile-menu .k-in {
display: block !important;
font-size: 1rem !important;
color: #133563 !important;
margin: 0 !important;
padding: 1rem !important;
padding-left: 2rem !important;
border: none !important;
border-bottom: 1px solid #CCC !important;
}
.mobile-menu .k-treeview .k-icon {
position: absolute !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding-left: 5px !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
.mobile-menu .k-plus:before, .mobile-menu .k-minus:before {
content: '\f054' !important;
font-family: "Font Awesome 5 Free" !important;
font-size: 1.25rem !important;
font-weight: 900 !important;
line-height: 1 !important;
color: #133563 !important;
display: inline-block !important;
position: relative !important;
left: .25rem !important;
}
.mobile-menu .k-minus:before {
content: '\f078' !important;
color: #006699 !important;
}
.mobile-menu .k-group .k-group {
background: #EEE !important;
}
.mobile-menu .k-group .k-group .k-in {
padding-left: 3rem !important;
}
.mobile-menu .k-treeview .k-group .k-group .k-icon {
left: 1rem !important;
}
.mobile-menu .k-group .k-group .k-group .k-in {
padding-left: 4rem !important;
}
.mobile-menu .k-treeview .k-group .k-group .k-group .k-icon {
left: 2rem !important;
}
.mobile-menu .k-group .k-group .k-group .k-group .k-in {
padding-left: 5rem !important;
}
.mobile-menu .k-treeview .k-group .k-group .k-group .k-group .k-icon {
left: 3rem !important;
}
/* FOOTER */
footer {
color: #FFF !important;
margin-top: auto !important;
background: #01476e !important;
line-height: 1.75 !important;
font-family: 'Raleway', sans-serif !important;
}
footer a, footer h1, footer h2, footer h3, footer h4, footer h5 {
color: #FFF !important;
}
.footer-links ul {
font-size: 1.15rem !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.footer-links ul li {
display: inline-block !important;
margin-left: 1rem !important;
}
.header-social a, .footer-social a {
color: #FFF !important;
}
.header-social a:hover, .footer-social a:hover {
color: #ff9933 !important;
}
a.social.comm {
display: block !important;
width: 16px !important;
height: 16px !important;
background: url(/Sitefinity/WebsiteTemplates/AACE_new/App_Themes/AACE_new/global/images/social-comm.png) !important;
top: 2px !important;
position: relative !important;
}
a.social.comm:hover {
background-position: 0 -16px !important;
}
footer a.social.comm {
display: block !important;
width: 26px !important;
height: 26px !important;
background: url(/Sitefinity/WebsiteTemplates/AACE_new/App_Themes/AACE_new/global/images/social-comm-bot.png) !important;
top: 5px !important;
position: relative !important;
}
footer a.social.comm:hover {
background-position: 0 -25.5px !important;
}
/* Twitter/X rebrand: hide the FontAwesome bird glyph and mask in the X logo instead,
since the site's loaded FA versions (4.3.0 / 5.4.1) predate the X icon. */
a.social.tw .fa-twitter:before {
content: '' !important;
}
a.social.tw .fa-twitter {
display: inline-block !important;
width: 1em !important;
height: 1em !important;
vertical-align: -0.125em !important;
background-color: currentColor !important;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E") no-repeat center / contain !important;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E") no-repeat center / contain !important;
}
.footer-address {
position: relative !important;
background: #006095 !important;
font-size: 1.5rem !important;
}
.footer-address:before {
content: '' !important;
position: absolute !important;
width: 200% !important;
height: 100% !important;
left: -200% !important;
top: 0 !important;
background: #006095 !important;
}
.footer-address h3 {
font-family: 'Raleway', sans-serif !important;
font-size: 1.875rem !important;
font-weight: 700 !important;
line-height: 1 !important;
margin-bottom: .5rem !important;
}
.footer-bottom {
color: #FFF !important;
background: #012a40 !important;
}
/* RESPONSIVE */
@media (max-width: 1200px) {
header {
min-height: 117px !important;
}
.header-top, .main-nav {
display: none !important;
}
#btn-mobile {
display: inline-flex !important;
}
.mainrow {
padding-top: 117px !important;
}
header + .search.active {
transform: translateY(117px) !important;
/* height of the header */
}
.login .dropdown-toggle::after {
display: none !important;
}
.login .dropdown-menu.show {
right: -1.5rem !important;
/* width of the icon */
left: auto !important;
}
}
@media(max-width: 768px) {
.footer-links ul li {
margin: 0 .5rem !important;
}
}
/* BACKEND OVERWRITES (Sitefinity page/template editor) */
.sfPageEditor header {
position: relative !important;
}
.sfPageEditor header .row {
height: auto !important;
}
.sfTemplateEditor header + .search {
position: relative !important;
opacity: 1 !important;
}
.sfPageEditor .mainrow {
padding-top: 0 !important;
}
.sfTemplateEditor .sidr {
position: relative !important;
width: 100% !important;
left: auto !important;
}