/* ========================================================================== Desktop Header ========================================================================== */ .site-header { display: flex; align-items: center; justify-content: center; height: var(--header-height); background-color: var(--brand-secondary); color: var(--color-white); position: sticky; top: 0; z-index: 1000; } /* Positively-confirmed-non-iOS: restore the original shrink-on-scroll header (is-not-ios class set in header.php's , matching isNotIOS check in navigation.js). iOS Safari flickers when a position: sticky element's height animates while stuck, so the fixed height set above is the default for everyone - shrink is only opted into once a device is confirmed not to be iOS, so if that detection ever fails, the fixed/ no-shrink header (the safe behavior) is what's left in place. */ html.is-not-ios .site-header { transition: height 0.3s ease, min-height 0.3s ease; } html.is-not-ios .site-header.header-scrolled { height: var(--header-height-scrolled, 4.5rem); min-height: var(--header-height-scrolled, 4.5rem); } /* Same container as the banners and page content below it, so the logo starts on exactly the same vertical line as the banner arrow and the page titles, and "Get in touch" ends where the content/sidebar ends. */ .header-desktop { width: 100%; max-width: var(--page-max); margin: 0 auto; padding-inline: var(--page-gutter); box-sizing: border-box; } /* Home page: wider frame, matching the Figma widescreen hero (the hero text below starts on the same line as the logo). */ .home .header-desktop { max-width: var(--page-max-wide, var(--page-max)); } @media (min-width: 961px) { .site-header { padding-inline: 0; } } @media (max-width: 960px) { .header-desktop { display: none; } } /* ========================================================================== Header Layout ========================================================================== */ .header-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; /* max-width: var(--container-width); */ margin-inline: auto; /* padding-inline: var(--space-md); */ } .header-left { flex-shrink: 0; /* Flex (not block) so the inline logo link doesn't sit on a text baseline with descender space under it - that pushed the logo ~4px above the vertical centre of the header, out of line with the menu and the "Get in touch" button (top and scrolled/shrunk state). */ display: flex; align-items: center; align-self: center; line-height: 0; } .header-center { flex: 1; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-xs); padding-inline: var(--space-md); margin-inline: auto; } .header-center-top, .header-center-bottom { display: flex; align-items: center; } .header-center-top { gap: var(--space-md); max-height: 2.5rem; opacity: 1; overflow: hidden; transition: max-height 0.3s ease, opacity 0.25s ease, transform 0.3s ease; } .header-center-top.utility-nav-hidden { max-height: 0; opacity: 0; transform: translateY(-8px); pointer-events: none; } .header-center-bottom { gap: var(--space-lg); } .header-right { display: flex; align-items: center; flex-shrink: 0; } /* ========================================================================== Utility Navigation ========================================================================== */ .utility-nav { display: flex; align-items: center; gap: var(--space-md); } .utility-nav a { color: var(--brand-secondary-2, #8AA2CC); text-align: right; text-decoration: none; font-family: Swiza, sans-serif; font-size: 1rem; font-style: normal; font-weight: 400; line-height: 1.25rem; transition: opacity 0.2s ease; } .utility-nav a:hover { opacity: 0.8; } /* ========================================================================== Primary Navigation ========================================================================== */ .primary-menu { display: flex; align-items: center; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; } .primary-menu>li { display: inline-block; position: relative; } .primary-menu a { color: #FFF; text-align: center; text-decoration: none; font-family: Swiza, sans-serif; font-size: 1.0625rem; font-style: normal; font-weight: 400; line-height: 1.4375rem; transition: opacity 0.2s ease; } .primary-menu a:hover { opacity: 0.9; } /* ========================================================================== Submenu / Dropdown ========================================================================== */ .primary-menu .sub-menu { position: absolute; top: 100%; left: 0; border-radius: 0.5rem; background: #FFF !important; box-shadow: 0 54px 74px 0 rgba(0, 0, 0, 0.25); padding: 1.25rem; min-width: 220px; margin-top: 0; list-style: none; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; z-index: 9999; } .primary-menu>li:hover .sub-menu, .primary-menu>li:focus-within .sub-menu, .primary-menu>li.menu-open .sub-menu, .primary-menu>li:hover>.sub-menu, .primary-menu>li.menu-item-has-children:hover .sub-menu, .primary-menu>li:hover>ul { opacity: 1; visibility: visible; transform: translateY(0); } /* Ensure nested ul elements are treated as submenus */ .primary-menu>li>ul { position: absolute; top: 100%; left: 0; border-radius: 0.5rem; background: #FFF; box-shadow: 0 54px 74px 0 rgba(0, 0, 0, 0.25); padding: 1.25rem; min-width: 220px; margin-top: 0; list-style: none; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; z-index: 9999; } .primary-menu .sub-menu li { display: block; padding: 0.75rem 1rem; border-radius: 0.375rem; transition: background 0.2s ease; position: relative; z-index: 1; } .primary-menu .sub-menu li:hover { background: #f8f8f8; } .primary-menu .sub-menu a { color: #FF7D00; text-decoration: none; display: flex; align-items: center; justify-content: flex-start; font-family: Swiza, sans-serif; font-size: 1.25rem; font-style: normal; font-weight: 600; line-height: 2rem; } .primary-menu .sub-menu a .menu-prefix { color: #FF7D00; } .primary-menu .sub-menu a .menu-prefix::after { content: ''; display: inline-block; width: 8px; height: 10px; margin: 0 0.15rem 0 0.25rem; background-image: url('../images/orange-arrow.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; } .primary-menu .sub-menu a .menu-suffix { color: #001E5A; } .primary-menu .sub-menu a::after { content: ''; display: inline-block; width: 7px; height: 11px; background-image: url('../images/menu-arrow.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; margin-left: auto; } .primary-menu .sub-menu li:hover .menu-suffix, .primary-menu .sub-menu a:hover .menu-suffix { color: #FF7D00; } /* ========================================================================== Logo ========================================================================== */ .site-logo { display: inline-flex; align-items: center; } .site-logo img { display: block; /* Height-driven with width:auto so the wordmark always keeps its own aspect ratio, and in rem so it scales with the rest of the desktop layout (2.4375rem = the SVG's native 39px at the 1920px design size). */ height: 2.4375rem; width: auto; max-width: none; flex-shrink: 0; } /* Same protection if a logo is uploaded under Appearance > Customize > Site Identity (the_custom_logo() prints the upload's pixel width/height attributes, which otherwise get distorted by flex/max-width rules). */ .custom-logo-link { display: inline-flex; align-items: center; flex-shrink: 0; } .custom-logo-link img, img.custom-logo { display: block; height: 2.4375rem; width: auto; max-width: none; object-fit: contain; } .mobile-header .custom-logo-link img, .mobile-header img.custom-logo { height: 1.54663rem; } html.is-not-ios .site-logo img { transition: max-height 0.3s ease; } html.is-not-ios .header-scrolled .site-logo img { max-height: 64px; } /* ========================================================================== Site Title (Fallback) ========================================================================== */ .site-title, .site-description { margin: 0; } .site-title a { color: inherit; text-decoration: none; } /* ========================================================================== CTA Button ========================================================================== */ .button--cta { display: flex; width: 8.625rem; padding: 0.75rem 1.25rem; justify-content: center; align-items: center; gap: 0.625rem; border-radius: 0.5rem; background: #FF7D00; color: #FFF; text-decoration: none; font-family: Swiza, sans-serif; font-size: 1rem; font-style: normal; font-weight: 600; line-height: 1.4rem; /* transition: background 0.2s ease; */ transition: background-color 0.3s ease; } .button--cta:hover { background: #FFA233; color: #FFFFFF; } /* ========================================================================== "Solutions" dropdown trigger (F12 design: "Solutions" + small chevron). It only opens the sub-menu - it is not a link (navigation.js blocks the click), so it also gets a default cursor. ========================================================================== */ .primary-menu > li.menu-item-has-children > a { display: inline-flex; align-items: center; gap: 0.4rem; cursor: default; } .primary-menu > li.menu-item-has-children > a::before { content: ""; order: 2; width: 0.625rem; height: 0.4rem; background: url('../images/chevron-down.svg') center / contain no-repeat; transition: transform 0.2s ease; } .primary-menu > li.menu-item-has-children:hover > a::before, .primary-menu > li.menu-item-has-children.menu-open > a::before, .primary-menu > li.menu-item-has-children:focus-within > a::before { transform: rotate(180deg); }