/* ===================================================================== QA Madness - Redesigned header chrome (SHARED, self-contained) --------------------------------------------------------------------- Single source for the borrowed Homepage-style header used by the redesigned landing templates (AI Product Testing, Contact Us, and any future page that opts in). Replaces the formerly-duplicated, byte- identical ai-product-testing-header.css + contact-us-header.css. Everything the header needs lives here: - the --h-* design tokens + base rules, - the --cta-aurora token used by the mega-menu CTA backgrounds, - the full .home-header / mega-menu / mobile-overlay rules. Scope: every rule is keyed to `body.qm-redesign-header`. A template opts in by adding that body class (see the body_class filters in functions.php) and enqueuing this file via qamadness_child_enqueue_redesign_header(), before the page's own stylesheet. The --h-* tokens reference optional --ds-* design-system variables with a literal fallback, so no other stylesheet is required - each resolves to its literal here. NOTE: the homepage keeps its own copy of these rules inline in css/home.css (scoped to body.home); it is intentionally NOT wired to this file. ===================================================================== */ /* ---------- iOS Safari: paint the canvas from --------------------- Companion to the .home-nav-lock rule near the bottom of this file, which is the actual fix for the reported bug (content missing behind Safari's toolbar after opening and closing the burger). This block is defence in depth. declares no background of its own, so the canvas background is PROPAGATED from - and because is `overflow: visible`, the viewport's scrollability is taken from too. Both of those depend on the same element the overlay was mutating, which is a fragile place to leave the page background. Giving its own colour removes the dependency. It is NOT the whole story, and the recording is what ruled that out: sampling the failing frames put the bad strip at #0f0e15 against #0c0c10 in the good ones - both the page background, neither pure black. The canvas was painting; what went missing was the CONTENT drawn over it. So this rule alone would not have fixed it - see the scroll-lock note below. Scoped with :has() to the four redesigned dark templates, because the rest of the site is light and would gain a dark band. :has() is Safari 15.4+; older engines drop the rule and keep today's behaviour. The colours mirror each template's own body background: home + AI Product Testing --h-bg #08080d Contact Us literal #110d1a Service v2 --sv-bg-2 #08060d Ordered least- to most-specific: the last two bodies also carry .qm-redesign-header, so they must override the general rule. */ html:has(> body.qm-page-dark) { background-color: #08080d; } html:has(> body.contact-us-page) { background-color: #110d1a; } html:has(> body.service-v2) { background-color: #08060d; } /* ---------- Motion tokens (shared by every redesigned surface) ---------- WHY THESE EXIST. Between them the six redesigned stylesheets carried 221 hand-written transitions, and the same micro-interaction was spelled seven ways: 0.12s, 0.15s, 0.16s, 0.18s, .18s, 0.2s, .2s, 0.25s. Easing was worse - 177 bare `ease` against 44 cubic-bezier(0.4, 0, 0.2, 1), plus the same curve written both with and without its leading zeros. No single one of those is wrong; together they are why a hover on a nav item and a hover on a card did not quite feel like the same site. One curve, three steps. Anything slower than --ds-dur-slow is a deliberate entrance, marquee or hero move and stays spelled out at its call site. REDUCED MOTION is the reason these are tokens rather than a convention: every transition that adopts them is covered by the override below at once. The per-component `prefers-reduced-motion` blocks further down the redesigned stylesheets predate this and still stand - they cover keyframe animations, which a duration token cannot reach. 1ms rather than 0s so a `transitionend` listener would still fire. Nothing listens for one today, but a zeroed transition that never completes is an unpleasant thing to debug later. These are --ds-* because that is the layer the --h-/--cu-/--sv-/--aa- tokens already defer to (see --h-radius below). It was referenced but never defined; this is the first block to define it. EVERY CALL SITE CARRIES A LITERAL FALLBACK - var(--ds-dur, 200ms) rather than var(--ds-dur) - for the reason stated at the top of this file: each token has to resolve to its literal so no stylesheet depends on another being present. Without it, a sheet that loaded while this one did not would hit invalid-at-computed-value-time on the whole `transition` shorthand and lose the animation silently. aa-page.css and footer.css are the two that enqueue with no declared dependency on this file, so they are the ones that would. The fallback does NOT weaken the reduced-motion override below: a fallback is used only when the property is undefined, and there it is defined as 1ms. */ :root { --ds-ease: cubic-bezier(0.4, 0, 0.2, 1); --ds-dur-fast: 150ms; --ds-dur: 200ms; --ds-dur-slow: 250ms; } @media (prefers-reduced-motion: reduce) { :root { --ds-dur-fast: 1ms; --ds-dur: 1ms; --ds-dur-slow: 1ms; } } /* ---------- Design tokens (scoped to this page) ---------- */ body.qm-redesign-header { --h-bg: var(--ds-ink, #08080d); --h-bg-alt: var(--ds-ink-alt, #0f0f16); --h-card: var(--ds-card, rgba(255, 255, 255, 0.03)); --h-card-2: var(--ds-card-2, rgba(255, 255, 255, 0.05)); --h-border: var(--ds-border, rgba(255, 255, 255, 0.09)); --h-border-strong: var(--ds-border-strong, rgba(255, 255, 255, 0.16)); --h-text: var(--ds-white, #ffffff); --h-muted: var(--ds-grey, #cccbd2); --h-muted-2: var(--ds-grey-2, #6f6f80); --h-green: var(--ds-green-bright, #3fe3b6); --h-green-grad: var(--ds-green-grad, linear-gradient(135deg, #45e6ba 0%, #16bc8f 100%)); --h-green-grad-soft: var(--ds-green-grad-soft, linear-gradient(135deg, #8af0d6 0%, #4fd8b3 100%)); --h-purple: var(--ds-purple-bright, #8e6cff); --h-purple-grad: var(--ds-purple-grad, linear-gradient(135deg, #9170ff 0%, #6a47f0 100%)); --h-purple-grad-soft: var(--ds-purple-grad-soft, linear-gradient(135deg, #b9a6ff 0%, #8e6cff 100%)); --h-lilac: var(--ds-lilac, #cbbcff); --h-on-light: var(--ds-on-light, #1a1430); --h-radius: var(--ds-radius, 14px); --h-radius-lg: var(--ds-radius-lg, 22px); --h-pill: var(--ds-pill, 999px); --h-container: var(--ds-container, 1200px); --h-font: var(--ds-font-body, "Noto Sans", "Helvetica Neue", Arial, sans-serif); --h-serif: var(--ds-font-serif, "GT Sectra Display", Georgia, "Times New Roman", serif); } /* ---------- Base body ---------- */ /* Keyed on .qm-page-dark, NOT on the header variant. A page can want the transparent header (dark hero) and still be light below it - /services/testing-of-ai-products/ is exactly that, and keying this off the header turned four of its sections black. */ body.qm-redesign-header.qm-page-dark { background: var(--h-bg); } body.qm-redesign-header { overflow-x: hidden; /* The parent theme adds body{padding-top:74px} to clear its fixed header. The homepage header is transparent and overlaps the hero, so remove that offset here (kept !important only to beat the parent's own header offset). */ padding-top: 0 !important; } /* Android/Chrome paints a translucent blue box over any tapped link/button (-webkit-tap-highlight-color). Suppress it homepage-wide - the property is inherited, so setting it on body.qm-redesign-header covers every tappable descendant. Focus outlines are left untouched so keyboard accessibility is unaffected. */ body.qm-redesign-header { -webkit-tap-highlight-color: transparent; } /* Shared aurora background for the mega-menu CTA sections. One token, three consumers - `.home-mega-cov__cta` (which is BOTH Coverage and Services, since the Services panel carries `home-mega-cov`) and `.home-mega-ind__cta` (Industries) - which is exactly the three the client asked for. NOTE the path is relative to THIS file at assets/styles/shared/, not to css/home.css, which holds the same token at its own depth. SUPPLIED ARTWORK (2026-09-09, client): assets/images/cta-aurora.webp, the green-into-blue-into-purple wash at 1391x237 - the band's own proportions, so `cover` crops almost nothing. The CSS recreation it replaces is KEPT beneath it as the fallback layer: if the file ever 404s the band paints the gradients again rather than going transparent. */ body.qm-redesign-header { --cta-aurora: url("../../images/cta-aurora.webp") center / cover no-repeat, radial-gradient(60% 130% at 27% 0%, rgba(22, 190, 140, 0.45), transparent 60%), radial-gradient(70% 165% at 48% 135%, rgba(68, 70, 225, 0.48), transparent 62%), radial-gradient(55% 150% at 60% 130%, rgba(120, 65, 215, 0.42), transparent 55%), linear-gradient(90deg, #121019 0%, rgba(30, 120, 170, 0.22) 35%, rgba(95, 60, 200, 0.26) 55%, #121019 84%); } body.qm-redesign-header .home-header { position: absolute; inset: 0 0 auto 0; z-index: 60; padding: 0; background: transparent; transition: background var(--ds-dur-slow, 250ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)), padding var(--ds-dur-slow, 250ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)), box-shadow var(--ds-dur-slow, 250ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)); } body.qm-redesign-header .home-header.is-stuck { position: fixed; background: #08060D; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06); } body.qm-redesign-header .home-header.header-to-top { top: 0; } body.qm-redesign-header .home-header.is-menu-open { background: #08060D; } body.qm-redesign-header .home-totop { position: fixed; right: 24px; bottom: 92px; /* clears the chat widget that sits at the bottom-right corner */ z-index: 95; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--h-border-strong); background: #08060D; color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.85); /* Smooth ease-out entrance (fade + rise + scale). visibility flips after the fade on hide (0.45s delay) and immediately on show, so neither direction is clipped. bottom glides separately when the chat opens/closes. */ transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.45s, background 0.2s ease, bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1); } body.qm-redesign-header .home-totop:hover { background: #15111f; border-color: #fff; } body.qm-redesign-header .home-totop.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s, background 0.2s ease, bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1); } body.qm-redesign-header .home-header__progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; max-width: 100%; background: linear-gradient(90deg, var(--h-green), #9170ff); transition: width 0.1s linear; /* tuned to the scroll mechanism, not the UI feel scale */ pointer-events: none; z-index: 1; } body.qm-redesign-header .home-header__inner { display: flex; align-items: center; gap: 22px; max-width: 1280px; /* header content width (independent of the sections) */ min-height: 72px; /* header bar height */ margin-inline: auto; padding-inline: 19px; /* keep the logo + burger off the screen edges (matches the section inset) */ } body.qm-redesign-header .home-header__logo { flex: none; display: inline-flex; } body.qm-redesign-header .home-header__logo img { width: 128px; height: auto; } body.qm-redesign-header .home-header__nav { flex: 1 1 auto; display: flex; justify-content: flex-end; margin-right: 29px; } /* Base .home-btn / --lilac button styles, ported from css/home.css (which this page does not load) so the header CTA renders as the lilac pill it is on the homepage instead of bare text. Re-scoped body.home -> body.qm-redesign-header. */ body.qm-redesign-header .home-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 21px; border: 0; border-radius: var(--h-pill); font-family: var(--h-font); font-size: 18px; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; transition: transform 0.35s ease, box-shadow 0.3s ease, opacity 0.25s ease, background 0.35s ease, gap 0.4s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; } body.qm-redesign-header .home-btn svg { flex: none; } body.qm-redesign-header .home-btn svg:last-child { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } body.qm-redesign-header .home-btn:hover { transform: translateY(-1px); gap: 24px; } body.qm-redesign-header .home-btn:hover svg:last-child { transform: translateX(2px); } body.qm-redesign-header .home-btn--lilac { background: var(--h-lilac); color: var(--h-on-light); justify-content: flex-start; position: relative; z-index: 0; overflow: hidden; } body.qm-redesign-header .home-btn--lilac::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(to right, rgba(227, 219, 255, 0) 35%, rgba(227, 219, 255, 0.95) 100%); opacity: 0; transition: opacity 0.5s ease 0.18s; } body.qm-redesign-header .home-btn--lilac:hover::after { opacity: 1; } body.qm-redesign-header .home-btn--lilac:hover { transform: none; } /* The full ring, not just its colour. This used to set `outline-color` alone, which computes to nothing on its own: `outline-style` initially resolves to `none`, so the declaration only ever became visible on the three pages whose own stylesheet happened to draw a base ring for it to recolour. On Service v2, the Accessibility template and every Sage-wrapped page (blog, archives, search) - all of which render this same header - the site's most-used CTA had no author focus indicator at all. At (0,3,1) this still outranks the per-page focus rules, so the CTA stays white-ringed everywhere, as intended. */ body.qm-redesign-header .home-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; } /* Scoped with the .home-header ancestor so these header-CTA overrides (size + the mobile display:none below) beat the base .home-btn rules above (equal specificity would otherwise let .home-btn win and show the CTA on mobile). */ body.qm-redesign-header .home-header .home-header__cta { flex: none; font-size: 14px; padding: 9px 18px; } body.qm-redesign-header .home-menu { display: flex; align-items: center; gap: 24px; margin: 0; padding: 0; list-style: none; } body.qm-redesign-header .home-menu > li { position: static; } body.qm-redesign-header .home-menu > li > a { display: inline-flex; align-items: center; gap: 5px; color: rgba(255, 255, 255, 0.82); font-size: 14px; font-weight: 500; text-decoration: none; padding: 6px 0; /* One timing for the whole hover gesture. Declared here rather than in the token block at the top because only these links use it, and it inherits to the chevron pseudo-element and to the AI item - both of which restate their own `transition` and would otherwise drift out of step with the label. */ --nav-hover: 0.15s ease; --nav-hover-delay: 0s; transition: color var(--nav-hover) var(--nav-hover-delay), transform var(--nav-hover) var(--nav-hover-delay); } /* ITEMS THAT OPEN A PANEL HOLD BACK TO MEET THEIR CHEVRON. The flip is keyed on .is-open, which the JS adds after an 80ms hover-intent delay and removes 100ms after the pointer leaves (OPEN_DELAY and CLOSE_DELAY in assets/scripts/shared/home-header.js). Left alone, the label moved from frame one and the arrow only began 80ms later - same duration, wrong beat. THE DELAY IS ONLY FOR THE WAY IN. A transition takes its delay from the state it is moving TO, so the :hover value governs entry and the base value governs exit - and on exit the label needs NO delay of its own, because .is-open is also in the transform/colour selectors below and already holds the label put until the class drops. Giving the base rule the close timer's 100ms as well paid that wait twice: measured on the live page, the pointer left at 0ms, the transform was still lifted when .is-open went at 109ms, the transition then waited its 100ms and did not finish until 364ms - roughly 100ms after the chevron had finished, which is the very desync this block exists to remove. Items with NO panel keep 0s throughout: no arrow to wait for, and a delay there would only make them feel slow. Keyboard focus also lands on 0s from the base rule, which is right - focusin opens with no timer at all, so the arrow moves immediately and the label must too. */ body.qm-redesign-header .home-menu > li.menu-item-has-children > a:hover { --nav-hover-delay: 80ms; } body.qm-redesign-header .home-menu > li > a:hover, body.qm-redesign-header .home-menu > li.is-open > a { color: #ffffff; } /* Hover lifts the label 2px and scales it 6%. A transform rather than a font-size bump: type that grows changes the item's WIDTH, so every item to its right slides along with it and the whole bar twitches under the cursor. A transform is painted, not laid out, so the item reads as bigger and nearer while its layout box stays exactly where it was. The dropdown panels hang off the
  • , not this , so they stay put while the label rises. GATED ON (hover: hover) so it never reaches a touch screen. There is nothing to hover with there, and a device that emulates :hover on tap would otherwise leave an item lifted after it was tapped. `.is-open` rides along inside the gate deliberately: on mobile that class marks an OPEN accordion row, which should not be lifted - only the pointer case wants the lift while a panel is held open. :focus-visible stays OUTSIDE the gate. Keyboard focus is not hover, and an iPad with a keyboard reports `hover: none` - gating it would silently drop the only movement a keyboard user gets. */ @media (hover: hover) { body.qm-redesign-header .home-menu > li > a:hover, body.qm-redesign-header .home-menu > li.is-open > a { transform: translateY(-2px) scale(1.06); } } body.qm-redesign-header .home-menu > li > a:focus-visible { transform: translateY(-2px) scale(1.06); } /* The lift and the scale are the movement here, so they are what goes. */ @media (prefers-reduced-motion: reduce) { body.qm-redesign-header .home-menu > li > a:hover, body.qm-redesign-header .home-menu > li > a:focus-visible, body.qm-redesign-header .home-menu > li.is-open > a { transform: none; } } body.qm-redesign-header .home-menu > li.menu-item-has-children > a::after { content: ""; width: 8px; height: 8px; margin-left: 2px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='black' stroke-width='1.5'/%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 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--nav-hover); } body.qm-redesign-header .home-menu > li.is-open.menu-item-has-children > a::after { transform: rotate(180deg); } body.qm-redesign-header .home-menu > li.is-open.menu-item-has-children > a { color: #CBB9F9; } /* ---------- "AI-Augmented Testing": the one highlighted nav item ----------- The item the design singles out in the header. It is flagged server-side with .home-menu__ai (qamadness_child_flag_ai_menu_item() in functions.php) because CSS cannot select on link text, and an :nth-child() would break the first time somebody reorders the menu. A flat ramp, lilac into purple, on the text AT ALL TIMES: it is the item's colour, not an effect. Hover shifts it across the glyphs once, left to right, over half the image. The image is twice the element's width and holds that ramp mirrored about its centre - lilac, purple at 50%, lilac again - so consecutive tiles meet lilac against lilac and it repeats without a seam. Half an image is therefore a shift onto the MIRROR of the resting frame: at rest the text runs lilac into purple, held it runs purple back out to lilac. The negative direction is what makes the image slide right, i.e. the colours run left to right. A TRANSITION, NOT AN ANIMATION, because the two ends differ. Earlier revisions shifted a whole image, where the end frame was identical to the start and @keyframes cost nothing. Half an image has a real end state to get back from, and a keyframe animation cannot do it: `forwards` is needed to hold the frame while hovered, and removing the rule on mouse-out then drops background-position straight back to its static value. Chrome fires no transition for that change - measured, no transitionstart at all - so the ramp snapped home. A transition also reverses mid-shift for free, which the animation could not. The sweep ran long (1.6s in, 0.45s back) while the lift took 0.15s, so the item popped and then kept sliding - two events, not one gesture. Both now run on the shared --nav-hover, so they start and land together and this item answers the pointer at the same speed as every other. THE GRADIENT PAINTS AT EVERY WIDTH; ONLY THE SWEEP IS DESKTOP-GATED. All of this used to sit inside the hover media query below, so the mobile overlay listed this item in plain white while desktop showed the ramp - one menu entry with two identities depending on the device. The static paint is now unconditional; only the motion, which needs a real pointer to trigger, stays gated. It outranks the `> li > a { color: #fff }` the mobile block sets further down on specificity (0,3,2 against 0,2,2), so no !important and no reordering. */ body.qm-redesign-header .home-menu > li.home-menu__ai > a { color: transparent; -webkit-text-fill-color: transparent; background-image: linear-gradient(90deg, var(--h-lilac) 0%, var(--h-purple) 50%, var(--h-lilac) 100%); background-size: 200% 100%; background-position: 0 0; -webkit-background-clip: text; background-clip: text; } /* The chevron is drawn with `background: currentColor`, which is transparent here - it would vanish if this item ever gained a sub-menu. Unconditional for the same reason as the paint above: it has to hold wherever the paint holds. */ body.qm-redesign-header .home-menu > li.home-menu__ai > a::after { background: var(--h-lilac); } @media (min-width: 1025px) and (pointer: fine) and (hover: hover) { body.qm-redesign-header .home-menu > li.home-menu__ai > a { /* This item runs the gesture at 0.4s, not the menu-wide 0.15s: the sweep has to cross half an image and read as a shift, which at 0.15s was over before the eye caught it. Overriding --nav-hover rather than the `transition` below is what carries the lift along with it, so the two stay on one beat - the whole point of the single shared timing. This item is then slightly slower to answer than its neighbours, which is the deliberate trade. One transition for BOTH properties and BOTH directions. It lives only here, in the rest state: with nothing differing between in and out, the hover rule needs no `transition` of its own, and cannot drift from this. */ --nav-hover: 0.4s ease; transition: background-position var(--nav-hover) var(--nav-hover-delay), transform var(--nav-hover) var(--nav-hover-delay); } /* The colour declaration beats the shared `> li > a:hover { color: #fff }` above, which would otherwise repaint solid white over the gradient in any engine that ignores -webkit-text-fill-color. */ body.qm-redesign-header .home-menu > li.home-menu__ai > a:hover, body.qm-redesign-header .home-menu > li.home-menu__ai > a:focus-visible { color: transparent; background-position: -100% 0; } } /* Motion off: the ramp stays, nothing moves. */ @media (prefers-reduced-motion: reduce) { body.qm-redesign-header .home-menu > li.home-menu__ai > a, body.qm-redesign-header .home-menu > li.home-menu__ai > a:hover, body.qm-redesign-header .home-menu > li.home-menu__ai > a:focus-visible { background-position: 0 0; transition: none; } } body.qm-redesign-header .home-menu .sub-menu { position: absolute; left: 0; right: 0; top: 100%; list-style: none; border: 1px solid var(--h-border); border-radius: 16px; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; /* The nested .sub-menu sets visibility:visible, which would otherwise leave this invisible (opacity:0) full-width panel hoverable and pop the dropdown open when the cursor isn't on the menu item. Block hovers until it opens. */ pointer-events: none; transform: translateY(6px); transition: opacity var(--ds-dur, 200ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)), transform var(--ds-dur, 200ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)), visibility var(--ds-dur, 200ms); /* Flat dropdowns (Coverage, Industries, ...) lay their items out in aligned columns. The Services panel overrides this to flex (grouped layout). */ display: grid; grid-template-columns: repeat(4, max-content); justify-content: center; align-items: start; gap: 14px 45px; /* Contained card, not a full-bleed bar: centre a box that caps at 1280px with a gutter on either side and a small gap below the header, then pad the content inside. The border + radius above frame it. */ margin: 8px max(19px, calc((100% - 1280px) / 2)) 0; padding: 32px 28px 36px; background: #15111E; } body.qm-redesign-header .home-menu > li.is-open > .sub-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } body.qm-redesign-header .home-menu > li.is-open .sub-menu { pointer-events: auto; } body.qm-redesign-header .home-menu .sub-menu a { color: var(--h-muted); text-decoration: none; font-size: 13px; white-space: nowrap; padding: 0; /* drop inherited theme padding so centered items align true */ transition: color var(--ds-dur-fast, 150ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)); } body.qm-redesign-header .home-menu .sub-menu a:hover { color: #ffffff; } body.qm-redesign-header .home-menu .sub-menu > li.menu-item-has-children { text-align: center; } body.qm-redesign-header .home-menu .sub-menu > li.menu-item-has-children > a { display: inline-block; color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 18px; padding: 0; /* drop inherited theme padding so the text centers in its box */ } body.qm-redesign-header .home-menu .sub-menu > li.menu-item-has-children > a span { display: inline-block; padding-bottom: 8px; border-bottom: 2px solid #7D51F1; } body.qm-redesign-header .home-menu .sub-menu .sub-menu { position: static; display: block; opacity: 1; visibility: visible; transform: none; background: none; border: 0; box-shadow: none; padding: 0; text-align: left; /* default: single column for short groups (Development, etc.) */ column-count: 1; column-gap: 29px; width: max-content; } body.qm-redesign-header .home-menu .sub-menu .sub-menu li { break-inside: avoid; margin-bottom: 11px; } /* Aurora on a `::before` layer, at FULL strength (2026-09-09, client). It sat at 0.5 while the wash was a CSS recreation, to keep it from competing with the icon/headline/button on top. Now that it is supplied artwork the half-strength version read as a faint tint of the image rather than the image, so all three consumers - Services, Coverage, Industries - paint it at 1. The band's own contents stay legible over it; Services had already run at 1 since the new Services design landed, which is what showed the two were safe. */ body.qm-redesign-header .home-menu .home-mega-cov__cta::before, body.qm-redesign-header .home-menu .home-mega-ind__cta::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--cta-aurora); opacity: 1; } /* The mobile rule that used to hide the head and CTA lived here. It existed because the panel itself was display:none below 1025px, so its chrome was dead weight. The 2026-09-14 design renders the panel on mobile, head and CTA included - see the MOBILE OVERLAY block at the end of this file. */ body.qm-redesign-header .home-menu .home-mega-svc .home-svc-mcard__main { position: absolute; inset: 0; z-index: 1; border-radius: inherit; } body.qm-redesign-header .home-menu .home-mega-svc .home-svc-mcard__subs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } body.qm-redesign-header .home-menu .home-mega-svc .home-svc-mcard__sub { position: relative; z-index: 2; /* above the stretched main link, so it stays clickable */ display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--h-pill); font-size: 11px; font-weight: 600; line-height: 1.6; color: rgba(255, 255, 255, 0.7); text-decoration: none; border: 1px solid color-mix(in srgb, var(--acc, #8e6cff) 30%, transparent); background: color-mix(in srgb, var(--acc, #8e6cff) 8%, transparent); transition: border-color var(--ds-dur, 200ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)), background var(--ds-dur, 200ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)), color var(--ds-dur, 200ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)); } body.qm-redesign-header .home-menu .home-mega-svc .home-svc-mcard__sub:hover { border-color: color-mix(in srgb, var(--acc, #8e6cff) 60%, transparent); background: color-mix(in srgb, var(--acc, #8e6cff) 18%, transparent); color: #fff; } /* ------------- Mega panel design: 2026-09-08 / 2026-09-09 --------------- THREE PANELS: Services, Coverage, Industries. Keyed on `.sub-menu.home-mega-cov` and `.sub-menu.home-mega-ind`, which is exactly those three - the Services panel carries BOTH `home-mega-cov` and `home-mega-svc`, so the `cov` selector reaches Services and Coverage, and `ind` adds Industries. Company and Resources are deliberately outside it: they are flat link lists with no columns, cards or CTA band to restyle. Started as Services-only (the client's first answer) and was widened on 2026-09-09. Where a rule names `.home-mega-cov__x` without a panel class it is already Services+Coverage only, because Industries' half of the markup uses `.home-mega-ind__x` - the two panels are NOT the same shape, so the pairs below are spelled out rather than merged. WHAT DOES NOT TRANSFER TO INDUSTRIES, because it has no such part: - the column separators and section titles (no `__cols` / `__col-label`; its nearest equivalent is the single `__eyebrow`, coloured below) - the filled header tile (no `__head-ico`) - the one-line lead (its `__desc` sits in a 300px sidebar, where one line is not possible - it gets the colour only, and keeps its own measure) DUPLICATED, UNAVOIDABLY. The same block exists in the other of css/home.css (`body.home`, front page) and assets/styles/shared/home-header.css (`body.qm-redesign-header`, AI Product Testing / Contact Us / New Design Services). The panel markup is shared, the CSS is not - edit both or the design lands on one surface only. */ /* Section background: #08060D, a step darker than the shared #15111E shell, so the item cards can BE #15111E and still read as raised off the panel. A deeper corner and a real cast shadow with it - the shared 16px radius and `0 24px 48px` read as a flat sheet against the design's floating card. */ body.qm-redesign-header .home-menu .sub-menu.home-mega-cov, body.qm-redesign-header .home-menu .sub-menu.home-mega-ind { background: #08060D; border-radius: var(--h-radius-lg); box-shadow: 0 32px 64px -12px rgba(0, 0, 0, 0.7), 0 8px 24px -8px rgba(0, 0, 0, 0.5); } /* The header tile is FILLED, not a 10%-opacity tint of the purple with a purple glyph - which is what the shared rule paints and what made it read as an outline next to the solid tiles elsewhere on the site. Services + Coverage; Industries has no tile. Fill only, so each panel keeps its own tile size. */ body.qm-redesign-header .home-menu .home-mega-cov__head-ico { border: 0; background: var(--h-purple-grad); color: #fff; } /* Services' supplied section artwork IS the tile - its own 48px rounded rect on #5336A1 - so the chrome above has to come off, or the purple gradient sits behind the artwork's own corners and shows at the edges. Only on `--art`: an uploaded `qmh_svc_icon` still gets the tile. SCOPED THROUGH .home-mega-cov ON PURPOSE. The plain `.home-mega-cov__head-ico--art` form of these two rules was being silently beaten: the base `.home-mega-cov__head-ico` rule further down this file (search `flex: none; width: 60px`) sets `border` and `background` again at the SAME specificity, and being later in the source it won. The tinted box and its 1px outline were therefore still painted behind the artwork, which is the grey edge reported above the Services and Coverage icons - the other three panels never showed it because nothing re-states their `--art` reset. Adding the ancestor class takes this to (0,4,1) so it no longer depends on which rule happens to come last. */ body.qm-redesign-header .home-menu .home-mega-cov .home-mega-cov__head-ico--art { background: none; border: 0; padding: 0; overflow: hidden; } body.qm-redesign-header .home-menu .home-mega-cov .home-mega-cov__head-ico--art img { width: 48px; height: 48px; display: block; } /* The lead under the panel heading is white, not the shared 60% white - at 13px on the darker #08060D panel that was reading as grey. `max-width: none` on the Services/Coverage lead puts it on ONE line: the wrap was the shared 420px cap against a string that needs ~515px, and the head row has 1222px, so the cap was the only thing in the way. `none` rather than a bigger number - nothing there wants a measure, and a longer lead an editor types still wraps rather than overflowing, which a `nowrap` would not. Industries' lead keeps ITS measure: it sits in a 300px sidebar column, where one line is not achievable and removing the cap would only let it fill the column it is already filling. */ body.qm-redesign-header .home-menu .sub-menu.home-mega-cov .home-mega-cov__desc { color: #fff; max-width: none; } body.qm-redesign-header .home-menu .sub-menu.home-mega-ind .home-mega-ind__desc { color: #fff; } /* Section titles in lilac. `opacity: 1` alongside: the shared rule mutes them to 0.85, which would paint roughly #AE9DD5 over the panel rather than the lilac that was asked for - a title should be the colour it is given. Industries has one `__eyebrow` where the others have a title per column; it is the same thing in its layout, so it takes the same colour. */ body.qm-redesign-header .home-menu .sub-menu.home-mega-cov .home-mega-cov__col-label, body.qm-redesign-header .home-menu .sub-menu.home-mega-ind .home-mega-ind__eyebrow { color: #CBB9F9; opacity: 1; } /* MENU ITEMS. `.sub-menu.home-mega-cov` rather than `.home-mega-cov` alone: the compact card rules further down this file are `.sub-menu .home-mega-card` - equal specificity and LATER, so they would win on source order. Matching `.sub-menu` on the panel element itself (it carries both classes) adds the one class that outranks them wherever either rule sits. */ body.qm-redesign-header .home-menu .sub-menu.home-mega-cov .home-mega-card, body.qm-redesign-header .home-menu .sub-menu.home-mega-ind .home-mega-card, body.qm-redesign-header .home-menu .sub-menu.home-mega-res .home-mega-card { padding: 8px 16px; background: #15111E; /* The fill colour at half alpha: a seam against the darker panel rather than a frame drawn in a different colour. */ border-color: rgba(21, 17, 30, 0.5); } body.qm-redesign-header .home-menu .sub-menu.home-mega-cov .home-mega-card__title, body.qm-redesign-header .home-menu .sub-menu.home-mega-ind .home-mega-card__title, body.qm-redesign-header .home-menu .sub-menu.home-mega-res .home-mega-card__title { font-size: 12px; color: var(--h-muted); } /* Hover: the fill drops to half alpha and the lilac takes the border and the label together, replacing the shared `--acc` purple mix. */ body.qm-redesign-header .home-menu .sub-menu.home-mega-cov .home-mega-card:hover, body.qm-redesign-header .home-menu .sub-menu.home-mega-ind .home-mega-card:hover, body.qm-redesign-header .home-menu .sub-menu.home-mega-res .home-mega-card:hover { background: rgba(21, 17, 30, 0.5); border-color: #CBB9F9; } body.qm-redesign-header .home-menu .sub-menu.home-mega-cov .home-mega-card:hover .home-mega-card__title, body.qm-redesign-header .home-menu .sub-menu.home-mega-ind .home-mega-card:hover .home-mega-card__title, body.qm-redesign-header .home-menu .sub-menu.home-mega-res .home-mega-card:hover .home-mega-card__title { color: #CBB9F9; } /* Item arrows in lilac. The 0.55 resting opacity is LEFT ALONE: that is the item's emphasis model, not its colour - the arrow reads as a dimmed lilac until hover and full lilac on it, as the shared rule intends. */ body.qm-redesign-header .home-menu .sub-menu.home-mega-cov .home-mega-card__arrow, body.qm-redesign-header .home-menu .sub-menu.home-mega-ind .home-mega-card__arrow, body.qm-redesign-header .home-menu .sub-menu.home-mega-res .home-mega-card__arrow { color: #CBB9F9; } /* The hover hairline along the item's bottom edge, in the panel's lilac. It was mixing the old `--acc` purple, which is the one accent this design does not use anywhere in these panels. */ body.qm-redesign-header .home-menu .sub-menu.home-mega-cov .home-mega-card::after, body.qm-redesign-header .home-menu .sub-menu.home-mega-ind .home-mega-card::after, body.qm-redesign-header .home-menu .sub-menu.home-mega-res .home-mega-card::after { background: linear-gradient(90deg, transparent, #CBB9F9, transparent); } /* No leading glyph on the CTA band. The design leads with the copy, and the glyph was competing with the filled button at the other end for the eye. */ body.qm-redesign-header .home-menu .sub-menu.home-mega-cov .home-mega-cov__cta-ico, body.qm-redesign-header .home-menu .sub-menu.home-mega-ind .home-mega-ind__cta-ico { display: none; } /* The band's button is FILLED TEAL with dark ink, against the shared outlined purple. --h-green-grad and --h-on-light are the site's own pair for a light fill, so the contrast is one the design system already validated, and the arrow follows on currentColor. */ body.qm-redesign-header .home-menu .sub-menu.home-mega-cov .home-mega-cov__cta-btn, body.qm-redesign-header .home-menu .sub-menu.home-mega-ind .home-mega-ind__cta-btn { background: var(--h-green-grad); border-color: transparent; color: var(--h-on-light); } /* The shared hover paints a PURPLE gradient over `::after` and turns the border purple - both wrong over a teal fill. Repainted as a white sheen so the button still answers the pointer; the inherited gap stretch is untouched. */ body.qm-redesign-header .home-menu .sub-menu.home-mega-cov .home-mega-cov__cta-btn::after, body.qm-redesign-header .home-menu .sub-menu.home-mega-ind .home-mega-ind__cta-btn::after { background: linear-gradient(to right, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.38) 100%); } body.qm-redesign-header .home-menu .sub-menu.home-mega-cov .home-mega-cov__cta-btn:hover, body.qm-redesign-header .home-menu .sub-menu.home-mega-ind .home-mega-ind__cta-btn:hover { border-color: transparent; } body.qm-redesign-header .home-menu .sub-menu.home-mega-cov .home-mega-cov__cta-btn:focus-visible, body.qm-redesign-header .home-menu .sub-menu.home-mega-ind .home-mega-ind__cta-btn:focus-visible { outline-color: var(--h-green); } /* The CTA band's wash at full strength USED TO BE OVERRIDDEN HERE. It is now the shared default for all three CTA bands (see the `::before` rule earlier in this file), so the override would be a no-op and is gone rather than left to mislead. */ /* No separators between the columns - the design groups by section title alone. Services + Coverage only; Industries has no column structure. The column padding STAYS: the grid runs on gap:0, so that padding is the gutter, and dropping it with the border would collapse the columns together. */ /* MEDIA GATES ARE POINTER-AWARE (2026-09-09). Width alone is not enough: a tablet renders at desktop width but cannot hover, so it needs the mobile overlay rather than hover-to-open panels. These conditions came from the front page's copy of this stylesheet when the two were merged - that copy was the more capable one - and they mirror `mqMobile` in home-header.js. If the CSS and the JS ever disagree you get one rendering wearing the other's behaviour, so change them together. */ @media (min-width: 1025px) and (pointer: fine) and (hover: hover) { body.qm-redesign-header .home-menu .sub-menu.home-mega-cov .home-mega-cov__col { border-left: 0; } } body.qm-redesign-header .home-menu .home-mega-ind a { white-space: normal; padding: 0; color: inherit; } body.qm-redesign-header .home-menu .home-mega-ind__inner { display: block; } body.qm-redesign-header .home-menu .home-mega-ind__eyebrow { display: inline-block; margin-bottom: 14px; color: var(--h-purple); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } body.qm-redesign-header .home-menu .home-mega-ind__heading { margin: 0 0 14px; font-size: 26px; line-height: 1.15; font-weight: 700; color: #fff; } body.qm-redesign-header .home-menu .home-mega-ind__title-accent { color: var(--h-purple); } body.qm-redesign-header .home-menu .home-mega-ind__desc { margin: 0 0 22px; max-width: 280px; color: rgba(255, 255, 255, 0.6); font-size: 13px; line-height: 1.6; } body.qm-redesign-header .home-menu .home-mega-ind__cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding: 13px 18px; border-radius: 16px; border: 1px solid var(--h-border); background: transparent; position: relative; z-index: 0; } body.qm-redesign-header .home-menu .home-mega-ind__cta-ico { flex: none; display: inline-flex; align-items: center; color: var(--h-purple); } body.qm-redesign-header .home-menu .home-mega-ind__cta-text { display: flex; flex-direction: column; min-width: 0; } body.qm-redesign-header .home-menu .home-mega-ind__cta-title { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.3; } body.qm-redesign-header .home-menu .home-mega-ind__cta-sub { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: rgba(255, 255, 255, 0.6); } body.qm-redesign-header .home-menu .home-mega-ind__cta-btn { margin-left: auto; } body.qm-redesign-header .home-menu .home-mega-ind .home-mega-cta-btn { padding: 13px 30px; font-size: 14px; } body.qm-redesign-header .home-menu .home-mega-ind__grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; } body.qm-redesign-header .home-menu .home-mega-ind__grid > li { margin: 0; } body.qm-redesign-header .home-menu .home-mega-ind__cta-ico svg { width: 22px; height: 22px; } body.qm-redesign-header .home-menu .home-mega-ind__cta-ico img { width: 22px; height: 22px; object-fit: contain; } @media (min-width: 1025px) and (pointer: fine) and (hover: hover) { body.qm-redesign-header .home-menu .home-mega-ind { display: block; } body.qm-redesign-header .home-menu .home-mega-ind__inner { display: grid; grid-template-columns: 300px 1fr; gap: 24px 44px; align-items: start; } body.qm-redesign-header .home-menu .home-mega-ind__grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 10px 16px; } body.qm-redesign-header .home-menu .home-mega-ind__cta { grid-column: 1 / -1; margin-top: 0; } } body.qm-redesign-header .home-menu .home-mega-cov a { white-space: normal; padding: 0; color: inherit; } body.qm-redesign-header .home-menu .home-mega-cov__inner { display: block; } body.qm-redesign-header .home-menu .home-mega-cov__head { display: flex; align-items: flex-start; gap: 18px; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--h-border); } body.qm-redesign-header .home-menu .home-mega-cov__head-ico { flex: none; width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; border: 1px solid rgba(142, 108, 255, 0.3); background: rgba(142, 108, 255, 0.1); color: var(--h-purple); } body.qm-redesign-header .home-menu .home-mega-cov__head-ico svg { width: 28px; height: 28px; } body.qm-redesign-header .home-menu .home-mega-cov__heading { margin: 0 0 6px; font-size: 28px; line-height: 1.1; font-weight: 700; color: #fff; } body.qm-redesign-header .home-menu .home-mega-cov__heading-accent { color: var(--h-purple); } body.qm-redesign-header .home-menu .home-mega-cov__desc { margin: 0; max-width: 420px; color: rgba(255, 255, 255, 0.6); font-size: 14px; line-height: 1.5; } body.qm-redesign-header .home-menu .home-mega-cov__art { margin-left: auto; flex: none; } body.qm-redesign-header .home-menu .home-mega-cov__art img { height: 140px; width: auto; display: block; } body.qm-redesign-header .home-menu .home-mega-cov__cols { display: grid; grid-template-columns: 1fr; gap: 20px; } body.qm-redesign-header .home-menu .home-mega-cov__col-label { display: block; margin-bottom: 12px; color: var(--h-purple); font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; opacity: 0.85; } body.qm-redesign-header .home-menu .home-mega-cov__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } /* ---------- Feature promo: the highlighted card at the foot of a column ------ Optional, editor-driven (qmh_render_menu_promo in inc/industries-menu.php, "Feature buttons" in inc/home-acf-fields.php). Nothing renders unless a row has a title, so these rules are inert on a menu that has not opted in. TWO COLOURS DRIVE EVERYTHING. --promo-a and --promo-b are the ends of the supplied gradient; the border, the glow, the badge's outline and the badge's text all read from them, so one pair of values keeps them in step and the hover state is a matter of changing the pair rather than restating five rules. There is NO idle animation. An earlier pass read the supplied screen recording as a purple/teal cycle and built one; the spec since made clear that what the recording showed was the pointer moving on and off the card. The colour change belongs to :hover, and that is the only motion here. */ /* `.sub-menu` IS IN THIS SELECTOR ON PURPOSE - the same trap the CTA button hit, and for the same reason. When the promo has a link it is an inside the dropdown, so it also matches the panel reset far above, `body.qm-redesign-header .home-menu .sub-menu a`, which sets `padding: 0` and `white-space: nowrap`. That reset scores (0,3,2); without `.sub-menu` this rule scores (0,3,1) and LOST, so the card rendered with no padding at all and with its text unable to wrap - the content squeezed against the border. Adding `.sub-menu` takes this to (0,4,1), which wins on class count. Matching the class rather than the `a` matters too: with no link the card is a
    , and that form must keep the same padding. */ body.qm-redesign-header .home-menu .sub-menu .home-mega-promo { --promo-a: #7D51F1; --promo-b: #00CCA6; position: relative; display: flex; align-items: center; gap: 12px; /* Bottom-aligned, not spaced off the list: the column is a flex column (see the desktop rule further down) and `auto` pushes this to its foot, so the card's lower edge lines up with the bottom of the tallest column - which is how the design has it, level with the last card of "QA Services". */ margin-top: auto; padding: 14px 16px; /* Undo the reset's nowrap so the subtitle can wrap onto a second line. */ white-space: normal; border-radius: 12px; background: rgba(255, 255, 255, 0.03); /* The glow follows the gradient by splitting it in two: the purple end offset left, the teal end offset right. A box-shadow cannot itself be a gradient, and this reads as one at this blur while staying a plain shadow - no extra element, no stacking-context games to keep it behind the card. */ box-shadow: -6px 0 30px -12px color-mix(in srgb, var(--promo-a) 38%, transparent), 6px 0 30px -12px color-mix(in srgb, var(--promo-b) 38%, transparent); color: inherit; text-decoration: none; /* transform matches the menu items exactly - translateY(-2px) scale(1.06) on 0.15s ease. The literal timing rather than var(--nav-hover) because that property is declared on the trigger , and the panel is a SIBLING of that link, not a descendant, so it does not inherit down here. Keep the two in step by hand if --nav-hover ever changes. */ transition: background var(--ds-dur, 200ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)), transform var(--ds-dur-fast, 150ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)); } /* THE GRADIENT BORDER. A border cannot take a gradient, so this paints the gradient over the card and masks out everything but a 1px frame. Done this way rather than with a padding-box/border-box background pair because that needs an OPAQUE fill to hide the gradient behind the card, and the design's fill is translucent. */ body.qm-redesign-header .home-menu .home-mega-promo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(90deg, var(--promo-a) 0%, var(--promo-b) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } body.qm-redesign-header .home-menu .home-mega-promo__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } /* Badge: the same gradient twice - through the text, and as its outline. The outline uses the mask trick again; the text uses background-clip, which is why the two cannot share one background and the frame is a pseudo-element. */ body.qm-redesign-header .home-menu .home-mega-promo__badge { position: relative; align-self: flex-start; margin-bottom: 8px; padding: 4px 12px; border-radius: var(--h-pill); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.4; background: linear-gradient(90deg, var(--promo-a) 0%, var(--promo-b) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } body.qm-redesign-header .home-menu .home-mega-promo__badge::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(90deg, var(--promo-a) 0%, var(--promo-b) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } body.qm-redesign-header .home-menu .home-mega-promo__title { font-size: 15px; font-weight: 700; color: #fff; transition: color var(--ds-dur, 200ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)); } body.qm-redesign-header .home-menu .home-mega-promo__text { font-size: 12px; line-height: 1.45; color: rgba(255, 255, 255, 0.65); } body.qm-redesign-header .home-menu .home-mega-promo__arrow { flex: none; margin-left: auto; display: inline-flex; color: var(--promo-b); transition: transform var(--ds-dur, 200ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)), color var(--ds-dur, 200ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)); } body.qm-redesign-header .home-menu .home-mega-promo__arrow svg { width: 18px; height: 18px; } /* HOVER GOES GREEN. Re-pointing the two colour stops turns the border, the glow and the badge green in one move. Border lands on a flat #00886F because both stops are the same value, which is what the spec asks for; the title and arrow take the brighter #00CCA6 so they stay legible on the dark fill. Gated to (hover: hover) for the same reason the menu items are: on a touch device the tapped link keeps :hover until something else is tapped, so the button would sit green and lifted after the tap instead of navigating away cleanly. Keyboard users get the outline rule below, which stays ungated. */ @media (hover: hover) { body.qm-redesign-header .home-menu a.home-mega-promo:hover { transform: translateY(-2px) scale(1.06); --promo-a: #00886F; --promo-b: #00886F; background: rgba(13, 26, 24, 0.05); } body.qm-redesign-header .home-menu a.home-mega-promo:hover .home-mega-promo__title, body.qm-redesign-header .home-menu a.home-mega-promo:hover .home-mega-promo__arrow { color: #00CCA6; } body.qm-redesign-header .home-menu a.home-mega-promo:hover .home-mega-promo__arrow { transform: translateX(3px); } } body.qm-redesign-header .home-menu a.home-mega-promo:focus-visible { outline: 2px solid var(--promo-b); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { body.qm-redesign-header .home-menu .home-mega-promo, body.qm-redesign-header .home-menu .home-mega-promo__title, body.qm-redesign-header .home-menu .home-mega-promo__arrow { transition: none; } /* The lift/scale is movement, so it goes - same as the menu items do. */ body.qm-redesign-header .home-menu a.home-mega-promo:hover, body.qm-redesign-header .home-menu a.home-mega-promo:hover .home-mega-promo__arrow { transform: none; } } body.qm-redesign-header .home-menu .home-mega-cov__cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; padding: 18px 22px; border-radius: 16px; border: 1px solid var(--h-border); background: transparent; position: relative; z-index: 0; } body.qm-redesign-header .home-menu .home-mega-cov__cta-ico { flex: none; display: inline-flex; align-items: center; color: var(--h-purple); } body.qm-redesign-header .home-menu .home-mega-cov__cta-ico svg { width: 26px; height: 26px; } body.qm-redesign-header .home-menu .home-mega-cov__cta-text { font-size: 19px; font-weight: 700; color: #fff; } body.qm-redesign-header .home-menu .home-mega-cov__accent-p { color: var(--h-purple); } body.qm-redesign-header .home-menu .home-mega-cov__accent-g { color: var(--h-green); } body.qm-redesign-header .home-menu .home-mega-cov__cta-btn { margin-left: auto; flex: none; } @media (min-width: 1025px) and (pointer: fine) and (hover: hover) { body.qm-redesign-header .home-menu .home-mega-cov { display: block; } /* --svc-cols is set on the markup by BOTH panels (Coverage and Services), so the track count follows the menu instead of assuming four. A column added in Appearance > Menus used to land in an implicit track, which grid-auto-columns sizes to its content and which then takes the width out of the explicit ones - the same failure the Industries grid had. minmax(0, 1fr) keeps a long label from forcing its own track wider than the rest. */ body.qm-redesign-header .home-menu .home-mega-cov__cols { grid-template-columns: repeat(var(--svc-cols, 4), minmax(0, 1fr)); gap: 0; align-items: stretch; } /* Flex column so the feature button can sit at the foot via margin-top:auto. The grid already stretches the columns to equal height, so the button lands level with the bottom of the tallest one. */ body.qm-redesign-header .home-menu .home-mega-cov__col { display: flex; flex-direction: column; padding: 0 22px; border-left: 1px solid var(--h-border); } body.qm-redesign-header .home-menu .home-mega-cov__col:first-child { padding-left: 0; border-left: 0; } body.qm-redesign-header .home-menu .home-mega-cov__col:last-child { padding-right: 0; } } @media (max-width: 1024px), (pointer: coarse), (hover: none) { body.qm-redesign-header .home-menu .home-mega-cov__art { display: none; } body.qm-redesign-header .home-menu .home-mega-cov__cta-btn { margin-left: 0; } } body.qm-redesign-header .home-menu .home-mega-company a { text-decoration: none; color: inherit; white-space: normal; } body.qm-redesign-header .home-menu .home-mega-company__panel { display: block; } body.qm-redesign-header .home-menu .home-mega-company__cta { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; padding: 26px; border-radius: 16px; border: 1px solid var(--h-border); background: radial-gradient(120% 130% at 15% 0%, rgba(142, 108, 255, 0.16), transparent 55%), rgba(255, 255, 255, 0.015); } body.qm-redesign-header .home-menu .home-mega-company__cta-brand { display: inline-flex; margin-bottom: 22px; } body.qm-redesign-header .home-menu .home-mega-company__cta-brand img { height: 34px; width: auto; } body.qm-redesign-header .home-menu .home-mega-company__cta-title { margin: 0 0 10px; font-size: 26px; line-height: 1.15; font-weight: 700; color: #fff; } body.qm-redesign-header .home-menu .home-mega-company__accent { color: var(--h-purple); } body.qm-redesign-header .home-menu .home-mega-company__cta-text { margin: 0 0 24px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); } body.qm-redesign-header .home-menu .home-mega-company__cta-btn { margin-top: auto; align-self: center; } body.qm-redesign-header .home-menu .home-mega-company .home-mega-cta-btn { padding: 13px 30px; font-size: 14px; } body.qm-redesign-header .home-menu .home-mega-company__links { display: flex; flex-direction: column; gap: 12px; } /* * `.sub-menu` IS IN THIS SELECTOR ON PURPOSE, and it is the whole fix for the * arrow sitting flush against the button's right border. * * These rows are elements inside the dropdown, so they also match the panel * reset above - `body.qm-redesign-header .home-menu .sub-menu a`, which zeroes * padding "so centered items align true". That reset scores (0,3,2); this rule * without `.sub-menu` scores (0,3,1), so the RESET WON and three declarations * here never applied: padding fell to 0, font-size to 13px and the colour to the * reset's, and the transition list was replaced by the reset's colour-only one. * * With `padding: 0` the row is [18px ::before spacer][label][18px arrow] hard * against both borders, and since the arrow glyph only inks x=5..19 of its 24 * viewBox the tip landed ~4px from the edge - which is what reads as "too close". * * Adding `.sub-menu` makes this (0,4,1): four classes beats the reset's three, so * it wins on specificity rather than on source order, and it covers the * variant this row uses when a link has no URL (see qmh_render_company_panel()). * The neighbouring `a.home-mega-cta-btn` rule solves the same collision by * tie-breaking on order instead; this is the sturdier half of that pattern. */ body.qm-redesign-header .home-menu .sub-menu .home-mega-company__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; box-sizing: border-box; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--h-border); background: rgba(255, 255, 255, 0.015); color: #fff; font-size: 15px; font-weight: 600; /* `transform` is in here for the hover lift below. Without it the lift still happens but snaps, which reads as a different interaction from the cards rather than the same one. */ transition: border-color var(--ds-dur, 200ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)), background var(--ds-dur, 200ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)), box-shadow var(--ds-dur, 200ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)), transform var(--ds-dur, 200ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)); } /* Also above the reset's `a:hover { color: #fff }`, so the hover treatment here is the border/background/shadow one and not a colour swap. */ body.qm-redesign-header .home-menu .sub-menu .home-mega-company__link:hover { border-color: rgba(142, 108, 255, 0.5); background: rgba(142, 108, 255, 0.08); box-shadow: 0 8px 24px rgba(142, 108, 255, 0.18); /* The same -3px lift `.home-mega-card:hover` gives every other panel's items. Company is the one dropdown built on `__link` rather than `.home-mega-card`, so it never inherited it and its rows sat still while the rest moved. Declared on the base rule, not the `.sub-menu.home-mega-company` override further down: that override restyles colour and shadow only and does not touch `transform`, so the lift applies through it. */ transform: translateY(-3px); } body.qm-redesign-header .home-menu .home-mega-company__link::before { content: ""; flex: none; width: 18px; } body.qm-redesign-header .home-menu .home-mega-company__link-label { flex: 1; min-width: 0; text-align: center; } body.qm-redesign-header .home-menu .home-mega-company__arrow { flex: none; width: 18px; height: 18px; color: var(--h-purple); transition: transform var(--ds-dur, 200ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)); } body.qm-redesign-header .home-menu .home-mega-company__link:hover .home-mega-company__arrow { transform: translateX(3px); } body.qm-redesign-header .home-menu .home-mega-company__link:focus, body.qm-redesign-header .home-menu .home-mega-company__cta-btn:focus, body.qm-redesign-header .home-menu .home-mega-cov__cta-btn:focus, body.qm-redesign-header .home-menu .home-mega-ind__cta:focus { outline: none; } body.qm-redesign-header .home-menu .home-mega-company__link:focus-visible, body.qm-redesign-header .home-menu .home-mega-company__cta-btn:focus-visible, body.qm-redesign-header .home-menu .home-mega-cov__cta-btn:focus-visible, body.qm-redesign-header .home-menu .home-mega-ind__cta:focus-visible { outline: 2px solid var(--h-purple); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { body.qm-redesign-header .home-menu .home-mega-company__link:hover .home-mega-company__arrow { transform: none; } } body.qm-redesign-header .home-menu a.home-mega-cta-btn, body.qm-redesign-header .home-menu .home-mega-cta-btn { position: relative; z-index: 0; overflow: hidden; display: inline-flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 16px 40px; border-radius: var(--h-pill); background: transparent; color: #ffffff; font-size: 15px; font-weight: 700; line-height: 1; white-space: nowrap; border: 1px solid rgba(142, 108, 255, 0.6); text-decoration: none; transition: gap 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease; } body.qm-redesign-header .home-menu .home-mega-cta-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(to right, rgba(142, 108, 255, 0) 35%, rgba(142, 108, 255, 0.9) 100%); opacity: 0; transition: opacity 0.5s ease 0.18s; } body.qm-redesign-header .home-menu .home-mega-cta-btn:hover::after { opacity: 1; } body.qm-redesign-header .home-menu .home-mega-cta-btn:hover { gap: 24px; border-color: var(--h-purple); } body.qm-redesign-header .home-menu .home-mega-cta-btn svg { flex: none; width: 18px; height: 18px; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } body.qm-redesign-header .home-menu .home-mega-cta-btn:hover svg:last-child { transform: translateX(2px); } body.qm-redesign-header .home-menu .home-mega-cta-btn:focus { outline: none; } body.qm-redesign-header .home-menu .home-mega-cta-btn:focus-visible { outline: 2px solid var(--h-purple); outline-offset: 3px; } @media (min-width: 1025px) and (pointer: fine) and (hover: hover) { /* RIGHT-ALIGNED TO THE CONTACT US BUTTON, not centred like the other panels. The panel is absolute inside `.home-header`, so `right` is measured from the header edge. The header inner caps at 1280px and is centred, then pads 19px, so its content right edge - where the Contact Us button ends - sits `(100% - 1280px) / 2 + 19px` in from the right. Checked against the live button at a 1600px viewport: both come to 172px. `left: auto` releases the base rule's `left: 0`, and the width has to become explicit because it can no longer come from a symmetric margin. max-width keeps the 19px gutter on a viewport narrower than the panel. */ body.qm-redesign-header .home-menu .home-mega-company { display: block; } /* Right-alignment superseded: centred on its own button now - see the end of this file. */ body.qm-redesign-header .home-menu .home-mega-company__panel { display: grid; grid-template-columns: 320px 1fr; gap: 24px 44px; align-items: start; } } @keyframes qmMegaCardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @media (min-width: 1025px) and (pointer: fine) and (hover: hover) { body.qm-redesign-header .home-menu > li.is-open .home-mega-card { animation: qmMegaCardIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) backwards; } body.qm-redesign-header .home-menu > li.is-open .home-mega-card:nth-child(2) { animation-delay: 0.05s; } body.qm-redesign-header .home-menu > li.is-open .home-mega-card:nth-child(3) { animation-delay: 0.1s; } body.qm-redesign-header .home-menu > li.is-open .home-mega-card:nth-child(4) { animation-delay: 0.14s; } } @media (prefers-reduced-motion: reduce) { body.qm-redesign-header .home-menu > li.is-open .home-mega-card { animation: none; } } body.qm-redesign-header .home-menu .home-mega-res a { white-space: normal; padding: 0; color: inherit; } body.qm-redesign-header .home-menu .home-mega-res__inner { display: block; } body.qm-redesign-header .home-menu .home-mega-res__cards { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 0; padding: 0; list-style: none; } body.qm-redesign-header .home-menu .home-mega-res__cards > li { margin: 0; } @media (min-width: 1025px) and (pointer: fine) and (hover: hover) { /* Superseded by the right-aligned rule at the end of this file. */ body.qm-redesign-header .home-menu .home-mega-res__cards { grid-template-columns: 1fr; gap: 24px; } } body.qm-redesign-header .home-menu .sub-menu .home-mega-card { --acc: var(--card-accent, #8e6cff); position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; min-height: 84px; box-sizing: border-box; padding: 16px 22px; border-radius: 14px; border: 1px solid var(--h-border); background: rgba(255, 255, 255, 0.015); color: inherit; text-decoration: none; cursor: pointer; white-space: normal; transition: border-color var(--ds-dur, 200ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)), background var(--ds-dur, 200ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)), transform var(--ds-dur, 200ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)), box-shadow var(--ds-dur, 200ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)); } body.qm-redesign-header .home-menu .home-mega-card:hover { border-color: color-mix(in srgb, var(--acc) 45%, transparent); background: color-mix(in srgb, var(--acc) 7%, transparent); transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.38); } body.qm-redesign-header .home-menu .home-mega-card::after { content: ""; position: absolute; left: 16%; right: 16%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc) 75%, transparent), transparent); opacity: 0; transition: opacity var(--ds-dur, 200ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)); } body.qm-redesign-header .home-menu .home-mega-card:hover::after { opacity: 1; } body.qm-redesign-header .home-menu .home-mega-card__ico { flex: none; width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent); background: color-mix(in srgb, var(--acc) 10%, transparent); color: var(--acc); transition: border-color var(--ds-dur, 200ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)), background var(--ds-dur, 200ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)), color var(--ds-dur, 200ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)); } body.qm-redesign-header .home-menu .home-mega-card:hover .home-mega-card__ico { border-color: color-mix(in srgb, var(--acc) 60%, transparent); background: color-mix(in srgb, var(--acc) 22%, transparent); color: #fff; } body.qm-redesign-header .home-menu .home-mega-card__ico svg { width: 23px; height: 23px; } body.qm-redesign-header .home-menu .home-mega-card__ico img { width: 23px; height: 23px; object-fit: contain; } /* AN UPLOADED ICON IS ARTWORK, NOT A GLYPH. The built-in icons are bare inline SVG paths that need the tinted tile drawn behind them. An icon uploaded in Appearance > Menus is a finished asset: the ones the designer supplies open with a full-bleed ``, i.e. they bring their own rounded tile and ground. Painted inside the CSS tile that came out as a green square floating in a purple one, with the component's border ringing it - reported as the icon being broken, which no amount of resizing would have fixed. So `--art` drops the chrome and lets the artwork BE the tile, at the full box size rather than the 18px a glyph gets. Same modifier name and same reasoning as .home-mega-cov__head-ico--art further up. An upload that is only a glyph still reads fine: it simply sits on the card background instead of a tint. The hover reset matters too - without it the tinted background and border fade back in under the artwork on pointer-over. */ body.qm-redesign-header .home-menu .home-mega-card__ico--art, body.qm-redesign-header .home-menu .home-mega-card:hover .home-mega-card__ico--art { background: none; border: 0; padding: 0; overflow: hidden; } body.qm-redesign-header .home-menu .home-mega-card__ico--art img, body.qm-redesign-header .home-menu .sub-menu .home-mega-card__ico--art img { width: 100%; height: 100%; display: block; } body.qm-redesign-header .home-menu .home-mega-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } body.qm-redesign-header .home-menu .home-mega-card__badge { align-self: flex-start; margin-bottom: 3px; padding: 2px 8px; border-radius: var(--h-pill); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--acc); border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent); } body.qm-redesign-header .home-menu .home-mega-card__title { font-size: 15px; font-weight: 600; color: #fff; } body.qm-redesign-header .home-menu .home-mega-card__desc { font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.7); /* Clamp to 2 lines so a narrow column can't make a card taller than the rest. */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } body.qm-redesign-header .home-menu .home-mega-card__arrow { flex: none; margin-left: auto; align-self: center; width: 18px; height: 18px; color: var(--acc); opacity: 0.55; transition: opacity var(--ds-dur, 200ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)), transform var(--ds-dur, 200ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)); } body.qm-redesign-header .home-menu .home-mega-card:hover .home-mega-card__arrow { opacity: 1; transform: translateX(3px); } body.qm-redesign-header .home-menu .home-mega-card__arrow svg { width: 18px; height: 18px; } body.qm-redesign-header .home-menu .home-mega-card:focus { outline: none; } body.qm-redesign-header .home-menu .home-mega-card:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; } body.qm-redesign-header .home-menu .sub-menu .home-mega-card { min-height: 0; gap: 12px; padding: 10px 13px; border-radius: 12px; } body.qm-redesign-header .home-menu .sub-menu .home-mega-card__ico { width: 36px; height: 36px; border-radius: 9px; } /* GLYPH SIZING for the panel's smaller 36px tile - the built-in inline SVGs, and an upload the editor has ticked "Icon is a bare glyph" (which is exactly the icon that does NOT get --art, so :not() is what separates the two). The :not() also settles specificity rather than leaving it to source order: it takes this selector to (0,5,2) against the --art rule's (0,4,2), so artwork keeps filling the box no matter where either rule ends up in the file. */ body.qm-redesign-header .home-menu .sub-menu .home-mega-card__ico svg, body.qm-redesign-header .home-menu .sub-menu .home-mega-card__ico:not(.home-mega-card__ico--art) img { width: 18px; height: 18px; } body.qm-redesign-header .home-menu .sub-menu .home-mega-card__title { font-size: 13px; } body.qm-redesign-header .home-menu .sub-menu .home-mega-card__desc { font-size: 11.5px; } body.qm-redesign-header .home-menu .sub-menu .home-mega-card__arrow, body.qm-redesign-header .home-menu .sub-menu .home-mega-card__arrow svg { width: 16px; height: 16px; } body.qm-redesign-header .home-menu .home-mega-cov .home-mega-cov__head { gap: 14px; padding-bottom: 14px; margin-bottom: 16px; } body.qm-redesign-header .home-menu .home-mega-cov .home-mega-cov__head-ico { width: 48px; height: 48px; border-radius: 12px; } body.qm-redesign-header .home-menu .home-mega-cov .home-mega-cov__head-ico svg { width: 22px; height: 22px; } body.qm-redesign-header .home-menu .home-mega-cov .home-mega-cov__heading { font-size: 22px; margin-bottom: 4px; } body.qm-redesign-header .home-menu .home-mega-cov .home-mega-cov__desc { font-size: 13px; } body.qm-redesign-header .home-menu .home-mega-cov .home-mega-cov__col-label { margin-bottom: 9px; } body.qm-redesign-header .home-menu .home-mega-cov .home-mega-cov__list { gap: 6px; } @media (min-width: 1025px) and (pointer: fine) and (hover: hover) { body.qm-redesign-header .home-menu .home-mega-svc .home-mega-cov__cols { grid-template-columns: repeat(var(--svc-cols, 4), minmax(0, 1fr)); } } body.qm-redesign-header .home-menu .home-mega-cov__cta { margin-top: 16px; padding: 13px 18px; } body.qm-redesign-header .home-menu .home-mega-cov__cta-ico svg { width: 22px; height: 22px; } body.qm-redesign-header .home-menu .home-mega-cov__cta-text { font-size: 16px; } body.qm-redesign-header .home-menu .home-mega-cov .home-mega-cta-btn { padding: 13px 30px; font-size: 14px; } body.qm-redesign-header .home-menu .sub-menu .home-mega-card__ico { display: none; } body.qm-redesign-header .home-menu .sub-menu .home-mega-card__desc { display: none; } /* OPT-IN: a card whose editor supplied a Menu Icon or a Card Description gets both parts back. `--rich` is added in qmh_render_menu_card() and is set only when the value came from the editor, never from the keyword default or the fallback SVG - CSS could not tell those apart, because every card has one. The display values restate the base rules above deliberately: `display: none` destroyed the grid and the -webkit-box clamp, so un-hiding has to put the original layout back rather than just say `display: block`. */ body.qm-redesign-header .home-menu .sub-menu .home-mega-card--rich .home-mega-card__ico { display: grid; } body.qm-redesign-header .home-menu .sub-menu .home-mega-card--rich .home-mega-card__desc { display: -webkit-box; } body.qm-redesign-header .home-menu .home-mega-cov__col-label { display: flex; align-items: center; gap: 8px; } body.qm-redesign-header .home-menu .home-svc-col-ico { flex: none; width: 20px; height: 20px; } /* Group title text beside the column icon. 10px so the longer labels ("QA Advisory & Management") sit on one line instead of wrapping to two - the column leaves the text 177px and that label needs 173px at this size, so no horizontal padding here: 16px either side would put it back over two lines. */ body.qm-redesign-header .home-menu .home-svc-col-text { font-size: 10px; padding: 0; } @media (max-width: 1024px), (pointer: coarse), (hover: none) { body.qm-redesign-header .home-header.is-nav-open .home-menu .home-mega-card { text-align: left; } body.qm-redesign-header .home-header.is-nav-open .home-menu .home-mega-cov__col-label, body.qm-redesign-header .home-header.is-nav-open .home-menu .home-mega-cov__col { text-align: left; } body.qm-redesign-header .home-header.is-nav-open .home-menu .home-mega-cov__col-label { justify-content: flex-start; } } body.qm-redesign-header .home-burger { display: none; width: 35px; height: 35px; border: 1px solid var(--h-border); border-radius: 10px; background: transparent; cursor: pointer; position: relative; } body.qm-redesign-header .home-burger span, body.qm-redesign-header .home-burger span::before, body.qm-redesign-header .home-burger span::after { content: ""; position: absolute; left: 50%; width: 16px; height: 2px; background: #fff; transform: translateX(-50%); transition: transform var(--ds-dur, 200ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)), opacity var(--ds-dur, 200ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)); } body.qm-redesign-header .home-burger span { top: 50%; margin-top: -1px; } body.qm-redesign-header .home-burger span::before { top: -6px; } body.qm-redesign-header .home-burger span::after { top: 6px; } @media (max-width: 1024px), (pointer: coarse), (hover: none) { body.qm-redesign-header .home-header__nav { display: none; } body.qm-redesign-header .home-header .home-header__cta { display: none; } body.qm-redesign-header .home-burger { display: inline-block; margin-left: auto; } body.qm-redesign-header .home-header.is-nav-open .home-burger { position: fixed; top: 18px; right: 19px; z-index: 1002; border-color: transparent; } body.qm-redesign-header .home-header.is-nav-open .home-burger span { background: transparent; } body.qm-redesign-header .home-header.is-nav-open .home-burger span::before { top: 0; background: #CBB9F9; transform: translateX(-50%) rotate(45deg); } body.qm-redesign-header .home-header.is-nav-open .home-burger span::after { top: 0; background: #CBB9F9; transform: translateX(-50%) rotate(-45deg); } /* Mobile overlay panel = .home-header__inner (NOT .home-header__nav) so the "Contact Us" CTA - which is a SIBLING of the nav in the DOM, not a child - flows in the same column directly beneath the menu options. Previously the CTA was position:fixed left/right:24px at the bottom, which stretched edge-to-edge on the wide tablet viewport and overlapped the cookie-settings gear + chat launcher pinned to the bottom corners. */ body.qm-redesign-header .home-header.is-nav-open .home-header__inner { display: flex; flex-direction: column; align-items: center; position: fixed; inset: 0; z-index: 1000; box-sizing: border-box; width: 100%; max-width: none; margin: 0; padding: 88px 24px 44px; gap: 0; background: #0c0b13; overflow-y: auto; -webkit-overflow-scrolling: touch; /* Top-align the panel; the nav+CTA group centres via auto margins below. Do NOT use justify-content:center here - when an expanded panel is taller than the screen it pushes the top above the scroll container's start edge, where iOS Safari cannot scroll to it (items + close controls become unreachable). */ justify-content: flex-start; } /* CLOSE-BUTTON GUTTER. The overlay scrolls its OWN content - .home-header__inner is both the fixed panel and the scroll container - while the close button is position:fixed on top of it. So an expanded panel slides its rows straight under the cross: measured at scrollTop 300 the button stays at y=18 while a column heading sits at the same height behind it. This strip is fixed to the same viewport corner and paints the overlay's own background, so rows disappear behind it before they reach the button. Solid for the button's full height and then fading, which hides the collision without drawing a hard edge across the panel. pointer-events:none is what keeps it from swallowing taps aimed at the menu underneath. z-index sits between the scrolled content (auto) and the button (1002); all three share the stacking context .home-header__inner opens at z-index 1000. */ body.qm-redesign-header .home-header.is-nav-open .home-header__inner::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 76px; z-index: 1001; pointer-events: none; background: linear-gradient(to bottom, #0c0b13 0, #0c0b13 58px, rgba(12, 11, 19, 0) 100%); } /* Logo is hidden inside the overlay (the close button is the only chrome). */ body.qm-redesign-header .home-header.is-nav-open .home-header__logo { display: none; } /* nav is now just a flow wrapper for the menu; margin-top:auto pairs with the CTA's margin-bottom:auto to vertically centre the [menu + CTA] group, and both collapse to 0 when the content overflows so it stays top-aligned + scrollable. */ body.qm-redesign-header .home-header.is-nav-open .home-header__nav { display: flex; flex-direction: column; width: 100%; /* CAP THE CONTENT COLUMN. The overlay is width:100% / max-width:none and is reached by POINTER as well as by width - `(pointer: coarse)` sends an iPad Pro here at 1194px, not only phones. Uncapped, every row stretched the full viewport: at 1024 landscape the feature button measured 931px wide with 736px of dead space between its text and its arrow, and the menu rows did the same. 560px keeps the overlay reading as a column of cards at any width. Below ~600px nothing changes - the viewport is already narrower. Centring comes from the parent's align-items:center, not from auto side margins, which the `margin: auto 0 0` below sets to 0. */ max-width: 560px; /* reset the desktop `flex:1 1 auto` + `justify-content:flex-end` - otherwise the nav grows to fill the column and bottom-aligns the menu, and the centering auto-margins below collapse to 0. */ flex: none; justify-content: normal; margin: auto 0 0; padding: 0; background: none; overflow: visible; } body.qm-redesign-header .home-header.is-nav-open .home-menu { flex-direction: column; align-items: center; gap: 26px; width: 100%; padding: 0; margin: 0; } body.qm-redesign-header .home-header.is-nav-open .home-menu > li { width: 100%; text-align: center; } body.qm-redesign-header .home-header.is-nav-open .home-menu > li > a { justify-content: center; font-size: 24px; font-weight: 700; color: #fff; padding: 4px 0; } body.qm-redesign-header .home-header.is-nav-open .home-menu > li.is-open > a { color: #fff; } body.qm-redesign-header .home-header.is-nav-open .home-menu .sub-menu { position: static; display: none; opacity: 1; visibility: visible; pointer-events: auto; transform: none; box-shadow: none; border: 0; background: none; margin: 0; padding: 0; width: auto; column-count: initial; grid-template-columns: none; text-align: center; } body.qm-redesign-header .home-header.is-nav-open .home-menu .custom-services-class > .sub-menu { gap: 0; } body.qm-redesign-header .home-header.is-nav-open .home-menu .custom-services-class .sub-menu .sub-menu { display: none; column-count: initial; width: auto; grid-template-columns: none; } body.qm-redesign-header .home-header.is-nav-open .home-menu .custom-services-class > .sub-menu > li:not(.menu-col-primary) { display: block; } body.qm-redesign-header .home-header.is-nav-open .home-menu .custom-services-class > .sub-menu > li:not(.menu-col-primary) > a { transform: none; } body.qm-redesign-header .home-header.is-nav-open .home-menu > li.is-open > .sub-menu { display: block; padding-top: 26px; } body.qm-redesign-header .home-header.is-nav-open .home-menu .custom-services-class .sub-menu > li.is-open > .sub-menu { display: block; padding-top: 26px; } body.qm-redesign-header .home-header.is-nav-open .home-menu .sub-menu > li { margin-bottom: 28px; } body.qm-redesign-header .home-header.is-nav-open .home-menu .sub-menu .sub-menu li { margin-bottom: 22px; } body.qm-redesign-header .home-header.is-nav-open .home-menu .sub-menu > li.menu-item-has-children > a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 0; white-space: nowrap; } body.qm-redesign-header .home-header.is-nav-open .home-menu .sub-menu > li.menu-item-has-children > a::after { content: ""; flex: none; width: 8px; height: 8px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='black' stroke-width='1.5'/%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 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--ds-dur, 200ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)); } body.qm-redesign-header .home-header.is-nav-open .home-menu .sub-menu > li.is-open.menu-item-has-children > a::after { transform: rotate(180deg); } body.qm-redesign-header .home-header.is-nav-open .home-menu .sub-menu a { font-size: 15px; color: rgba(255, 255, 255, 0.78); white-space: normal; } body.qm-redesign-header .home-header.is-nav-open .home-menu .sub-menu > li.menu-item-has-children > a span { border-bottom: 0; padding-bottom: 0; } body.qm-redesign-header .home-header.is-nav-open .home-menu > li.is-open > a span, body.qm-redesign-header .home-header.is-nav-open .home-menu .sub-menu > li.is-open.menu-item-has-children > a span { display: inline-block; border-bottom: 2px solid #7D51F1; padding-bottom: 7px; } /* The fixed bottom gradient scrim is gone: the CTA now scrolls inline with the menu instead of floating over it, so there is nothing to fade behind. */ /* FILLED, not outlined (2026-09-09 design). It was transparent with a lilac hairline and lilac ink; the design shows the same solid lilac pill the desktop header uses, so this drops back to `.home-btn--lilac`'s own fill and ink rather than restating a colour. Wide rather than hugging its label, which is what the mock shows across the bottom of the overlay. */ body.qm-redesign-header .home-header.is-nav-open .home-header__cta { display: inline-flex; position: relative; margin: 34px auto auto; align-self: center; justify-content: center; background: var(--h-lilac); border: 1px solid transparent; color: var(--h-on-light); font-size: 16px; padding: 16px 34px; width: min(100%, 320px); } body.qm-redesign-header .home-header.is-nav-open .home-menu .home-mega-company__cta { margin-bottom: 16px; } /* SCROLL LOCK - position:fixed, not overflow:hidden. `overflow: hidden` alone was the trigger for the iOS bug in the recording: is `overflow: visible`, so the viewport takes its scrollability from , and toggling it made the document non-scrollable and back. WebKit did not re-composite the lower part of the page afterwards - the strip behind the toolbar kept the page background colour but lost its CONTENT (sampling the recording: #0f0e15 flat after, against #0c0c10 with the stats block visible before). Taking the body out of flow instead forces a genuine relayout on unlock, so the whole document is painted again. The JS stores the scroll offset in `top` and restores it on close; `overflow: hidden` is kept for engines where it was already doing its job. */ body.qm-redesign-header.home-nav-lock { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; } } /* PER-PANEL DEFAULT WIDTHS (2026-09-09, client). Each panel is a centred box whose width comes from the symmetric margin - the idiom the base rule and the Company/Resources overrides already use, so `max(19px, ...)` keeps a gutter on any screen narrower than the panel and nothing needs a media query of its own beyond the desktop gate below (the mobile overlay lays the panels out itself). Services 1054 Coverage 1054 Industries 751 Company 751 Resources 519 `.home-mega-cov` covers Services AND Coverage, which share 1054 - the Services panel carries both classes, so one rule serves the pair. HEIGHT IS NOT SET: these boxes are content-driven, and a fixed height would clip the taller ones (Company renders 362px against the design 194px). See the note to the client about the measured heights. */ /* Superseded: the widths and the positioning now live in the "centred on its own button" block at the end of this file. */ /* --------- Industries panel: 2026-09-09 design restructure --------- The panel was a 300px intro column beside the grid. The design makes it the same shape as Services and Coverage: a head ROW (icon + heading + lead) over a divider, the grid full width beneath, then the CTA band. Its own `home-mega-ind__*` namespace is kept rather than borrowing the `cov` classes - adding `home-mega-cov` to this panel would also hand it the cov width rule, and the two would then depend on source order to resolve 1054 vs 751. */ @media (min-width: 1025px) and (pointer: fine) and (hover: hover) { /* Was `grid-template-columns: 300px 1fr`. */ body.qm-redesign-header .home-menu .home-mega-ind__inner { display: block; } /* Reads DOWN the columns, as drawn: with the stored item order, column flow puts E-commerce/Healthcare/Gaming in column one. Row flow (the default) transposed that into E-commerce/Business solutions/Blockchain. */ /* ROW COUNT COMES FROM THE MARKUP as --ind-rows = ceil(items / 3), set in qmh_render_industries_panel() the same way the Services panel sets --svc-cols. Column flow fills each column top to bottom, so the row count is what decides how many columns the items need. It used to be hardcoded to four, which holds twelve - and the fourteenth industry on staging spilled into an IMPLICIT fourth column. Implicit tracks are sized by grid-auto-columns, not by the `repeat(3, 1fr)` here, so that column sized itself to its longest label (217px for "Logistics and Supply Chain") and took the width out of the three real columns, which collapsed to 143px. That left about 80px for a label and wrapped four of them onto two lines. Measured after: three equal 220px columns, all fourteen labels on one line. The fallback of 4 keeps the old behaviour if the variable is ever missing, and grid-auto-columns: 1fr means an overflow column would at least match the others rather than squeezing them again. */ body.qm-redesign-header .home-menu .home-mega-ind__grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(var(--ind-rows, 4), auto); grid-auto-flow: column; grid-auto-rows: auto; grid-auto-columns: 1fr; gap: 6px 16px; } /* `grid-column: 1 / -1` and `margin-top: 0` were for the two-column inner. */ body.qm-redesign-header .home-menu .home-mega-ind__cta { grid-column: auto; margin-top: 16px; } } /* The head row, matching the Coverage/Services head exactly. */ body.qm-redesign-header .home-menu .home-mega-ind__head { display: flex; align-items: flex-start; gap: 14px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--h-border); } body.qm-redesign-header .home-menu .home-mega-ind__head-ico { flex: none; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; } /* The supplied artwork IS the tile, so no chrome underneath it. */ body.qm-redesign-header .home-menu .home-mega-ind__head-ico--art { background: none; border: 0; padding: 0; overflow: hidden; } body.qm-redesign-header .home-menu .home-mega-ind__head-ico--art img { width: 48px; height: 48px; display: block; } body.qm-redesign-header .home-menu .home-mega-ind__head-text { min-width: 0; } /* 26px -> 22px and the 14px gap -> 4px: the head is a row now, not a column. */ body.qm-redesign-header .home-menu .home-mega-ind__heading { font-size: 22px; margin: 0 0 4px; } /* White, 13px, and on ONE line - the 280px measure was for the old sidebar. */ body.qm-redesign-header .home-menu .home-mega-ind__desc { margin: 0; max-width: none; font-size: 13px; color: #fff; } /* ----------- Company panel: 2026-09-09 design restructure ----------- Was a brand CTA card (logo + title + text + "Contact Us") beside a vertical link list. The design makes it the same shape as the other panels: a head ROW (icon + heading + lead) over a divider, then the three links as a ROW of pills. The old `__cta` element is gone from the markup, so its rules above are inert. Its own `home-mega-company__*` namespace is kept - the links are `__link`, not `.home-mega-card`, so the item design has to be restated here rather than inherited from the shared block. */ /* The shell, matching the other three panels. */ body.qm-redesign-header .home-menu .sub-menu.home-mega-company { background: #08060D; border-radius: var(--h-radius-lg); box-shadow: 0 32px 64px -12px rgba(0, 0, 0, 0.7), 0 8px 24px -8px rgba(0, 0, 0, 0.5); } body.qm-redesign-header .home-menu .home-mega-company__head { display: flex; align-items: flex-start; gap: 14px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--h-border); } body.qm-redesign-header .home-menu .home-mega-company__head-ico { flex: none; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; } /* The supplied artwork IS the tile, so no chrome underneath it. */ body.qm-redesign-header .home-menu .home-mega-company__head-ico--art { background: none; border: 0; padding: 0; overflow: hidden; } body.qm-redesign-header .home-menu .home-mega-company__head-ico--art img { width: 48px; height: 48px; display: block; } body.qm-redesign-header .home-menu .home-mega-company__head-text { min-width: 0; } /* 26px -> 22px, and the lead white at 13px on one line: both were sized for the old card, where they stacked under a logo in a 320px column. */ body.qm-redesign-header .home-menu .home-mega-company__cta-title { font-size: 22px; margin: 0 0 4px; } body.qm-redesign-header .home-menu .home-mega-company__cta-text { margin: 0; max-width: none; font-size: 13px; color: #fff; } /* THE LINKS: a row of three, not a column. */ body.qm-redesign-header .home-menu .home-mega-company__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } /* The item design the other panels get from `.home-mega-card`, restated for `__link`. `.sub-menu` is matched to outrank the base `__link` rule, which is itself `.sub-menu .home-mega-company__link` and sits earlier in the file. */ body.qm-redesign-header .home-menu .sub-menu.home-mega-company .home-mega-company__link { min-height: 0; padding: 8px 16px; font-size: 12px; font-weight: 600; color: var(--h-muted); background: #15111E; border-color: rgba(21, 17, 30, 0.5); box-shadow: none; } body.qm-redesign-header .home-menu .sub-menu.home-mega-company .home-mega-company__link:hover { background: rgba(21, 17, 30, 0.5); border-color: #CBB9F9; color: #CBB9F9; box-shadow: none; } /* The label was centred by an 18px `::before` spacer balancing the arrow. The design left-aligns it, so the spacer goes and the label stops centring. */ body.qm-redesign-header .home-menu .home-mega-company__link::before { display: none; } body.qm-redesign-header .home-menu .home-mega-company__link-label { text-align: left; } body.qm-redesign-header .home-menu .home-mega-company__arrow { color: #CBB9F9; } @media (min-width: 1025px) and (pointer: fine) and (hover: hover) { /* Was `grid-template-columns: 320px 1fr`. */ body.qm-redesign-header .home-menu .home-mega-company__panel { display: block; } } /* ---------- Resources panel: 2026-09-09 design restructure ---------- The panel was two cards and nothing else. The design gives it the same head as every other panel - icon + heading + lead over a divider - and puts the two cards side by side beneath rather than stacked. Its ITEMS are `.home-mega-card`, the same element the other panels use, so the selector groups in the shared design block above were extended to include `.sub-menu.home-mega-res` rather than restating the pill design here. Only what is genuinely specific to this panel lives below. */ /* The shell, matching the other four panels. */ body.qm-redesign-header .home-menu .sub-menu.home-mega-res { background: #08060D; border-radius: var(--h-radius-lg); box-shadow: 0 32px 64px -12px rgba(0, 0, 0, 0.7), 0 8px 24px -8px rgba(0, 0, 0, 0.5); } body.qm-redesign-header .home-menu .home-mega-res__head { display: flex; align-items: flex-start; gap: 14px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--h-border); } body.qm-redesign-header .home-menu .home-mega-res__head-ico { flex: none; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; } /* The supplied artwork IS the tile, so no chrome underneath it. */ body.qm-redesign-header .home-menu .home-mega-res__head-ico--art { background: none; border: 0; padding: 0; overflow: hidden; } body.qm-redesign-header .home-menu .home-mega-res__head-ico--art img { width: 48px; height: 48px; display: block; } body.qm-redesign-header .home-menu .home-mega-res__head-text { min-width: 0; } body.qm-redesign-header .home-menu .home-mega-res__heading { margin: 0 0 4px; font-size: 22px; line-height: 1.15; font-weight: 700; color: #fff; } /* Two accents, "Learn" and "Explore", either side of a plain ampersand. */ body.qm-redesign-header .home-menu .home-mega-res__accent { color: var(--h-purple); } /* No `max-width: none` here, unlike the wider panels: this lead is MEANT to wrap to two lines in a 519px panel, which is what the design shows. */ body.qm-redesign-header .home-menu .home-mega-res__desc { margin: 0; font-size: 13px; line-height: 1.5; color: #fff; } @media (min-width: 1025px) and (pointer: fine) and (hover: hover) { /* Side by side. Both the base and the desktop rule had a single column. */ body.qm-redesign-header .home-menu .home-mega-res__cards { grid-template-columns: repeat(2, 1fr); gap: 16px; } /* RIGHT-ALIGNED TO THE CONTACT US BUTTON, as on Company - see the note there for where the 19px comes from. Replaces the centred margin this panel had. */ body.qm-redesign-header .home-menu .home-mega-res { display: block; } /* Right-alignment superseded: centred on its own button now - see the end of this file. */ } /* ------- Mobile menu: real tree, desktop panel (2026-09-09, client) ------- QM_Home_Mega_Walker now emits BOTH renderings of every mega item's sub-level - the designed `.qm-mega-panel` div and the real `.qm-menu-tree` list - and these two rules pick one per breakpoint. Only ever one is visible; the other is out of the flow entirely, not merely transparent. The mobile accordion itself needed nothing new: the centred headers, the chevron and its 180deg rotation, `li.is-open > .sub-menu`, and the two-level tap handling in assets/scripts/shared/home-header.js were all already here and simply had no `
  • ` markup to act on while the walker was suppressing it. */ /* Desktop: the tree is not used - the panel is the design. */ @media (min-width: 1025px) and (pointer: fine) and (hover: hover) { body.qm-redesign-header .home-menu .sub-menu.qm-menu-tree { display: none !important; } } /* Mobile overlay: the panel is not used - the tree is the design. !important because `.home-menu > li.is-open > .sub-menu { display: block }` would otherwise reveal the panel alongside the tree on the open item. */ @media (max-width: 1024px), (pointer: coarse), (hover: none) { body.qm-redesign-header .home-menu .sub-menu.qm-menu-tree { display: none !important; } } /* ===== Dropdowns centred on their own button (2026-09-09, client) ===== Replaces two earlier models: Services/Coverage/Industries were centred in the VIEWPORT via a symmetric margin, and Company/Resources were pinned to the Contact Us button's right edge. Every panel is now centred on the nav item that opens it. HOW: CSS centres the panel on the HEADER (`left: 50%` + `translateX(-50%)`, against the header as containing block), and clampPanel() in home-header.js then offsets it from the header's centre to its button's centre with an inline margin-left - the same declaration that keeps it inside the window. Splitting it this way is what preserves the 8px gap: see the note on the
  • below. It also degrades sensibly with JS off, to the header-centred position these panels had before. THE TRANSFORM IS SHARED with the open/close animation, which slides the panel 6px on Y. Both states have to restate the X half-pull or the panel jumps to the right by half its width as it opens. Desktop only: below 1025px the mobile overlay renders the menu tree instead and these panels are `display: none`, so the `
  • ` stays unpositioned there. */ @media (min-width: 1025px) and (pointer: fine) and (hover: hover) { /* DELIBERATELY NOT `position: relative` on the
  • . Making the button the containing block is the obvious way to centre on it, but it also changes what `top: 100%` means: the panel then sits 100% of the BUTTON's height down, which put its top 8px ABOVE the header's bottom edge and swallowed the gap. The header stays the containing block, so `top: 100%` + `margin-top: 8px` keep the panel 8px under the header, and the horizontal centring moves into the offset clampPanel() applies. */ body.qm-redesign-header .home-menu .sub-menu.qm-mega-panel { left: 50%; right: auto; /* The 8px gap under the header, and no horizontal margin of its own - clampPanel() owns margin-left. */ margin: 8px 0 0; transform: translateX(-50%) translateY(6px); /* Caps the WIDTH on a narrow window. Keeping the panel INSIDE the window is a separate job that CSS cannot do from here - the centring knows nothing about the viewport - so home-header.js nudges it with an inline margin-left. See clampPanel() there. */ max-width: calc(100vw - 38px); } body.qm-redesign-header .home-menu > li.is-open > .sub-menu.qm-mega-panel { transform: translateX(-50%) translateY(0); } /* The per-panel widths, previously carried by the symmetric margins. */ body.qm-redesign-header .home-menu .sub-menu.home-mega-cov { width: 1054px; } /* Back to 751 after measuring. The wrapping this was widened to fix was never a width problem: the tenth industry was spilling into a FOURTH auto column, which squeezed every card to about 162px. With the grid pinned to three columns (see the four-row note) a card is ~221px, and the widest label, "Software development", measures 133px against roughly 165px of usable space once the 32px padding and 16px arrow are taken off. 1054 fitted too, but left short labels like "IoT" stranded in a very wide button. */ body.qm-redesign-header .home-menu .sub-menu.home-mega-ind { width: 751px; } body.qm-redesign-header .home-menu .sub-menu.home-mega-company { width: 751px; } body.qm-redesign-header .home-menu .sub-menu.home-mega-res { width: 519px; } } /* ========================================================================== SOLID HEADER VARIANT (body.qm-header-solid) The designed header is transparent and absolutely positioned so it can float over a dark hero. That only works on the four dark templates. Everywhere else the page is light, and the white logo plus rgba(255,255,255,.82) nav measured 1.07:1 against the #f0f8ff content behind them - invisible, and well under the 4.5:1 WCAG AA needs. Rather than invent a second design, this borrows the treatment the Service Redesign header already ships: an opaque #0e0e14 bar, sticky to the top, IN FLOW so it pushes the page down instead of covering it. The existing white logo and light nav then read at roughly 19:1, and no new artwork is needed. ========================================================================== */ body.qm-redesign-header.qm-header-solid .home-header { position: sticky; inset: auto; top: 0; background: #0e0e14; } /* `is-stuck` is the scroll state for the overlay header - it swaps to position:fixed, which would lift this bar out of flow mid-scroll and let the page jump up underneath it. Sticky already does the job here. */ body.qm-redesign-header.qm-header-solid .home-header.is-stuck { position: sticky; background: #0e0e14; } /* The scroll-progress hairline belongs to the transparent hero treatment. */ body.qm-redesign-header.qm-header-solid .home-header__progress { display: none; } /* ========================================================================== MOBILE OVERLAY: THE PANEL, NOT THE MENU TREE (2026-09-14 design) The overlay used to render `.qm-menu-tree`, a plain nested