/* ========================================================================= px-desktop-menu — Overlay pill nav with submenu dropdowns (desktop only) Figma: - Pill: 284:2212 (1350x70) - Solutions: 285:3944 (panel 900x300 with categories + sub-items + featured) - Product: 285:3530 (panel 600x300 with items + featured) - About: 285:3760 (panel 600x300 with items + featured) - Language: 292:6947 (panel 200x180 simple list) ========================================================================= */ /* --- Wrapper --- */ .px-desktop-menu { /* #300: rustige, smooth hover-timing voor de hele balk. De hovers voelden te abrupt; deze duur + soepele ease (langzaam uitlopend) geldt voor alle hover-overgangen hieronder (nav, taal, submenu-links, knoppen). */ --px-menu-hover-dur: 400ms; --px-menu-hover-ease: cubic-bezier(0.22, 1, 0.36, 1); position: sticky; top: 0; z-index: 100; width: 100%; padding-block-start: var(--D125); padding-block-end: var(--D125); pointer-events: none; } /* Overlay = vast (fixed) bovenaan, met wat lucht tot de schermrand. Figma 442:11080: de pill zweeft net onder de top en blijft tijdens scrollen in beeld. De gap tot de top komt uit padding-block-start (--D125) op .px-desktop-menu hierboven. */ .px-desktop-menu--overlay { position: fixed; top: 0; left: 0; right: 0; } /* #085104: de balk is niet meer altijd vast. Hij staat bovenaan in beeld, schuift weg zodra je naar beneden scrolt en komt terug zodra je omhoog scrolt. De JS zet .is-hidden / .is-scrolled; .is-pinned houdt hem in beeld zolang het menu open is. Wegschuiven moet rustig voelen, niet "opeens weg". Daarom: een korte verplaatsing die de balk net uit beeld tilt (de hele beweging blijft grotendeels zichtbaar) plus een meelopende fade. Tonen (omhoog scrollen) mag juist vlot terugkomen, dus de zichtbare en verborgen staat krijgen elk hun eigen overgang. */ .px-desktop-menu { transition: transform var(--px-duration-slow) var(--px-ease-out), opacity var(--px-duration-normal) var(--px-ease-out); will-change: transform; } .px-desktop-menu.is-hidden:not(.is-pinned) { /* Net genoeg om de balk plus de ruimte tot de schermrand te verbergen. */ transform: translateY(calc(-1 * (var(--Header-Space) + var(--D125)))); opacity: 0; transition: transform calc(var(--px-duration-slow) * 1.25) var(--px-ease-in-out), opacity var(--px-duration-slow) var(--px-ease-in-out); } /* #075017 + #085157 + #091256: waas-achtergrond die de pagina dempt en het open menu uitlicht (vanta-stijl). Door JS aan gehangen. #075017 + #085157: de waas mag ALLEEN de pagina dempen, nooit de balk of het open paneel. De balk (.px-desktop-menu) staat op z-index 100 en vormt een eigen stacking-context; het paneel leeft binnen die context en ligt dus altijd boven deze waas. Houd de waas daarom strikt onder 100. We zetten 'm op 80 (los van de 90 die de panelen binnen de balk gebruiken) zodat de bedoeling helder blijft en de balk plus dropdown gegarandeerd helder boven de gedempte pagina uitkomen. */ .px-desktop-menu__backdrop { position: fixed; inset: 0; z-index: 80; opacity: 0; pointer-events: none; background: color-mix(in srgb, var(--Zwart) 38%, transparent); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: opacity var(--px-duration-normal) var(--px-ease-out); } .px-desktop-menu__backdrop.is-visible { opacity: 1; } @media (prefers-reduced-motion: reduce) { .px-desktop-menu, .px-desktop-menu.is-hidden:not(.is-pinned), .px-desktop-menu__backdrop { transition-duration: 0.01ms; } } .px-desktop-menu__inner { pointer-events: auto; } /* --- Pill --- */ .px-desktop-menu__pill { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--D2); background-color: var(--Wit); border-radius: var(--R10); padding-inline: var(--D125); height: 70px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); } /* --- Logo --- */ .px-desktop-menu__logo { display: flex; align-items: center; gap: var(--D075); flex-shrink: 0; text-decoration: none; color: var(--Zwart); } .px-desktop-menu__logo-img { display: block; height: 40px; width: auto; max-width: 200px; object-fit: contain; } .px-desktop-menu__logo-text { font-size: var(--Font-Size-H6); font-weight: var(--px-weight-bold); line-height: 1; color: var(--Zwart); } /* --- Nav --- */ .px-desktop-menu__nav { flex: 1 1 auto; display: flex; justify-content: center; } .px-desktop-menu__nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--D2); } .px-desktop-menu__nav-item { display: flex; align-items: center; position: static; } .px-desktop-menu__nav-link, .px-desktop-menu__nav-trigger { display: inline-flex; align-items: center; gap: var(--D025); font-size: var(--Font-Size-H6); font-weight: var(--px-weight-semibold); line-height: 1; color: var(--Zwart); text-decoration: none; padding: 6px 10px; border-radius: var(--R5); background: transparent; border: 1px solid transparent; cursor: pointer; font-family: inherit; transition: background-color var(--px-menu-hover-dur) var(--px-menu-hover-ease), border-color var(--px-menu-hover-dur) var(--px-menu-hover-ease), color var(--px-menu-hover-dur) var(--px-menu-hover-ease), text-decoration-color var(--px-menu-hover-dur) var(--px-menu-hover-ease); } .px-desktop-menu__nav-item.has-submenu .px-desktop-menu__nav-trigger:hover, .px-desktop-menu__nav-item.has-submenu.is-open .px-desktop-menu__nav-trigger { border-color: var(--Grijs-Licht); background-color: var(--Warm-Off-White); } /* #300: de onderstreping springt niet meer hard aan/uit maar floept zacht in. De lijn ligt altijd klaar (transparant) en kleurt bij hover mee via de text-decoration-color-overgang hierboven. */ .px-desktop-menu__nav-item:not(.has-submenu) .px-desktop-menu__nav-link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 1px; } .px-desktop-menu__nav-item:not(.has-submenu) .px-desktop-menu__nav-link:hover, .px-desktop-menu__nav-item.is-active .px-desktop-menu__nav-link { text-decoration-color: currentColor; } .px-desktop-menu__nav-item.is-active .px-desktop-menu__nav-trigger { text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 4px; text-decoration-thickness: 1px; } .px-desktop-menu__nav-chevron { display: inline-flex; align-items: center; justify-content: center; width: 10px; height: 6px; transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1); } .px-desktop-menu__nav-chevron svg { width: 10px; height: 6px; display: block; } .px-desktop-menu__nav-item.is-open .px-desktop-menu__nav-chevron { transform: rotate(180deg); } /* --- End: language + CTA --- */ .px-desktop-menu__end { display: flex; align-items: center; gap: var(--D125); flex-shrink: 0; } /* #300: de CTA-knop in de balk gebruikt standaard de snelle globale knop-overgang (--px-duration-fast); in de header voelt dat te abrupt. Geef 'm dezelfde rustige hover-timing als de rest van de balk. Alleen binnen de header; de globale knop blijft onveranderd. */ .px-desktop-menu .px-btn { transition-duration: var(--px-menu-hover-dur); transition-timing-function: var(--px-menu-hover-ease); } .px-desktop-menu__lang-wrap { position: relative; display: flex; align-items: center; } .px-desktop-menu__lang { display: inline-flex; align-items: center; gap: var(--D025); padding: 6px 10px; border-radius: var(--R5); background: transparent; border: 1px solid transparent; cursor: pointer; color: var(--Zwart); font-family: inherit; transition: background-color var(--px-menu-hover-dur) var(--px-menu-hover-ease), border-color var(--px-menu-hover-dur) var(--px-menu-hover-ease); } .px-desktop-menu__lang-wrap:hover .px-desktop-menu__lang, .px-desktop-menu__lang-wrap.is-open .px-desktop-menu__lang { background-color: var(--Warm-Off-White); border-color: var(--Grijs-Licht); } .px-desktop-menu__lang-globe { width: 20px; height: 20px; display: block; } .px-desktop-menu__lang-chevron { display: inline-flex; align-items: center; justify-content: center; width: 10px; height: 6px; transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1); } .px-desktop-menu__lang-chevron svg { width: 10px; height: 6px; display: block; } .px-desktop-menu__lang-wrap.is-open .px-desktop-menu__lang-chevron { transform: rotate(180deg); } /* ========================================================================= Submenu base ========================================================================= */ .px-desktop-menu__submenu { position: absolute; top: calc(100% + var(--D075)); z-index: 90; background-color: var(--Wit); border-radius: var(--R10); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14), 0 6px 16px rgba(0, 0, 0, 0.06); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-14px) scale(0.975); transform-origin: top center; transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 520ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 520ms; pointer-events: none; } .px-desktop-menu__nav-item.is-open .px-desktop-menu__submenu, .px-desktop-menu__lang-wrap.is-open .px-desktop-menu__submenu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1), transform 480ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s; } .px-desktop-menu__submenu-inner { display: grid; width: 100%; height: 100%; } /* --- Columns layout (Solutions, 900x300, 3 cols 300/300/300) --- */ .px-desktop-menu__submenu--columns { width: 900px; height: 300px; left: 50%; transform: translateX(-50%) translateY(-14px) scale(0.975); } .px-desktop-menu__nav-item.is-open .px-desktop-menu__submenu--columns { transform: translateX(-50%) translateY(0) scale(1); } .px-desktop-menu__submenu--columns .px-desktop-menu__submenu-inner { grid-template-columns: 300px 300px 300px; } /* --- Simple list layout (Product, About, 600x300, 2 cols 300/300) --- */ .px-desktop-menu__submenu--simple_list { width: 600px; height: 300px; left: 50%; transform: translateX(-50%) translateY(-14px) scale(0.975); } .px-desktop-menu__nav-item.is-open .px-desktop-menu__submenu--simple_list { transform: translateX(-50%) translateY(0) scale(1); } .px-desktop-menu__submenu--simple_list .px-desktop-menu__submenu-inner { grid-template-columns: 300px 300px; } /* --- Categories column (left in columns layout) --- */ .px-desktop-menu__submenu-col--cats { background-color: var(--Warm-Off-White); display: flex; flex-direction: column; justify-content: center; gap: 12px; padding-inline: var(--D15); } /* --- Sub-items column (middle in columns layout) --- */ .px-desktop-menu__submenu-col--subs { position: relative; background-color: var(--Wit); padding: var(--D15); display: flex; align-items: flex-start; justify-content: flex-start; } .px-desktop-menu__sublist { list-style: none; margin: 0; padding: 0; display: none; flex-direction: column; gap: var(--D075); width: 100%; padding-block-start: 50px; /* aligns with active button top in cats column */ } .px-desktop-menu__sublist.is-active { display: flex; } .px-desktop-menu__sublist-item { margin: 0; padding: 0; } .px-desktop-menu__sublist-link { display: inline-flex; align-items: center; font-size: var(--Font-Size-H6); font-weight: var(--px-weight-semibold); line-height: 1.5; color: var(--Zwart); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color var(--px-menu-hover-dur) var(--px-menu-hover-ease), text-decoration-color var(--px-menu-hover-dur) var(--px-menu-hover-ease); } .px-desktop-menu__sublist-link:hover { color: var(--Teal-Base); text-decoration-color: currentColor; } .px-desktop-menu__sublist-link.is-active { color: var(--Accent-Company-100); text-decoration-color: currentColor; } /* --- Items column (left in simple_list layout) --- */ .px-desktop-menu__submenu-col--items { background-color: var(--Warm-Off-White); display: flex; flex-direction: column; justify-content: center; gap: 12px; padding-inline: var(--D15); } .px-desktop-menu__lang-link { transition: color var(--px-menu-hover-dur) var(--px-menu-hover-ease), text-decoration-color var(--px-menu-hover-dur) var(--px-menu-hover-ease); } /* --- Link buttons (cat-btn + simple list items) --- */ .px-desktop-menu__link-btn { display: flex; align-items: center; justify-content: space-between; gap: var(--D1); height: 38px; padding-inline: 12px; border-radius: var(--R5); background-color: var(--Wit); color: var(--Zwart); font-size: var(--Font-Size-H6); font-weight: var(--px-weight-semibold); text-decoration: none; transition: background-color var(--px-menu-hover-dur) var(--px-menu-hover-ease), color var(--px-menu-hover-dur) var(--px-menu-hover-ease); } .px-desktop-menu__link-btn:hover { background-color: var(--Zwart); color: var(--Wit); } .px-desktop-menu__link-btn:hover .px-desktop-menu__link-arrow svg { color: var(--Wit); } /* #091256: micro-animatie op de pijltjes — schuift bij hover een tikje mee (vanta-stijl). */ .px-desktop-menu__link-btn:hover .px-desktop-menu__link-arrow { transform: translateX(4px); } .px-desktop-menu__link-btn.is-active { background-color: var(--Zwart); color: var(--Wit); } .px-desktop-menu__link-label { flex: 1 1 auto; } .px-desktop-menu__link-arrow { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 11px; flex-shrink: 0; transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1); } .px-desktop-menu__link-arrow svg { width: 14px; height: 11px; display: block; color: currentColor; } /* --- Featured card (right column for solutions/product/about) --- */ .px-desktop-menu__featured { position: relative; width: 300px; height: 300px; /* Figma "Featured" (Solutions 442:17402 / Product 442:17476, identiek): horizontale gradient, rechts #2A3C3C naar links #020E0E = exact het token --Gradient-Primary (to left). De oude 180deg-versie (verticaal) miste de donkere linkerzijde achter de tekst. */ background: var(--Gradient-Primary); color: var(--Wit); overflow: hidden; } .px-desktop-menu__featured-bg { position: absolute; inset: 0; z-index: 0; } .px-desktop-menu__featured-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; } .px-desktop-menu__featured-overlay { position: absolute; /* Diagonaal-patroon venster, exact uit Figma berekend met het inkt-model (formule: assets/css/px-bg-pattern.css header; zwarte vector 1303 op de 300px kaart, streep-periode 41.7px). Zelfde oversized-laag opzet als px-photo-banner; de kaart clipt via overflow: hidden. De oude versie (cropped SVG-kopie, cover, invert + soft-light) gaf lichte strepen en een andere uitsnede dan het ontwerp. */ top: 0; margin-top: 12.6%; left: 110.16%; width: 310.57%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); z-index: 1; background-image: url('/wp-content/themes/business-radar-theme/assets/images/diagonal-pattern.svg'); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; pointer-events: none; } .px-desktop-menu__featured-body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 0; padding: 24px; height: 100%; justify-content: flex-start; padding-block-start: 56px; } .px-desktop-menu__featured-eyebrow { display: block; font-size: 11px; line-height: 1; font-weight: var(--px-weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--Accent-Company-100); margin-block-end: 8px; } .px-desktop-menu__featured-title { margin: 0; font-size: 22px; line-height: 1.1; font-weight: var(--px-weight-bold); color: var(--Wit); } .px-desktop-menu__featured-text { margin: 0; font-size: 13px; line-height: 1.45; color: var(--Wit); margin-block-start: 10px; } .px-desktop-menu__featured-body .px-btn { margin-block-start: auto; align-self: flex-start; } /* ========================================================================= Language submenu (small panel anchored to right) ========================================================================= */ .px-desktop-menu__submenu--language { width: 200px; height: auto; right: 0; left: auto; transform: translateY(-8px); padding: 16px; overflow: visible; } .px-desktop-menu__lang-wrap.is-open .px-desktop-menu__submenu--language { transform: translateY(0); } .px-desktop-menu__submenu--language .px-desktop-menu__submenu-inner { display: flex; flex-direction: column; gap: 12px; } .px-desktop-menu__submenu-eyebrow { display: block; font-size: 11px; line-height: 1; font-weight: var(--px-weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--Accent-Company-100); padding-block-end: 8px; border-block-end: 1px solid var(--Grijs-Licht); } .px-desktop-menu__lang-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; } .px-desktop-menu__lang-list .px-desktop-menu__lang-item { line-height: 31px; } .px-desktop-menu__lang-item { margin: 0; padding: 0; } .px-desktop-menu__lang-link { display: block; font-size: var(--Font-Size-H6); font-weight: var(--px-weight-semibold); line-height: 31px; color: var(--Zwart); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color var(--px-menu-hover-dur) var(--px-menu-hover-ease), text-decoration-color var(--px-menu-hover-dur) var(--px-menu-hover-ease); } .px-desktop-menu__lang-link:hover { color: var(--Teal-Base); text-decoration-color: currentColor; } .px-desktop-menu__lang-link.is-active { color: var(--Accent-Company-100); text-decoration-color: currentColor; } /* ========================================================================= Responsive: hide on mobile/tablet De pill toont alleen op echte desktop (>= 1200px). Op tablet en kleiner neemt px-mobile-menu het over (feedback #168: het brede desktop-pill liep op tablet over de viewport). Houd dit in sync met de min-width grens in px-mobile-menu/css/frontend.css (1200px) en het breakpoint-veld. ========================================================================= */ @media (max-width: 1199px) { .px-desktop-menu { display: none; } }