/* =========================================================================== SITE HEADER - STYLES v2 Linked from inside the "SPL Header" component, immediately before the header markup, so it is in place before the header first paints. WHY v2 EXISTS - THE "HEADER WORDS SHRINK FOR A MOMENT" BUG. v1 held only the header's BASE styles. Every correction made to the header since - the 96px bar (base is 132px), 20px labels (base is 15.2px), the 64px logo (base is 88px), and "Start an enquiry" as an underlined text link (base is an orange pill) - lived in the site-wide stylesheet, which is linked from the site FOOTER slot, i.e. the very end of every page. So on every page load the header painted in its old look first, then snapped to the corrected look once the last stylesheet on the page arrived. On a fast or cached load that happens before the first frame and nobody sees it; on a slower load you see the bar, the words and the logo jump. That is why it was intermittent and hard to reproduce. Fix: those corrections now live HERE, below the base rules, so the header's final look is fully defined by the time the header is drawn. They were lifted verbatim out of the site stylesheet - the three blocks are unchanged and appended in the order they used to apply, so the cascade between base and correction is exactly what it was, only earlier. Left in the site stylesheet on purpose: two shared palette rules that also colour the dropdown panel and the mobile menu heading. Both are hidden until opened, so their load timing cannot cause a visible jump. =========================================================================== */ /* --------------------------------------------------------------------------- PART 1 - BASE (unchanged from v1, originally lifted verbatim from the nav embed's inline styles) --------------------------------------------------------------------------- */ #spl-nav{--navy:#111437;--orange:#E46021;--cream:#FEF3EC;--b:rgba(255,255,255,.15);font-family:"DM Sans",sans-serif;-webkit-font-smoothing:antialiased;} #spl-nav *{box-sizing:border-box;margin:0;padding:0;} /* -- Bar -- */ #spl-nav .nb{background:var(--navy);border-bottom:1px solid var(--b);position:sticky;top:0;z-index:200;} #spl-nav .nb-inner{max-width:1280px;margin:0 auto;padding:0 clamp(24px,4.5vw,80px);display:flex;align-items:center;height:132px;gap:2rem;} /* Logo */ #spl-nav .nb-logo{font-family:"Reckless",serif;font-weight:300;font-size:.95rem;line-height:1.15;letter-spacing:-.01em;color:#fff;text-decoration:none !important;white-space:nowrap;flex-shrink:0;border-right:1px solid var(--b);padding-right:2.5rem;margin-right:.75rem;display:flex;align-items:center;} #spl-nav .nb-logo img{height:88px;width:auto;display:block;} /* Level 1 links */ #spl-nav .nb-links{display:flex;align-items:center;flex:1;list-style:none;gap:0;} #spl-nav .nb-item{position:relative;} #spl-nav .nb-item > a, #spl-nav .nb-item > button{font-size:.95rem;font-weight:500;color:#fff;text-decoration:none !important;padding:0 1.25rem;height:132px;display:inline-flex;align-items:center;gap:.3rem;background:none;border:none;cursor:pointer;transition:color .2s;white-space:nowrap;font-family:"DM Sans",sans-serif;} #spl-nav .nb-item > a:hover, #spl-nav .nb-item > button:hover, #spl-nav .nb-item:hover > a, #spl-nav .nb-item:hover > button{color:#fff;} #spl-nav .nb-chevron{width:12px;height:12px;transition:transform .2s;} #spl-nav .nb-item:hover .nb-chevron{transform:rotate(180deg);} /* Dropdown */ #spl-nav .nb-drop{position:absolute;top:100%;left:0;background:#fff;border:1px solid rgba(17,20,55,.08);border-radius:12px;padding:.5rem;min-width:200px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s;box-shadow:0 8px 32px rgba(17,20,55,.15);z-index:300;} #spl-nav .nb-item:hover .nb-drop{opacity:1;visibility:visible;transform:translateY(0);} #spl-nav .nb-drop a{display:block !important;font-size:.85rem;font-weight:400;color:#111437 !important;text-decoration:none !important;padding:.55rem .85rem;border-radius:8px;transition:background .15s,color .15s;} #spl-nav .nb-drop a:hover{background:var(--cream);color:var(--navy) !important;} /* Right side */ #spl-nav .nb-right{display:flex;align-items:center;gap:.75rem;margin-left:auto;flex-shrink:0;} #spl-nav .nb-pill{display:inline-flex;align-items:center;gap:6px;background:var(--orange);color:#fff !important;font-family:"DM Sans",sans-serif;font-size:.82rem;font-weight:500;padding:.5rem 1.25rem;border-radius:100px;text-decoration:none !important;transition:background .2s;white-space:nowrap;} #spl-nav .nb-pill:hover{background:#D45516;} /* Hamburger */ #spl-nav .nb-ham{display:none;background:none;border:none;cursor:pointer;padding:6px;flex-direction:column;gap:5px;margin-left:auto;} #spl-nav .nb-ham span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:all .25s;} #spl-nav .nb-ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg);} #spl-nav .nb-ham.open span:nth-child(2){opacity:0;} #spl-nav .nb-ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* Full-screen overlay */ #spl-nav .nb-overlay{position:fixed;inset:0;background:var(--cream);z-index:500;display:flex;flex-direction:column;padding:0;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;} #spl-nav .nb-overlay.open{opacity:1;visibility:visible;} #spl-nav .nb-overlay-top{display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4vw,40px);height:132px;border-bottom:1px solid rgba(17,20,55,.08);flex-shrink:0;} #spl-nav .nb-overlay-close{background:none;border:none;cursor:pointer;color:var(--navy);display:flex;align-items:center;justify-content:center;padding:6px;} #spl-nav .nb-overlay-close svg{width:24px;height:24px;} #spl-nav .nb-overlay-links{flex:1;overflow-y:auto;padding:clamp(32px,5vw,56px) clamp(20px,4vw,40px);} #spl-nav .nb-overlay-group{margin-bottom:2.5rem;} #spl-nav .nb-overlay-head{font-size:.65rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:#E46021;margin-bottom:.75rem;} #spl-nav .nb-overlay-links a{display:block !important;font-family:"Reckless",serif;font-size:clamp(1.6rem,5vw,2.2rem);font-weight:300;color:var(--navy) !important;text-decoration:none !important;line-height:1.2;padding:.35rem 0;letter-spacing:-.02em;transition:opacity .15s;} #spl-nav .nb-overlay-links a:hover{opacity:.6;} #spl-nav .nb-overlay-bottom{padding:clamp(20px,3vw,32px) clamp(20px,4vw,40px);border-top:1px solid rgba(17,20,55,.08);display:flex;gap:.75rem;flex-shrink:0;} #spl-nav .nb-overlay-pill{display:inline-flex;align-items:center;background:var(--orange);color:#fff !important;font-family:"DM Sans",sans-serif;font-size:.9rem;font-weight:500;padding:.7rem 1.5rem;border-radius:100px;text-decoration:none !important;transition:background .2s;} #spl-nav .nb-overlay-pill:hover{background:#D45516;} @media(max-width:860px){ #spl-nav .nb-links,#spl-nav .nb-right{display:none;} #spl-nav .nb-ham{display:flex;} #spl-nav .nb-inner{height:96px;} #spl-nav .nb-logo img{height:60px;} #spl-nav .nb-overlay-top{height:96px;} } /* Mobile navigation button - hamburger icon replaced with a "Menu" label */ @media screen and (max-width: 991px) { #spl-nav .nb-ham { width: auto; padding: 12px 16px; } #spl-nav .nb-ham span { display: none; } #spl-nav .nb-ham::after { content: "Menu"; display: block; font-family: "Reckless", serif; font-size: 14px; font-weight: 400; line-height: 1; color: #fff; } #spl-nav .nb-ham.open::after { content: "Close"; } } /* Desktop navigation */ @media screen and (min-width: 992px) { #spl-nav .nb-ham::after { display: none; } } /* --------------------------------------------------------------------------- PART 2 - HEADER CORRECTIONS (moved verbatim from the site stylesheet) --------------------------------------------------------------------------- */ /* ---- was style#spl-nav-enquiry-action in the site footer ---- */ #spl-nav .nb-pill, #spl-nav .nb-overlay-pill{ background:none!important; border:none!important; border-radius:0!important; box-shadow:none!important; display:inline-flex; align-items:center; gap:var(--space-2,0.5rem); font-size:var(--text-body,1rem); line-height:1.1; cursor:pointer; color:var(--color-ink,#111437)!important; padding:var(--space-2,0.5rem) 0!important; text-decoration:underline!important; text-decoration-color:var(--color-orange,#E46021); text-decoration-thickness:2px; text-underline-offset:4px; transition:color var(--dur-base,200ms) var(--ease-standard,cubic-bezier(0.4,0,0.2,1)); } #spl-nav .nb-pill:hover, #spl-nav .nb-overlay-pill:hover{color:var(--color-orange,#E46021)!important;} #spl-nav .nb-pill::after, #spl-nav .nb-overlay-pill::after{ content:""; width:1.15em; height:1.15em; flex:none; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z'/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z'/%3E%3C/svg%3E") center / contain no-repeat; transition:transform var(--dur-base,200ms) var(--ease-spring,cubic-bezier(0.34,1.56,0.64,1)); } #spl-nav .nb-pill:hover::after, #spl-nav .nb-pill:focus-visible::after, #spl-nav .nb-overlay-pill:hover::after, #spl-nav .nb-overlay-pill:focus-visible::after{transform:translateX(4px);} #spl-nav .nb-pill:active::after, #spl-nav .nb-overlay-pill:active::after{transform:translateX(1px);transition-duration:var(--dur-fast,120ms);} #spl-nav .nb-pill:focus-visible, #spl-nav .nb-overlay-pill:focus-visible{ outline:2px solid var(--color-focus-ring,#E46021); outline-offset:3px; } @media(prefers-reduced-motion:reduce){ #spl-nav .nb-pill,#spl-nav .nb-overlay-pill, #spl-nav .nb-pill::after,#spl-nav .nb-overlay-pill::after{transition:none!important;} #spl-nav .nb-pill:hover::after,#spl-nav .nb-overlay-pill:hover::after{transform:none;} } /* ---- was style#spl-site-nav-contrast in the site footer ---- */ #spl-nav .nb .nb-pill{color:var(--cream,#FEF3EC)!important;} #spl-nav .nb-overlay .nb-overlay-pill{color:var(--navy,#111437)!important;} #spl-nav .nb .nb-pill:hover{color:var(--orange,#E46021)!important;} #spl-nav .nb-overlay .nb-overlay-pill:hover{color:var(--navy,#111437)!important;} #spl-nav .nb-pill,#spl-nav .nb-overlay-pill{min-height:44px;} @media(prefers-reduced-motion:reduce){ #spl-nav .nb-pill::after,#spl-nav .nb-overlay-pill::after{transform:none!important;transition:none!important;} } /* =========================================================================== 1. THE HEADER STRIP =========================================================================== */ /* 1a. ONE NAV, NOT TWO. Measured at 1440x900, the header is a different object on the home page than on every other page: home every other page bar height 133px 97px nav item height 132px 96px logo height 60px 51px inner max-width 1280px 1160px link colour #fff rgba(255,255,255,.75) Landing on the home page and clicking through to any other page therefore moves the whole header. Normalised onto the 15-page majority (96px bar, 1160px measure, 51px logo), so the header is identical everywhere and the only thing that changes between pages is the page. Colour is normalised to full Tan, which is the more legible of the two and matches the home page. */ html body #spl-nav .nb { height: 96px; min-height: 96px; } /* The bar is not the only thing carrying the height. On the home page .nb-links, each .nb-item and each trigger are all declared 132px, so setting only .nb leaves the items overflowing a 96px bar by 36px - and because the dropdown is `top:100%` of .nb-item, the panel then opens 36px BELOW the bar instead of against it. Measured after the first attempt: bar 96, item 132, panel gap 30px. The whole stack has to come down together. */ html body #spl-nav .nb-inner, html body #spl-nav .nb-links, html body #spl-nav .nb-item, html body #spl-nav .nb-item > a, html body #spl-nav .nb-item > button { height: 96px; } /* .nb-inner was the last one still declared 132px. Because it is a flex row with align-items:center, a 96px links row inside a 132px inner is centred, which pushed every nav item down by exactly (132-96)/2 = 18px - so the items hung below a 96px bar and the dropdown, anchored to the item, opened 18px low. Measured before this line: .nb-inner height 132px, .nb-item top 18px. */ html body #spl-nav .nb-links { align-items: center; } html body #spl-nav .nb-inner { max-width: 1160px; } html body #spl-nav .nb-logo img, html body #spl-nav .nb a img { height: 51px; width: auto; } /* 1b. LARGER NAV LABELS. Borrow / Invest / Culture etc. were 15.2px. +30% is 19.76px; 20px, which is also a round value at the default root size. The dropdown items scale with them so the two do not drift apart - 13.6px to 16px. */ html body #spl-nav .nb-item > a, html body #spl-nav .nb-item > button, html body #spl-nav .nb > a { font-size: 20px; line-height: 1.1; color: var(--spl-color-tan, #FEF3EC); } html body #spl-nav .nb-drop a { font-size: 16px; } /* 1c. THE DROPDOWN HAS TO TOUCH THE BUTTON. The panel is `top:100%` on a relatively-positioned .nb-item, which should already put its top edge on the item's bottom edge. What actually renders is 6px lower, because the panel's closed state is `transform: translateY(6px)` and the page's own inline rule for that transform is winning over the hosted one. The result is a strip of page showing between the navy bar and the tan panel, and - worse than the look - the pointer crosses a dead zone on the way down, so the menu can close under the cursor. Two fixes, deliberately separate: - pin the open state to translateY(0) so the panel meets the bar. This carries !important because the declaration it has to beat is the page embed's own, which is already winning at equal specificity. - a 14px invisible bridge above the panel, so even mid-transition the pointer never leaves the hoverable area. It is a ::before on the panel rather than padding, so it cannot change where the panel paints. */ html body #spl-nav .nb-item:hover > .nb-drop, html body #spl-nav .nb-item:focus-within > .nb-drop, html body #spl-nav .nb-item[data-splport-dd-open='true'] > .nb-drop { transform: translateY(0) scale(1) !important; } html body #spl-nav .nb-item > .nb-drop::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; /* Bridge only. Never paints, never intercepts anything but hover. */ background: transparent; pointer-events: auto; } /* =========================================================================== 7. HEADER LOGO +25% =========================================================================== */ /* 51px -> 64px (51 x 1.25 = 63.75). The bar is 96px, so a 64px mark still leaves 16px of air above and below - it grows without crowding the strip. */ html body #spl-nav .nb-logo img, html body #spl-nav .nb a img { height: 64px; } /* =========================================================================== "START AN ENQUIRY" - ONE SIZE ON EVERY PAGE (2026-09-23) It was sized from the page's body-text token (var(--text-body)), and pages set that differently: 16px on most pages, 14px on /in-the-news and the case studies. So the same header button changed size between pages. It is now a fixed 20px - the same as Borrow / Invest / Culture / Insights / Contact beside it (1b above), and 25% up on the 16px it was on /apply. The arrow is sized in em, so it grows with the text. Measured at 992px, the narrowest desktop header: the button still sits 52px clear of Contact. The mobile menu's copy of the button gets the same size. =========================================================================== */ html body #spl-nav .nb-pill, html body #spl-nav .nb-overlay-pill { font-size: 20px; } /* =========================================================================== LOGO DIVIDER - A LITTLE MORE PRESENT (2026-09-23) The line between the logo and Borrow was white at 15% opacity; now 24%, so it reads as a clear divider without competing with the nav labels. Width stays 1px - fractional widths snap to whole screen pixels and would look different on different screens. =========================================================================== */ html body #spl-nav .nb-logo { border-right-color: rgba(255, 255, 255, 0.24); } /* --------------------------------------------------------------------------- v5 (2026-09-24): ONE SIDE MARGIN FOR THE BAR AND THE OPEN MENU The bar used clamp(24px, 4.5vw, 80px) and the full-screen menu clamp(20px, 4vw, 40px), so the logo jumped sideways whenever the menu was opened (4px on a phone, more on a tablet). Both now use the same value, and on phones it is 20px - the same margin as the page content below. --------------------------------------------------------------------------- */ html body #spl-nav .nb-inner, html body #spl-nav .nb-overlay-top, html body #spl-nav .nb-overlay-links, html body #spl-nav .nb-overlay-bottom { padding-left: clamp(20px, 4.5vw, 80px); padding-right: clamp(20px, 4.5vw, 80px); } /* =========================================================================== v6 (2026-09-24) - THE MENU OPENS LIKE A CURTAIN The full-screen menu used to fade in all at once. Now the tan panel drops down from the header like a curtain, then the links follow a moment later one group at a time, each rising a few pixels into place, with the "Start an enquiry" button last. Closing lifts the panel back up, a little quicker. With reduced motion switched on, it simply appears. =========================================================================== */ #spl-nav .nb-overlay { opacity: 1; clip-path: inset(0 0 100% 0); transition: clip-path .42s cubic-bezier(.7, 0, .84, 0), visibility 0s linear .42s; } #spl-nav .nb-overlay.open { clip-path: inset(0 0 0 0); transition: clip-path .6s cubic-bezier(.16, 1, .3, 1), visibility 0s linear 0s; } /* the panel's own top bar (logo + close) and each link group */ #spl-nav .nb-overlay .nb-overlay-top, #spl-nav .nb-overlay .nb-overlay-group, #spl-nav .nb-overlay .nb-overlay-bottom { opacity: 0; transform: translateY(14px); transition: opacity .2s ease, transform .2s ease; } #spl-nav .nb-overlay .nb-overlay-top { transform: none; } #spl-nav .nb-overlay.open .nb-overlay-top, #spl-nav .nb-overlay.open .nb-overlay-group, #spl-nav .nb-overlay.open .nb-overlay-bottom { opacity: 1; transform: none; transition: opacity .45s ease, transform .6s cubic-bezier(.16, 1, .3, 1); } #spl-nav .nb-overlay.open .nb-overlay-top { transition-delay: .12s; } #spl-nav .nb-overlay.open .nb-overlay-group:nth-child(1) { transition-delay: .18s; } #spl-nav .nb-overlay.open .nb-overlay-group:nth-child(2) { transition-delay: .24s; } #spl-nav .nb-overlay.open .nb-overlay-group:nth-child(3) { transition-delay: .30s; } #spl-nav .nb-overlay.open .nb-overlay-group:nth-child(4) { transition-delay: .34s; } #spl-nav .nb-overlay.open .nb-overlay-group:nth-child(5) { transition-delay: .38s; } #spl-nav .nb-overlay.open .nb-overlay-bottom { transition-delay: .44s; } /* the close cross turns in as the panel settles */ #spl-nav .nb-overlay .nb-overlay-close svg { transform: rotate(-90deg); transition: transform .3s ease; } #spl-nav .nb-overlay.open .nb-overlay-close svg { transform: none; transition: transform .6s cubic-bezier(.16, 1, .3, 1) .2s; } @media (prefers-reduced-motion: reduce) { #spl-nav .nb-overlay, #spl-nav .nb-overlay.open { clip-path: none; transition: opacity .15s, visibility .15s; } #spl-nav .nb-overlay:not(.open) { opacity: 0; } #spl-nav .nb-overlay .nb-overlay-top, #spl-nav .nb-overlay .nb-overlay-group, #spl-nav .nb-overlay .nb-overlay-bottom, #spl-nav .nb-overlay .nb-overlay-close svg { opacity: 1; transform: none; transition: none; } }