/* ========================================================================= Header and navigation, at every width. Loads after overrides.css and owns the header bar and the menu. Theme-only, so re-exporting the redesign's sheets cannot take the mobile menu away. Two bands: >= 1241px the design's bar: logo, full navigation, phone, CTA <= 1240px logo + CTA + menu button; the navigation is an off-canvas panel The panel is built onto by nav.js, modelled on the SDBody site's. That placement is the point: a `position: fixed` element inside

is positioned against the header — not the screen — as soon as the header carries a backdrop-filter, which is what made the menu open as a 92px strip hidden behind the bar and look like it was not opening at all. ========================================================================= */ /* Text for a screen reader and nobody else. */ .u-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------------- The bar ---------------------------------------------------------------------- */ /* Nothing in the header may force the page wider than the screen. */ .nav-bar { flex-wrap: nowrap; min-width: 0; } nav.main { min-width: 0; } .logo img { max-width: 100%; } /* Rendered for the panel builder to read, never shown in the bar itself. */ .nav-head { display: none; } /* ------------------------------------------------------------------------- Submenus on a pointer ---------------------------------------------------------------------- */ @media (min-width: 1241px) { /* The toggle is for touch; on a pointer the dropdown opens on hover. */ .nav-toggle { display: none; } /* * The design's rule is `nav.main > div:hover .drop`, a descendant match, so * hovering a top item opened every submenu nested inside it at once — * harmless while the menu was two levels deep, wrong the moment it is three. * Deep submenus are shut here and opened below only by their own parent. */ nav.main > .nav-item:hover .drop .drop, nav.main > .nav-item:focus-within .drop .drop { opacity: 0; visibility: hidden; transform: translateY(6px); } nav.main > .nav-item:hover > .drop, nav.main > .nav-item:focus-within > .drop { opacity: 1; visibility: visible; transform: translateY(0); } /* Third level and deeper fly out to the side of their parent. */ .drop .nav-sub-item { position: relative; } .drop-deep { top: -9px; left: 100%; margin-left: 2px; } /* Specific enough to beat the reset above. */ nav.main .drop .nav-sub-item:hover > .drop-deep, nav.main .drop .nav-sub-item:focus-within > .drop-deep { opacity: 1; visibility: visible; transform: translateY(0); } /* A submenu that would run off the right edge opens to the left instead. */ .drop-deep.flip-left { left: auto; right: 100%; margin-left: 0; margin-right: 2px; } /* An ancestor of the current page reads as current. */ .drop a.active { color: var(--accent); } /* --------------------------------------------------------------- An arrow on anything that has a submenu --------------------------------------------------------------- The toggle button carries the arrow on touch, and it is hidden up here, which left the pointer version with nothing to say that Services and Service Areas open. A chevron drawn from two borders turns to point up while the submenu is showing. It inherits the link colour, so it follows the hover and current-page states for free. */ nav.main > .nav-item.has-sub > a.top::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 7px; vertical-align: middle; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; } nav.main > .nav-item.has-sub:hover > a.top::after, nav.main > .nav-item.has-sub:focus-within > a.top::after { transform: translateY(1px) rotate(-135deg); } /* --------------------------------------------------------------- Service Areas as one wide panel --------------------------------------------------------------- Thirteen cities with four services each is fifty-two links. Reached through a hover chain — city, wait, slide sideways, service — that is a poor way in and easy to fall out of. Opened as a single panel they are all in view at once. The markup is the ordinary nested menu; only the layout changes. Each city is a `.nav-sub-item` and becomes a column, and the services it holds are its nested `.drop`, laid out in place instead of floated beside it. */ .drop-mega { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 34px; padding: 28px 32px; /* Given a width rather than left to size itself. Sized by its content the columns closed up to whatever the longest service name needed and the panel read as cramped; a set width lets the four columns share the room evenly. It is set per screen width further down, because the panel is centred on its menu item and that item sits left of centre — too wide on a small laptop and it hangs off the left of the screen. */ width: 800px; max-width: calc(100vw - 48px); } /* The panel is wider than the item it hangs from, so it is centred on it rather than hanging off one side. Centring by transform rather than a fixed offset means it stays centred whatever width the columns settle at — measured at a fixed -430px it ran off the left of a 1241px screen. The slide-in is folded into the same transform, since an element only gets one. */ nav.main > .nav-item.has-sub > .drop-mega { left: 50%; transform: translate(-50%, 6px); max-height: calc(100vh - 120px); overflow-y: auto; } nav.main > .nav-item.has-sub:hover > .drop-mega, nav.main > .nav-item.has-sub:focus-within > .drop-mega { transform: translate(-50%, 0); } .drop-mega > .nav-sub-item { position: static; break-inside: avoid; } /* The city: a heading that is still its own link. */ .drop-mega > .nav-sub-item > a.sub { padding: 4px 10px 8px; color: var(--paper, #f8f7f2); font-size: .76rem; letter-spacing: .09em; } .drop-mega > .nav-sub-item > a.sub:hover { color: var(--accent); } /* The services under it, in place rather than flying out sideways. */ .drop-mega .drop-deep { position: static; min-width: 0; margin: 0 0 10px; padding: 0 0 0 8px; background: none; border: 0; border-radius: 0; border-left: 1px solid var(--border-dark); } .drop-mega .drop-deep a { padding: 6px 10px; font-size: .72rem; text-transform: none; letter-spacing: .04em; white-space: nowrap; color: rgba(248, 247, 242, .62); } .drop-mega .drop-deep a:hover { color: var(--accent); } /* The rule above shuts every nested submenu so a three-deep menu does not open all at once. Inside the panel the third level is the point, so it is put back — same weight as that rule, so it has to come after it to win. */ nav.main > .nav-item:hover .drop-mega .drop-deep, nav.main > .nav-item:focus-within .drop-mega .drop-deep { opacity: 1; visibility: visible; transform: none; } } /* The bar has to fit a laptop as well as a wide monitor. */ @media (min-width: 1241px) and (max-width: 1560px) { .nav-bar { gap: 14px; padding-left: 18px; padding-right: 18px; } nav.main { gap: 0; } nav.main a.top { padding: 10px 7px; font-size: .68rem; letter-spacing: .06em; } .logo img { height: 76px; } .nav-bar > .btn-primary { padding: 10px 14px; font-size: .66rem; } .head-phone .num { font-size: .95rem; } } /* ------------------------------------------------------------------------- The off-canvas menu ---------------------------------------------------------------------- */ .mmenu-backdrop { position: fixed; inset: 0; z-index: 210; background: rgba(1, 19, 33, .58); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; /* Hidden only after the fade has finished; shown the instant it opens. */ transition: opacity .4s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .4s; } .mmenu-backdrop.open { opacity: 1; visibility: visible; transition: opacity .4s cubic-bezier(.16, 1, .3, 1), visibility 0s; } .mmenu { position: fixed; top: 0; right: 0; bottom: 0; z-index: 220; width: min(340px, 86vw); display: flex; flex-direction: column; background: var(--ink-deep); border-left: 1px solid var(--border-dark); box-shadow: -24px 0 60px -24px rgba(0, 0, 0, .55); transform: translateX(100%); visibility: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; /* * `visibility` is a discrete property: given a duration it flips half way * through the transition, so the panel was still invisible for the first * 200ms of opening — and `focus()` on a control inside an invisible box does * nothing at all, which left keyboard and screen-reader users on the body. * Zero duration on the way in, delayed to the end on the way out, so the * panel is focusable the moment it opens and still slides out before it * disappears. */ transition: transform .45s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .45s; } .mmenu.open { transform: none; visibility: visible; transition: transform .45s cubic-bezier(.16, 1, .3, 1), visibility 0s; } .mmenu-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 18px 22px; background: var(--ink-deep); border-bottom: 1px solid var(--border-dark); } .mmenu-brand { font-family: var(--font-mono); font-weight: 600; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(248, 247, 242, .55); } .mmenu-close { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(248, 247, 242, .22); background: none; color: var(--paper); cursor: pointer; transition: background .3s, border-color .3s, transform .35s cubic-bezier(.16, 1, .3, 1); } .mmenu-close:hover, .mmenu-close:focus-visible { background: var(--accent); border-color: var(--accent); transform: rotate(90deg); } .mmenu-close svg { width: 22px; height: 22px; } .mnav { flex: 1; padding: 6px 22px; } .mnav-list, .mnav-sub { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .mnav-list > li { border-bottom: 1px solid rgba(248, 247, 242, .08); } .mnav a { display: block; padding: 14px 0; font-family: var(--font-mono); font-weight: 600; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.35; color: rgba(248, 247, 242, .82); text-decoration: none; min-height: 44px; transition: color .25s ease; } .mnav a:hover, .mnav a:focus-visible, .mnav a.is-current { color: var(--accent); } /* A row is the link plus the button that opens what is under it. */ .mnav-row { display: flex; align-items: center; gap: 8px; } .mnav-row > a { flex: 1; min-width: 0; } .mnav-toggle { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; background: none; border: 0; color: rgba(248, 247, 242, .6); cursor: pointer; transition: color .25s ease, transform .35s cubic-bezier(.16, 1, .3, 1); } .mnav-toggle svg { width: 20px; height: 20px; } .mnav-toggle:hover, .mnav-toggle:focus-visible { color: var(--accent); } .has-sub.open > .mnav-row > .mnav-toggle { transform: rotate(180deg); color: var(--accent); } /* * Submenus are closed and opened by their own button. The row is animated from * nothing to its natural size, so a submenu of any depth opens correctly with * no JavaScript measuring heights and writing them onto the element. */ .mnav-subwrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s cubic-bezier(.16, 1, .3, 1); } .has-sub.open > .mnav-subwrap { grid-template-rows: 1fr; } .mnav-subwrap > .mnav-sub { min-height: 0; overflow: hidden; } /* Each level steps in, however deep the menu goes. */ .mnav-sub > li > a, .mnav-sub > li > .mnav-row > a { padding-left: 14px; font-size: .72rem; color: rgba(248, 247, 242, .68); } .mnav-sub .mnav-sub > li > a, .mnav-sub .mnav-sub > li > .mnav-row > a { padding-left: 28px; } .mnav-sub .mnav-sub .mnav-sub > li > a, .mnav-sub .mnav-sub .mnav-sub > li > .mnav-row > a { padding-left: 42px; } .mnav-sub .mnav-sub .mnav-sub .mnav-sub > li > a, .mnav-sub .mnav-sub .mnav-sub .mnav-sub > li > .mnav-row > a { padding-left: 56px; } .mnav-sub > li + li { border-top: 1px solid rgba(248, 247, 242, .06); } /* The panel covers the header, so it carries what the header was showing. */ .mmenu-cta { display: grid; gap: 10px; padding: 18px 22px 26px; border-top: 1px solid var(--border-dark); } .mmenu-cta .btn { justify-content: center; text-align: center; } .mmenu-call { display: block; text-align: center; padding: 12px; font-family: var(--font-sans); font-weight: 700; font-size: 1rem; color: var(--paper); text-decoration: none; border: 1px solid var(--border-dark); border-radius: 50px; transition: color .25s ease, border-color .25s ease; } .mmenu-call:hover, .mmenu-call:focus-visible { color: var(--accent); border-color: var(--accent); } /* The page behind the panel does not scroll with it. */ html.nav-locked, body.nav-locked { overflow: hidden; } /* ------------------------------------------------------------------------- The bar at panel widths ---------------------------------------------------------------------- */ @media (max-width: 1240px) { .nav-bar { gap: 12px; padding: 8px 16px; } .logo img { height: 64px; } /* * The logo takes the space, so everything else is pushed to the right edge * and stays there. Hanging the push off the call-to-action instead meant * that on the widths where the CTA is hidden nothing pushed at all, and the * menu button slid back up against the logo. */ .logo { margin-right: auto; } /* The phone number and the navigation move into the panel. */ .head-phone, nav.main { display: none; } .nav-bar > .btn-primary { display: inline-flex; order: 2; padding: 10px 14px; font-size: .64rem; white-space: nowrap; } /* Three bars that become an X. Last in the bar, so the menu button is always the right-most thing on the screen. */ .burger { display: inline-flex; align-items: center; justify-content: center; gap: 9px; order: 3; min-height: 44px; min-width: 44px; padding: 9px 13px; } .burger-bars { display: block; width: 22px; } .burger-bars i { display: block; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transition: transform .35s cubic-bezier(.16, 1, .3, 1), opacity .3s ease; } .burger-bars i + i { margin-top: 5px; } .burger.open .burger-bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger.open .burger-bars i:nth-child(2) { opacity: 0; } .burger.open .burger-bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } /* Tablets can afford a slightly larger logo than a phone. */ @media (min-width: 768px) and (max-width: 1240px) { .logo img { height: 70px; } } @media (max-width: 767px) { .logo img { height: 56px; } .nav-bar { gap: 10px; padding: 8px 14px; } .nav-bar > .btn-primary { padding: 9px 12px; font-size: .6rem; } } /* Small phones: the CTA stands down — it is in the panel, and the floating quote capsule is fixed to the screen asking for the same thing. */ @media (max-width: 599px) { /* The word stays. An icon on its own is not obvious to everybody, and there is room for it once the call-to-action has stood down. */ .burger-label { font-size: .7rem; } .logo img { height: 50px; } } @media (max-width: 359px) { .logo img { height: 44px; } .burger { gap: 7px; padding: 9px 10px; } .burger-label { font-size: .64rem; } .mmenu { width: 100vw; } } @media (prefers-reduced-motion: reduce) { .mmenu, .mmenu-backdrop, .mnav-subwrap, .burger-bars i, .mnav-toggle { transition: none; } } /* The panel is centred on Service Areas, which sits left of the middle of the bar, so how wide it can be is decided by how much room there is to its left. Measured rather than guessed: at each of these widths the left edge stays on screen. */ @media (min-width: 1441px) { .drop-mega { width: 1000px; } } @media (min-width: 1600px) { .drop-mega { width: 1080px; } }