/* Nordpaa Mega Menu — frontend */ .npmm-menu, .npmm-menu *, .npmm-menu *::before, .npmm-menu *::after { box-sizing: border-box; } /* ------------------------------------------------------------------------- * Frontend embed isolation (2.8.0) * ---------------------------------------------------------------------- */ .npmm-menu.npmm-menu--embed-viewport { display: block; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* Host themes/builders (Divi, Gutenberg, Elementor, etc.) often add list bullets, margins, link decoration and paragraph spacing inside shortcode modules. Keep the component boundary deterministic. */ .npmm-menu[data-npmm-menu] ul, .npmm-menu[data-npmm-menu] ol { margin: 0 !important; padding: 0 !important; list-style: none !important; } .npmm-menu[data-npmm-menu] li { margin: 0 !important; padding: 0 !important; list-style: none !important; } .npmm-menu[data-npmm-menu] .npmm-menu__item--button { margin-left: 5px !important; } .npmm-menu[data-npmm-menu] li::marker { content: "" !important; font-size: 0 !important; } .npmm-menu[data-npmm-menu] li::before, .npmm-menu[data-npmm-menu] li::after { content: none !important; display: none !important; } .npmm-menu[data-npmm-menu] p, .npmm-menu[data-npmm-menu] h1, .npmm-menu[data-npmm-menu] h2, .npmm-menu[data-npmm-menu] h3, .npmm-menu[data-npmm-menu] h4, .npmm-menu[data-npmm-menu] h5, .npmm-menu[data-npmm-menu] h6 { margin: 0 !important; padding: 0 !important; } .npmm-menu[data-npmm-menu] a { text-decoration: none !important; } .npmm-menu[data-npmm-menu] button, .npmm-menu[data-npmm-menu] input, .npmm-menu[data-npmm-menu] select, .npmm-menu[data-npmm-menu] textarea { font-family: inherit; } .npmm-menu[data-npmm-menu] img, .npmm-menu[data-npmm-menu] video, .npmm-menu[data-npmm-menu] iframe, .npmm-menu[data-npmm-menu] svg { max-width: 100%; } /* Applied temporarily by the runtime while a panel/drawer is open. It fixes builder-created stacking contexts without hard-coding a specific theme. */ .npmm-host-stack-active { overflow: visible !important; } .npmm-menu { position: relative; z-index: var(--npmm-z, 9999); width: 100%; font-family: var(--npmm-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); color: var(--npmm-bar-text, #17181b); isolation: isolate; } .npmm-menu--sticky { position: sticky; top: var(--npmm-sticky-top, 0); } /* Runtime sticky mode (2.9.0) escapes short Divi/Gutenberg wrappers. Once JS is ready the menu is kept in normal flow until its anchor reaches the top, then moved to and fixed while a placeholder preserves page height. */ .npmm-menu--sticky[data-npmm-ready="1"]:not(.npmm-is-fixed) { position: relative; top: auto; } .npmm-sticky-placeholder { display: block; width: 100%; height: 0; margin: 0; padding: 0; border: 0; pointer-events: none; } .npmm-menu.npmm-is-fixed { position: fixed !important; z-index: var(--npmm-z, 9999) !important; top: var(--npmm-sticky-top, 0) !important; right: 0 !important; left: 0 !important; width: 100vw !important; max-width: 100vw !important; margin: 0 !important; } .npmm-menu.npmm-is-fixed.npmm-menu--embed-viewport { margin-left: 0 !important; margin-right: 0 !important; } .npmm-menu.npmm-is-hidden { transform: translateY(calc(-100% - 12px)); } .npmm-menu--hide-scroll { transition: transform 420ms cubic-bezier(.22, 1, .36, 1); } .npmm-menu svg { display: block; width: 1em; height: 1em; } .npmm-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .npmm-menu__surface { position: relative; z-index: 4; width: 100%; min-height: var(--npmm-bar-height, 76px); background: var(--npmm-bar-bg, #fff); border-bottom: 1px solid var(--npmm-bar-border, #e8e8ed); box-shadow: var(--npmm-bar-shadow, 0 1px 0 rgba(18, 20, 25, .06)); } .npmm-menu--header-contained .npmm-menu__surface { background: transparent; border: 0; box-shadow: none; padding: var(--npmm-header-margin-top, 10px) var(--npmm-header-margin-x, 16px) 0; } .npmm-menu__bar-shell { width: 100%; margin: 0 auto; background: var(--npmm-bar-bg, #fff); } .npmm-menu--header-contained .npmm-menu__bar-shell { max-width: var(--npmm-header-max-width, 1320px); border: 1px solid var(--npmm-bar-border, #e8e8ed); border-radius: var(--npmm-bar-radius, 18px); box-shadow: var(--npmm-bar-shadow, 0 14px 40px rgba(15, 23, 42, .08)); overflow: visible; } .npmm-menu--header-full .npmm-menu__bar { max-width: none; } .npmm-menu__bar { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--npmm-header-max-width, 1320px); height: var(--npmm-bar-height, 76px); margin: 0 auto; padding: 0 var(--npmm-bar-padding-x, 22px); border-radius: var(--npmm-bar-radius, 0px); } /* Desktop header composition. Balanced keeps the normal navigation on the mathematical centre line while language/CTA occupy an independent action zone on the right, matching premium SaaS headers such as SecureFirst. */ .npmm-menu:not(.npmm-is-mobile).npmm-header-nav--balanced .npmm-menu__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; } .npmm-menu:not(.npmm-is-mobile).npmm-header-nav--balanced .npmm-menu__logo { grid-column: 1; justify-self: start; } .npmm-menu:not(.npmm-is-mobile).npmm-header-nav--balanced .npmm-menu__nav-wrap { display: contents; } .npmm-menu:not(.npmm-is-mobile).npmm-header-nav--balanced .npmm-menu__list--main { grid-column: 2; justify-self: center; } .npmm-menu:not(.npmm-is-mobile).npmm-header-nav--balanced .npmm-menu__list--actions { grid-column: 3; justify-self: end; } .npmm-menu:not(.npmm-is-mobile).npmm-header-nav--right .npmm-menu__nav-wrap { display: flex; flex: 1 1 auto; justify-content: flex-end; gap: var(--npmm-nav-gap, 4px); } .npmm-menu:not(.npmm-is-mobile) .npmm-menu__list--actions:empty { display: none; } .npmm-menu__logo { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; max-width: 230px; color: inherit; text-decoration: none; font-size: 18px; font-weight: 760; letter-spacing: -.035em; line-height: 1; } .npmm-menu__logo img { display: block; width: auto; max-width: 100%; height: min(var(--npmm-desktop-logo-height, 34px), calc(var(--npmm-bar-height, 76px) - 12px)); object-fit: contain; } .npmm-menu__logo-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #fff; background: linear-gradient(145deg, var(--npmm-accent, #0a64ff), color-mix(in srgb, var(--npmm-accent, #0a64ff) 60%, #8c5cff)); box-shadow: 0 8px 22px color-mix(in srgb, var(--npmm-accent, #0a64ff) 28%, transparent); } .npmm-menu__logo-mark svg { width: 18px; height: 18px; } .npmm-menu__nav-wrap { display: flex; align-items: center; justify-content: flex-end; gap: var(--npmm-nav-gap, 4px); min-width: 0; } .npmm-menu__list { display: flex; align-items: center; justify-content: flex-end; gap: var(--npmm-nav-gap, 4px); list-style: none; margin: 0; padding: 0; } .npmm-menu__item { position: relative; margin: 0; padding: 0; } .npmm-menu__trigger, .npmm-menu__link { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: var(--npmm-menu-item-height, 42px); padding: 0 var(--npmm-menu-item-padding-x, 14px); border: 0; border-radius: var(--npmm-menu-item-radius, 13px); background: transparent; color: var(--npmm-bar-text, #17181b); font: inherit; font-size: var(--npmm-menu-size, 15px); font-weight: var(--npmm-menu-weight, 600); letter-spacing: var(--npmm-letter-spacing, -.01em); line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 220ms ease, background-color 220ms ease, transform 220ms ease; } .npmm-menu__trigger::before, .npmm-menu__link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: color-mix(in srgb, var(--npmm-bar-hover, #0a64ff) 8%, transparent); opacity: 0; transform: scale(.92); transition: opacity 220ms ease, transform 320ms cubic-bezier(.22, 1, .36, 1); } .npmm-menu__trigger > *, .npmm-menu__link > * { position: relative; z-index: 1; } .npmm-menu__trigger:hover, .npmm-menu__trigger:focus-visible, .npmm-menu__link:hover, .npmm-menu__link:focus-visible, .npmm-menu__item.is-open > .npmm-menu__trigger { color: var(--npmm-bar-hover, #0a64ff); outline: 0; } .npmm-menu__trigger:hover::before, .npmm-menu__trigger:focus-visible::before, .npmm-menu__link:hover::before, .npmm-menu__link:focus-visible::before, .npmm-menu__item.is-open > .npmm-menu__trigger::before { opacity: 1; transform: scale(1); } .npmm-menu__trigger:focus-visible, .npmm-menu__link:focus-visible, .npmm-card:focus-visible, .npmm-action:focus-visible, .npmm-promo:focus-visible, .npmm-post:focus-visible, .npmm-menu__mobile-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--npmm-accent, #0a64ff) 30%, transparent); outline-offset: 3px; } .npmm-menu__item--button { margin-left: 5px; } .npmm-menu__link--button { min-height: 44px; padding-inline: var(--npmm-cta-padding-x, 18px); border: 1px solid transparent; border-radius: var(--npmm-cta-radius, 999px); background: var(--npmm-button-bg, var(--npmm-accent, #0a64ff)); color: var(--npmm-button-text, #fff); box-shadow: 0 9px 24px color-mix(in srgb, var(--npmm-button-bg, var(--npmm-accent, #0a64ff)) 24%, transparent); } .npmm-menu__link--button::before { display: none; } .npmm-menu__link--button-secondary { background: var(--npmm-button-bg, color-mix(in srgb, var(--npmm-accent, #0a64ff) 10%, #fff)); color: var(--npmm-button-text, var(--npmm-accent, #0a64ff)); box-shadow: none; } .npmm-menu__link--button-outline { border-color: color-mix(in srgb, var(--npmm-button-bg, var(--npmm-accent, #0a64ff)) 32%, transparent); background: var(--npmm-button-bg, transparent); color: var(--npmm-button-text, var(--npmm-accent, #0a64ff)); box-shadow: none; } .npmm-menu__link--button:hover, .npmm-menu__link--button:focus-visible { background: var(--npmm-button-hover-bg, color-mix(in srgb, var(--npmm-button-bg, var(--npmm-accent, #0a64ff)) 86%, #000)); color: var(--npmm-button-text, #fff); transform: translateY(-1px); } .npmm-menu__link--button-secondary:hover, .npmm-menu__link--button-secondary:focus-visible, .npmm-menu__link--button-outline:hover, .npmm-menu__link--button-outline:focus-visible { background: var(--npmm-button-hover-bg, color-mix(in srgb, var(--npmm-accent, #0a64ff) 15%, #fff)); color: var(--npmm-button-text, var(--npmm-accent, #0a64ff)); } .npmm-menu__link--button:hover::before, .npmm-menu__link--button:focus-visible::before { opacity: .09; } .npmm-menu__top-icon, .npmm-menu__button-arrow { display: inline-flex; font-size: 16px; } .npmm-menu__chevron { display: inline-flex; font-size: 13px; transition: transform 320ms cubic-bezier(.22, 1, .36, 1); } .npmm-menu__item.is-open .npmm-menu__chevron { transform: rotate(180deg); } .npmm-menu__badge { display: inline-flex; align-items: center; min-height: 18px; padding: 2px 6px; border-radius: 999px; background: color-mix(in srgb, var(--npmm-accent, #0a64ff) 11%, transparent); color: var(--npmm-accent, #0a64ff); font-size: 9px; font-style: normal; font-weight: 760; letter-spacing: .04em; text-transform: uppercase; } .npmm-menu__mobile-toggle { display: none; position: relative; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--npmm-bar-border, #e8e8ed); border-radius: 14px; background: color-mix(in srgb, var(--npmm-bar-bg, #fff) 88%, var(--npmm-bar-text, #17181b) 3%); color: var(--npmm-bar-text, #17181b); cursor: pointer; } .npmm-menu__toggle-lines { position: relative; display: block; width: 18px; height: 14px; } .npmm-menu__toggle-lines i { position: absolute; left: 0; display: block; width: 18px; height: 1.8px; border-radius: 2px; background: currentColor; transition: top 300ms cubic-bezier(.22, 1, .36, 1), transform 300ms cubic-bezier(.22, 1, .36, 1); } .npmm-menu__toggle-lines i:first-child { top: 3px; } .npmm-menu__toggle-lines i:last-child { top: 10px; } .npmm-menu.is-mobile-open .npmm-menu__toggle-lines i:first-child { top: 6px; transform: rotate(45deg); } .npmm-menu.is-mobile-open .npmm-menu__toggle-lines i:last-child { top: 6px; transform: rotate(-45deg); } .npmm-panel { position: fixed; z-index: calc(var(--npmm-z, 9999) + 2); top: 0; left: 50%; width: min(var(--npmm-item-width, 1100px), calc(100vw - 28px)); max-height: min(78vh, 780px); overflow: hidden auto; border: 1px solid var(--npmm-panel-border, #e5e7eb); border-radius: var(--npmm-panel-radius, 26px); background: color-mix(in srgb, var(--npmm-item-bg, var(--npmm-panel-bg, #fff)) 94%, transparent); box-shadow: var(--npmm-panel-shadow, 0 28px 80px rgba(15, 23, 42, .16)); -webkit-backdrop-filter: blur(var(--npmm-panel-blur, 18px)) saturate(1.08); backdrop-filter: blur(var(--npmm-panel-blur, 18px)) saturate(1.08); color: var(--npmm-panel-text, #17181b); opacity: 0; visibility: hidden; pointer-events: none; transform-origin: 50% 0; will-change: opacity, transform, clip-path; transition: opacity var(--npmm-duration, 380ms) var(--npmm-easing, cubic-bezier(.22, 1, .36, 1)), transform var(--npmm-duration, 380ms) var(--npmm-easing, cubic-bezier(.22, 1, .36, 1)), clip-path var(--npmm-duration, 380ms) var(--npmm-easing, cubic-bezier(.22, 1, .36, 1)), visibility 0s linear var(--npmm-duration, 380ms); } .npmm-panel[data-width-mode="full"] { width: 100vw; max-height: min(82vh, 840px); border-left: 0; border-right: 0; border-radius: 0 0 var(--npmm-panel-radius, 26px) var(--npmm-panel-radius, 26px); } .npmm-panel[data-width-mode="content"] { width: max-content; max-width: calc(100vw - 28px); } .npmm-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; } .npmm-animation--soft-scale .npmm-panel { transform: translate3d(-50%, -7px, 0) scale(.975); } .npmm-animation--soft-scale .npmm-panel.is-open { transform: translate3d(-50%, 0, 0) scale(1); } .npmm-animation--slide .npmm-panel { transform: translate3d(-50%, -16px, 0); } .npmm-animation--slide .npmm-panel.is-open { transform: translate3d(-50%, 0, 0); } .npmm-animation--fade .npmm-panel { transform: translate3d(-50%, 0, 0); } .npmm-animation--reveal .npmm-panel { transform: translate3d(-50%, -4px, 0); clip-path: inset(0 0 100% 0 round var(--npmm-panel-radius, 26px)); } .npmm-animation--reveal .npmm-panel.is-open { transform: translate3d(-50%, 0, 0); clip-path: inset(0 0 0 0 round var(--npmm-panel-radius, 26px)); } .npmm-animation--spring .npmm-panel { transform: translate3d(-50%, -12px, 0) scale(.95); transition-timing-function: cubic-bezier(.18, 1.35, .28, 1); } .npmm-animation--spring .npmm-panel.is-open { transform: translate3d(-50%, 0, 0) scale(1); } .npmm-panel__inner { position: relative; z-index: 2; padding: var(--npmm-item-padding, var(--npmm-panel-padding, 24px)); } .npmm-panel__glow { position: absolute; z-index: 1; left: var(--npmm-glow-x, 50%); top: var(--npmm-glow-y, 30%); width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--npmm-accent, #0a64ff) 12%, transparent) 0, transparent 67%); transform: translate(-50%, -50%); pointer-events: none; opacity: .75; transition: left 150ms linear, top 150ms linear; } .npmm-panel__grid { display: grid; grid-template-columns: repeat(var(--npmm-columns, 4), minmax(0, 1fr)); grid-template-rows: repeat(var(--npmm-rows, 2), minmax(76px, auto)); grid-auto-flow: row; gap: var(--npmm-item-gap, var(--npmm-panel-gap, 14px)); align-items: stretch; } .npmm-block { position: relative; min-width: 0; color: var(--npmm-block-text, inherit); opacity: 0; transform: translateY(7px); transition: opacity 320ms var(--npmm-easing, cubic-bezier(.22, 1, .36, 1)), transform 440ms var(--npmm-easing, cubic-bezier(.22, 1, .36, 1)); transition-delay: calc(var(--npmm-block-index, 0) * var(--npmm-stagger, 28ms)); } .npmm-panel.is-open .npmm-block { opacity: 1; transform: translateY(0); } .npmm-block > * { min-width: 0; } .npmm-block-motion--float > * { animation: npmm-float 5.2s ease-in-out infinite; } .npmm-block-motion--pulse > * { animation: npmm-pulse 3.2s ease-in-out infinite; } .npmm-block-motion--glow > * { animation: npmm-glow 3.6s ease-in-out infinite; } .npmm-block-motion--tilt > * { transform: perspective(800px) rotateX(1.2deg) rotateY(-1.2deg); transition: transform 400ms cubic-bezier(.22, 1, .36, 1); } .npmm-block-motion--tilt:hover > * { transform: perspective(800px) rotateX(0) rotateY(0) translateY(-2px); } @keyframes npmm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes npmm-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.012); } } @keyframes npmm-glow { 0%, 100% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 12px 18px color-mix(in srgb, var(--npmm-accent, #0a64ff) 20%, transparent)); } } .npmm-card { position: relative; display: flex; align-items: flex-start; gap: 13px; width: 100%; height: 100%; min-height: 82px; padding: var(--npmm-block-padding, 15px); border: 1px solid var(--npmm-card-border, #eceef2); border-radius: var(--npmm-block-radius, var(--npmm-card-radius, 17px)); background: var(--npmm-block-bg, var(--npmm-card-bg, #f7f8fa)); color: var(--npmm-block-text, var(--npmm-panel-text, #17181b)); text-decoration: none; overflow: hidden; transition: background-color 300ms ease, border-color 300ms ease, box-shadow 380ms cubic-bezier(.22, 1, .36, 1), transform 380ms cubic-bezier(.22, 1, .36, 1); } .npmm-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, color-mix(in srgb, #fff 65%, transparent), transparent 45%); opacity: .42; pointer-events: none; } .npmm-card:hover, .npmm-card:focus-visible { background: var(--npmm-card-hover, #eef3ff); border-color: color-mix(in srgb, var(--npmm-accent, #0a64ff) 18%, var(--npmm-card-border, #eceef2)); box-shadow: 0 14px 32px rgba(15, 23, 42, .08); transform: translateY(-2px); color: var(--npmm-panel-text, #17181b); } .npmm-block-style--plain .npmm-card { min-height: 64px; padding: 9px; border-color: transparent; background: transparent; } .npmm-block-style--plain .npmm-card:hover, .npmm-block-style--plain .npmm-card:focus-visible { background: var(--npmm-card-hover, #eef3ff); box-shadow: none; transform: none; } .npmm-block-style--compact .npmm-card { min-height: 60px; padding: 10px; } /* Larger editorial link presets. The grid span is applied by the builder; these rules control the visual hierarchy inside that geometry. */ .npmm-block-style--large .npmm-card { min-height: 158px; flex-direction: column; justify-content: flex-end; gap: 14px; padding: var(--npmm-block-padding, 20px); } .npmm-block-style--large .npmm-card__icon { width: 48px; height: 48px; border-radius: 15px; } .npmm-block-style--large .npmm-card__title { font-size: 18px; letter-spacing: -.03em; } .npmm-block-style--large .npmm-card__arrow, .npmm-block-style--feature .npmm-card__arrow { position: absolute; top: 17px; right: 17px; } .npmm-block-style--wide .npmm-card { min-height: 96px; align-items: center; gap: 16px; padding: var(--npmm-block-padding, 18px 20px); } .npmm-block-style--wide .npmm-card__icon { width: 44px; height: 44px; border-radius: 14px; } .npmm-block-style--wide .npmm-card__title { font-size: 16.5px; } .npmm-block-style--feature .npmm-card { min-height: 180px; flex-direction: column; justify-content: flex-end; padding: var(--npmm-block-padding, 23px); border-color: color-mix(in srgb, var(--npmm-accent, #0a64ff) 22%, var(--npmm-card-border, #eceef2)); background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--npmm-accent, #0a64ff) 22%, transparent), transparent 40%), linear-gradient(145deg, color-mix(in srgb, var(--npmm-accent, #0a64ff) 5%, #fff), color-mix(in srgb, var(--npmm-accent, #0a64ff) 13%, #fff)); } .npmm-block-style--feature .npmm-card__icon { width: 54px; height: 54px; margin-bottom: auto; border-radius: 17px; } .npmm-block-style--feature .npmm-card__title { font-size: clamp(19px, 1.65vw, 25px); line-height: 1.08; letter-spacing: -.04em; } .npmm-block-style--feature .npmm-card__description { max-width: 42ch; font-size: 13px; } .npmm-block-style--banner .npmm-card { min-height: 92px; align-items: center; gap: 17px; padding: var(--npmm-block-padding, 18px 22px); border-color: color-mix(in srgb, var(--npmm-accent, #0a64ff) 18%, var(--npmm-card-border, #eceef2)); background: linear-gradient(100deg, var(--npmm-card-bg, #f7f8fa), color-mix(in srgb, var(--npmm-accent, #0a64ff) 9%, #fff)); } .npmm-block-style--banner .npmm-card__icon { width: 46px; height: 46px; border-radius: 15px; } .npmm-block-style--banner .npmm-card__title { font-size: 18px; letter-spacing: -.028em; } /* Link-card media presets (2.5.0) Images live inside an isolated layer and never change the grid footprint. */ .npmm-card--has-media { --npmm-link-media-size: 64px; } .npmm-card--media-size-sm { --npmm-link-media-size: 48px; --npmm-link-media-icon-size: 32px; --npmm-link-media-top-height: 92px; } .npmm-card--media-size-md { --npmm-link-media-size: 72px; --npmm-link-media-icon-size: 44px; --npmm-link-media-top-height: 122px; } .npmm-card--media-size-lg { --npmm-link-media-size: 104px; --npmm-link-media-icon-size: 64px; --npmm-link-media-top-height: 162px; } .npmm-card--media-size-xl { --npmm-link-media-size: 144px; --npmm-link-media-icon-size: 88px; --npmm-link-media-top-height: 214px; } .npmm-card__media { position: relative; z-index: 1; display: block; flex: 0 0 var(--npmm-link-media-size); width: var(--npmm-link-media-size); height: var(--npmm-link-media-size); border-radius: min(14px, var(--npmm-block-radius, var(--npmm-card-radius, 17px))); background: color-mix(in srgb, var(--npmm-card-bg, #f7f8fa) 70%, #fff); overflow: hidden; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--npmm-card-border, #eceef2) 72%, transparent); } .npmm-card__media img { display: block; width: 100%; height: 100%; object-fit: var(--npmm-link-media-fit, cover); object-position: var(--npmm-link-media-focus, center); transition: transform 420ms cubic-bezier(.22, 1, .36, 1), filter 320ms ease; } .npmm-card--media-icon .npmm-card__media { flex: 0 0 var(--npmm-link-media-icon-size, 44px); width: var(--npmm-link-media-icon-size, 44px); height: var(--npmm-link-media-icon-size, 44px); border-radius: clamp(10px, calc(var(--npmm-link-media-icon-size, 44px) * .28), 18px); } .npmm-card--media-left, .npmm-card--media-right { align-items: center; } .npmm-card--media-right .npmm-card__copy { order: 1; } .npmm-card--media-right .npmm-card__media { order: 2; margin-left: auto; } .npmm-card--media-right .npmm-card__arrow { order: 3; } .npmm-card--media-top { flex-direction: column; align-items: stretch; } .npmm-card--media-top .npmm-card__media { flex: 0 0 auto; width: 100%; height: var(--npmm-link-media-top-height, 122px); aspect-ratio: auto; } .npmm-card--media-top .npmm-card__arrow { position: absolute; top: 16px; right: 16px; padding: 5px; border-radius: 999px; background: color-mix(in srgb, #fff 82%, transparent); backdrop-filter: blur(8px); } .npmm-card--media-background { isolation: isolate; color: var(--npmm-block-text, #fff); background: #172033; } .npmm-card--media-background .npmm-card__media--background { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; background: transparent; box-shadow: none; } .npmm-card--media-background .npmm-card__media--background::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 15, 30, .06), color-mix(in srgb, #08101f var(--npmm-link-media-overlay, 36%), transparent)); pointer-events: none; } .npmm-card--media-background .npmm-card__copy, .npmm-card--media-background .npmm-card__icon, .npmm-card--media-background .npmm-card__arrow { z-index: 2; } .npmm-card--media-background .npmm-card__description { color: color-mix(in srgb, currentColor 82%, transparent); } .npmm-card--media-background::after { z-index: 1; opacity: .18; } .npmm-card--has-media:hover .npmm-card__media img, .npmm-card--has-media:focus-visible .npmm-card__media img { transform: scale(1.035); } .npmm-card--media-icon:hover .npmm-card__media img, .npmm-card--media-icon:focus-visible .npmm-card__media img { transform: scale(1.07); } .npmm-block-style--feature .npmm-card--media-background, .npmm-block-style--large .npmm-card--media-background { justify-content: flex-end; } .npmm-block-style--feature .npmm-card--media-top .npmm-card__media, .npmm-block-style--large .npmm-card--media-top .npmm-card__media { height: min(230px, max(120px, var(--npmm-link-media-top-height, 162px))); } @media (max-width: 980px) { .npmm-card--media-size-xl { --npmm-link-media-size: 112px; --npmm-link-media-icon-size: 72px; --npmm-link-media-top-height: 176px; } .npmm-card--media-size-lg { --npmm-link-media-size: 88px; --npmm-link-media-icon-size: 58px; --npmm-link-media-top-height: 148px; } .npmm-card--media-top .npmm-card__media { height: min(176px, var(--npmm-link-media-top-height, 122px)); } } .npmm-card__icon { position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; background: var(--npmm-icon-bg, #eaf1ff); color: var(--npmm-icon-color, #0a64ff); font-size: 19px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--npmm-icon-color, #0a64ff) 8%, transparent); transition: transform 360ms cubic-bezier(.22, 1, .36, 1), background-color 300ms ease; } .npmm-card:hover .npmm-card__icon, .npmm-card:focus-visible .npmm-card__icon { transform: scale(1.05) rotate(-2deg); } .npmm-card__copy { position: relative; z-index: 1; display: flex; flex: 1 1 auto; flex-direction: column; gap: 5px; min-width: 0; padding-top: 1px; } .npmm-card__title { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 710; line-height: 1.28; letter-spacing: -.018em; } .npmm-card__description { color: var(--npmm-panel-muted, #6d717a); font-size: 12.5px; line-height: 1.45; } .npmm-card__badge { display: inline-flex; padding: 2px 6px; border-radius: 999px; background: color-mix(in srgb, var(--npmm-accent, #0a64ff) 10%, transparent); color: var(--npmm-accent, #0a64ff); font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } .npmm-card__arrow { position: relative; z-index: 1; display: flex; align-self: center; flex: 0 0 auto; color: var(--npmm-panel-muted, #6d717a); font-size: 15px; opacity: .55; transform: translate(-2px, 2px); transition: opacity 280ms ease, transform 360ms cubic-bezier(.22, 1, .36, 1), color 280ms ease; } .npmm-card:hover .npmm-card__arrow, .npmm-card:focus-visible .npmm-card__arrow { color: var(--npmm-accent, #0a64ff); opacity: 1; transform: translate(0, 0); } .npmm-heading { display: flex; flex-direction: column; justify-content: center; gap: 5px; height: 100%; padding: var(--npmm-block-padding, 4px 2px 8px); color: var(--npmm-block-text, var(--npmm-panel-text, #17181b)); } .npmm-heading__eyebrow { color: var(--npmm-accent, #0a64ff); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .npmm-heading__title { font-size: clamp(17px, 1.5vw, 22px); font-weight: 740; line-height: 1.18; letter-spacing: -.035em; } .npmm-heading__description { max-width: 640px; color: var(--npmm-panel-muted, #6d717a); font-size: 12.5px; line-height: 1.45; } .npmm-action { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; height: 100%; min-height: 48px; padding: var(--npmm-block-padding, 12px 16px); border: 1px solid color-mix(in srgb, var(--npmm-accent, #0a64ff) 20%, transparent); border-radius: var(--npmm-block-radius, 14px); background: var(--npmm-block-bg, var(--npmm-accent, #0a64ff)); color: var(--npmm-block-text, #fff); font-size: 13.5px; font-weight: 700; text-decoration: none; box-shadow: 0 10px 25px color-mix(in srgb, var(--npmm-accent, #0a64ff) 20%, transparent); transition: transform 360ms cubic-bezier(.22, 1, .36, 1), box-shadow 360ms ease; } .npmm-action:hover, .npmm-action:focus-visible { color: var(--npmm-block-text, #fff); transform: translateY(-2px); box-shadow: 0 16px 34px color-mix(in srgb, var(--npmm-accent, #0a64ff) 26%, transparent); } .npmm-action--secondary, .npmm-action--outline { background: transparent; color: var(--npmm-accent, #0a64ff); box-shadow: none; } .npmm-action svg { font-size: 17px; } .npmm-media { position: relative; width: 100%; height: 100%; min-height: 120px; margin: 0; border-radius: var(--npmm-block-radius, var(--npmm-card-radius, 17px)); overflow: hidden; background: var(--npmm-block-bg, var(--npmm-card-bg, #f7f8fa)); border: 1px solid var(--npmm-card-border, #eceef2); } .npmm-media img, .npmm-media video, .npmm-media iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; } .npmm-media--image a { display: block; height: 100%; } .npmm-media figcaption { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.3); border-radius: 10px; background: rgba(14, 18, 28, .52); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font-size: 11px; line-height: 1.35; } .npmm-aspect--16-9 { aspect-ratio: 16 / 9; } .npmm-aspect--4-3 { aspect-ratio: 4 / 3; } .npmm-aspect--1-1 { aspect-ratio: 1; } .npmm-aspect--9-16 { aspect-ratio: 9 / 16; } .npmm-media-placeholder { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; width: 100%; height: 100%; min-height: 110px; padding: 18px; border: 1px dashed color-mix(in srgb, var(--npmm-panel-muted, #6d717a) 35%, transparent); border-radius: var(--npmm-card-radius, 17px); background: var(--npmm-card-bg, #f7f8fa); color: var(--npmm-panel-muted, #6d717a); font-size: 11.5px; text-align: center; } .npmm-media-placeholder svg { width: 23px; height: 23px; color: var(--npmm-accent, #0a64ff); } .npmm-divider { display: block; width: 100%; height: 1px; margin: auto 0; background: var(--npmm-panel-border, #e5e7eb); } .npmm-divider--dashed { background: repeating-linear-gradient(90deg, var(--npmm-panel-border, #e5e7eb) 0 7px, transparent 7px 13px); } .npmm-divider--gradient { background: linear-gradient(90deg, transparent, var(--npmm-panel-border, #e5e7eb), transparent); } .npmm-spacer { display: block; width: 100%; } .npmm-promo { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 200px; padding: var(--npmm-block-padding, 16px); border: 1px solid color-mix(in srgb, var(--npmm-accent, #0a64ff) 15%, var(--npmm-card-border, #eceef2)); border-radius: var(--npmm-block-radius, calc(var(--npmm-card-radius, 17px) + 3px)); background: radial-gradient(circle at 86% 10%, color-mix(in srgb, var(--npmm-accent, #0a64ff) 22%, transparent), transparent 35%), linear-gradient(145deg, color-mix(in srgb, var(--npmm-card-bg, #f7f8fa) 76%, #fff), var(--npmm-card-bg, #f7f8fa)); color: var(--npmm-block-text, var(--npmm-panel-text, #17181b)); text-decoration: none; overflow: hidden; transition: transform 420ms cubic-bezier(.22, 1, .36, 1), box-shadow 420ms ease; } .npmm-promo:hover, .npmm-promo:focus-visible { color: var(--npmm-block-text, var(--npmm-panel-text, #17181b)); transform: translateY(-3px); box-shadow: 0 20px 42px rgba(15, 23, 42, .11); } .npmm-promo__visual { position: absolute; top: 0; right: 0; width: 48%; height: 100%; overflow: hidden; mask-image: linear-gradient(90deg, transparent 0, #000 35%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 35%); } .npmm-promo__visual img { width: 100%; height: 100%; object-fit: cover; } .npmm-promo__visual--icon { display: grid; place-items: center; color: color-mix(in srgb, var(--npmm-accent, #0a64ff) 42%, transparent); font-size: 100px; transform: rotate(-8deg) translate(9%, 4%); } .npmm-promo__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 7px; width: min(68%, 480px); height: 100%; } .npmm-promo__content small { color: var(--npmm-accent, #0a64ff); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .npmm-promo__content strong { font-size: clamp(17px, 2vw, 25px); line-height: 1.08; letter-spacing: -.04em; } .npmm-promo__content > span { color: var(--npmm-panel-muted, #6d717a); font-size: 12.5px; line-height: 1.45; } .npmm-promo__content em { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--npmm-accent, #0a64ff); font-size: 12px; font-style: normal; font-weight: 720; } .npmm-promo__content em svg { width: 14px; height: 14px; transition: transform 320ms cubic-bezier(.22, 1, .36, 1); } .npmm-promo:hover em svg { transform: translate(2px, -2px); } .npmm-posts { display: grid; gap: 10px; width: 100%; height: 100%; min-width: 0; } .npmm-post { position: relative; display: flex; align-items: center; gap: 11px; min-width: 0; min-height: 62px; padding: 8px; border: 1px solid transparent; border-radius: 13px; background: transparent; color: var(--npmm-panel-text, #17181b); text-decoration: none; overflow: hidden; transition: background-color 250ms ease, border-color 250ms ease, transform 320ms cubic-bezier(.22, 1, .36, 1), box-shadow 320ms ease; } .npmm-post:hover, .npmm-post:focus-visible { border-color: color-mix(in srgb, var(--npmm-accent, #0a64ff) 14%, var(--npmm-card-border, #eceef2)); background: var(--npmm-card-hover, #eef3ff); color: var(--npmm-panel-text, #17181b); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(15, 23, 42, .06); } .npmm-post__image { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 11px; overflow: hidden; background: var(--npmm-card-bg, #f7f8fa); } .npmm-post__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(.22, 1, .36, 1); } .npmm-post:hover .npmm-post__image img, .npmm-post:focus-visible .npmm-post__image img { transform: scale(1.035); } .npmm-post__copy { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; } .npmm-post__copy strong { font-size: 12.5px; font-weight: 720; line-height: 1.28; letter-spacing: -.012em; } .npmm-post__meta { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--npmm-panel-muted, #6d717a); font-size: 8.5px; font-weight: 620; line-height: 1.2; } .npmm-post__category { color: var(--npmm-accent, #0a64ff); } .npmm-post__meta-dot { width: 2px; height: 2px; border-radius: 50%; background: currentColor; opacity: .45; } .npmm-post__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--npmm-panel-muted, #6d717a); font-size: 10.5px; line-height: 1.38; } .npmm-post__arrow { flex: 0 0 auto; align-self: flex-start; margin-top: 2px; color: var(--npmm-panel-muted, #6d717a); font-size: 13px; transition: color 220ms ease, transform 300ms cubic-bezier(.22, 1, .36, 1); } .npmm-post:hover .npmm-post__arrow, .npmm-post:focus-visible .npmm-post__arrow { color: var(--npmm-accent, #0a64ff); transform: translate(2px, -2px); } /* Cards — clean equal cards. */ .npmm-posts--cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .npmm-posts--cards .npmm-post { align-items: stretch; flex-direction: column; padding: 9px; border-color: var(--npmm-card-border, #eceef2); background: var(--npmm-card-bg, #f7f8fa); } .npmm-posts--cards .npmm-post__image { width: 100%; height: 88px; border-radius: 10px; } .npmm-posts--cards .npmm-post__arrow { position: absolute; top: 12px; right: 12px; padding: 5px; border-radius: 99px; background: color-mix(in srgb, #fff 82%, transparent); backdrop-filter: blur(8px); } /* Featured + list — lead story left, compact stories right. */ .npmm-posts--featured { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-auto-rows: minmax(48px, auto); } .npmm-posts--featured .npmm-post.is-lead { grid-row: 1 / span 5; flex-direction: column; align-items: stretch; padding: 10px; border-color: var(--npmm-card-border, #eceef2); background: var(--npmm-card-bg, #f7f8fa); } .npmm-posts--featured .npmm-post.is-lead .npmm-post__image { width: 100%; height: min(150px, 36vh); border-radius: 11px; } .npmm-posts--featured .npmm-post.is-lead .npmm-post__copy strong { font-size: 15px; line-height: 1.18; } .npmm-posts--featured .npmm-post.is-lead .npmm-post__excerpt { -webkit-line-clamp: 3; } .npmm-posts--featured .npmm-post:not(.is-lead) { min-height: 52px; padding: 6px 8px; } .npmm-posts--featured .npmm-post:not(.is-lead) .npmm-post__image { width: 42px; height: 42px; } /* Editorial split — airy lead feature with magazine-style supporting stories. */ .npmm-posts--editorial { grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, .82fr)); grid-auto-rows: minmax(74px, auto); } .npmm-posts--editorial .npmm-post { border-color: var(--npmm-card-border, #eceef2); background: color-mix(in srgb, var(--npmm-card-bg, #f7f8fa) 82%, #fff); } .npmm-posts--editorial .npmm-post.is-lead { grid-row: 1 / span 2; flex-direction: column; align-items: stretch; padding: 10px; } .npmm-posts--editorial .npmm-post.is-lead .npmm-post__image { width: 100%; height: 132px; } .npmm-posts--editorial .npmm-post.is-lead .npmm-post__copy strong { font-size: 15.5px; } .npmm-posts--editorial .npmm-post:not(.is-lead) { align-items: flex-start; min-height: 74px; } .npmm-posts--editorial .npmm-post:not(.is-lead) .npmm-post__image { width: 52px; height: 52px; } /* Magazine grid — one large visual story plus polished cards. */ .npmm-posts--magazine { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(98px, auto); } .npmm-posts--magazine .npmm-post { flex-direction: column; align-items: stretch; padding: 9px; border-color: var(--npmm-card-border, #eceef2); background: var(--npmm-card-bg, #f7f8fa); } .npmm-posts--magazine .npmm-post__image { width: 100%; height: 76px; } .npmm-posts--magazine .npmm-post.is-lead { grid-column: span 2; grid-row: span 2; } .npmm-posts--magazine .npmm-post.is-lead .npmm-post__image { height: 142px; } .npmm-posts--magazine .npmm-post.is-lead .npmm-post__copy strong { font-size: 16px; } .npmm-posts--magazine .npmm-post__arrow { position: absolute; top: 12px; right: 12px; } /* Bento — asymmetric but controlled hierarchy. */ .npmm-posts--bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(88px, auto); } .npmm-posts--bento .npmm-post { border-color: var(--npmm-card-border, #eceef2); background: var(--npmm-card-bg, #f7f8fa); } .npmm-posts--bento .npmm-post.is-lead { grid-column: span 2; grid-row: span 2; flex-direction: column; align-items: stretch; } .npmm-posts--bento .npmm-post.is-lead .npmm-post__image { width: 100%; height: 130px; } .npmm-posts--bento .npmm-post--index-2 { grid-column: span 2; } .npmm-posts--bento .npmm-post--index-2 .npmm-post__image { width: 72px; height: 72px; } .npmm-posts--bento .npmm-post--index-3, .npmm-posts--bento .npmm-post--index-4, .npmm-posts--bento .npmm-post--index-5, .npmm-posts--bento .npmm-post--index-6 { grid-column: span 1; flex-direction: column; align-items: stretch; } .npmm-posts--bento .npmm-post--index-3 .npmm-post__image, .npmm-posts--bento .npmm-post--index-4 .npmm-post__image, .npmm-posts--bento .npmm-post--index-5 .npmm-post__image, .npmm-posts--bento .npmm-post--index-6 .npmm-post__image { width: 100%; height: 62px; } /* Spotlight — hero first row, fast links below. */ .npmm-posts--spotlight { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: minmax(58px, auto); } .npmm-posts--spotlight .npmm-post.is-lead { grid-column: 1 / -1; min-height: 126px; padding: 12px; border-color: var(--npmm-card-border, #eceef2); background: linear-gradient(120deg, color-mix(in srgb, var(--npmm-accent, #0a64ff) 7%, #fff), var(--npmm-card-bg, #f7f8fa)); } .npmm-posts--spotlight .npmm-post.is-lead .npmm-post__image { width: 168px; height: 102px; } .npmm-posts--spotlight .npmm-post.is-lead .npmm-post__copy strong { font-size: 17px; } .npmm-posts--spotlight .npmm-post:not(.is-lead) { grid-column: span 1; flex-direction: column; align-items: stretch; padding: 7px; border-color: var(--npmm-card-border, #eceef2); background: color-mix(in srgb, var(--npmm-card-bg, #f7f8fa) 82%, #fff); } .npmm-posts--spotlight .npmm-post:not(.is-lead) .npmm-post__image { width: 100%; height: 50px; } .npmm-posts--spotlight .npmm-post:not(.is-lead) .npmm-post__excerpt { display: none; } /* Rail — sophisticated two-column compact list. */ .npmm-posts--rail { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; } .npmm-posts--rail .npmm-post { min-height: 64px; padding: 8px 9px; border-bottom: 1px solid var(--npmm-card-border, #eceef2); border-radius: 9px; } .npmm-posts--rail .npmm-post__image { width: 52px; height: 52px; } /* Minimal — typography only. */ .npmm-posts--minimal { align-content: start; gap: 0; counter-reset: npmm-news; } .npmm-posts--minimal .npmm-post { counter-increment: npmm-news; min-height: 48px; padding: 7px 4px; border-bottom: 1px solid var(--npmm-card-border, #eceef2); border-radius: 0; } .npmm-posts--minimal .npmm-post::before { content: counter(npmm-news, decimal-leading-zero); flex: 0 0 22px; color: var(--npmm-panel-muted, #6d717a); font-size: 8px; font-weight: 700; } .npmm-posts--minimal .npmm-post__image, .npmm-posts--minimal .npmm-post__excerpt { display: none; } .npmm-posts--minimal .npmm-post:hover { padding-left: 7px; background: transparent; box-shadow: none; } /* 2.12.0 — adaptive editorial media and a permanent archive CTA in every news preset. */ .npmm-posts :is(.npmm-post__image, .npmm-post__image img) { max-width: 100%; } /* Use aspect-ratio instead of fixed pixel heights so article images follow the geometry of each preset at every configured panel width. */ .npmm-posts--cards .npmm-post__image { height: auto; aspect-ratio: 16 / 9; } .npmm-posts--featured .npmm-post.is-lead .npmm-post__image { height: auto; aspect-ratio: 16 / 7; } .npmm-posts--featured .npmm-post:not(.is-lead) .npmm-post__image, .npmm-posts--editorial .npmm-post:not(.is-lead) .npmm-post__image, .npmm-posts--rail .npmm-post__image { height: auto; aspect-ratio: 1 / 1; } .npmm-posts--editorial .npmm-post.is-lead .npmm-post__image { height: auto; aspect-ratio: 16 / 8; } .npmm-posts--magazine .npmm-post__image { height: auto; aspect-ratio: 16 / 9; } .npmm-posts--magazine .npmm-post.is-lead .npmm-post__image { height: auto; aspect-ratio: 16 / 7; } .npmm-posts--bento .npmm-post.is-lead .npmm-post__image { height: auto; aspect-ratio: 16 / 7; } .npmm-posts--bento .npmm-post--index-2 .npmm-post__image { height: auto; aspect-ratio: 4 / 3; } .npmm-posts--bento .npmm-post--index-3 .npmm-post__image, .npmm-posts--bento .npmm-post--index-4 .npmm-post__image, .npmm-posts--bento .npmm-post--index-5 .npmm-post__image, .npmm-posts--bento .npmm-post--index-6 .npmm-post__image { height: auto; aspect-ratio: 16 / 9; } .npmm-posts--spotlight .npmm-post.is-lead .npmm-post__image { height: auto; aspect-ratio: 16 / 10; } .npmm-posts--spotlight .npmm-post:not(.is-lead) .npmm-post__image { height: auto; aspect-ratio: 16 / 8; } /* Permanent archive/destination card. It is intentionally text-first and therefore remains useful when mobile media is globally disabled. */ .npmm-post-archive { position: relative; display: flex; align-items: center; gap: 11px; min-width: 0; min-height: 62px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--npmm-accent, #0a64ff) 16%, var(--npmm-card-border, #eceef2)); border-radius: 13px; background: linear-gradient(135deg, color-mix(in srgb, var(--npmm-accent, #0a64ff) 8%, #fff), color-mix(in srgb, var(--npmm-card-bg, #f7f8fa) 88%, #fff)); color: var(--npmm-panel-text, #17181b); text-decoration: none; overflow: hidden; transition: transform 320ms cubic-bezier(.22, 1, .36, 1), box-shadow 320ms ease, border-color 250ms ease, background-color 250ms ease; } .npmm-post-archive::after { content: ""; position: absolute; inset: auto -36px -54px auto; width: 118px; height: 118px; border-radius: 50%; background: color-mix(in srgb, var(--npmm-accent, #0a64ff) 10%, transparent); pointer-events: none; } .npmm-post-archive:hover, .npmm-post-archive:focus-visible { transform: translateY(-1px); border-color: color-mix(in srgb, var(--npmm-accent, #0a64ff) 34%, var(--npmm-card-border, #eceef2)); box-shadow: 0 14px 30px rgba(15, 23, 42, .07); } .npmm-post-archive__icon { position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; background: color-mix(in srgb, var(--npmm-accent, #0a64ff) 12%, #fff); color: var(--npmm-accent, #0a64ff); } .npmm-post-archive__icon svg { width: 18px; height: 18px; } .npmm-post-archive__copy { position: relative; z-index: 1; display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; } .npmm-post-archive__copy small { color: var(--npmm-accent, #0a64ff); font-size: 8px; font-weight: 760; line-height: 1; letter-spacing: .09em; text-transform: uppercase; } .npmm-post-archive__copy strong { font-size: 13.5px; font-weight: 760; line-height: 1.18; letter-spacing: -.015em; } .npmm-post-archive__copy > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--npmm-panel-muted, #6d717a); font-size: 10px; line-height: 1.35; } .npmm-post-archive__copy em { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; color: var(--npmm-accent, #0a64ff); font-size: 10px; font-style: normal; font-weight: 720; } .npmm-post-archive__copy em svg { width: 12px; height: 12px; transition: transform 300ms cubic-bezier(.22, 1, .36, 1); } .npmm-post-archive:hover .npmm-post-archive__copy em svg, .npmm-post-archive:focus-visible .npmm-post-archive__copy em svg { transform: translate(2px, -2px); } /* Layout-specific integration keeps the archive card intentional instead of looking like an accidental seventh article. */ .npmm-posts--list .npmm-post-archive { margin-top: 2px; } .npmm-posts--cards .npmm-post-archive { align-items: flex-start; flex-direction: column; justify-content: space-between; min-height: 148px; padding: 12px; } .npmm-posts--featured .npmm-post.is-lead { grid-row: 1 / span 6; } .npmm-posts--featured .npmm-post-archive { grid-column: 2; min-height: 52px; padding: 7px 9px; } .npmm-posts--featured .npmm-post-archive__copy > span { display: none; } .npmm-posts--featured .npmm-post-archive__icon { flex-basis: 34px; width: 34px; height: 34px; } .npmm-posts--editorial .npmm-post-archive { grid-column: 2 / -1; min-height: 70px; } .npmm-posts--magazine .npmm-post-archive { align-items: flex-start; flex-direction: column; justify-content: space-between; min-height: 126px; } .npmm-posts--bento .npmm-post-archive { grid-column: span 2; min-height: 88px; } .npmm-posts--spotlight .npmm-post-archive { grid-column: 1 / -1; min-height: 56px; padding-block: 8px; } .npmm-posts--spotlight .npmm-post-archive__copy { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; grid-template-areas: "label title cta" "label desc cta"; align-items: center; column-gap: 10px; } .npmm-posts--spotlight .npmm-post-archive__copy small { grid-area: label; } .npmm-posts--spotlight .npmm-post-archive__copy strong { grid-area: title; } .npmm-posts--spotlight .npmm-post-archive__copy > span { grid-area: desc; -webkit-line-clamp: 1; } .npmm-posts--spotlight .npmm-post-archive__copy em { grid-area: cta; margin: 0; white-space: nowrap; } .npmm-posts--rail .npmm-post-archive { grid-column: 1 / -1; min-height: 58px; } .npmm-posts--minimal .npmm-post-archive { min-height: 52px; margin-top: 4px; border-color: color-mix(in srgb, var(--npmm-accent, #0a64ff) 14%, var(--npmm-card-border, #eceef2)); border-radius: 10px; background: color-mix(in srgb, var(--npmm-accent, #0a64ff) 5%, transparent); box-shadow: none; } .npmm-posts--minimal .npmm-post-archive__copy > span { display: none; } @media (max-width: 900px) { .npmm-posts .npmm-post-archive { grid-column: 1 / -1 !important; grid-row: auto !important; } .npmm-posts--featured .npmm-post.is-lead { grid-row: auto; } } @media (max-width: 640px) { .npmm-posts :is(.npmm-post.is-lead, .npmm-post:not(.is-lead)) .npmm-post__image { width: 46px; height: 46px; aspect-ratio: 1 / 1; flex-basis: 46px; } .npmm-post-archive { min-height: 58px !important; padding: 8px 9px !important; } .npmm-post-archive__icon { flex-basis: 34px; width: 34px; height: 34px; } .npmm-post-archive__copy > span { display: none; } .npmm-posts--spotlight .npmm-post-archive__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .npmm-posts--spotlight .npmm-post-archive__copy em { margin-top: 2px; } } .npmm-posts-empty { display: grid; place-items: center; min-height: 80px; border: 1px dashed var(--npmm-panel-border, #e5e7eb); border-radius: 14px; color: var(--npmm-panel-muted, #6d717a); font-size: 12px; } @media (max-width: 900px) { .npmm-posts--featured, .npmm-posts--editorial, .npmm-posts--magazine, .npmm-posts--bento, .npmm-posts--spotlight, .npmm-posts--rail { grid-template-columns: 1fr 1fr; } .npmm-posts--featured .npmm-post.is-lead, .npmm-posts--editorial .npmm-post.is-lead, .npmm-posts--magazine .npmm-post.is-lead, .npmm-posts--bento .npmm-post.is-lead, .npmm-posts--spotlight .npmm-post.is-lead { grid-column: 1 / -1; grid-row: auto; } .npmm-posts--spotlight .npmm-post:not(.is-lead) { grid-column: span 1; } } @media (max-width: 640px) { .npmm-posts--cards, .npmm-posts--featured, .npmm-posts--editorial, .npmm-posts--magazine, .npmm-posts--bento, .npmm-posts--spotlight, .npmm-posts--rail { grid-template-columns: 1fr; } .npmm-posts--cards .npmm-post, .npmm-posts--magazine .npmm-post, .npmm-posts--bento .npmm-post, .npmm-posts--spotlight .npmm-post, .npmm-posts--editorial .npmm-post, .npmm-posts--featured .npmm-post { grid-column: auto; grid-row: auto; flex-direction: row; align-items: center; min-height: 56px; padding: 7px; } .npmm-posts :is(.npmm-post.is-lead, .npmm-post:not(.is-lead)) .npmm-post__image { width: 46px; height: 46px; flex-basis: 46px; } .npmm-posts .npmm-post__copy strong { font-size: 11.5px; } .npmm-posts .npmm-post__excerpt { display: none; } } .npmm-menu__overlay { position: fixed; /* The overlay must stay below the surface stacking context. Otherwise it intercepts pointer movement between the trigger and the fixed panel. */ z-index: 3; inset: 0; background: var(--npmm-overlay, rgba(15, 23, 42, .18)); opacity: 0; visibility: hidden; pointer-events: none; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: opacity 300ms ease, visibility 0s linear 300ms; } .npmm-menu.has-open-panel .npmm-menu__overlay { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; } .npmm-body-locked { overflow: hidden !important; } .npmm-missing { padding: 12px 16px; border: 1px dashed #d9dde5; border-radius: 12px; background: #f8f9fb; color: #687080; font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* Mobile state is controlled by JS so each menu can use its own breakpoint. */ .npmm-menu.npmm-is-mobile .npmm-menu__surface { z-index: calc(var(--npmm-z, 9999) + 4); } .npmm-menu.npmm-is-mobile .npmm-menu__bar { height: max(62px, var(--npmm-bar-height, 76px)); } .npmm-menu.npmm-is-mobile .npmm-menu__logo img { height: var(--npmm-mobile-logo-height, 34px); } .npmm-menu.npmm-is-mobile .npmm-menu__mobile-toggle { display: inline-flex; } .npmm-menu.npmm-is-mobile .npmm-menu__nav-wrap { overflow-anchor: none; position: fixed; z-index: calc(var(--npmm-z, 9999) + 3); top: var(--npmm-mobile-top, 72px); right: 0; bottom: 0; left: 0; display: block; padding: 14px 16px max(28px, env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--npmm-mobile-bg, #fff) 96%, transparent); color: var(--npmm-mobile-text, #17181b); -webkit-backdrop-filter: blur(24px) saturate(1.08); backdrop-filter: blur(24px) saturate(1.08); overflow: hidden auto; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px); transition: opacity 280ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 420ms; } .npmm-menu.npmm-is-mobile.npmm-menu--mobile-drawer .npmm-menu__nav-wrap { left: auto; width: min(92vw, 440px); max-width: 100vw; border-left: 1px solid var(--npmm-bar-border, #e8e8ed); box-shadow: -24px 30px 70px rgba(15, 23, 42, .14); transform: scale(.985); transform-origin: 100% 0; } .npmm-menu.npmm-is-mobile.npmm-menu--mobile-drawer.is-mobile-open .npmm-menu__nav-wrap { transform: scale(1); } .npmm-menu.npmm-is-mobile.is-mobile-open .npmm-menu__nav-wrap { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(0, 0); transition-delay: 0s; } .npmm-menu.npmm-is-mobile .npmm-menu__list { display: flex; align-items: stretch; flex-direction: column; gap: var(--npmm-mobile-spacing, 10px); width: 100%; max-width: 760px; margin: 0 auto; } .npmm-menu.npmm-is-mobile .npmm-menu__list--actions { margin-top: max(8px, var(--npmm-mobile-spacing, 10px)); padding-top: max(8px, var(--npmm-mobile-spacing, 10px)) !important; border-top: 1px solid color-mix(in srgb, var(--npmm-bar-border, #e8e8ed) 75%, transparent); } .npmm-menu.npmm-is-mobile .npmm-menu__list--actions:empty { display: none; } .npmm-menu.npmm-is-mobile .npmm-menu__item { width: 100%; border-bottom: 1px solid color-mix(in srgb, var(--npmm-bar-border, #e8e8ed) 75%, transparent); padding-bottom: var(--npmm-mobile-spacing, 10px); } .npmm-menu.npmm-is-mobile .npmm-menu__item:last-child { border-bottom: 0; } .npmm-menu.npmm-is-mobile .npmm-menu__trigger, .npmm-menu.npmm-is-mobile .npmm-menu__link { justify-content: flex-start; width: 100%; min-height: 52px; padding: 0 8px; border-radius: 12px; color: var(--npmm-mobile-text, #17181b); font-size: 18px; font-weight: 680; letter-spacing: -.025em; } .npmm-menu.npmm-is-mobile .npmm-menu__chevron { margin-left: auto; } .npmm-menu.npmm-is-mobile .npmm-menu__item--button { margin-left: 0; padding-top: 4px; } .npmm-menu.npmm-is-mobile .npmm-menu__link--button { justify-content: center; background: var(--npmm-button-bg, var(--npmm-mobile-accent, #0a64ff)); color: var(--npmm-button-text, #fff); } .npmm-menu.npmm-is-mobile .npmm-menu__link--button-secondary { background: var(--npmm-button-bg, color-mix(in srgb, var(--npmm-mobile-accent, #0a64ff) 10%, #fff)); color: var(--npmm-button-text, var(--npmm-mobile-accent, #0a64ff)); } .npmm-menu.npmm-is-mobile .npmm-menu__link--button-outline { background: var(--npmm-button-bg, transparent); color: var(--npmm-button-text, var(--npmm-mobile-accent, #0a64ff)); } .npmm-menu.npmm-is-mobile .npmm-panel { position: static !important; width: 100% !important; max-width: none !important; max-height: 0; margin: 0; border: 0; border-radius: 18px; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: hidden; opacity: 1; visibility: visible; pointer-events: none; transform: none !important; clip-path: none !important; transition: max-height 560ms cubic-bezier(.22, 1, .36, 1), margin 360ms ease; } .npmm-menu.npmm-is-mobile .npmm-panel.is-open { max-height: 5000px; margin: 4px 0 2px; pointer-events: auto; } .npmm-menu.npmm-is-mobile .npmm-panel__inner { padding: 8px 0 2px; } .npmm-menu.npmm-is-mobile .npmm-panel__glow { display: none; } .npmm-menu.npmm-is-mobile .npmm-panel__grid { display: grid; grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: auto; gap: 8px; } .npmm-menu.npmm-is-mobile .npmm-block { grid-column: 1 !important; grid-row: auto !important; opacity: 1; transform: none; } .npmm-menu.npmm-is-mobile .npmm-heading { padding: 12px 8px 7px; } .npmm-menu.npmm-is-mobile .npmm-card { min-height: 70px; background: color-mix(in srgb, var(--npmm-card-bg, #f7f8fa) 78%, transparent); } .npmm-menu.npmm-is-mobile .npmm-promo { min-height: 210px; } .npmm-menu.npmm-is-mobile .npmm-menu__overlay { z-index: calc(var(--npmm-z, 9999) + 2); } .npmm-menu.npmm-is-mobile.is-mobile-open .npmm-menu__overlay { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; } @media (max-width: 560px) { .npmm-menu--header-contained .npmm-menu__surface { padding: min(var(--npmm-header-margin-top, 7px), 12px) min(var(--npmm-header-margin-x, 8px), 16px) 0; } .npmm-menu--header-contained .npmm-menu__bar-shell { border-radius: var(--npmm-bar-radius, 17px); } .npmm-menu.npmm-is-mobile .npmm-menu__bar { padding-inline: 14px; } .npmm-menu.npmm-is-mobile .npmm-menu__nav-wrap { padding-inline: 12px; } .npmm-promo__content { width: 82%; } .npmm-promo__visual { width: 58%; opacity: .72; } .npmm-promo__visual--icon { transform: rotate(-8deg) scale(.9); } } @media (prefers-reduced-motion: reduce) { .npmm-menu.npmm-respect-motion *, .npmm-menu.npmm-respect-motion *::before, .npmm-menu.npmm-respect-motion *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; } } /* ======================================================================== Nordpaa Mega Menu 2.0 — hierarchy, presets and scrollbar-free panel flow ======================================================================== */ /* Header container modes are independent from panel width/anchor modes. */ .npmm-menu--header-contained .npmm-menu__surface, .npmm-menu--header-wide .npmm-menu__surface, .npmm-menu--header-custom .npmm-menu__surface { background: transparent; border: 0; box-shadow: none; padding: var(--npmm-header-margin-top, 10px) var(--npmm-header-margin-x, 16px) 0; } .npmm-menu--header-contained .npmm-menu__bar-shell, .npmm-menu--header-wide .npmm-menu__bar-shell, .npmm-menu--header-custom .npmm-menu__bar-shell { border: 1px solid var(--npmm-bar-border, #e8e8ed); border-radius: var(--npmm-bar-radius, 18px); box-shadow: var(--npmm-bar-shadow, 0 14px 40px rgba(15, 23, 42, .08)); overflow: visible; } .npmm-menu--header-contained .npmm-menu__bar-shell, .npmm-menu--header-custom .npmm-menu__bar-shell { max-width: var(--npmm-header-max-width, 1320px); } .npmm-menu--header-wide .npmm-menu__bar-shell { max-width: var(--npmm-header-wide-width, 1560px); } .npmm-menu--header-full .npmm-menu__bar-shell { max-width: none; } .npmm-menu--header-wide .npmm-menu__bar { max-width: var(--npmm-header-wide-width, 1560px); } .npmm-menu--header-full .npmm-menu__bar, .npmm-menu--header-custom .npmm-menu__bar { max-width: none; } /* A panel is a fixed positioning shell. It never scrolls internally unless the customer explicitly selects the legacy/opt-in scroll mode. */ .npmm-panel { max-height: none; overflow: visible; contain: layout style; } .npmm-panel__motion { position: relative; width: calc(100% / var(--npmm-fit-scale, 1)); min-width: 0; margin-left: calc((100% - (100% / var(--npmm-fit-scale, 1))) / 2); transform: scale(var(--npmm-fit-scale, 1)); transform-origin: top center; will-change: transform; } .npmm-panel[data-overflow-mode="scroll"] .npmm-panel__motion { width: 100%; max-height: var(--npmm-available-height, min(78vh, 780px)); margin-left: 0; overflow: hidden auto; transform: none; overscroll-behavior: contain; scrollbar-gutter: stable; } .npmm-panel[data-overflow-mode="scroll"] .npmm-panel__motion::-webkit-scrollbar { width: 8px; } .npmm-panel[data-overflow-mode="scroll"] .npmm-panel__motion::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: color-mix(in srgb, var(--npmm-panel-muted, #6d717a) 35%, transparent); background-clip: padding-box; } .npmm-panel__effects { position: absolute; z-index: 1; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; contain: strict; } .npmm-panel__glow { width: 420px; height: 420px; opacity: var(--npmm-glow-strength, .1); transition: transform 120ms linear; left: 0; top: 0; transform: translate3d(calc(var(--npmm-glow-x, 50%) - 50%), calc(var(--npmm-glow-y, 30%) - 50%), 0); will-change: transform; } .npmm-panel__inner { isolation: isolate; } .npmm-panel.is-npmm-compact .npmm-panel__inner { padding: max(12px, calc(var(--npmm-item-padding, var(--npmm-panel-padding, 24px)) * .72)); } .npmm-panel.is-npmm-compact .npmm-panel__grid, .npmm-panel.is-npmm-compact .npmm-submenu__grid, .npmm-panel.is-npmm-compact .npmm-hierarchy__links { gap: max(7px, calc(var(--npmm-item-gap, var(--npmm-panel-gap, 14px)) * .68)); } .npmm-panel.is-npmm-compact .npmm-card, .npmm-panel.is-npmm-compact .npmm-subitem__link { min-height: 62px; padding: 11px; } /* Generic submenu presets. */ .npmm-submenu, .npmm-hierarchy { position: relative; z-index: 2; min-width: 0; } .npmm-submenu__grid { display: grid; grid-template-columns: repeat(var(--npmm-submenu-columns, 1), minmax(0, 1fr)); gap: var(--npmm-item-gap, var(--npmm-panel-gap, 14px)); align-items: start; } .npmm-submenu--simple .npmm-submenu__grid { gap: 4px; } .npmm-submenu--columns .npmm-submenu__grid { grid-auto-flow: row; } .npmm-subgroup { min-width: 0; } .npmm-subgroup__heading { display: flex; align-items: flex-start; gap: 11px; padding: 4px 7px 12px; } .npmm-subgroup__heading > span, .npmm-hierarchy__control-icon, .npmm-subitem__icon { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 12px; background: var(--npmm-icon-bg, #eaf1ff); color: var(--npmm-icon-color, #0a64ff); } .npmm-subgroup__heading svg, .npmm-hierarchy__control-icon svg, .npmm-subitem__icon svg { width: 17px; height: 17px; } .npmm-subgroup__heading > div { display: grid; gap: 4px; min-width: 0; } .npmm-subgroup__heading strong { font-size: 14px; letter-spacing: -.015em; } .npmm-subgroup__heading small { color: var(--npmm-panel-muted, #6d717a); font-size: 12px; font-weight: 450; line-height: 1.45; } .npmm-subgroup__links { display: grid; gap: 5px; } .npmm-subitem { position: relative; min-width: 0; } .npmm-subitem__link { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 74px; padding: 12px; border: 1px solid var(--npmm-card-border, #eceef2); border-radius: var(--npmm-card-radius, 17px); background: var(--npmm-card-bg, #f7f8fa); color: var(--npmm-panel-text, #17181b); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background-color 220ms ease, border-color 220ms ease, box-shadow 260ms ease, transform 260ms cubic-bezier(.22, 1, .36, 1); } .npmm-subitem__link:hover, .npmm-subitem__link:focus-visible, .npmm-subitem.is-open > .npmm-subitem__link { border-color: color-mix(in srgb, var(--npmm-accent, #0a64ff) 18%, var(--npmm-card-border, #eceef2)); background: var(--npmm-card-hover, #eef3ff); box-shadow: 0 10px 24px rgba(15, 23, 42, .055); outline: 0; transform: translateY(-1px); } .npmm-subitem--simple > .npmm-subitem__link, .npmm-submenu--simple .npmm-subitem__link { min-height: 44px; padding: 8px 10px; border-color: transparent; background: transparent; box-shadow: none; } .npmm-submenu--simple .npmm-subitem__icon { width: 28px; height: 28px; border-radius: 9px; } /* Submenu-card media (2.6.0) Images are contained inside the existing submenu card and never alter the hierarchy/grid placement. The card may grow vertically for top/bottom media. */ .npmm-subitem--has-media { --npmm-subitem-media-size: 68px; --npmm-subitem-media-icon-size: 38px; --npmm-subitem-media-block-height: 112px; } .npmm-subitem--media-size-sm { --npmm-subitem-media-size: 48px; --npmm-subitem-media-icon-size: 30px; --npmm-subitem-media-block-height: 78px; } .npmm-subitem--media-size-md { --npmm-subitem-media-size: 68px; --npmm-subitem-media-icon-size: 40px; --npmm-subitem-media-block-height: 112px; } .npmm-subitem--media-size-lg { --npmm-subitem-media-size: 92px; --npmm-subitem-media-icon-size: 54px; --npmm-subitem-media-block-height: 148px; } .npmm-subitem--media-size-xl { --npmm-subitem-media-size: 120px; --npmm-subitem-media-icon-size: 72px; --npmm-subitem-media-block-height: 184px; } .npmm-subitem__media { position: relative; z-index: 2; display: block; flex: 0 0 var(--npmm-subitem-media-size); width: var(--npmm-subitem-media-size); height: var(--npmm-subitem-media-size); border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--npmm-card-bg, #f7f8fa) 72%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--npmm-card-border, #eceef2) 76%, transparent); } .npmm-subitem__media img { display: block; width: 100%; height: 100%; object-fit: var(--npmm-subitem-media-fit, cover); object-position: var(--npmm-subitem-media-focus, center); transition: transform var(--npmm-hover-duration, 320ms) var(--npmm-easing, cubic-bezier(.22,1,.36,1)); } .npmm-subitem--media-icon .npmm-subitem__media { flex-basis: var(--npmm-subitem-media-icon-size); width: var(--npmm-subitem-media-icon-size); height: var(--npmm-subitem-media-icon-size); border-radius: clamp(9px, calc(var(--npmm-subitem-media-icon-size) * .28), 16px); } .npmm-subitem--media-left > .npmm-subitem__link, .npmm-subitem--media-right > .npmm-subitem__link { align-items: center; } .npmm-subitem--media-right .npmm-subitem__media { margin-left: auto; } .npmm-subitem--media-top > .npmm-subitem__link, .npmm-subitem--media-bottom > .npmm-subitem__link { flex-direction: column; align-items: stretch; gap: 10px; min-height: 0; } .npmm-subitem--media-top .npmm-subitem__media, .npmm-subitem--media-bottom .npmm-subitem__media { flex: 0 0 auto; width: 100%; height: var(--npmm-subitem-media-block-height); border-radius: 12px; } .npmm-subitem--media-top .npmm-subitem__arrow, .npmm-subitem--media-bottom .npmm-subitem__arrow { position: absolute; top: 14px; right: 14px; z-index: 4; padding: 5px; border-radius: 999px; background: color-mix(in srgb, #fff 84%, transparent); backdrop-filter: blur(8px); } .npmm-subitem--media-background > .npmm-subitem__link { isolation: isolate; min-height: 112px; align-items: flex-end; color: #fff; background: #111827; } .npmm-subitem--media-background .npmm-subitem__media--background { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; background: transparent; box-shadow: none; } .npmm-subitem--media-background .npmm-subitem__media--background::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,15,30,.04), color-mix(in srgb, #08101f var(--npmm-subitem-media-overlay, 44%), transparent)); pointer-events: none; } .npmm-subitem--media-background :is(.npmm-subitem__copy,.npmm-subitem__icon,.npmm-subitem__arrow) { z-index: 3; } .npmm-subitem--media-background .npmm-subitem__description { color: rgba(255,255,255,.82); } @media (max-width: 980px) { .npmm-subitem--media-size-xl { --npmm-subitem-media-size: 96px; --npmm-subitem-media-icon-size: 62px; --npmm-subitem-media-block-height: 154px; } .npmm-subitem--media-size-lg { --npmm-subitem-media-size: 80px; --npmm-subitem-media-icon-size: 50px; --npmm-subitem-media-block-height: 132px; } } .npmm-subitem__copy { display: grid; gap: 3px; min-width: 0; flex: 1 1 auto; } .npmm-subitem__copy strong { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; } .npmm-subitem__copy strong em { display: inline-flex; padding: 2px 6px; border-radius: 999px; background: color-mix(in srgb, var(--npmm-accent, #0a64ff) 10%, transparent); color: var(--npmm-accent, #0a64ff); font-size: 8px; font-style: normal; letter-spacing: .05em; text-transform: uppercase; } .npmm-subitem__description { color: var(--npmm-panel-muted, #6d717a); font-size: 11.5px; font-weight: 450; line-height: 1.42; } .npmm-subitem__eyebrow { color: var(--npmm-accent, #0a64ff); font-size: 8px; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; } .npmm-subitem__arrow { display: inline-flex; flex: 0 0 auto; color: color-mix(in srgb, var(--npmm-panel-muted, #6d717a) 70%, transparent); font-size: 13px; transition: transform 240ms ease, color 240ms ease; } .npmm-subitem__link:hover .npmm-subitem__arrow, .npmm-subitem__link:focus-visible .npmm-subitem__arrow { color: var(--npmm-accent, #0a64ff); transform: translateX(2px); } .npmm-subitem__link--button { justify-content: center; min-height: 48px; border-color: transparent; background: var(--npmm-button-bg, var(--npmm-accent, #0a64ff)); color: var(--npmm-button-text, #fff); box-shadow: 0 12px 28px color-mix(in srgb, var(--npmm-button-bg, var(--npmm-accent, #0a64ff)) 20%, transparent); } .npmm-subitem__link--button:hover, .npmm-subitem__link--button:focus-visible { background: var(--npmm-button-hover-bg, color-mix(in srgb, var(--npmm-button-bg, var(--npmm-accent, #0a64ff)) 84%, #000)); color: var(--npmm-button-text, #fff); } /* Nested desktop flyouts are aligned to the triggering row and flip in JS if the right viewport edge is too close. */ .npmm-flyout { position: absolute; z-index: 6; top: -8px; left: calc(100% + 10px); width: min(380px, calc(100vw - 28px)); padding: 8px; border: 1px solid var(--npmm-panel-border, #e5e7eb); border-radius: 18px; background: color-mix(in srgb, var(--npmm-panel-bg, #fff) 96%, transparent); box-shadow: 0 22px 58px rgba(15, 23, 42, .16); -webkit-backdrop-filter: blur(var(--npmm-panel-blur, 18px)); backdrop-filter: blur(var(--npmm-panel-blur, 18px)); opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(-7px, 0, 0) scale(.985); transform-origin: 0 0; transition: opacity 220ms ease, transform 300ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 300ms; } .npmm-subitem.is-open > .npmm-flyout, .npmm-subitem:hover > .npmm-flyout, .npmm-subitem:focus-within > .npmm-flyout { opacity: 1; visibility: visible; pointer-events: auto; transform: translate3d(0, 0, 0) scale(1); transition-delay: 0s; } .npmm-subitem.is-flyout-left > .npmm-flyout { right: calc(100% + 10px); left: auto; transform-origin: 100% 0; } .npmm-flyout__inner { display: grid; gap: 5px; } /* Sidebar and tabbed enterprise presets. */ .npmm-hierarchy { display: grid; gap: var(--npmm-item-gap, var(--npmm-panel-gap, 14px)); align-items: stretch; } .npmm-hierarchy--sidebar { grid-template-columns: minmax(205px, .75fr) minmax(0, 2fr) minmax(250px, .95fr); } .npmm-hierarchy--tabs { grid-template-columns: minmax(0, 1fr) minmax(260px, .36fr); } .npmm-hierarchy--tabs .npmm-hierarchy__controls { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 7px; padding-bottom: 4px; border-bottom: 1px solid var(--npmm-panel-border, #e5e7eb); } .npmm-hierarchy__controls { display: grid; align-content: start; gap: 6px; } .npmm-hierarchy__control { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 66px; padding: 10px; border: 1px solid transparent; border-radius: 15px; background: transparent; color: var(--npmm-panel-text, #17181b); font: inherit; text-align: left; cursor: pointer; transition: background-color 220ms ease, border-color 220ms ease, transform 260ms cubic-bezier(.22, 1, .36, 1); } .npmm-hierarchy__control > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; flex: 1 1 auto; } .npmm-hierarchy__control strong { font-size: 13px; font-weight: 720; letter-spacing: -.015em; } .npmm-hierarchy__control small { color: var(--npmm-panel-muted, #6d717a); font-size: 10.5px; font-weight: 450; line-height: 1.35; } .npmm-hierarchy__control > i { display: inline-flex; font-size: 13px; color: var(--npmm-panel-muted, #6d717a); } .npmm-hierarchy__control:hover, .npmm-hierarchy__control:focus-visible, .npmm-hierarchy__control.is-active { border-color: color-mix(in srgb, var(--npmm-accent, #0a64ff) 15%, var(--npmm-panel-border, #e5e7eb)); background: var(--npmm-card-hover, #eef3ff); outline: 0; } .npmm-hierarchy__control.is-active > i { color: var(--npmm-accent, #0a64ff); transform: translateX(2px); } .npmm-hierarchy--tabs .npmm-hierarchy__control { width: auto; min-height: 42px; padding: 7px 12px; border-radius: 999px; } .npmm-hierarchy--tabs .npmm-hierarchy__control-icon { width: 28px; height: 28px; border-radius: 999px; } .npmm-hierarchy--tabs .npmm-hierarchy__control small, .npmm-hierarchy--tabs .npmm-hierarchy__control > i { display: none; } .npmm-hierarchy__content { position: relative; min-width: 0; } .npmm-hierarchy__pane { display: grid; gap: 12px; animation: npmm-pane-in 320ms cubic-bezier(.22, 1, .36, 1) both; } .npmm-hierarchy__pane[hidden] { display: none !important; } .npmm-hierarchy__pane-heading { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); gap: 20px; align-items: end; padding: 3px 3px 0; } .npmm-hierarchy__pane-heading > div { display: grid; gap: 3px; } .npmm-hierarchy__pane-heading small { color: var(--npmm-accent, #0a64ff); font-size: 8px; font-weight: 780; letter-spacing: .08em; text-transform: uppercase; } .npmm-hierarchy__pane-heading strong { font-size: 20px; font-weight: 740; letter-spacing: -.035em; } .npmm-hierarchy__pane-heading p { margin: 0; color: var(--npmm-panel-muted, #6d717a); font-size: 11.5px; line-height: 1.5; } .npmm-hierarchy__links { display: grid; grid-template-columns: repeat(var(--npmm-submenu-columns, 3), minmax(0, 1fr)); gap: var(--npmm-item-gap, var(--npmm-panel-gap, 14px)); } .npmm-hierarchy__featured { display: grid; align-content: stretch; min-width: 0; } .npmm-featured-node { --npmm-featured-min-height: 170px; --npmm-featured-overlay: .44; --npmm-featured-fit: cover; --npmm-featured-position: center; --npmm-featured-media-height: 148px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 46%); min-height: var(--npmm-featured-min-height); border: 1px solid color-mix(in srgb, var(--npmm-accent, #0a64ff) 18%, var(--npmm-panel-border, #e5e7eb)); border-radius: max(18px, var(--npmm-card-radius, 17px)); overflow: hidden; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--npmm-accent, #0a64ff) 25%, transparent), transparent 42%), linear-gradient(145deg, color-mix(in srgb, var(--npmm-accent, #0a64ff) 4%, #fff), color-mix(in srgb, var(--npmm-accent, #0a64ff) 14%, #fff)); color: var(--npmm-panel-text, #17181b); text-decoration: none; isolation: isolate; transition: transform 320ms cubic-bezier(.22, 1, .36, 1), box-shadow 320ms ease, border-color 300ms ease; } .npmm-featured-node--size-large { --npmm-featured-min-height: 220px; --npmm-featured-media-height: 184px; } .npmm-featured-node--size-xl { --npmm-featured-min-height: 285px; --npmm-featured-media-height: 222px; } .npmm-featured-node:hover, .npmm-featured-node:focus-visible { outline: 0; transform: translateY(-2px); border-color: color-mix(in srgb, var(--npmm-accent, #0a64ff) 30%, var(--npmm-panel-border, #e5e7eb)); box-shadow: 0 20px 45px color-mix(in srgb, var(--npmm-accent, #0a64ff) 14%, transparent); } .npmm-featured-node__copy { position: relative; z-index: 2; display: grid; align-content: start; align-self: start; gap: 7px; min-width: 0; padding: 22px; } .npmm-featured-node__copy > small { color: var(--npmm-accent, #0a64ff); font-size: 8px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; } .npmm-featured-node__copy > strong { font-size: clamp(19px, 1.8vw, 28px); line-height: 1.03; letter-spacing: -.045em; } .npmm-featured-node__copy > span { color: var(--npmm-panel-muted, #6d717a); font-size: 11.5px; line-height: 1.45; } .npmm-featured-node__copy > em { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--npmm-accent, #0a64ff); font-size: 11px; font-style: normal; font-weight: 720; } .npmm-featured-node__visual { position: relative; z-index: 0; display: grid; min-width: 0; min-height: 0; place-items: center; overflow: hidden; color: color-mix(in srgb, var(--npmm-accent, #0a64ff) 55%, transparent); } .npmm-featured-node__visual img { display: block; width: 100%; height: 100%; object-fit: var(--npmm-featured-fit, cover); object-position: var(--npmm-featured-position, center); } .npmm-featured-node__visual--icon { background: radial-gradient(circle, color-mix(in srgb, var(--npmm-accent, #0a64ff) 15%, transparent), transparent 68%); } .npmm-featured-node__visual svg { width: 44%; height: 44%; } /* Full-bleed image: the selected media fills the entire card. */ .npmm-featured-node--layout-cover { display: block; background: #0d1730; color: #fff; } .npmm-featured-node--layout-cover::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgb(7 13 28 / var(--npmm-featured-overlay)) 0%, rgb(7 13 28 / calc(var(--npmm-featured-overlay) * .78)) 48%, rgb(7 13 28 / calc(var(--npmm-featured-overlay) * .12)) 100%), linear-gradient(0deg, rgb(7 13 28 / calc(var(--npmm-featured-overlay) * .72)) 0%, transparent 62%); pointer-events: none; } .npmm-featured-node--layout-cover .npmm-featured-node__visual { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 1; } .npmm-featured-node--layout-cover .npmm-featured-node__copy { width: min(80%, 460px); min-height: var(--npmm-featured-min-height); align-content: start; align-self: start; color: #fff; } .npmm-featured-node--layout-cover .npmm-featured-node__copy > small, .npmm-featured-node--layout-cover .npmm-featured-node__copy > em { color: #fff; } .npmm-featured-node--layout-cover .npmm-featured-node__copy > span { color: rgb(255 255 255 / .78); } /* Editorial card: wide image first, copy below. */ .npmm-featured-node--layout-top { grid-template-columns: 1fr; /* Keep the visual and copy anchored at the top even when a sibling column makes the featured card taller. Any extra height becomes quiet space below the copy instead of pushing the heading toward the bottom edge. */ grid-template-rows: auto auto 1fr; align-content: stretch; } .npmm-featured-node--layout-top .npmm-featured-node__visual { grid-row: 1; height: var(--npmm-featured-media-height); } .npmm-featured-node--layout-top .npmm-featured-node__copy { grid-row: 2; align-content: start; align-self: start; padding: 17px 19px 19px; } @keyframes npmm-pane-in { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } /* Mobile turns every nested structure into an accessible accordion. */ .npmm-menu.npmm-is-mobile .npmm-panel__motion { width: 100% !important; height: auto !important; margin-left: 0 !important; overflow: visible !important; transform: none !important; } .npmm-menu.npmm-is-mobile .npmm-panel__effects { display: none; } .npmm-menu.npmm-is-mobile .npmm-submenu__grid, .npmm-menu.npmm-is-mobile .npmm-hierarchy, .npmm-menu.npmm-is-mobile .npmm-hierarchy--sidebar, .npmm-menu.npmm-is-mobile .npmm-hierarchy--tabs { display: grid; grid-template-columns: 1fr; gap: 7px; } .npmm-menu.npmm-is-mobile .npmm-hierarchy__controls { display: grid; grid-column: auto; gap: 6px; padding: 0; border: 0; } .npmm-menu.npmm-is-mobile .npmm-hierarchy__control, .npmm-menu.npmm-is-mobile .npmm-hierarchy--tabs .npmm-hierarchy__control { width: 100%; min-height: 54px; padding: 9px; border-radius: 13px; } .npmm-menu.npmm-is-mobile .npmm-hierarchy--tabs .npmm-hierarchy__control small, .npmm-menu.npmm-is-mobile .npmm-hierarchy--tabs .npmm-hierarchy__control > i { display: inline-flex; } .npmm-menu.npmm-is-mobile .npmm-hierarchy__content { padding-top: 2px; } .npmm-menu.npmm-is-mobile .npmm-hierarchy__pane-heading { grid-template-columns: 1fr; gap: 5px; padding: 8px 4px 3px; } .npmm-menu.npmm-is-mobile .npmm-hierarchy__links { grid-template-columns: 1fr; gap: 6px; } .npmm-menu.npmm-is-mobile :is(.npmm-hierarchy__featured, .npmm-hierarchy__info) { margin-top: 3px; } .npmm-menu.npmm-is-mobile .npmm-featured-node { --npmm-featured-min-height: 190px; --npmm-featured-media-height: 118px; grid-template-columns: 1fr; } .npmm-menu.npmm-is-mobile .npmm-featured-node--size-large { --npmm-featured-min-height: 220px; --npmm-featured-media-height: 142px; } .npmm-menu.npmm-is-mobile .npmm-featured-node--size-xl { --npmm-featured-min-height: 250px; --npmm-featured-media-height: 166px; } .npmm-menu.npmm-is-mobile .npmm-featured-node--layout-split { grid-template-rows: auto auto 1fr; align-content: stretch; } .npmm-menu.npmm-is-mobile .npmm-featured-node--layout-split .npmm-featured-node__visual { grid-row: 1; height: var(--npmm-featured-media-height); } .npmm-menu.npmm-is-mobile .npmm-featured-node--layout-split .npmm-featured-node__copy { grid-row: 2; padding: 17px; } .npmm-menu.npmm-is-mobile .npmm-featured-node--layout-cover .npmm-featured-node__copy { width: 88%; padding: 20px; } .npmm-menu.npmm-is-mobile .npmm-subitem__link { min-height: 60px; padding: 10px; } .npmm-menu.npmm-is-mobile .npmm-subitem__trigger .npmm-subitem__arrow { transform: rotate(90deg); } .npmm-menu.npmm-is-mobile .npmm-subitem.is-open > .npmm-subitem__trigger .npmm-subitem__arrow { transform: rotate(-90deg); } .npmm-menu.npmm-is-mobile .npmm-flyout { position: static; width: 100%; max-height: 0; padding: 0 0 0 14px; border: 0; border-radius: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: hidden; opacity: 1; visibility: visible; pointer-events: none; transform: none; transition: max-height 420ms cubic-bezier(.22, 1, .36, 1), padding-top 260ms ease; } .npmm-menu.npmm-is-mobile .npmm-subitem.is-open > .npmm-flyout { max-height: 2400px; padding-top: 6px; pointer-events: auto; } @media (max-width: 1120px) and (min-width: 981px) { .npmm-hierarchy--sidebar { grid-template-columns: minmax(190px, .75fr) minmax(0, 2fr); } .npmm-hierarchy--sidebar :is(.npmm-hierarchy__featured, .npmm-hierarchy__info) { grid-column: 1 / -1; min-height: 180px; } .npmm-hierarchy__links { grid-template-columns: repeat(min(var(--npmm-submenu-columns, 3), 2), minmax(0, 1fr)); } } /* ================================================================ Nordpaa Mega Menu 2.2 — reusable hover presets and layout variants ================================================================ */ /* Presets only change paint and transforms. No padding, width, height or border-width is modified, so hover cannot reflow the menu or create scroll. */ .npmm-hover-default--none, .npmm-hover--none, .npmm-hover-block--none, .npmm-hover-node--none { --npmm-hover-transform: none; --npmm-hover-shadow: none; --npmm-hover-bg: var(--npmm-card-hover, #eef3ff); --npmm-hover-border-color: var(--npmm-card-border, #e4eaf3); --npmm-hover-icon-transform: none; --npmm-hover-arrow-transform: none; --npmm-hover-media-transform: none; --npmm-hover-background-image: none; } .npmm-hover-default--soft-lift, .npmm-hover--soft-lift, .npmm-hover-block--soft-lift, .npmm-hover-node--soft-lift { --npmm-hover-transform: translate3d(0,-2px,0); --npmm-hover-shadow: 0 16px 36px rgba(15,23,42,.12); --npmm-hover-bg: var(--npmm-card-hover, #eef3ff); --npmm-hover-border-color: color-mix(in srgb, var(--npmm-accent, #0a64ff) 20%, var(--npmm-card-border, #e4eaf3)); --npmm-hover-icon-transform: translate3d(0,-2px,0) rotate(-2deg) scale(1.035); --npmm-hover-arrow-transform: translate3d(3px,-2px,0); --npmm-hover-media-transform: scale(1.025); --npmm-hover-background-image: none; } .npmm-hover-default--accent-wash, .npmm-hover--accent-wash, .npmm-hover-block--accent-wash, .npmm-hover-node--accent-wash { --npmm-hover-transform: none; --npmm-hover-shadow: inset 0 0 0 1px color-mix(in srgb, var(--npmm-accent, #0a64ff) 12%, transparent), 0 11px 28px rgba(15,23,42,.075); --npmm-hover-bg: color-mix(in srgb, var(--npmm-accent, #0a64ff) 9%, var(--npmm-panel-bg, #fff)); --npmm-hover-border-color: color-mix(in srgb, var(--npmm-accent, #0a64ff) 26%, var(--npmm-card-border, #e4eaf3)); --npmm-hover-icon-transform: scale(1.055); --npmm-hover-arrow-transform: translate3d(2px,-1px,0); --npmm-hover-media-transform: scale(1.018); --npmm-hover-background-image: linear-gradient(115deg, color-mix(in srgb, var(--npmm-accent, #0a64ff) 9%, transparent), transparent 66%); } .npmm-hover-default--border-glow, .npmm-hover--border-glow, .npmm-hover-block--border-glow, .npmm-hover-node--border-glow { --npmm-hover-transform: none; --npmm-hover-shadow: 0 0 0 1px color-mix(in srgb, var(--npmm-accent, #0a64ff) 35%, transparent), 0 14px 38px color-mix(in srgb, var(--npmm-accent, #0a64ff) 16%, transparent); --npmm-hover-bg: var(--npmm-card-bg, #f7f8fa); --npmm-hover-border-color: color-mix(in srgb, var(--npmm-accent, #0a64ff) 48%, var(--npmm-card-border, #e4eaf3)); --npmm-hover-icon-transform: scale(1.04); --npmm-hover-arrow-transform: translate3d(2px,-1px,0); --npmm-hover-media-transform: none; --npmm-hover-background-image: none; } .npmm-hover-default--icon-drift, .npmm-hover--icon-drift, .npmm-hover-block--icon-drift, .npmm-hover-node--icon-drift { --npmm-hover-transform: none; --npmm-hover-shadow: 0 10px 27px rgba(15,23,42,.075); --npmm-hover-bg: var(--npmm-card-hover, #eef3ff); --npmm-hover-border-color: color-mix(in srgb, var(--npmm-accent, #0a64ff) 17%, var(--npmm-card-border, #e4eaf3)); --npmm-hover-icon-transform: translate3d(2px,-3px,0) rotate(6deg) scale(1.065); --npmm-hover-arrow-transform: none; --npmm-hover-media-transform: none; --npmm-hover-background-image: none; } .npmm-hover-default--arrow-flow, .npmm-hover--arrow-flow, .npmm-hover-block--arrow-flow, .npmm-hover-node--arrow-flow { --npmm-hover-transform: none; --npmm-hover-shadow: 0 10px 26px rgba(15,23,42,.065); --npmm-hover-bg: var(--npmm-card-hover, #eef3ff); --npmm-hover-border-color: color-mix(in srgb, var(--npmm-accent, #0a64ff) 16%, var(--npmm-card-border, #e4eaf3)); --npmm-hover-icon-transform: none; --npmm-hover-arrow-transform: translate3d(5px,-2px,0); --npmm-hover-media-transform: none; --npmm-hover-background-image: none; } .npmm-hover-default--soft-zoom, .npmm-hover--soft-zoom, .npmm-hover-block--soft-zoom, .npmm-hover-node--soft-zoom { --npmm-hover-transform: none; --npmm-hover-shadow: 0 17px 40px rgba(15,23,42,.12); --npmm-hover-bg: var(--npmm-card-hover, #eef3ff); --npmm-hover-border-color: color-mix(in srgb, var(--npmm-accent, #0a64ff) 20%, var(--npmm-card-border, #e4eaf3)); --npmm-hover-icon-transform: scale(1.045); --npmm-hover-arrow-transform: translate3d(2px,-1px,0); --npmm-hover-media-transform: scale(1.04); --npmm-hover-background-image: none; } .npmm-hover-default--magnetic, .npmm-hover--magnetic, .npmm-hover-block--magnetic, .npmm-hover-node--magnetic { --npmm-hover-transform: perspective(850px) rotateX(.8deg) rotateY(-1deg) translate3d(0,-1px,0); --npmm-hover-shadow: -3px 17px 40px rgba(15,23,42,.13); --npmm-hover-bg: var(--npmm-card-hover, #eef3ff); --npmm-hover-border-color: color-mix(in srgb, var(--npmm-accent, #0a64ff) 24%, var(--npmm-card-border, #e4eaf3)); --npmm-hover-icon-transform: translate3d(2px,-2px,0) rotate(3deg) scale(1.04); --npmm-hover-arrow-transform: translate3d(3px,-2px,0); --npmm-hover-media-transform: scale(1.028); --npmm-hover-background-image: linear-gradient(130deg, rgba(255,255,255,.34), transparent 58%); } .npmm-hover-default--spotlight, .npmm-hover--spotlight, .npmm-hover-block--spotlight, .npmm-hover-node--spotlight { --npmm-hover-transform: none; --npmm-hover-shadow: 0 0 0 1px color-mix(in srgb, var(--npmm-accent, #0a64ff) 22%, transparent), 0 19px 44px color-mix(in srgb, var(--npmm-accent, #0a64ff) 14%, transparent); --npmm-hover-bg: color-mix(in srgb, var(--npmm-accent, #0a64ff) 5%, var(--npmm-panel-bg, #fff)); --npmm-hover-border-color: color-mix(in srgb, var(--npmm-accent, #0a64ff) 34%, var(--npmm-card-border, #e4eaf3)); --npmm-hover-icon-transform: scale(1.065); --npmm-hover-arrow-transform: translate3d(2px,-1px,0); --npmm-hover-media-transform: scale(1.022); --npmm-hover-background-image: radial-gradient(circle at 28% 12%, color-mix(in srgb, var(--npmm-accent, #0a64ff) 18%, transparent), transparent 56%); } .npmm-menu :is( .npmm-card, .npmm-action, .npmm-promo, .npmm-post, .npmm-subitem__link, .npmm-featured-node, .npmm-hierarchy__control ) { transform-origin: center; backface-visibility: hidden; will-change: transform; transition: transform var(--npmm-hover-duration, 320ms) var(--npmm-easing, cubic-bezier(.22,1,.36,1)), background-color var(--npmm-hover-duration, 320ms) ease, background-image var(--npmm-hover-duration, 320ms) ease, border-color var(--npmm-hover-duration, 320ms) ease, box-shadow var(--npmm-hover-duration, 320ms) ease; } .npmm-menu :is( .npmm-card, .npmm-action, .npmm-promo, .npmm-post, .npmm-subitem__link, .npmm-featured-node, .npmm-hierarchy__control ):is(:hover,:focus-visible) { outline: 0; transform: var(--npmm-hover-transform, none); border-color: var(--npmm-hover-border-color, var(--npmm-card-border, #e4eaf3)); background-color: var(--npmm-hover-bg, var(--npmm-card-hover, #eef3ff)); background-image: var(--npmm-hover-background-image, none); box-shadow: var(--npmm-hover-shadow, 0 12px 30px rgba(15,23,42,.09)); } /* CTA links keep their configured button color while using the chosen motion. */ .npmm-menu .npmm-menu__link--button { transition: transform var(--npmm-hover-duration, 320ms) var(--npmm-easing, cubic-bezier(.22,1,.36,1)), background-color var(--npmm-hover-duration, 320ms) ease, box-shadow var(--npmm-hover-duration, 320ms) ease; } .npmm-menu .npmm-menu__link--button:is(:hover,:focus-visible) { transform: var(--npmm-hover-transform, translate3d(0,-1px,0)); box-shadow: var(--npmm-hover-shadow, 0 12px 28px rgba(10,100,255,.22)); } .npmm-menu :is( .npmm-card__icon, .npmm-subitem__icon, .npmm-hierarchy__control-icon, .npmm-menu__top-icon, .npmm-promo__visual, .npmm-action > svg:first-child ) { transform-origin: center; transition: transform var(--npmm-hover-duration, 320ms) var(--npmm-easing, cubic-bezier(.22,1,.36,1)); } .npmm-menu :is( .npmm-card, .npmm-action, .npmm-promo, .npmm-subitem__link, .npmm-hierarchy__control, .npmm-menu__trigger, .npmm-menu__link ):is(:hover,:focus-visible) :is( .npmm-card__icon, .npmm-subitem__icon, .npmm-hierarchy__control-icon, .npmm-menu__top-icon, .npmm-promo__visual, .npmm-action > svg:first-child ) { transform: var(--npmm-hover-icon-transform, none); } .npmm-menu :is( .npmm-card__arrow, .npmm-subitem__arrow, .npmm-post__arrow, .npmm-menu__button-arrow, .npmm-menu__chevron, .npmm-hierarchy__control > i, .npmm-promo em svg, .npmm-featured-node__copy em svg ) { transition: transform var(--npmm-hover-duration, 320ms) var(--npmm-easing, cubic-bezier(.22,1,.36,1)); } .npmm-menu :is( .npmm-card, .npmm-promo, .npmm-post, .npmm-subitem__link, .npmm-hierarchy__control, .npmm-menu__trigger, .npmm-menu__link, .npmm-featured-node ):is(:hover,:focus-visible) :is( .npmm-card__arrow, .npmm-subitem__arrow, .npmm-post__arrow, .npmm-menu__button-arrow, .npmm-menu__chevron, .npmm-hierarchy__control > i, .npmm-promo em svg, .npmm-featured-node__copy em svg ) { transform: var(--npmm-hover-arrow-transform, none); } .npmm-menu :is( .npmm-media img, .npmm-media video, .npmm-promo__visual img, .npmm-featured-node__visual img, .npmm-post__image img, .npmm-subitem__media img ) { transition: transform var(--npmm-hover-duration, 320ms) var(--npmm-easing, cubic-bezier(.22,1,.36,1)); } .npmm-menu :is(.npmm-card,.npmm-promo,.npmm-featured-node,.npmm-post):is(:hover,:focus-visible) :is( .npmm-media img, .npmm-media video, .npmm-promo__visual img, .npmm-featured-node__visual img, .npmm-post__image img, .npmm-subitem__media img ) { transform: var(--npmm-hover-media-transform, none); } /* Distinct visual treatments for the new free-grid layout presets. */ .npmm-panel--preset-company-directory .npmm-card { min-height: 76px; box-shadow: 0 4px 14px rgba(15,23,42,.035); } .npmm-panel--preset-company-spotlight .npmm-block:first-child .npmm-card, .npmm-panel--preset-center-feature .npmm-block:first-child .npmm-card { align-items: flex-end; padding: clamp(20px,2vw,30px); background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--npmm-accent, #0a64ff) 22%, transparent), transparent 45%), linear-gradient(145deg, color-mix(in srgb, var(--npmm-accent, #0a64ff) 5%, #fff), color-mix(in srgb, var(--npmm-accent, #0a64ff) 13%, #fff)); } .npmm-panel--preset-editorial-links .npmm-card, .npmm-panel--preset-minimal-list .npmm-card { border-width: 0 0 1px; border-radius: 0; background: transparent; box-shadow: none; } .npmm-panel--preset-editorial-links .npmm-card { min-height: 76px; padding-inline: 4px; } .npmm-panel--preset-minimal-list .npmm-card { min-height: 52px; padding: 9px 2px; } .npmm-panel--preset-compact-matrix .npmm-card { min-height: 58px; padding: 10px; } .npmm-panel--preset-compact-matrix .npmm-card__description { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .npmm-panel--preset-horizontal-directory .npmm-card { min-height: 78px; padding-inline: 18px; } .npmm-panel--preset-hero-banner-grid .npmm-block:first-child .npmm-card { min-height: 98px; padding-inline: clamp(20px,3vw,36px); background: linear-gradient(120deg, color-mix(in srgb, var(--npmm-accent, #0a64ff) 12%, #fff), #fff 72%); } /* Additional submenu presets. */ .npmm-submenu--centered .npmm-submenu__grid { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 720px; margin-inline: auto; } .npmm-submenu--centered .npmm-subitem__link { grid-template-columns: 1fr; justify-items: center; min-height: 112px; text-align: center; } .npmm-submenu--centered .npmm-subitem__icon { width: 42px; height: 42px; } .npmm-submenu--centered .npmm-subitem__arrow { display: none; } .npmm-submenu--legal .npmm-submenu__grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; } .npmm-submenu--legal .npmm-subitem__link { grid-template-columns: 30px minmax(0,1fr) 14px; min-height: 58px; padding: 9px; border-color: color-mix(in srgb, var(--npmm-panel-text, #17181b) 7%, transparent); background: color-mix(in srgb, var(--npmm-panel-text, #17181b) 2.4%, transparent); box-shadow: none; } .npmm-submenu--legal .npmm-subitem__icon { width: 30px; height: 30px; border-radius: 9px; } .npmm-submenu--legal .npmm-subitem__description { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .npmm-submenu--nested .npmm-submenu__grid { grid-template-columns: minmax(280px,1fr); max-width: 430px; } .npmm-submenu--spotlight .npmm-submenu__grid { grid-template-columns: minmax(0,1fr) minmax(280px,.88fr); align-items: stretch; } .npmm-submenu--spotlight .npmm-subitem { grid-column: 1; } .npmm-submenu--spotlight .npmm-featured-node { grid-column: 2; grid-row: 1 / span 4; min-height: 100%; } /* Any paint created by hover is clipped to the component itself rather than expanding the panel's scroll area. Shadows remain visible outside. */ .npmm-menu :is(.npmm-card,.npmm-promo,.npmm-featured-node,.npmm-subitem__link,.npmm-post) { isolation: isolate; } @media (max-width: 980px) { .npmm-menu.npmm-is-mobile :is( .npmm-card, .npmm-action, .npmm-promo, .npmm-post, .npmm-subitem__link, .npmm-featured-node, .npmm-hierarchy__control, .npmm-menu__link--button ):is(:hover,:focus-visible) { transform: none; } .npmm-menu.npmm-is-mobile .npmm-submenu--centered .npmm-submenu__grid, .npmm-menu.npmm-is-mobile .npmm-submenu--legal .npmm-submenu__grid, .npmm-menu.npmm-is-mobile .npmm-submenu--spotlight .npmm-submenu__grid { grid-template-columns: 1fr; max-width: none; } .npmm-menu.npmm-is-mobile .npmm-submenu--spotlight .npmm-featured-node { grid-column: 1; grid-row: auto; } .npmm-menu.npmm-is-mobile .npmm-submenu--centered .npmm-subitem__link { grid-template-columns: 38px minmax(0,1fr) 18px; justify-items: stretch; min-height: 60px; text-align: left; } .npmm-menu.npmm-is-mobile .npmm-submenu--centered .npmm-subitem__arrow { display: inline-flex; } } @media (prefers-reduced-motion: reduce) { .npmm-menu.npmm-respect-motion :is( .npmm-card, .npmm-action, .npmm-promo, .npmm-post, .npmm-subitem__link, .npmm-featured-node, .npmm-hierarchy__control, .npmm-menu__link--button ) { transition-duration: .01ms !important; } .npmm-menu.npmm-respect-motion :is( .npmm-card, .npmm-action, .npmm-promo, .npmm-post, .npmm-subitem__link, .npmm-featured-node, .npmm-hierarchy__control, .npmm-menu__link--button ):is(:hover,:focus-visible) { transform: none !important; } } /* Top-level navigation also inherits the selected visual motion preset. */ .npmm-menu__item[class*="npmm-hover--"] > :is(.npmm-menu__trigger, .npmm-menu__link) { transform-origin: center; backface-visibility: hidden; transition: transform var(--npmm-hover-duration, 320ms) var(--npmm-easing, cubic-bezier(.22,1,.36,1)), box-shadow var(--npmm-hover-duration, 320ms) ease, background-color var(--npmm-hover-duration, 320ms) ease; } .npmm-menu__item[class*="npmm-hover--"] > :is(.npmm-menu__trigger, .npmm-menu__link):is(:hover,:focus-visible) { transform: var(--npmm-hover-transform, none); box-shadow: var(--npmm-hover-shadow, none); } .npmm-menu__item.npmm-hover--accent-wash > :is(.npmm-menu__trigger, .npmm-menu__link):is(:hover,:focus-visible), .npmm-menu__item.npmm-hover--spotlight > :is(.npmm-menu__trigger, .npmm-menu__link):is(:hover,:focus-visible) { background-color: color-mix(in srgb, var(--npmm-accent, #0a64ff) 10%, transparent); } @media (prefers-reduced-motion: reduce) { .npmm-menu.npmm-respect-motion .npmm-menu__item[class*="npmm-hover--"] > :is(.npmm-menu__trigger, .npmm-menu__link):is(:hover,:focus-visible) { transform: none !important; } } /* -------------------------------------------------------------------------- * Podcast showcase (2.3.0) * -------------------------------------------------------------------------- */ .npmm-block--podcast { min-height: 0; } .npmm-block--podcast { container-type: inline-size; container-name: npmm-podcast-block; } .npmm-block--podcast > .npmm-podcast { height: 100%; } .npmm-podcast { display: grid; grid-template-columns: minmax(238px, .82fr) minmax(0, 1.82fr); gap: var(--npmm-item-gap, var(--npmm-panel-gap, 14px)); min-width: 0; min-height: 220px; } .npmm-podcast__intro, .npmm-podcast__episodes, .npmm-podcast-episode { min-width: 0; } .npmm-podcast__intro { display: grid; grid-template-rows: minmax(116px, 1fr) auto; border: 1px solid var(--npmm-card-border, #eceef2); border-radius: var(--npmm-card-radius, 17px); background: var(--npmm-card-bg, #f7f8fa); overflow: hidden; isolation: isolate; } .npmm-podcast__media { position: relative; min-height: 116px; overflow: hidden; background: radial-gradient(circle at 16% 16%, color-mix(in srgb, var(--npmm-accent, #0a64ff) 22%, transparent), transparent 46%), linear-gradient(145deg, #071226, #122b57); } .npmm-podcast__media > img, .npmm-podcast__media > video { display: block; width: 100%; height: 100%; min-height: 116px; object-fit: cover; transition: transform var(--npmm-hover-duration, 320ms) var(--npmm-easing, cubic-bezier(.22,1,.36,1)); } .npmm-podcast__media-placeholder { display: grid; place-items: center; width: 100%; height: 100%; min-height: 116px; color: #fff; font-size: 44px; } .npmm-podcast__media-placeholder svg { filter: drop-shadow(0 12px 28px rgba(0,0,0,.24)); } .npmm-podcast__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 44%, rgba(4,11,25,.46)); pointer-events: none; } .npmm-podcast__media-chip { position: absolute; z-index: 2; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; min-height: 27px; padding: 5px 9px; border: 1px solid rgba(255,255,255,.26); border-radius: 999px; background: rgba(7,17,36,.68); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; font-size: 9px; font-weight: 760; letter-spacing: .045em; text-transform: uppercase; } .npmm-podcast__media-chip svg { width: 13px; height: 13px; } .npmm-podcast__intro-copy { display: grid; align-content: start; gap: 7px; padding: 15px 16px 16px; background: linear-gradient(150deg, color-mix(in srgb, var(--npmm-accent, #0a64ff) 8%, #fff), #fff 68%); } .npmm-podcast__intro-copy > small { color: var(--npmm-accent, #0a64ff); font-size: 8px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; } .npmm-podcast__intro-copy > strong { font-size: clamp(18px, 1.6vw, 25px); font-weight: 760; line-height: 1.04; letter-spacing: -.045em; } .npmm-podcast__intro-copy > p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--npmm-panel-muted, #6d717a); font-size: 11.5px; line-height: 1.46; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .npmm-podcast__intro-copy > a { display: inline-flex; align-items: center; gap: 7px; justify-self: start; margin-top: 2px; color: var(--npmm-accent, #0a64ff); font-size: 11px; font-weight: 730; text-decoration: none; } .npmm-podcast__intro-copy > a svg { width: 13px; height: 13px; transition: transform var(--npmm-hover-duration, 320ms) var(--npmm-easing, cubic-bezier(.22,1,.36,1)); } .npmm-podcast__intro-copy > a:is(:hover,:focus-visible) svg { transform: translate3d(2px,-1px,0); } .npmm-podcast__episodes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 8px; align-content: stretch; } .npmm-podcast-episode { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) 14px; align-items: center; gap: 10px; min-height: 66px; padding: 9px 10px; border: 1px solid var(--npmm-card-border, #eceef2); border-radius: max(12px, calc(var(--npmm-card-radius, 17px) - 2px)); background: var(--npmm-card-bg, #f7f8fa); color: var(--npmm-panel-text, #17181b); text-decoration: none; overflow: hidden; isolation: isolate; transition: transform var(--npmm-hover-duration, 320ms) var(--npmm-easing, cubic-bezier(.22,1,.36,1)), background-color var(--npmm-hover-duration, 320ms) ease, background-image var(--npmm-hover-duration, 320ms) ease, border-color var(--npmm-hover-duration, 320ms) ease, box-shadow var(--npmm-hover-duration, 320ms) ease; } .npmm-podcast-episode:is(:hover,:focus-visible) { outline: 0; transform: var(--npmm-hover-transform, translate3d(0,-1px,0)); border-color: var(--npmm-hover-border-color, color-mix(in srgb, var(--npmm-accent, #0a64ff) 20%, var(--npmm-card-border, #eceef2))); background-color: var(--npmm-hover-bg, var(--npmm-card-hover, #eef3ff)); background-image: var(--npmm-hover-background-image, none); box-shadow: var(--npmm-hover-shadow, 0 11px 25px rgba(15,23,42,.075)); } .npmm-podcast-episode__thumb { position: relative; display: grid; place-items: center; width: 46px; height: 46px; overflow: hidden; border-radius: 12px; background: linear-gradient(145deg, color-mix(in srgb, var(--npmm-accent, #0a64ff) 18%, #101b34), #06101f); color: #fff; } .npmm-podcast-episode__thumb > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--npmm-hover-duration, 320ms) var(--npmm-easing, cubic-bezier(.22,1,.36,1)); } .npmm-podcast-episode__thumb > i { position: absolute; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 999px; background: color-mix(in srgb, var(--npmm-accent, #0a64ff) 90%, #fff 10%); box-shadow: 0 5px 12px rgba(0,0,0,.2); font-size: 9px; } .npmm-podcast-episode__thumb > i svg { width: 9px; height: 9px; } .npmm-podcast-episode__thumb--icon > i { position: static; width: 28px; height: 28px; } .npmm-podcast-episode__copy { display: grid; gap: 3px; min-width: 0; } .npmm-podcast-episode__copy > small { overflow: hidden; color: var(--npmm-panel-muted, #6d717a); font-size: 8.5px; font-weight: 560; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .npmm-podcast-episode__copy > strong { display: -webkit-box; overflow: hidden; font-size: 12.2px; font-weight: 720; line-height: 1.22; letter-spacing: -.018em; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .npmm-podcast-episode__excerpt { display: -webkit-box; overflow: hidden; color: var(--npmm-panel-muted, #6d717a); font-size: 9.5px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .npmm-podcast-episode__arrow { display: inline-flex; align-self: center; color: var(--npmm-panel-muted, #6d717a); font-size: 12px; opacity: .55; transition: opacity 220ms ease, color 220ms ease, transform var(--npmm-hover-duration, 320ms) var(--npmm-easing, cubic-bezier(.22,1,.36,1)); } .npmm-podcast-episode:is(:hover,:focus-visible) .npmm-podcast-episode__arrow { color: var(--npmm-accent, #0a64ff); opacity: 1; transform: var(--npmm-hover-arrow-transform, translate3d(2px,-1px,0)); } .npmm-podcast-episode:is(:hover,:focus-visible) .npmm-podcast-episode__thumb > img, .npmm-podcast__intro:is(:hover,:focus-within) .npmm-podcast__media > :is(img,video) { transform: var(--npmm-hover-media-transform, scale(1.025)); } /* Spotlight gives the newest episode editorial priority. */ .npmm-podcast--spotlight { grid-template-columns: minmax(220px, .72fr) minmax(0, 1.95fr); } .npmm-podcast--spotlight .npmm-podcast__episodes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .npmm-podcast--spotlight .npmm-podcast-episode.is-featured { grid-column: 1 / -1; grid-template-columns: 76px minmax(0, 1fr) 18px; min-height: 94px; padding: 12px; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--npmm-accent, #0a64ff) 14%, transparent), transparent 44%), var(--npmm-card-bg, #f7f8fa); } .npmm-podcast--spotlight .npmm-podcast-episode.is-featured .npmm-podcast-episode__thumb { width: 76px; height: 70px; border-radius: 14px; } .npmm-podcast--spotlight .npmm-podcast-episode.is-featured .npmm-podcast-episode__copy > strong { font-size: 15px; line-height: 1.16; } /* Rail trades description density for a compact editorial strip. */ .npmm-podcast--rail { grid-template-columns: minmax(210px, .62fr) minmax(0, 2.05fr); } .npmm-podcast--rail .npmm-podcast__intro { grid-template-rows: minmax(102px, .8fr) auto; } .npmm-podcast--rail .npmm-podcast__episodes { grid-template-columns: repeat(3, minmax(0, 1fr)); } .npmm-podcast--rail .npmm-podcast-episode { grid-template-columns: 38px minmax(0, 1fr) 12px; min-height: 60px; padding: 8px; } .npmm-podcast--rail .npmm-podcast-episode__thumb { width: 38px; height: 38px; border-radius: 10px; } /* Minimal removes visual weight while keeping the archive CTA and metadata. */ .npmm-podcast--minimal { grid-template-columns: minmax(190px, .56fr) minmax(0, 2.15fr); } .npmm-podcast--minimal .npmm-podcast__intro { display: block; border-color: transparent; background: transparent; overflow: visible; } .npmm-podcast--minimal .npmm-podcast__media { display: none; } .npmm-podcast--minimal .npmm-podcast__intro-copy { height: 100%; align-content: center; padding: 14px; border: 1px solid var(--npmm-card-border, #eceef2); border-radius: var(--npmm-card-radius, 17px); background: linear-gradient(145deg, color-mix(in srgb, var(--npmm-accent, #0a64ff) 6%, #fff), #fff); } .npmm-podcast--minimal .npmm-podcast__episodes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; } .npmm-podcast--minimal .npmm-podcast-episode { grid-template-columns: 28px minmax(0, 1fr) 12px; min-height: 48px; padding: 6px 2px; border-width: 0 0 1px; border-radius: 0; background: transparent; box-shadow: none; } .npmm-podcast--minimal .npmm-podcast-episode__thumb { width: 28px; height: 28px; border-radius: 9px; } .npmm-podcast--minimal .npmm-podcast-episode__thumb > i { width: 16px; height: 16px; } .npmm-podcast--minimal .npmm-podcast-episode:is(:hover,:focus-visible) { box-shadow: none; } .npmm-podcast-empty { display: grid; place-items: center; gap: 9px; min-height: 180px; padding: 24px; border: 1px dashed color-mix(in srgb, var(--npmm-panel-muted, #6d717a) 28%, transparent); border-radius: var(--npmm-card-radius, 17px); color: var(--npmm-panel-muted, #6d717a); font-size: 12px; } .npmm-podcast-empty svg { width: 28px; height: 28px; color: var(--npmm-accent, #0a64ff); } @media (max-width: 1120px) { .npmm-podcast, .npmm-podcast--spotlight, .npmm-podcast--rail, .npmm-podcast--minimal { grid-template-columns: minmax(205px, .72fr) minmax(0, 1.65fr); } .npmm-podcast--rail .npmm-podcast__episodes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Container-responsive rules keep the component faithful inside the visual * builder's simulated frame and when a custom mobile breakpoint is wider than * the browser media-query thresholds. The viewport rules below remain as a * fallback for older browsers. */ @container npmm-podcast-block (max-width: 820px) { .npmm-podcast, .npmm-podcast--spotlight, .npmm-podcast--rail, .npmm-podcast--minimal { grid-template-columns: 1fr; } .npmm-podcast__intro { grid-template-columns: minmax(128px, .42fr) minmax(0, 1fr); grid-template-rows: minmax(132px, auto); } .npmm-podcast__media, .npmm-podcast__media > img, .npmm-podcast__media > video, .npmm-podcast__media-placeholder { min-height: 132px; } .npmm-podcast--minimal .npmm-podcast__intro { display: block; } } @container npmm-podcast-block (max-width: 560px) { .npmm-podcast__intro { grid-template-columns: 1fr; grid-template-rows: 132px auto; } .npmm-podcast__episodes, .npmm-podcast--spotlight .npmm-podcast__episodes, .npmm-podcast--rail .npmm-podcast__episodes, .npmm-podcast--minimal .npmm-podcast__episodes { grid-template-columns: 1fr; } .npmm-podcast--spotlight .npmm-podcast-episode.is-featured { grid-column: auto; grid-template-columns: 54px minmax(0, 1fr) 14px; min-height: 72px; padding: 9px; } .npmm-podcast--spotlight .npmm-podcast-episode.is-featured .npmm-podcast-episode__thumb { width: 54px; height: 54px; } .npmm-podcast--spotlight .npmm-podcast-episode.is-featured .npmm-podcast-episode__copy > strong { font-size: 12.5px; } } @media (max-width: 820px) { .npmm-podcast, .npmm-podcast--spotlight, .npmm-podcast--rail, .npmm-podcast--minimal { grid-template-columns: 1fr; } .npmm-podcast__intro { grid-template-columns: minmax(128px, .42fr) minmax(0, 1fr); grid-template-rows: minmax(132px, auto); } .npmm-podcast__media, .npmm-podcast__media > img, .npmm-podcast__media > video, .npmm-podcast__media-placeholder { min-height: 132px; } .npmm-podcast--minimal .npmm-podcast__intro { display: block; } } @media (max-width: 560px) { .npmm-podcast__intro { grid-template-columns: 1fr; grid-template-rows: 132px auto; } .npmm-podcast__episodes, .npmm-podcast--spotlight .npmm-podcast__episodes, .npmm-podcast--rail .npmm-podcast__episodes, .npmm-podcast--minimal .npmm-podcast__episodes { grid-template-columns: 1fr; } .npmm-podcast--spotlight .npmm-podcast-episode.is-featured { grid-column: auto; grid-template-columns: 54px minmax(0, 1fr) 14px; min-height: 72px; padding: 9px; } .npmm-podcast--spotlight .npmm-podcast-episode.is-featured .npmm-podcast-episode__thumb { width: 54px; height: 54px; } .npmm-podcast--spotlight .npmm-podcast-episode.is-featured .npmm-podcast-episode__copy > strong { font-size: 12.5px; } } @media (prefers-reduced-motion: reduce) { .npmm-menu.npmm-respect-motion :is(.npmm-podcast-episode,.npmm-podcast__media img,.npmm-podcast__media video,.npmm-podcast-episode__thumb img) { transition-duration: .01ms !important; } .npmm-menu.npmm-respect-motion .npmm-podcast-episode:is(:hover,:focus-visible), .npmm-menu.npmm-respect-motion .npmm-podcast-episode:is(:hover,:focus-visible) .npmm-podcast-episode__thumb img, .npmm-menu.npmm-respect-motion .npmm-podcast__intro:is(:hover,:focus-within) .npmm-podcast__media > :is(img,video) { transform: none !important; } } /* -------------------------------------------------------------------------- * Language switcher and Nordpaa Podcast archive bridge (2.4.0) * -------------------------------------------------------------------------- */ .npmm-menu__item--language { z-index: 8; display: flex; align-items: center; } .npmm-menu__language { position: relative; display: inline-flex; align-items: center; min-height: var(--npmm-menu-item-height, 42px); font-size: var(--npmm-menu-size, 15px); font-weight: var(--npmm-menu-weight, 600); letter-spacing: var(--npmm-letter-spacing, -.01em); line-height: 1; white-space: nowrap; } .npmm-menu__language.is-placeholder { gap: 7px; padding-inline: var(--npmm-menu-item-padding-x, 14px); border-radius: var(--npmm-menu-item-radius, 13px); color: var(--npmm-bar-text, #17181b); } .npmm-menu__language-icon { display: inline-grid; place-items: center; flex: 0 0 auto; min-width: 20px; font-size: 18px; } .npmm-menu__language-icon svg { width: 17px; height: 17px; } /* Weglot exposes its standard selector here. Keep the official functionality, but normalize its box model so it behaves like every other header item. */ .npmm-menu__language.is-weglot > .country-selector, .npmm-menu__language.is-weglot .country-selector { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; z-index: 20 !important; display: inline-flex !important; align-items: center; width: auto !important; min-width: 0 !important; height: auto !important; margin: 0 !important; font: inherit !important; } .npmm-menu__language.is-weglot .country-selector > input { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; } .npmm-menu__language.is-weglot .country-selector .wgcurrent { position: relative !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; min-width: 44px; min-height: var(--npmm-menu-item-height, 42px); padding: 0 var(--npmm-menu-item-padding-x, 12px) !important; border: 0 !important; border-radius: var(--npmm-menu-item-radius, 13px) !important; background: transparent !important; color: var(--npmm-bar-text, #17181b) !important; font: inherit !important; cursor: pointer; transition: color 220ms ease, background-color 220ms ease, box-shadow 220ms ease; } .npmm-menu__language.is-weglot .country-selector .wgcurrent::after { position: static !important; margin-left: 0 !important; transform: scale(.75); } .npmm-menu__language.is-weglot .country-selector .wgcurrent:is(:hover,:focus-visible), .npmm-menu__language.is-weglot .country-selector > input:focus-visible + .wgcurrent { outline: 0; background: color-mix(in srgb, var(--npmm-bar-hover, #0a64ff) 8%, transparent) !important; color: var(--npmm-bar-hover, #0a64ff) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--npmm-accent, #0a64ff) 18%, transparent); } .npmm-menu__language.is-weglot .country-selector > ul { position: absolute !important; top: calc(100% + 9px) !important; right: 0 !important; left: auto !important; z-index: 99999 !important; min-width: 178px !important; max-height: min(60vh, 420px); margin: 0 !important; padding: 7px !important; border: 1px solid var(--npmm-panel-border, #e7e9ee) !important; border-radius: 14px !important; background: color-mix(in srgb, var(--npmm-panel-bg, #fff) 96%, transparent) !important; box-shadow: 0 20px 52px rgba(15,23,42,.16) !important; -webkit-backdrop-filter: blur(20px) saturate(1.08); backdrop-filter: blur(20px) saturate(1.08); overflow: hidden auto; } .npmm-menu__language.is-weglot .country-selector > ul li, .npmm-menu__language.is-weglot .country-selector > ul a { width: 100% !important; margin: 0 !important; border: 0 !important; background: transparent !important; } .npmm-menu__language.is-weglot .country-selector > ul a { display: flex !important; align-items: center; gap: 9px; min-height: 38px; padding: 7px 9px !important; border-radius: 9px !important; color: var(--npmm-panel-text, #17181b) !important; font: inherit !important; font-size: 13px !important; text-decoration: none !important; } .npmm-menu__language.is-weglot .country-selector > ul a:is(:hover,:focus-visible) { outline: 0; background: color-mix(in srgb, var(--npmm-accent, #0a64ff) 8%, transparent) !important; color: var(--npmm-accent, #0a64ff) !important; } .npmm-menu__language--pill.is-weglot .country-selector .wgcurrent, .npmm-menu__language--pill.is-manual > summary { border: 1px solid color-mix(in srgb, var(--npmm-bar-border, #e8e8ed) 88%, transparent) !important; background: color-mix(in srgb, var(--npmm-bar-bg, #fff) 82%, var(--npmm-accent, #0a64ff) 4%) !important; box-shadow: 0 5px 16px rgba(15,23,42,.06); } .npmm-menu__language--compact.is-weglot .country-selector .wgcurrent { padding-inline: 9px !important; } /* Manual fallback for sites without Weglot. */ .npmm-menu__language.is-manual { position: relative; } .npmm-menu__language.is-manual > summary { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: var(--npmm-menu-item-height, 42px); padding: 0 var(--npmm-menu-item-padding-x, 12px); border-radius: var(--npmm-menu-item-radius, 13px); color: var(--npmm-bar-text, #17181b); list-style: none; cursor: pointer; transition: color 220ms ease, background-color 220ms ease, box-shadow 220ms ease; } .npmm-menu__language.is-manual > summary::-webkit-details-marker { display: none; } .npmm-menu__language.is-manual > summary::marker { content: ""; } .npmm-menu__language.is-manual > summary > svg { width: 12px; height: 12px; transition: transform 240ms ease; } .npmm-menu__language.is-manual[open] > summary > svg { transform: rotate(180deg); } .npmm-menu__language.is-manual > summary:is(:hover,:focus-visible) { outline: 0; background: color-mix(in srgb, var(--npmm-bar-hover, #0a64ff) 8%, transparent); color: var(--npmm-bar-hover, #0a64ff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--npmm-accent, #0a64ff) 18%, transparent); } .npmm-menu__language-options { position: absolute; top: calc(100% + 9px); right: 0; z-index: 99999; display: grid; min-width: 190px; gap: 3px; padding: 7px; border: 1px solid var(--npmm-panel-border, #e7e9ee); border-radius: 14px; background: color-mix(in srgb, var(--npmm-panel-bg, #fff) 96%, transparent); box-shadow: 0 20px 52px rgba(15,23,42,.16); -webkit-backdrop-filter: blur(20px) saturate(1.08); backdrop-filter: blur(20px) saturate(1.08); } .npmm-menu__language-options > a { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 40px; padding: 7px 9px; border-radius: 9px; color: var(--npmm-panel-text, #17181b); font-size: 13px; text-decoration: none; } .npmm-menu__language-options > a:is(:hover,:focus-visible) { outline: 0; background: color-mix(in srgb, var(--npmm-accent, #0a64ff) 8%, transparent); color: var(--npmm-accent, #0a64ff); } .npmm-menu__language-options > a small { color: var(--npmm-panel-muted, #69707d); font-size: 10px; font-weight: 700; } /* Briefly identify the episode that the menu handed to Nordpaa Podcast. */ .nordpaa-episode-row.npmm-podcast-target, [data-episode-id].npmm-podcast-target { position: relative; z-index: 1; animation: npmm-podcast-target-pulse 1.15s cubic-bezier(.22,1,.36,1) 2; } @keyframes npmm-podcast-target-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(10,100,255,0); } 35% { box-shadow: 0 0 0 4px rgba(10,100,255,.14), 0 15px 36px rgba(10,100,255,.12); } } .npmm-menu.npmm-is-mobile .npmm-menu__item--language { width: 100%; } .npmm-menu.npmm-is-mobile .npmm-menu__language, .npmm-menu.npmm-is-mobile .npmm-menu__language.is-weglot > .country-selector, .npmm-menu.npmm-is-mobile .npmm-menu__language.is-weglot .country-selector { width: 100% !important; } .npmm-menu.npmm-is-mobile .npmm-menu__language.is-weglot .country-selector .wgcurrent, .npmm-menu.npmm-is-mobile .npmm-menu__language.is-manual > summary { justify-content: flex-start; width: 100% !important; min-height: 52px; padding-inline: 8px !important; font-size: 18px !important; font-weight: 680 !important; } .npmm-menu.npmm-is-mobile .npmm-menu__language.is-weglot .country-selector > ul, .npmm-menu.npmm-is-mobile .npmm-menu__language-options { position: static !important; width: 100% !important; min-width: 0 !important; margin-top: 5px !important; border-radius: 12px !important; box-shadow: none !important; } @media (prefers-reduced-motion: reduce) { .nordpaa-episode-row.npmm-podcast-target, [data-episode-id].npmm-podcast-target { animation: none; } } /* 2.5.2: the three language visual styles are intentionally distinct. */ .npmm-menu__language--native.is-manual > summary { gap: 8px; padding-inline: 11px; } .npmm-menu__language--native .npmm-menu__language-current { font-weight: inherit; } .npmm-menu__language--compact.is-manual > summary { gap: 5px; min-width: 48px; padding-inline: 9px; } .npmm-menu__language--compact .npmm-menu__language-current { font-size: .92em; font-weight: 720; letter-spacing: .025em; } .npmm-menu__language--pill.is-manual > summary { gap: 7px; min-height: calc(var(--npmm-menu-item-height, 42px) - 6px); padding-inline: 12px; border: 1px solid color-mix(in srgb, var(--npmm-bar-border, #e8e8ed) 88%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--npmm-bar-bg, #fff) 82%, var(--npmm-accent, #0a64ff) 5%); box-shadow: 0 5px 16px rgba(15,23,42,.06); } .npmm-menu__language--pill.is-manual > summary:is(:hover,:focus-visible) { background: color-mix(in srgb, var(--npmm-bar-bg, #fff) 72%, var(--npmm-accent, #0a64ff) 10%); box-shadow: 0 7px 22px rgba(15,23,42,.09), 0 0 0 3px color-mix(in srgb, var(--npmm-accent, #0a64ff) 13%, transparent); } .npmm-menu__language-code { display: inline-grid; place-items: center; width: 26px; height: 24px; border: 1px solid color-mix(in srgb, var(--npmm-panel-border, #e7e9ee) 86%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--npmm-accent, #0a64ff) 7%, var(--npmm-panel-bg, #fff)); color: var(--npmm-accent, #0a64ff); font-size: 9px; font-weight: 800; letter-spacing: .04em; } .npmm-menu__language-name { min-width: 0; font-weight: 600; } /* 2.5.1: self-contained Weglot rendering used by the isolated preview too. */ .npmm-menu__language.is-weglot-native > summary { min-width: 54px; } .npmm-menu__language-flag { display: inline-grid; place-items: center; min-width: 24px; font-size: 19px; line-height: 1; } .npmm-menu__language-options > a[aria-current="page"] { background: color-mix(in srgb, var(--npmm-accent, #0a64ff) 8%, transparent); color: var(--npmm-accent, #0a64ff); } /* ========================================================================== 2.7.0 responsive submenu variants Desktop markup remains untouched while mobile receives an independently resolved hierarchy and per-node media overrides. ========================================================================== */ .npmm-responsive-pane--mobile { display: none; } .npmm-menu.npmm-is-mobile .npmm-responsive-pane--desktop { display: none !important; } .npmm-menu.npmm-is-mobile .npmm-responsive-pane--mobile { display: block; width: 100%; } .npmm-mobile-hierarchy { display: grid; gap: 8px; width: 100%; } .npmm-mobile-group { border: 1px solid var(--npmm-card-border, rgba(16,24,40,.08)); border-radius: max(12px, calc(var(--npmm-card-radius, 16px) - 2px)); background: color-mix(in srgb, var(--npmm-card-bg, #fff) 96%, var(--npmm-accent, #0a67ff) 4%); overflow: clip; } .npmm-mobile-group > summary { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 54px; padding: 10px 11px; list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .npmm-mobile-group > summary::-webkit-details-marker { display: none; } .npmm-mobile-group > summary::marker { display: none; content: ''; } .npmm-mobile-group__icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; background: var(--npmm-icon-bg, rgba(10,103,255,.09)); color: var(--npmm-icon-color, var(--npmm-accent, #0a67ff)); } .npmm-mobile-group__icon svg { width: 15px; height: 15px; } .npmm-mobile-group > summary span:nth-child(2), .npmm-mobile-group > summary strong, .npmm-mobile-group > summary small { display: block; min-width: 0; } .npmm-mobile-group > summary strong { font-size: 14px; line-height: 1.2; } .npmm-mobile-group > summary small { margin-top: 3px; color: var(--npmm-panel-muted, #667085); font-size: 11px; line-height: 1.35; } .npmm-mobile-group > summary > i { display: grid; width: 24px; height: 24px; place-items: center; transition: transform 220ms cubic-bezier(.22,1,.36,1); } .npmm-mobile-group > summary > i svg { width: 13px; height: 13px; } .npmm-mobile-group[open] > summary > i { transform: rotate(180deg); } .npmm-mobile-group__links { display: grid; gap: 6px; padding: 0 8px 8px; } .npmm-mobile-group__links .npmm-subitem__link { min-height: 52px; } .npmm-mobile-hierarchy__featured { display: grid; gap: 8px; margin-top: 2px; } .npmm-mobile-hierarchy--compact { gap: 12px; } .npmm-mobile-list-group { display: grid; gap: 5px; } .npmm-mobile-list-group__heading { display: flex; align-items: center; gap: 7px; padding: 2px 4px 4px; color: var(--npmm-panel-muted, #667085); } .npmm-mobile-list-group__heading svg { width: 13px; height: 13px; color: var(--npmm-accent, #0a67ff); } .npmm-mobile-list-group__heading strong { font-size: 11px; font-weight: 760; letter-spacing: .02em; text-transform: uppercase; } .npmm-mobile-list-group__links { display: grid; gap: 4px; } .npmm-mobile-list-group__links .npmm-subitem__link { min-height: 46px; padding: 8px 9px; border-radius: 11px; } @media (prefers-reduced-motion: reduce) { .npmm-mobile-group > summary > i { transition: none; } } /* 2.10.0 — optional compact mobile media mode. Resolved per panel (global default + local override). Desktop is untouched. */ .npmm-menu.npmm-is-mobile .npmm-panel[data-mobile-media-mode="hide"] :is( .npmm-subitem__media, .npmm-card__media, .npmm-featured-node__visual, .npmm-post__image, .npmm-podcast__media ) { display: none !important; } .npmm-menu.npmm-is-mobile .npmm-panel[data-mobile-media-mode="hide"] :is(.npmm-block--image,.npmm-block--video,.npmm-block--animation) { display: none !important; } .npmm-menu.npmm-is-mobile .npmm-panel[data-mobile-media-mode="hide"] .npmm-promo__visual:not(.npmm-promo__visual--icon) { display: none !important; } .npmm-menu.npmm-is-mobile .npmm-panel[data-mobile-media-mode="hide"] .npmm-podcast-episode__thumb { display: none !important; } .npmm-menu.npmm-is-mobile .npmm-panel[data-mobile-media-mode="hide"] .npmm-podcast-episode { grid-template-columns: minmax(0, 1fr) 14px; } .npmm-menu.npmm-is-mobile .npmm-panel[data-mobile-media-mode="hide"] .npmm-podcast { grid-template-columns: 1fr; min-height: 0; } .npmm-menu.npmm-is-mobile .npmm-panel[data-mobile-media-mode="hide"] .npmm-podcast__intro { grid-template-rows: auto; } .npmm-menu.npmm-is-mobile .npmm-panel[data-mobile-media-mode="hide"] .npmm-promo { min-height: 0; } .npmm-menu.npmm-is-mobile .npmm-panel[data-mobile-media-mode="hide"] .npmm-promo__content { width: 100%; height: auto; justify-content: flex-start; } .npmm-menu.npmm-is-mobile .npmm-panel[data-mobile-media-mode="hide"] :is(.npmm-card--media-top,.npmm-card--media-left,.npmm-card--media-right) { flex-direction: row; align-items: center; } .npmm-menu.npmm-is-mobile .npmm-panel[data-mobile-media-mode="hide"] .npmm-card--media-background { min-height: 70px; color: var(--npmm-panel-text, #17181b); background: color-mix(in srgb, var(--npmm-card-bg, #f7f8fa) 78%, transparent); } .npmm-menu.npmm-is-mobile .npmm-panel[data-mobile-media-mode="hide"] .npmm-card--media-background .npmm-card__description { color: var(--npmm-panel-muted, #6d717a); } .npmm-menu.npmm-is-mobile .npmm-panel[data-mobile-media-mode="hide"] :is(.npmm-subitem--media-top,.npmm-subitem--media-bottom) > .npmm-subitem__link { flex-direction: row; align-items: center; min-height: 54px; } .npmm-menu.npmm-is-mobile .npmm-panel[data-mobile-media-mode="hide"] .npmm-subitem--media-background > .npmm-subitem__link { min-height: 54px; align-items: center; color: var(--npmm-panel-text, #17181b); background: var(--npmm-card-bg, #f7f8fa); } .npmm-menu.npmm-is-mobile .npmm-panel[data-mobile-media-mode="hide"] .npmm-subitem--media-background .npmm-subitem__description { color: var(--npmm-panel-muted, #6d717a); } .npmm-menu.npmm-is-mobile .npmm-panel[data-mobile-media-mode="hide"] .npmm-featured-node { grid-template-columns: 1fr !important; grid-template-rows: auto !important; min-height: 0 !important; background: var(--npmm-card-bg, #f7f8fa) !important; color: var(--npmm-panel-text, #17181b) !important; } .npmm-menu.npmm-is-mobile .npmm-panel[data-mobile-media-mode="hide"] .npmm-featured-node::before { display: none !important; } .npmm-menu.npmm-is-mobile .npmm-panel[data-mobile-media-mode="hide"] .npmm-featured-node__copy { width: 100% !important; min-height: 0 !important; padding: 14px 15px !important; color: var(--npmm-panel-text, #17181b) !important; } .npmm-menu.npmm-is-mobile .npmm-panel[data-mobile-media-mode="hide"] .npmm-featured-node__copy > :is(small,em) { color: var(--npmm-accent, #0a64ff) !important; } .npmm-menu.npmm-is-mobile .npmm-panel[data-mobile-media-mode="hide"] .npmm-featured-node__copy > span { color: var(--npmm-panel-muted, #6d717a) !important; } /* ========================================================================== 2.14.0 — SecureFirst contextual info cards Illustration-first image treatment, calmer visual hierarchy and a richer icon scene. Existing 2.13 content remains compatible. ========================================================================== */ .npmm-hierarchy__info { display: grid; align-self: stretch; min-width: 0; container-type: inline-size; } .npmm-info-stack > .npmm-info-card { grid-area: 1 / 1; } .npmm-info-card { position: relative; display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; align-content: stretch; min-width: 0; min-height: 100%; overflow: hidden; border: 1px solid color-mix(in srgb, var(--npmm-accent, #0a64ff) 14%, var(--npmm-panel-border, #e5e7eb)); border-radius: max(20px, var(--npmm-card-radius, 17px)); background: linear-gradient(150deg, #fff 0%, color-mix(in srgb, var(--npmm-accent, #0a64ff) 3.5%, #fff) 100%); box-shadow: 0 10px 28px rgb(15 23 42 / .045); color: var(--npmm-panel-text, #17181b); text-decoration: none; isolation: isolate; opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(0, 5px, 0); transition: opacity var(--npmm-info-duration, 220ms) ease, transform var(--npmm-info-duration, 220ms) cubic-bezier(.22, 1, .36, 1), visibility 0s linear var(--npmm-info-duration, 220ms), border-color 220ms ease, box-shadow 220ms ease; } .npmm-info-card::after { content: ""; position: absolute; z-index: -1; right: -70px; bottom: -90px; width: 210px; height: 210px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--npmm-accent, #0a64ff) 9%, transparent), transparent 68%); pointer-events: none; } .npmm-info-card.is-active, .npmm-info-card--mobile-static { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; } .npmm-info-stack--slide .npmm-info-card { transform: translate3d(10px, 0, 0); } .npmm-info-stack--slide .npmm-info-card.is-active { transform: none; } .npmm-info-stack--none .npmm-info-card { transition: none; } .npmm-info-card:hover, .npmm-info-card:focus-visible { outline: 0; border-color: color-mix(in srgb, var(--npmm-accent, #0a64ff) 28%, var(--npmm-panel-border, #e5e7eb)); box-shadow: 0 18px 42px rgb(15 23 42 / .075), 0 0 0 1px color-mix(in srgb, var(--npmm-accent, #0a64ff) 5%, transparent); } .npmm-info-card__copy { position: relative; z-index: 2; display: grid; align-content: start; align-self: start; gap: 7px; min-width: 0; padding: 19px 19px 17px; } .npmm-info-card__copy > small { color: var(--npmm-accent, #0a64ff); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .npmm-info-card__copy > strong { max-width: 18ch; font-size: clamp(17px, 1.45vw, 23px); font-weight: 760; line-height: 1.08; letter-spacing: -.035em; } .npmm-info-card__copy > span { max-width: 38ch; color: var(--npmm-panel-muted, #6d717a); font-size: 11px; line-height: 1.5; } .npmm-info-card__copy > em { display: inline-flex; align-items: center; gap: 5px; width: fit-content; margin-top: 3px; color: var(--npmm-accent, #0a64ff); font-size: 10.5px; font-style: normal; font-weight: 760; } .npmm-info-card__copy > em svg { width: 12px; height: 12px; transition: transform 180ms ease; } .npmm-info-card:hover .npmm-info-card__copy > em svg { transform: translate(1px, -1px); } .npmm-info-card__visual { position: relative; z-index: 1; display: grid; place-items: center; min-width: 0; height: clamp(128px, 10.5vw, 164px); overflow: hidden; padding: 10px 12px 12px; background: transparent; } .npmm-info-card__visual-frame { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--npmm-accent, #0a64ff) 10%, #e8edf5); border-radius: 15px; background: radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--npmm-accent, #0a64ff) 9%, transparent), transparent 30%), linear-gradient(145deg, color-mix(in srgb, var(--npmm-accent, #0a64ff) 2.5%, #fff), #fff 72%); } .npmm-info-card__image { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-position: center; transition: transform 260ms cubic-bezier(.22, 1, .36, 1); } /* Illustration is the new default. It keeps the full motive visible and gives it a predictable safe area regardless of the source image dimensions. */ .npmm-info-card--fit-contain .npmm-info-card__image { width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; } .npmm-info-card--fit-contain:hover .npmm-info-card__image { transform: scale(1.015); } /* Cover remains available for photography or artwork intentionally designed to bleed to the visual edges. */ .npmm-info-card--fit-cover .npmm-info-card__visual { padding: 0; } .npmm-info-card--fit-cover .npmm-info-card__visual-frame { border: 0; border-radius: 0; } .npmm-info-card--fit-cover .npmm-info-card__image { object-fit: cover; } .npmm-info-card--fit-cover:hover .npmm-info-card__image { transform: scale(1.025); } .npmm-info-card--position-left .npmm-info-card__image { object-position: left center; } .npmm-info-card--position-right .npmm-info-card__image { object-position: right center; } .npmm-info-card--position-top .npmm-info-card__image { object-position: center top; } .npmm-info-card--position-bottom .npmm-info-card__image { object-position: center bottom; } /* Built-in icon visual: intentionally simple enough to remain legible inside a compact mega-menu card. */ .npmm-info-card__visual--icon { padding: 10px 12px 12px; background: transparent; } .npmm-info-card__icon-scene { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-height: 106px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--npmm-accent, #0a64ff) 10%, #e8edf5); border-radius: 15px; background: radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--npmm-accent, #0a64ff) 12%, transparent), transparent 34%), linear-gradient(145deg, color-mix(in srgb, var(--npmm-accent, #0a64ff) 3%, #fff), #fff); } .npmm-info-card__icon-scene::before, .npmm-info-card__icon-scene::after { content: ""; position: absolute; border: 1px solid color-mix(in srgb, var(--npmm-accent, #0a64ff) 11%, transparent); border-radius: 50%; } .npmm-info-card__icon-scene::before { width: 124px; height: 124px; } .npmm-info-card__icon-scene::after { width: 168px; height: 168px; opacity: .6; } .npmm-info-card__icon-scene > i, .npmm-info-card__icon-scene > b { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--npmm-accent, #0a64ff) 48%, #fff); box-shadow: 0 0 0 5px color-mix(in srgb, var(--npmm-accent, #0a64ff) 7%, transparent); } .npmm-info-card__icon-scene > i { left: 21%; top: 28%; } .npmm-info-card__icon-scene > b { right: 19%; bottom: 25%; } .npmm-info-card__icon-scene > span { position: relative; z-index: 2; display: grid; place-items: center; width: 68px; height: 68px; border: 1px solid color-mix(in srgb, var(--npmm-accent, #0a64ff) 18%, #fff); border-radius: 20px; background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--npmm-accent, #0a64ff) 7%, #fff)); box-shadow: 0 13px 30px color-mix(in srgb, var(--npmm-accent, #0a64ff) 12%, transparent); color: color-mix(in srgb, var(--npmm-accent, #0a64ff) 86%, #14396f); transition: transform 220ms cubic-bezier(.22, 1, .36, 1); } .npmm-info-card__icon-scene svg { width: 31px; height: 31px; stroke-width: 1.65; } .npmm-info-card:hover .npmm-info-card__icon-scene > span { transform: translateY(-2px); } .npmm-info-card--layout-top .npmm-info-card__visual { grid-row: 1; height: clamp(138px, 12vw, 178px); padding-bottom: 4px; } .npmm-info-card--layout-top .npmm-info-card__copy { grid-row: 2; } .npmm-info-card--layout-split .npmm-info-card__visual { grid-row: 1; } .npmm-info-card--layout-split .npmm-info-card__copy { grid-row: 2; } @container (min-width: 340px) { .npmm-info-card--layout-split { grid-template-columns: minmax(0, 1.08fr) minmax(132px, .92fr); grid-template-rows: 1fr; } .npmm-info-card--layout-split .npmm-info-card__copy { grid-column: 1; grid-row: 1; align-self: center; padding: 20px 10px 20px 20px; } .npmm-info-card--layout-split .npmm-info-card__visual { grid-column: 2; grid-row: 1; height: 100%; min-height: 194px; padding: 12px 12px 12px 4px; } .npmm-info-card--layout-split.npmm-info-card--fit-cover .npmm-info-card__visual { padding: 0; } .npmm-info-card--layout-split.npmm-info-card--fit-contain .npmm-info-card__visual-frame { min-height: 170px; } .npmm-info-card--layout-split .npmm-info-card__icon-scene { min-height: 170px; } } .npmm-info-card--layout-compact { grid-template-columns: 1fr; grid-template-rows: 1fr; } .npmm-info-card--layout-compact .npmm-info-card__copy { grid-row: 1; padding: 16px; } .npmm-info-card--layout-compact .npmm-info-card__visual { display: none; } .npmm-info-card--layout-compact .npmm-info-card__copy > strong { font-size: 18px; } .npmm-info-card--theme-neutral { background: var(--npmm-card-bg, #f7f8fa); border-color: var(--npmm-card-border, #eceef2); box-shadow: none; } .npmm-info-card--theme-dark { background: linear-gradient(150deg, #12203c, #07101f); border-color: rgb(255 255 255 / .11); color: #fff; box-shadow: 0 15px 36px rgb(2 8 23 / .16); } .npmm-info-card--theme-dark .npmm-info-card__copy > span { color: rgb(255 255 255 / .7); } .npmm-info-card--theme-dark .npmm-info-card__copy > small, .npmm-info-card--theme-dark .npmm-info-card__copy > em { color: #9fc2ff; } .npmm-info-card--theme-dark .npmm-info-card__visual-frame, .npmm-info-card--theme-dark .npmm-info-card__icon-scene { border-color: rgb(255 255 255 / .08); background: radial-gradient(circle at 55% 44%, rgb(90 145 255 / .16), transparent 36%), rgb(255 255 255 / .035); } .npmm-info-card--theme-dark .npmm-info-card__icon-scene > span { border-color: rgb(255 255 255 / .12); background: rgb(255 255 255 / .07); color: #b9d2ff; } .npmm-mobile-hierarchy__info { margin-top: 7px; } .npmm-menu.npmm-is-mobile .npmm-info-card { min-height: auto; } .npmm-menu.npmm-is-mobile .npmm-info-card__copy { padding: 14px; } .npmm-menu.npmm-is-mobile .npmm-info-card__copy > strong { font-size: 18px; } .npmm-menu.npmm-is-mobile .npmm-info-card__visual { height: 124px; padding: 8px 10px 10px; } .npmm-menu.npmm-is-mobile .npmm-info-card--hide-mobile-image .npmm-info-card__visual { display: none; } .npmm-menu.npmm-is-mobile .npmm-info-card--hide-mobile-image { grid-template-columns: 1fr; grid-template-rows: auto; } .npmm-menu.npmm-is-mobile .npmm-info-card__icon-scene { min-height: 102px; } .npmm-respect-motion .npmm-info-card { will-change: opacity, transform; } @media (prefers-reduced-motion: reduce) { .npmm-info-card, .npmm-info-card__image, .npmm-info-card__icon-scene > span, .npmm-info-card__copy > em svg { transition: none !important; transform: none !important; } } .npmm-mobile-group__info, .npmm-mobile-list-group__info { margin: 7px 0; } .npmm-mobile-group__info .npmm-info-card, .npmm-mobile-list-group__info .npmm-info-card { min-height: auto; } /* 2.16.0 — explicit info visual modes */ .npmm-info-card__visual--3d .npmm-info-card__visual-frame { border-color: color-mix(in srgb, var(--npmm-accent, #0a64ff) 8%, #e8edf5); } .npmm-info-card__visual--3d .npmm-info-card__image { width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain; filter: saturate(.98) contrast(.99); } .npmm-info-card--no-visual { grid-template-columns: 1fr !important; grid-template-rows: 1fr !important; } .npmm-info-card--no-visual .npmm-info-card__copy { grid-column: 1 !important; grid-row: 1 !important; align-self: center; padding: 20px !important; } /* ======================================================================== 2.17.0 — SecureFirst soft-3D visual system Reference direction: clean white product cards on subtle pedestals, blue semantic glyphs and very restrained depth. Generated from the same SVG icon library, so every menu icon has a matching visual without raster assets. ======================================================================== */ .npmm-soft3d { --npmm-soft3d-blue: var(--npmm-accent, #0a64ff); position: relative; display: block; width: min(132px, 88%); aspect-ratio: 1 / .92; isolation: isolate; } .npmm-soft3d__shadow { position: absolute; z-index: 0; left: 15%; right: 15%; bottom: 5%; height: 13%; border-radius: 50%; background: rgb(28 57 105 / .13); filter: blur(8px); transform: scaleX(1.08); } .npmm-soft3d__pedestal { position: absolute; z-index: 1; left: 18%; right: 18%; bottom: 8%; height: 22%; border: 1px solid rgb(31 76 145 / .08); border-radius: 50%; background: linear-gradient(180deg, #fff 0%, #f7f9fd 46%, #e9eef7 100%); box-shadow: inset 0 3px 4px rgb(255 255 255 / .92), 0 5px 10px rgb(32 55 96 / .08); } .npmm-soft3d__pedestal::before { content: ""; position: absolute; inset: 13% 4% 34%; border-radius: 50%; background: linear-gradient(180deg, #fff, #f4f7fc); box-shadow: inset 0 0 0 1px rgb(23 73 151 / .06); } .npmm-soft3d__pedestal > i { position: absolute; left: 12%; right: 12%; bottom: 8%; height: 18%; border-radius: 50%; background: rgb(17 65 140 / .055); } .npmm-soft3d__card { position: absolute; z-index: 2; left: 24%; right: 24%; top: 7%; bottom: 23%; overflow: hidden; border: 1px solid rgb(20 67 145 / .085); border-radius: 13%; background: linear-gradient(145deg, #fff 0%, #fff 48%, #f5f8fd 100%); box-shadow: inset 0 1px 0 #fff, inset -5px -8px 14px rgb(44 84 146 / .045), 0 9px 20px rgb(25 55 105 / .12); transform: perspective(420px) rotateX(1.5deg) rotateY(-2.5deg); transform-origin: center bottom; transition: transform 260ms cubic-bezier(.22,1,.36,1), box-shadow 260ms ease; } .npmm-soft3d__card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, rgb(255 255 255 / .72), transparent 34%); } .npmm-soft3d__glyph { position: absolute; z-index: 2; left: 14%; top: 14%; display: grid; place-items: center; width: 43%; aspect-ratio: 1; border-radius: 28%; background: linear-gradient(145deg, color-mix(in srgb, var(--npmm-soft3d-blue) 9%, #fff), #fff 72%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--npmm-soft3d-blue) 12%, transparent), 0 4px 9px color-mix(in srgb, var(--npmm-soft3d-blue) 10%, transparent); color: var(--npmm-soft3d-blue); } .npmm-soft3d__glyph svg { width: 54%; height: 54%; stroke-width: 2.05; } .npmm-soft3d__line { position: absolute; z-index: 1; left: 14%; height: 7%; border-radius: 99px; background: color-mix(in srgb, var(--npmm-soft3d-blue) 88%, #2c74d8); box-shadow: 0 2px 4px color-mix(in srgb, var(--npmm-soft3d-blue) 12%, transparent); } .npmm-soft3d__line--a { width: 66%; top: 64%; } .npmm-soft3d__line--b { width: 43%; top: 78%; opacity: .32; } .npmm-soft3d__dot { position: absolute; z-index: 2; right: 12%; top: 18%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--npmm-soft3d-blue) 16%, #fff)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--npmm-soft3d-blue) 18%, transparent), 0 3px 7px rgb(28 64 121 / .10); } .npmm-info-card:hover .npmm-soft3d__card, .npmm-featured-node:hover .npmm-soft3d__card { transform: perspective(420px) rotateX(0deg) rotateY(0deg) translateY(-2px); box-shadow: inset 0 1px 0 #fff, 0 12px 24px rgb(25 55 105 / .14); } .npmm-info-card__visual--soft3d .npmm-info-card__visual-frame { border-color: color-mix(in srgb, var(--npmm-accent, #0a64ff) 8%, #e8edf5); background: radial-gradient(circle at 50% 74%, color-mix(in srgb, var(--npmm-accent, #0a64ff) 5%, transparent), transparent 42%), linear-gradient(145deg,#fff,#fbfcff); } .npmm-info-card__visual--soft3d .npmm-soft3d { width: min(150px, 88%); } .npmm-featured-node__visual--soft3d { display: grid; place-items: center; background: linear-gradient(145deg,#fff,#f8faff); } .npmm-featured-node__visual--soft3d .npmm-soft3d { width: min(168px, 82%); } .npmm-info-card--theme-dark .npmm-soft3d__card { background: linear-gradient(145deg,#fff,#edf4ff); } .npmm-info-card--theme-dark .npmm-soft3d__pedestal { background: linear-gradient(180deg,#fff,#dce8fa); } @media (prefers-reduced-motion: reduce) { .npmm-soft3d__card { transition: none !important; transform: none !important; } } /* 2.18.2: optional destinations for hierarchy groups. */ a.npmm-hierarchy__control { text-decoration: none; color: inherit; } .npmm-mobile-group__destination { display: inline-flex; align-items: center; gap: 7px; margin: 10px 16px 2px; padding: 7px 10px; border-radius: 10px; font-size: 12px; font-weight: 700; line-height: 1.2; text-decoration: none; color: var(--npmm-accent, #1268f3); background: color-mix(in srgb, var(--npmm-accent, #1268f3) 7%, transparent); } .npmm-mobile-group__destination svg { width: 14px; height: 14px; } /* ======================================================================== 2.19.0 — compact mobile preset system Six mobile hierarchy presentations + density, separator and icon controls. All selectors are scoped to .npmm-is-mobile so desktop remains unchanged. ======================================================================== */ /* Shared density tokens. */ .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy { --npmm-mobile-row: 50px; --npmm-mobile-link-row: 46px; --npmm-mobile-pad-y: 8px; --npmm-mobile-pad-x: 9px; --npmm-mobile-local-gap: 5px; --npmm-mobile-separator-color: color-mix(in srgb, var(--npmm-card-border, #e7eaf0) 82%, transparent); } .npmm-menu.npmm-is-mobile .npmm-mobile-density--ultra { --npmm-mobile-row: 44px; --npmm-mobile-link-row: 40px; --npmm-mobile-pad-y: 6px; --npmm-mobile-pad-x: 7px; --npmm-mobile-local-gap: 3px; } .npmm-menu.npmm-is-mobile .npmm-mobile-density--comfortable { --npmm-mobile-row: 58px; --npmm-mobile-link-row: 52px; --npmm-mobile-pad-y: 10px; --npmm-mobile-pad-x: 11px; --npmm-mobile-local-gap: 7px; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy .npmm-mobile-group > summary { min-height: var(--npmm-mobile-row); padding: var(--npmm-mobile-pad-y) var(--npmm-mobile-pad-x); } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy :is(.npmm-mobile-group__links,.npmm-mobile-list-group__links) { gap: var(--npmm-mobile-local-gap); } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy :is(.npmm-mobile-group__links,.npmm-mobile-list-group__links) .npmm-subitem__link { min-height: var(--npmm-mobile-link-row); padding: var(--npmm-mobile-pad-y) var(--npmm-mobile-pad-x); } /* Icon presentation overrides. */ .npmm-menu.npmm-is-mobile .npmm-mobile-icons--circle :is(.npmm-mobile-group__icon,.npmm-subitem__icon) { border-radius: 999px; } .npmm-menu.npmm-is-mobile .npmm-mobile-icons--plain :is(.npmm-mobile-group__icon,.npmm-subitem__icon) { width: 26px; height: 26px; border-radius: 0; background: transparent; box-shadow: none; } .npmm-menu.npmm-is-mobile .npmm-mobile-icons--plain :is(.npmm-mobile-group__icon,.npmm-subitem__icon) svg { width: 16px; height: 16px; } /* 1. Accordion — clean: preserve the familiar rounded-card appearance. */ .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-accordion { gap: 7px; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-accordion .npmm-mobile-group { border-radius: 12px; } /* 2. Accordion — divider: flat, compact rows separated by a hairline. */ .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-accordion-divider { gap: 0; border-top: 1px solid var(--npmm-mobile-separator-color); border-bottom: 1px solid var(--npmm-mobile-separator-color); } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-accordion-divider .npmm-mobile-group { border: 0; border-bottom: 1px solid var(--npmm-mobile-separator-color); border-radius: 0; background: transparent; overflow: visible; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-accordion-divider .npmm-mobile-group:last-child { border-bottom: 0; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-accordion-divider .npmm-mobile-group > summary { padding-inline: 4px; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-accordion-divider .npmm-mobile-group__links { padding: 2px 0 8px 36px; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-accordion-divider .npmm-mobile-group__links .npmm-subitem__link { border-color: transparent; background: transparent; border-radius: 8px; } /* 3. Compact category list: retained but refined to use density tokens. */ .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-compact-list { gap: 10px; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-compact-list .npmm-mobile-list-group__heading { padding-bottom: 3px; } /* 4. Minimal icon list: no boxes, calm typography and thin inset rules. */ .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-minimal-list { gap: 12px; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-minimal-list .npmm-mobile-list-group { gap: 1px; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-minimal-list .npmm-mobile-list-group__heading { padding: 3px 2px 5px; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-minimal-list .npmm-mobile-list-group__heading strong { font-size: 11px; letter-spacing: .035em; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-minimal-list .npmm-mobile-list-group__links { gap: 0; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-minimal-list .npmm-mobile-list-group__links .npmm-subitem { border-bottom: 1px solid var(--npmm-mobile-separator-color); } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-minimal-list .npmm-mobile-list-group__links .npmm-subitem:last-child { border-bottom: 0; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-minimal-list .npmm-mobile-list-group__links .npmm-subitem__link { min-height: var(--npmm-mobile-link-row); border: 0; border-radius: 0; background: transparent; box-shadow: none; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-minimal-list .npmm-mobile-list-group__links .npmm-subitem__link:hover, .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-minimal-list .npmm-mobile-list-group__links .npmm-subitem__link:focus-visible { background: color-mix(in srgb, var(--npmm-accent, #0a64ff) 5%, transparent); transform: none; } /* 5. Compact cards: small, premium clickable cards without desktop-sized gaps. */ .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-compact-cards { gap: 11px; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-compact-cards .npmm-mobile-list-group { gap: 6px; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-compact-cards .npmm-mobile-list-group__links { gap: 6px; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-compact-cards .npmm-mobile-list-group__links .npmm-subitem__link { min-height: var(--npmm-mobile-link-row); border: 1px solid var(--npmm-card-border, #eceef2); border-radius: 11px; background: color-mix(in srgb, var(--npmm-card-bg, #fff) 97%, var(--npmm-accent, #0a64ff) 3%); box-shadow: 0 4px 14px rgb(15 23 42 / .035); } /* 6. Sections + links: a light section rail followed by a clean flat list. */ .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-section-links { gap: 10px; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-section-links .npmm-mobile-list-group { gap: 3px; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-section-links .npmm-mobile-list-group__heading { min-height: 36px; padding: 7px 9px; border-radius: 9px; background: color-mix(in srgb, var(--npmm-accent, #0a64ff) 5%, #fff); color: var(--npmm-panel-text, #17181b); } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-section-links .npmm-mobile-list-group__heading strong { font-size: 12px; letter-spacing: 0; text-transform: none; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-section-links .npmm-mobile-list-group__links { gap: 0; padding-left: 8px; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-section-links .npmm-mobile-list-group__links .npmm-subitem__link { border: 0; border-bottom: 1px solid var(--npmm-mobile-separator-color); border-radius: 0; background: transparent; box-shadow: none; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-section-links .npmm-mobile-list-group__links .npmm-subitem:last-child .npmm-subitem__link { border-bottom: 0; } /* Separator override controls. They intentionally win over preset defaults. */ .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy.npmm-mobile-separator--none :is(.npmm-mobile-group,.npmm-mobile-list-group__links .npmm-subitem,.npmm-mobile-list-group__links .npmm-subitem__link) { border-bottom-color: transparent; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy.npmm-mobile-separator--none { border-top-color: transparent; border-bottom-color: transparent; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy.npmm-mobile-separator--full > :is(.npmm-mobile-group,.npmm-mobile-list-group) + :is(.npmm-mobile-group,.npmm-mobile-list-group) { border-top: 1px solid var(--npmm-mobile-separator-color); } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy.npmm-mobile-separator--full .npmm-mobile-list-group__links .npmm-subitem + .npmm-subitem { border-top: 1px solid var(--npmm-mobile-separator-color); } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy.npmm-mobile-separator--inset .npmm-mobile-list-group__links .npmm-subitem { position: relative; border-bottom: 0; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy.npmm-mobile-separator--inset .npmm-mobile-list-group__links .npmm-subitem:not(:last-child)::after { content: ''; position: absolute; right: 4px; bottom: 0; left: 40px; height: 1px; background: var(--npmm-mobile-separator-color); pointer-events: none; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy.npmm-mobile-separator--inset > .npmm-mobile-group + .npmm-mobile-group::before, .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy.npmm-mobile-separator--inset > .npmm-mobile-list-group + .npmm-mobile-list-group::before { content: ''; display: block; height: 1px; margin: 0 4px 0 40px; background: var(--npmm-mobile-separator-color); } /* ========================================================================== 2.20.0 — App / sidebar navigation presets Inspired by modern 2026 product UIs: flat rows, strong hierarchy, thin separators and restrained pills. These rules are scoped to the new presets. ========================================================================== */ .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy:is(.npmm-hierarchy--app-sidebar,.npmm-hierarchy--app-divider,.npmm-hierarchy--app-split,.npmm-hierarchy--app-compact) { grid-template-columns: minmax(190px,.72fr) minmax(0,1.9fr) minmax(230px,.9fr); gap: 0; align-items: stretch; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy:is(.npmm-hierarchy--app-sidebar,.npmm-hierarchy--app-divider,.npmm-hierarchy--app-split,.npmm-hierarchy--app-compact) > .npmm-hierarchy__controls { gap: 3px; padding-right: 16px; border-right: 1px solid color-mix(in srgb, var(--npmm-panel-border,#e5e7eb) 92%, transparent); } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy:is(.npmm-hierarchy--app-sidebar,.npmm-hierarchy--app-divider,.npmm-hierarchy--app-split,.npmm-hierarchy--app-compact) > .npmm-hierarchy__content { padding: 0 18px; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy:is(.npmm-hierarchy--app-sidebar,.npmm-hierarchy--app-divider,.npmm-hierarchy--app-split,.npmm-hierarchy--app-compact) > :is(.npmm-hierarchy__info,.npmm-hierarchy__featured) { padding-left: 18px; border-left: 1px solid color-mix(in srgb, var(--npmm-panel-border,#e5e7eb) 92%, transparent); } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy:is(.npmm-hierarchy--app-sidebar,.npmm-hierarchy--app-divider,.npmm-hierarchy--app-split,.npmm-hierarchy--app-compact) .npmm-hierarchy__control { min-height: 48px; gap: 9px; padding: 7px 9px; border: 0; border-radius: 12px; background: transparent; box-shadow: none; transform: none; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy:is(.npmm-hierarchy--app-sidebar,.npmm-hierarchy--app-divider,.npmm-hierarchy--app-split,.npmm-hierarchy--app-compact) .npmm-hierarchy__control-icon { width: 30px; height: 30px; border-radius: 10px; background: color-mix(in srgb, var(--npmm-icon-bg,#eaf1ff) 58%, #fff); } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy:is(.npmm-hierarchy--app-sidebar,.npmm-hierarchy--app-divider,.npmm-hierarchy--app-split,.npmm-hierarchy--app-compact) .npmm-hierarchy__control-icon svg { width: 14px; height: 14px; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy:is(.npmm-hierarchy--app-sidebar,.npmm-hierarchy--app-divider,.npmm-hierarchy--app-split,.npmm-hierarchy--app-compact) .npmm-hierarchy__control strong { font-size: 12.5px; font-weight: 680; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy:is(.npmm-hierarchy--app-sidebar,.npmm-hierarchy--app-divider,.npmm-hierarchy--app-split,.npmm-hierarchy--app-compact) .npmm-hierarchy__control small { font-size: 9.8px; line-height: 1.28; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy:is(.npmm-hierarchy--app-sidebar,.npmm-hierarchy--app-divider,.npmm-hierarchy--app-split,.npmm-hierarchy--app-compact) .npmm-hierarchy__pane { gap: 10px; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy:is(.npmm-hierarchy--app-sidebar,.npmm-hierarchy--app-divider,.npmm-hierarchy--app-split,.npmm-hierarchy--app-compact) .npmm-hierarchy__pane-heading { grid-template-columns: minmax(0,.8fr) minmax(0,1fr); gap: 14px; align-items: center; padding: 1px 2px 5px; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy:is(.npmm-hierarchy--app-sidebar,.npmm-hierarchy--app-divider,.npmm-hierarchy--app-split,.npmm-hierarchy--app-compact) .npmm-hierarchy__pane-heading strong { font-size: 17px; font-weight: 700; letter-spacing: -.025em; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy:is(.npmm-hierarchy--app-sidebar,.npmm-hierarchy--app-divider,.npmm-hierarchy--app-split,.npmm-hierarchy--app-compact) .npmm-hierarchy__pane-heading p { font-size: 10.5px; line-height: 1.42; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy:is(.npmm-hierarchy--app-sidebar,.npmm-hierarchy--app-divider,.npmm-hierarchy--app-split,.npmm-hierarchy--app-compact) .npmm-hierarchy__links { gap: 4px 7px; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy:is(.npmm-hierarchy--app-sidebar,.npmm-hierarchy--app-divider,.npmm-hierarchy--app-split,.npmm-hierarchy--app-compact) .npmm-subitem__link { min-height: 50px; gap: 9px; padding: 7px 9px; border: 0; border-radius: 12px; background: transparent; box-shadow: none; transform: none; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy:is(.npmm-hierarchy--app-sidebar,.npmm-hierarchy--app-divider,.npmm-hierarchy--app-split,.npmm-hierarchy--app-compact) .npmm-subitem__link:hover, .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy:is(.npmm-hierarchy--app-sidebar,.npmm-hierarchy--app-divider,.npmm-hierarchy--app-split,.npmm-hierarchy--app-compact) .npmm-subitem__link:focus-visible, .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy:is(.npmm-hierarchy--app-sidebar,.npmm-hierarchy--app-divider,.npmm-hierarchy--app-split,.npmm-hierarchy--app-compact) .npmm-subitem.is-open > .npmm-subitem__link { border: 0; background: color-mix(in srgb, var(--npmm-panel-text,#17181b) 4%, var(--npmm-card-hover,#f3f5f8)); box-shadow: none; transform: none; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy:is(.npmm-hierarchy--app-sidebar,.npmm-hierarchy--app-divider,.npmm-hierarchy--app-split,.npmm-hierarchy--app-compact) .npmm-subitem__copy strong { font-size: 12px; font-weight: 650; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy:is(.npmm-hierarchy--app-sidebar,.npmm-hierarchy--app-divider,.npmm-hierarchy--app-split,.npmm-hierarchy--app-compact) .npmm-subitem__description { font-size: 9.8px; line-height: 1.32; } /* Images become app-sized thumbnails instead of marketing cards. */ .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy:is(.npmm-hierarchy--app-sidebar,.npmm-hierarchy--app-divider,.npmm-hierarchy--app-split,.npmm-hierarchy--app-compact) .npmm-subitem--has-media { --npmm-subitem-media-size: 42px; --npmm-subitem-media-icon-size: 36px; --npmm-subitem-media-block-height: 42px; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy:is(.npmm-hierarchy--app-sidebar,.npmm-hierarchy--app-divider,.npmm-hierarchy--app-split,.npmm-hierarchy--app-compact) :is(.npmm-subitem--media-top,.npmm-subitem--media-bottom) > .npmm-subitem__link { flex-direction: row; align-items: center; min-height: 50px; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy:is(.npmm-hierarchy--app-sidebar,.npmm-hierarchy--app-divider,.npmm-hierarchy--app-split,.npmm-hierarchy--app-compact) :is(.npmm-subitem--media-top,.npmm-subitem--media-bottom) .npmm-subitem__media { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 10px; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy:is(.npmm-hierarchy--app-sidebar,.npmm-hierarchy--app-divider,.npmm-hierarchy--app-split,.npmm-hierarchy--app-compact) :is(.npmm-subitem--media-top,.npmm-subitem--media-bottom) .npmm-subitem__arrow { position: static; padding: 0; background: transparent; backdrop-filter: none; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy:is(.npmm-hierarchy--app-sidebar,.npmm-hierarchy--app-divider,.npmm-hierarchy--app-split,.npmm-hierarchy--app-compact) .npmm-subitem--media-background .npmm-subitem__media--background { display: none; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy:is(.npmm-hierarchy--app-sidebar,.npmm-hierarchy--app-divider,.npmm-hierarchy--app-split,.npmm-hierarchy--app-compact) .npmm-subitem--media-background > .npmm-subitem__link { min-height: 50px; align-items: center; color: var(--npmm-panel-text,#17181b); background: transparent; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy:is(.npmm-hierarchy--app-sidebar,.npmm-hierarchy--app-divider,.npmm-hierarchy--app-split,.npmm-hierarchy--app-compact) .npmm-subitem--media-background .npmm-subitem__description { color: var(--npmm-panel-muted,#6d717a); } /* Clean: black selected pill, closest to the supplied UI reference. */ .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--app-sidebar .npmm-hierarchy__control:hover, .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--app-sidebar .npmm-hierarchy__control:focus-visible { background: color-mix(in srgb, var(--npmm-panel-text,#17181b) 5%, transparent); } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--app-sidebar .npmm-hierarchy__control.is-active { background: #17181b; color: #fff; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--app-sidebar .npmm-hierarchy__control.is-active :is(small,i) { color: rgba(255,255,255,.7); } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--app-sidebar .npmm-hierarchy__control.is-active .npmm-hierarchy__control-icon { background: rgba(255,255,255,.12); color: #fff; } /* Separator: flat rows divided by hairlines. */ .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--app-divider > .npmm-hierarchy__controls { gap: 0; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--app-divider .npmm-hierarchy__control { border-radius: 0; border-bottom: 1px solid color-mix(in srgb, var(--npmm-panel-border,#e5e7eb) 86%, transparent); } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--app-divider .npmm-hierarchy__control:last-child { border-bottom: 0; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--app-divider .npmm-hierarchy__control.is-active { background: color-mix(in srgb, var(--npmm-accent,#0a64ff) 7%, transparent); } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--app-divider .npmm-subitem + .npmm-subitem { border-top: 1px solid color-mix(in srgb, var(--npmm-panel-border,#e5e7eb) 80%, transparent); } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--app-divider .npmm-subitem__link { border-radius: 0; } /* Minimal split: single middle list with strong vertical structure. */ .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--app-split { grid-template-columns: minmax(200px,.72fr) minmax(320px,1.45fr) minmax(245px,.9fr); } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--app-split .npmm-hierarchy__links { grid-template-columns: 1fr; gap: 0; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--app-split .npmm-subitem + .npmm-subitem { border-top: 1px solid color-mix(in srgb, var(--npmm-panel-border,#e5e7eb) 82%, transparent); } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--app-split .npmm-subitem__link { border-radius: 0; padding-inline: 4px; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--app-split .npmm-hierarchy__control.is-active { background: color-mix(in srgb, var(--npmm-panel-text,#17181b) 6%, transparent); } /* Compact enterprise: denser rows, no descriptions, soft active pills. */ .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--app-compact { grid-template-columns: minmax(175px,.65fr) minmax(0,2fr) minmax(215px,.78fr); } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--app-compact > .npmm-hierarchy__controls { padding-right: 12px; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--app-compact > .npmm-hierarchy__content { padding-inline: 14px; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--app-compact > :is(.npmm-hierarchy__info,.npmm-hierarchy__featured) { padding-left: 14px; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--app-compact .npmm-hierarchy__control { min-height: 42px; padding: 5px 7px; border-radius: 10px; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--app-compact .npmm-hierarchy__control-icon { width: 27px; height: 27px; border-radius: 9px; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--app-compact .npmm-hierarchy__control small, .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--app-compact .npmm-subitem__description, .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--app-compact .npmm-hierarchy__pane-heading p { display: none; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--app-compact .npmm-hierarchy__control.is-active { background: color-mix(in srgb, var(--npmm-accent,#0a64ff) 8%, transparent); } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--app-compact .npmm-subitem__link { min-height: 42px; padding: 5px 7px; border-radius: 9px; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--app-compact :is(.npmm-subitem--media-top,.npmm-subitem--media-bottom) > .npmm-subitem__link { min-height: 42px; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--app-compact .npmm-subitem--has-media { --npmm-subitem-media-size:34px; --npmm-subitem-media-block-height:34px; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--app-compact :is(.npmm-subitem--media-top,.npmm-subitem--media-bottom) .npmm-subitem__media { flex-basis:34px; width:34px; height:34px; } /* Context card is flatter in the app presets. */ .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy:is(.npmm-hierarchy--app-sidebar,.npmm-hierarchy--app-divider,.npmm-hierarchy--app-split,.npmm-hierarchy--app-compact) .npmm-info-card { border-color: color-mix(in srgb, var(--npmm-panel-border,#e5e7eb) 90%, transparent); border-radius: 15px; background: color-mix(in srgb, var(--npmm-panel-bg,#fff) 96%, var(--npmm-card-hover,#f3f5f8)); box-shadow: none; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy:is(.npmm-hierarchy--app-sidebar,.npmm-hierarchy--app-divider,.npmm-hierarchy--app-split,.npmm-hierarchy--app-compact) .npmm-info-card::after { display:none; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy:is(.npmm-hierarchy--app-sidebar,.npmm-hierarchy--app-divider,.npmm-hierarchy--app-split,.npmm-hierarchy--app-compact) .npmm-info-card__copy { padding:15px; gap:5px; } @media (max-width:1120px) and (min-width:981px) { .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy:is(.npmm-hierarchy--app-sidebar,.npmm-hierarchy--app-divider,.npmm-hierarchy--app-split,.npmm-hierarchy--app-compact) { grid-template-columns:minmax(180px,.72fr) minmax(0,1.8fr); } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy:is(.npmm-hierarchy--app-sidebar,.npmm-hierarchy--app-divider,.npmm-hierarchy--app-split,.npmm-hierarchy--app-compact) > :is(.npmm-hierarchy__info,.npmm-hierarchy__featured) { grid-column:1 / -1; margin-top:14px; padding:14px 0 0; border-left:0; border-top:1px solid color-mix(in srgb,var(--npmm-panel-border,#e5e7eb) 92%,transparent); } } /* 2.20 mobile variants */ .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-app-accordion { gap: 0; border-top: 1px solid var(--npmm-mobile-separator-color); border-bottom: 1px solid var(--npmm-mobile-separator-color); } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-app-accordion .npmm-mobile-group { border: 0; border-radius: 0; background: transparent; box-shadow: none; border-bottom: 1px solid var(--npmm-mobile-separator-color); } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-app-accordion .npmm-mobile-group:last-child { border-bottom:0; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-app-accordion .npmm-mobile-group[open] > summary { background: color-mix(in srgb, var(--npmm-mobile-accent,#0a64ff) 5%, transparent); } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-app-list { gap: 10px; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-app-list .npmm-mobile-list-group { padding: 0; border: 0; background: transparent; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-app-list .npmm-mobile-list-group__heading { padding: 5px 3px 7px; border-bottom: 1px solid var(--npmm-mobile-separator-color); } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-app-list .npmm-mobile-list-group__links { gap:0; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-app-list .npmm-mobile-list-group__links .npmm-subitem__link { border:0; border-radius:0; background:transparent; box-shadow:none; border-bottom:1px solid var(--npmm-mobile-separator-color); } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-app-pills { gap: 11px; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-app-pills .npmm-mobile-list-group { padding: 0; border: 0; background: transparent; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-app-pills .npmm-mobile-list-group__heading { padding-inline:4px; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-app-pills .npmm-mobile-list-group__links { gap:3px; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-app-pills .npmm-mobile-list-group__links .npmm-subitem__link { border:0; border-radius:11px; background:transparent; box-shadow:none; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-app-pills .npmm-mobile-list-group__links .npmm-subitem__link:hover, .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-app-pills .npmm-mobile-list-group__links .npmm-subitem__link:focus-visible { background:color-mix(in srgb,var(--npmm-mobile-text,#17181b) 5%,transparent); } /* ========================================================================== 2.20.1 — Reference app – exact A purpose-built preset matching the supplied UI reference as closely as the SecureFirst hierarchy permits: narrow icon rail, neutral app surface, black active pill, hairline columns and flat list navigation. ========================================================================== */ .npmm-panel:has(.npmm-hierarchy--reference-app) { background:#f5f5f7; border-color:#dedfe4; box-shadow:0 18px 48px rgba(20,22,28,.10); -webkit-backdrop-filter:none; backdrop-filter:none; } .npmm-panel:has(.npmm-hierarchy--reference-app) .npmm-panel__glow { display:none; } .npmm-panel:has(.npmm-hierarchy--reference-app) .npmm-panel__inner { overflow:hidden; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app { display:grid; grid-template-columns:64px minmax(210px,.72fr) minmax(330px,1.35fr) minmax(245px,.82fr); gap:0; align-items:stretch; min-height:420px; margin:calc(-1 * var(--npmm-item-padding,var(--npmm-panel-padding,24px))); background:#f5f5f7; color:#17181b; } /* Narrow icon-only rail. */ .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app > .npmm-hierarchy__rail { grid-column:1; display:flex; flex-direction:column; align-items:center; gap:10px; padding:16px 10px 14px; border-right:1px solid #dedfe4; background:#f2f2f4; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-hierarchy__rail-mark { display:grid; place-items:center; width:38px; height:38px; font-size:22px; line-height:1; color:#111214; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-hierarchy__rail-rule { width:28px; height:1px; margin:2px 0 6px; background:#dedfe4; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-hierarchy__rail-rule--bottom { width:1px; height:78px; margin-top:auto; background:linear-gradient(#d7d8dc 0 62%,transparent 62% 72%,#d7d8dc 72% 100%); } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-hierarchy__rail-item { display:grid; place-items:center; width:38px; height:38px; padding:0; border:0; border-radius:50%; background:transparent; color:#26282d; cursor:pointer; transition:background .18s ease,box-shadow .18s ease,transform .18s ease; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-hierarchy__rail-item svg { width:17px;height:17px; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-hierarchy__rail-item:hover, .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-hierarchy__rail-item:focus-visible { background:#e8e8eb;outline:0; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-hierarchy__rail-item.is-active { background:#fff; box-shadow:0 1px 4px rgba(20,22,28,.10),inset 0 0 0 1px #e0e1e5; } /* Main category column. */ .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app > .npmm-hierarchy__controls { grid-column:2; display:flex; flex-direction:column; gap:4px; padding:15px 16px 18px; border-right:1px solid #dedfe4; background:#f5f5f7; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app > .npmm-hierarchy__controls::before { content:'✦ Menu'; display:block; margin:0 -16px 14px; padding:0 16px 15px; border-bottom:1px solid #dedfe4; font-size:15px; font-weight:760; letter-spacing:-.025em; color:#111214; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-hierarchy__control { min-height:42px; gap:10px; padding:7px 10px; border:0; border-radius:999px; background:transparent; box-shadow:none; color:#2b2d31; transform:none; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-hierarchy__control-icon { width:24px; height:24px; border:0; border-radius:0; background:transparent; color:currentColor; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-hierarchy__control-icon svg { width:16px;height:16px; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-hierarchy__control > span { min-width:0; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-hierarchy__control strong { font-size:13px; font-weight:560; letter-spacing:-.012em; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-hierarchy__control small { display:none; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-hierarchy__control > i { margin-left:auto; color:currentColor; opacity:.72; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-hierarchy__control > i svg { width:13px;height:13px; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-hierarchy__control:hover, .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-hierarchy__control:focus-visible { background:#e9e9ec; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-hierarchy__control.is-active { background:#171719; color:#fff; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-hierarchy__control.is-active .npmm-hierarchy__control-icon { color:#fff;background:transparent; } /* Middle content column — flat rows, no marketing-card thumbnails. */ .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app > .npmm-hierarchy__content { grid-column:3; padding:18px 22px 20px; background:#f7f7f8; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-hierarchy__pane { gap:9px; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-hierarchy__pane-heading { dis:block; padding:0 4px 14px; margin-bottom:2px; border-bottom:1px solid #dedfe4; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-hierarchy__pane-heading small { display:none; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-hierarchy__pane-heading strong { dis:block; font-size:13px; font-weight:600; letter-spacing:-.015em; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-hierarchy__pane-heading p { display:none; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-hierarchy__links { dis:grid; grid-template-columns:1fr; gap:0; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-subitem { border-bottom:1px solid #e2e3e7; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-subitem:last-child { border-bottom:0; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-subitem__link { min-height:43px; gap:10px; padding:6px 9px; border:0; border-radius:999px; background:transparent; box-shadow:none; transform:none; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-subitem__icon { dis:grid; place-items:center; width:24px; height:24px; flex:0 0 24px; border:0; border-radius:0; background:transparent; color:#303238; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-subitem__icon svg { width:16px;height:16px; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-subitem__copy strong { font-size:12.8px;font-weight:540; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-subitem__description, .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-subitem__eyebrow { display:none; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-subitem__arrow { margin-left:auto;color:#5f6269; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-subitem__arrow svg { width:13px;height:13px; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-subitem__link:hover, .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-subitem__link:focus-visible, .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-subitem.is-open > .npmm-subitem__link { background:#fff; box-shadow:0 1px 2px rgba(18,20,24,.07),inset 0 0 0 1px #e2e3e7; } /* Right context column becomes a quiet app-information zone. */ .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app > :is(.npmm-hierarchy__info,.npmm-hierarchy__featured) { grid-column:4; padding:18px 18px 20px; border-left:1px solid #dedfe4; background:#f5f5f7; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app > .npmm-hierarchy__info::before { content:'Details'; dis:block; padding:0 2px 14px; margin-bottom:10px; border-bottom:1px solid #dedfe4; font-size:12.5px; font-weight:600; color:#2f3136; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-info-card { border:0; border-radius:0; background:transparent; box-shadow:none; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-info-card::after, .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-info-card__visual { display:none; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-info-card__copy { padding:6px 2px;gap:7px; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-info-card__copy > small { font-size:10px;letter-spacing:.06em;color:#747780; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-info-card__copy strong { font-size:18px;letter-spacing:-.025em; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-info-card__copy > span { font-size:11.5px;line-height:1.5;color:#747780; } .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app .npmm-info-card__copy a { align-self:flex-start; margin-top:8px; padding:7px 12px; border:1px solid #dedfe4; border-radius:999px; background:#fff; color:#202226; font-size:11px; font-weight:600; } /* Reference mobile: same visual language compressed into a single list. */ .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-reference-list { padding:4px 0; border:1px solid #e0e1e5; border-radius:18px; background:#f7f7f8; box-shadow:none; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-reference-list .npmm-mobile-list-group { padding:0 12px; border:0; border-radius:0; background:transparent; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-reference-list .npmm-mobile-list-group + .npmm-mobile-list-group { border-top:1px solid #dedfe4; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-reference-list .npmm-mobile-list-group__heading { padding:11px 2px 8px; background:transparent; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-reference-list .npmm-mobile-list-group__heading strong { font-size:12px;font-weight:650; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-reference-list .npmm-mobile-list-group__heading small { display:none; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-reference-list .npmm-mobile-list-group__links .npmm-subitem { border-top:1px solid #e4e5e8; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-reference-list .npmm-subitem__link { min-height:42px; padding:7px 4px; border:0; border-radius:0; background:transparent; box-shadow:none; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-reference-list .npmm-subitem__description { display:none; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-reference-list .npmm-subitem__icon { background:transparent; border:0; color:#2d2f34; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-reference-list .npmm-subitem__link:active, .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-reference-list .npmm-subitem__link:focus-visible { background:#fff;border-radius:999px; } @media (max-width:1120px) and (min-width:981px) { .npmm-menu:not(.npmm-is-mobile) .npmm-hierarchy--reference-app { grid-template-columns:58px minmax(195px,.72fr) minmax(290px,1.25fr) minmax(215px,.78fr); } } /* ========================================================================== 2.20.2 — True Accordion Reference All 2.20.x app presets now share one accordion architecture. Categories are fully collapsed on menu open; only one can be open. Children sit on a thin vertical connector line inspired by the supplied reference UI. ========================================================================== */ .npmm-panel:has(.npmm-app-accordion) { background:#f4f4f6; border-color:#dedfe4; box-shadow:0 18px 48px rgba(20,22,28,.09); -webkit-backdrop-filter:none; backdrop-filter:none; } .npmm-panel:has(.npmm-app-accordion) .npmm-panel__glow { display:none; } .npmm-panel:has(.npmm-app-accordion) .npmm-panel__inner { overflow:hidden; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion { display:grid; grid-template-columns:minmax(300px,430px) minmax(240px,1fr); gap:0; min-height:310px; margin:calc(-1 * var(--npmm-item-padding,var(--npmm-panel-padding,24px))); background:#f4f4f6; color:#17181b; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion:not(.npmm-app-accordion--with-info) { grid-template-columns:minmax(320px,560px); justify-content:start; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__nav { padding:16px 18px 18px; background:#f4f4f6; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__nav::before { content:'✦ Menu'; display:block; padding:0 4px 15px; margin:0 0 8px; border-bottom:1px solid #dcdee2; font-size:15px; font-weight:760; letter-spacing:-.025em; color:#111214; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group { margin:0; border:0; background:transparent; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group + .npmm-app-accordion__group { margin-top:2px; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__summary { display:flex; align-items:center; gap:10px; min-height:44px; padding:7px 10px; border:0; border-radius:999px; background:transparent; color:#24262a; cursor:pointer; list-style:none; transition:background .16s ease,color .16s ease,box-shadow .16s ease; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__summary::-webkit-details-marker { display:none; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__summary::marker { display:none;content:''; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__summary:hover, .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__summary:focus-visible { outline:0;background:#e8e8eb; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] > .npmm-app-accordion__summary { background:#171719; color:#fff; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group-icon { display:grid; place-items:center; width:24px; height:24px; flex:0 0 24px; color:currentColor; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group-icon svg { width:16px;height:16px; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group-copy { display:flex; flex-direction:column; min-width:0; gap:2px; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group-copy strong { font-size:13px; font-weight:590; letter-spacing:-.012em; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group-copy small { font-size:10.5px; line-height:1.3; font-weight:430; color:#7a7d84; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] .npmm-app-accordion__group-copy small { color:rgba(255,255,255,.68); } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__destination { display:grid; place-items:center; width:26px; height:26px; margin-left:auto; border-radius:50%; color:currentColor; opacity:.72; text-decoration:none; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__destination:hover, .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__destination:focus-visible { background:rgba(255,255,255,.14);opacity:1;outline:0; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__destination svg { width:13px;height:13px; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__toggle { position:relative; display:grid; place-items:center; width:22px; height:22px; margin-left:4px; font-style:normal; color:currentColor; opacity:.9; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__toggle::before, .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__toggle::after { content:''; position:absolute; width:10px; height:1.5px; border-radius:2px; background:currentColor; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__toggle::after { transform:rotate(90deg);transition:transform .16s ease,opacity .16s ease; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] .npmm-app-accordion__toggle::after { transform:rotate(0);opacity:0; } /* Vertical branch and short horizontal connectors. */ .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__branch { position:relative; padding:6px 0 8px 43px; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__branch::before { content:''; position:absolute; left:25px; top:0; bottom:8px; width:1px; background:#94979e; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__links { display:flex; flex-direction:column; gap:2px; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-subitem { position:relative; border:0; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-subitem::before { content:''; position:absolute; left:-18px; top:50%; width:12px; height:1px; background:#94979e; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-subitem__link { min-height:39px; gap:9px; padding:6px 10px; border:0; border-radius:999px; background:transparent; box-shadow:none; transform:none; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-subitem__icon { display:grid; place-items:center; width:22px; height:22px; flex:0 0 22px; border:0; border-radius:0; background:transparent; color:#35373c; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-subitem__icon svg { width:15px;height:15px; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-subitem__copy strong { font-size:12.6px;font-weight:540;letter-spacing:-.01em; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-subitem__description, .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-subitem__eyebrow { display:none; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-subitem__arrow { margin-left:auto;color:#656870; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-subitem__arrow svg { width:12px;height:12px; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-subitem__link:hover, .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-subitem__link:focus-visible, .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-subitem.is-open > .npmm-subitem__link { background:#fff; box-shadow:inset 0 0 0 1px #e0e1e5; outline:0; } /* Info/context only appears after the user opens a category. */ .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion > .npmm-hierarchy__info { display:none; padding:19px 21px; border-left:1px solid #dedfe4; background:#f7f7f8; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion.has-open-accordion > .npmm-hierarchy__info { display:block; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion > .npmm-hierarchy__info::before { content:'Details'; display:block; padding:0 2px 13px; margin-bottom:10px; border-bottom:1px solid #dedfe4; font-size:12px; font-weight:620; color:#33353a; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-info-card { border:0;border-radius:0;background:transparent;box-shadow:none; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-info-card::after, .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-info-card__visual { display:none; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-info-card__copy { padding:4px 0;gap:7px; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-info-card__copy strong { font-size:17px;letter-spacing:-.02em; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-info-card__copy > span { font-size:11.5px;line-height:1.5;color:#747780; } /* Same architecture, different densities. */ .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion--app-sidebar .npmm-app-accordion__summary { border-radius:13px; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion--app-sidebar .npmm-app-accordion__group[open] > .npmm-app-accordion__summary { background:#202126; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion--app-divider .npmm-app-accordion__group + .npmm-app-accordion__group { border-top:1px solid #dedfe4;margin-top:0;padding-top:2px; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion--app-divider .npmm-app-accordion__summary { border-radius:8px; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion--app-split .npmm-app-accordion__summary { border-radius:10px; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion--app-split .npmm-app-accordion__group-copy small { display:none; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion--app-compact .npmm-app-accordion__nav { padding:12px 14px 14px; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion--app-compact .npmm-app-accordion__summary { min-height:37px;padding:5px 8px; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion--app-compact .npmm-app-accordion__group-copy small { display:none; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion--app-compact .npmm-app-accordion__branch { padding-top:3px;padding-bottom:5px; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion--app-compact .npmm-subitem__link { min-height:34px;padding-block:4px; } /* Mobile app/reference variants are also true accordions. */ .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) { padding:4px 0; border:1px solid #e0e1e5; border-radius:16px; background:#f7f7f8; box-shadow:none; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group { position:relative; margin:0 10px; border:0; border-radius:0; background:transparent; box-shadow:none; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group + .npmm-mobile-group { border-top:1px solid #dedfe4; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group > summary { min-height:42px; padding:7px 8px; border:0; border-radius:999px; background:transparent; box-shadow:none; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group[open] > summary { background:#171719;color:#fff; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group[open] > summary small { color:rgba(255,255,255,.68); } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group__links { position:relative; padding:5px 0 8px 38px; gap:2px; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group__links::before { content:''; position:absolute; left:22px; top:0; bottom:7px; width:1px; background:#989ba2; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group__links .npmm-subitem { position:relative; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group__links .npmm-subitem::before { content:''; position:absolute; left:-16px; top:50%; width:10px; height:1px; background:#989ba2; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group__links .npmm-subitem__link { min-height:37px; padding:5px 8px; border:0; border-radius:999px; background:transparent; box-shadow:none; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group__links .npmm-subitem__link:hover, .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group__links .npmm-subitem__link:focus-visible { background:#fff;box-shadow:inset 0 0 0 1px #e0e1e5; } @media (prefers-reduced-motion: reduce) { .npmm-app-accordion__summary, .npmm-app-accordion__toggle::after { transition:none !important; } } /* Reference exact is deliberately tighter than the sibling variants. */ .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion--reference-app .npmm-app-accordion__group-copy small { display:none; } .npmm-menu.npmm-is-mobile .npmm-mobile-hierarchy--preset-reference-list .npmm-mobile-group > summary small { display:none; } /* ========================================================================== 2.20.3 — Reference accordion polish - neutral reference palette (no accidental blue UI chrome) - group destinations are inline icons, never a separate chip/card - selected builder layer stays readable in Live Canvas - branch line + child rows animate softly into place ========================================================================== */ /* Neutral app/reference palette. SecureFirst blue remains available elsewhere, but this navigation family follows the supplied black/grey app reference. */ .npmm-panel:has(.npmm-app-accordion), .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion { background:#f1f1f3; color:#1b1c20; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__nav { background:#f1f1f3; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__nav::before { border-bottom-color:#d9dade; color:#17181b; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__summary { color:#292a2e; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__summary:hover, .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__summary:focus-visible { background:#e5e5e8; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] > .npmm-app-accordion__summary { background:#181819; color:#fff; box-shadow:none; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group-icon, .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-subitem__icon { color:#303137; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] > .npmm-app-accordion__summary .npmm-app-accordion__group-icon { color:#fff; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group-copy small { color:#777980; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__branch::before, .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-subitem::before { background:#a0a2a8; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-subitem__arrow { color:#777980; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-subitem__link:hover, .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-subitem__link:focus-visible, .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-subitem.is-open > .npmm-subitem__link, .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-subitem.is-builder-selected > .npmm-subitem__link { background:#fff; box-shadow:inset 0 0 0 1px #dedfe3; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion > .npmm-hierarchy__info { border-left-color:#d9dade; background:#f5f5f6; } /* Live Canvas: exactly one selected hierarchy layer is allowed to stay open. This is editor-only because is-builder-selected is emitted only by builder rendering. */ .npmm-builder-rendered-menu .npmm-app-accordion__group.is-builder-selected > .npmm-app-accordion__summary { box-shadow:0 0 0 1px rgba(24,24,25,.08); } /* Smooth desktop accordion. Override the UA details hiding so the branch can animate between max-height states instead of popping in/out. */ .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group > .npmm-app-accordion__branch { display:block !important; max-height:0; padding-top:0; padding-bottom:0; opacity:0; overflow:hidden; visibility:hidden; transition:max-height .34s cubic-bezier(.22,1,.36,1), opacity .18s ease, padding .28s cubic-bezier(.22,1,.36,1), visibility 0s linear .34s; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] > .npmm-app-accordion__branch { max-height:720px; padding-top:6px; padding-bottom:8px; opacity:1; visibility:visible; transition:max-height .42s cubic-bezier(.22,1,.36,1), opacity .22s ease .03s, padding .34s cubic-bezier(.22,1,.36,1), visibility 0s; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__branch::before { transform:scaleY(0); transform-origin:top; opacity:0; transition:transform .30s cubic-bezier(.22,1,.36,1) .04s, opacity .16s ease .04s; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] > .npmm-app-accordion__branch::before { transform:scaleY(1); opacity:1; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-subitem { opacity:0; transform:translateY(-5px); transition:opacity .22s ease, transform .28s cubic-bezier(.22,1,.36,1); } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] .npmm-subitem { opacity:1; transform:translateY(0); } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-subitem::before { transform:scaleX(0); transform-origin:left; opacity:0; transition:transform .22s cubic-bezier(.22,1,.36,1), opacity .16s ease; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] .npmm-subitem::before { transform:scaleX(1); opacity:1; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] .npmm-subitem:nth-child(1) { transition-delay:.055s; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] .npmm-subitem:nth-child(2) { transition-delay:.080s; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] .npmm-subitem:nth-child(3) { transition-delay:.105s; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] .npmm-subitem:nth-child(4) { transition-delay:.130s; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] .npmm-subitem:nth-child(5) { transition-delay:.155s; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] .npmm-subitem:nth-child(6) { transition-delay:.180s; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] .npmm-subitem:nth-child(n+7) { transition-delay:.205s; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] .npmm-subitem:nth-child(1)::before { transition-delay:.070s; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] .npmm-subitem:nth-child(2)::before { transition-delay:.095s; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] .npmm-subitem:nth-child(3)::before { transition-delay:.120s; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] .npmm-subitem:nth-child(4)::before { transition-delay:.145s; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] .npmm-subitem:nth-child(n+5)::before { transition-delay:.170s; } /* Mobile reference/app accordion: remove the old full-width destination chip. The link now lives as one small arrow in the group summary. */ .npmm-menu.npmm-is-mobile .npmm-mobile-group__destination--inline { display:grid; place-items:center; width:27px; height:27px; flex:0 0 27px; margin:0 2px 0 auto; padding:0; border:0; border-radius:50%; background:transparent; color:currentColor; opacity:.68; text-decoration:none; } .npmm-menu.npmm-is-mobile .npmm-mobile-group__destination--inline:hover, .npmm-menu.npmm-is-mobile .npmm-mobile-group__destination--inline:focus-visible { background:rgba(127,127,134,.10); opacity:1; outline:0; } .npmm-menu.npmm-is-mobile .npmm-mobile-group[open] > summary .npmm-mobile-group__destination--inline:hover, .npmm-menu.npmm-is-mobile .npmm-mobile-group[open] > summary .npmm-mobile-group__destination--inline:focus-visible { background:rgba(255,255,255,.12); } .npmm-menu.npmm-is-mobile .npmm-mobile-group__destination--inline svg { width:13px;height:13px; } .npmm-menu.npmm-is-mobile .npmm-mobile-group--has-destination > summary { grid-template-columns:auto minmax(0,1fr) auto auto; gap:8px; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) { background:#f1f1f3; border-color:#d9dade; --npmm-mobile-separator-color:#d9dade; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group > summary { color:#292a2e; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group[open] > summary { background:#181819;color:#fff; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group__icon, .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-subitem__icon { color:#34353a; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group[open] > summary .npmm-mobile-group__icon { color:#fff; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group__links::before, .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group__links .npmm-subitem::before { background:#a0a2a8; } /* Smooth mobile branch and item entrance. Author rules keep the details content mounted while closed, which allows the line and rows to animate instead of pop. */ .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group > .npmm-mobile-group__links { display:flex !important; flex-direction:column; max-height:0; padding-top:0; padding-bottom:0; opacity:0; overflow:hidden; visibility:hidden; transition:max-height .38s cubic-bezier(.22,1,.36,1), opacity .18s ease, padding .30s cubic-bezier(.22,1,.36,1), visibility 0s linear .38s; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group[open] > .npmm-mobile-group__links { max-height:850px; padding-top:5px; padding-bottom:8px; opacity:1; visibility:visible; transition:max-height .46s cubic-bezier(.22,1,.36,1), opacity .22s ease .035s, padding .34s cubic-bezier(.22,1,.36,1), visibility 0s; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group__links::before { transform:scaleY(0); transform-origin:top; opacity:0; transition:transform .31s cubic-bezier(.22,1,.36,1) .045s, opacity .16s ease .045s; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group[open] > .npmm-mobile-group__links::before { transform:scaleY(1);opacity:1; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group__links .npmm-subitem { opacity:0; transform:translateY(-4px); transition:opacity .20s ease, transform .27s cubic-bezier(.22,1,.36,1); } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group[open] .npmm-subitem { opacity:1;transform:translateY(0); } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group__links .npmm-subitem::before { transform:scaleX(0); transform-origin:left; opacity:0; transition:transform .21s cubic-bezier(.22,1,.36,1), opacity .15s ease; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group[open] .npmm-subitem::before { transform:scaleX(1);opacity:1; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group[open] .npmm-subitem:nth-child(1) { transition-delay:.055s; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group[open] .npmm-subitem:nth-child(2) { transition-delay:.080s; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group[open] .npmm-subitem:nth-child(3) { transition-delay:.105s; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group[open] .npmm-subitem:nth-child(4) { transition-delay:.130s; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group[open] .npmm-subitem:nth-child(5) { transition-delay:.155s; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group[open] .npmm-subitem:nth-child(n+6) { transition-delay:.180s; } /* Rotate the normal mobile chevron a little more softly. */ .npmm-menu.npmm-is-mobile .npmm-mobile-group > summary > i { transition:transform .25s cubic-bezier(.22,1,.36,1); } @media (prefers-reduced-motion: reduce) { .npmm-app-accordion__group > .npmm-app-accordion__branch, .npmm-app-accordion__branch::before, .npmm-app-accordion .npmm-subitem, .npmm-app-accordion .npmm-subitem::before, .npmm-mobile-group > .npmm-mobile-group__links, .npmm-mobile-group__links::before, .npmm-mobile-group__links .npmm-subitem, .npmm-mobile-group__links .npmm-subitem::before, .npmm-mobile-group > summary > i { transition:none !important; } } /* ========================================================================== 2.20.4 — White + SecureFirst blue reference accordion - true white app surface - SecureFirst-blue icons and connector tree - connector stops exactly at the final child branch - stronger, visible accordion/branch/item entrance motion ========================================================================== */ /* White surface throughout the reference/app accordion family. */ .npmm-panel:has(.npmm-app-accordion), .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion, .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__nav, .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion > .npmm-hierarchy__info { background:#fff; } .npmm-panel:has(.npmm-app-accordion) { border-color:#e5e8ef; box-shadow:0 18px 46px rgba(17,24,39,.08); } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__nav::before, .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion > .npmm-hierarchy__info, .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion > .npmm-hierarchy__info::before { border-color:#e8ebf1; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__summary:hover, .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__summary:focus-visible { background:#f5f7fb; } /* Blue navigation language: iconography + tree connectors. */ .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion { --npmm-reference-blue:var(--npmm-accent,#0a64ff); } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group-icon, .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-subitem__icon, .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-subitem__arrow, .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__destination { color:var(--npmm-reference-blue); } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] > .npmm-app-accordion__summary .npmm-app-accordion__group-icon, .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] > .npmm-app-accordion__summary .npmm-app-accordion__destination { color:#72a8ff; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__branch::before, .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-subitem::before { background:var(--npmm-reference-blue); } /* Stop the vertical connector exactly at the last horizontal branch. The white mask starts at the centre of the last row, so it also works when a row becomes taller because of wrapping. */ .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-subitem:last-child::after { content:''; position:absolute; z-index:1; left:-19px; top:50%; bottom:-14px; width:3px; background:#fff; pointer-events:none; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-subitem::before { z-index:2; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion .npmm-subitem__link { position:relative; z-index:3; } /* More visible motion. These keyframes fire reliably when a native

element is opened, including inside Live Canvas where frontend JS is not always the code path controlling the selected builder layer. */ @keyframes npmm-ref-line-draw { 0% { transform:scaleY(0);opacity:0; } 100% { transform:scaleY(1);opacity:1; } } @keyframes npmm-ref-branch-draw { 0% { transform:scaleX(0);opacity:0; } 100% { transform:scaleX(1);opacity:1; } } @keyframes npmm-ref-item-enter { 0% { opacity:0;transform:translate3d(-9px,-3px,0); } 100% { opacity:1;transform:translate3d(0,0,0); } } @keyframes npmm-ref-summary-settle { 0% { transform:scale(.985); } 100% { transform:scale(1); } } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] > .npmm-app-accordion__summary { animation:npmm-ref-summary-settle .24s cubic-bezier(.22,1,.36,1) both; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] > .npmm-app-accordion__branch::before { animation:npmm-ref-line-draw .46s cubic-bezier(.22,1,.36,1) .045s both; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] .npmm-subitem { animation:npmm-ref-item-enter .34s cubic-bezier(.22,1,.36,1) both; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] .npmm-subitem::before { animation:npmm-ref-branch-draw .28s cubic-bezier(.22,1,.36,1) both; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] .npmm-subitem:nth-child(1) { animation-delay:.070s; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] .npmm-subitem:nth-child(2) { animation-delay:.110s; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] .npmm-subitem:nth-child(3) { animation-delay:.150s; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] .npmm-subitem:nth-child(4) { animation-delay:.190s; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] .npmm-subitem:nth-child(5) { animation-delay:.230s; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] .npmm-subitem:nth-child(6) { animation-delay:.270s; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] .npmm-subitem:nth-child(n+7) { animation-delay:.310s; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] .npmm-subitem:nth-child(1)::before { animation-delay:.090s; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] .npmm-subitem:nth-child(2)::before { animation-delay:.130s; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] .npmm-subitem:nth-child(3)::before { animation-delay:.170s; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] .npmm-subitem:nth-child(4)::before { animation-delay:.210s; } .npmm-menu:not(.npmm-is-mobile) .npmm-app-accordion__group[open] .npmm-subitem:nth-child(n+5)::before { animation-delay:.250s; } /* Chromium/Safari's modern details animation path. It augments the max-height fallback above and gives Live Canvas an actual opening/closing accordion motion rather than only animating the contents after they appear. */ @supports selector(details::details-content) { .npmm-app-accordion__group, .npmm-mobile-group { interpolate-size:allow-keywords; } .npmm-app-accordion__group::details-content, .npmm-mobile-group::details-content { block-size:0; overflow:clip; opacity:0; transition:block-size .42s cubic-bezier(.22,1,.36,1), opacity .20s ease, content-visibility .42s allow-discrete; } .npmm-app-accordion__group[open]::details-content, .npmm-mobile-group[open]::details-content { block-size:auto; opacity:1; } } /* Mobile gets the same white/blue visual language. */ .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) { --npmm-reference-blue:var(--npmm-mobile-accent,var(--npmm-accent,#0a64ff)); background:#fff; border-color:#e5e8ef; --npmm-mobile-separator-color:#e8ebf1; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group__icon, .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-subitem__icon, .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-subitem__arrow, .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group__destination--inline { color:var(--npmm-reference-blue); } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group[open] > summary .npmm-mobile-group__icon, .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group[open] > summary .npmm-mobile-group__destination--inline { color:#72a8ff; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group__links::before, .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group__links .npmm-subitem::before { background:var(--npmm-reference-blue); } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group__links .npmm-subitem:last-child::after { content:''; position:absolute; z-index:1; left:-17px; top:50%; bottom:-14px; width:3px; background:#fff; pointer-events:none; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group__links .npmm-subitem::before { z-index:2; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group__links .npmm-subitem__link { position:relative;z-index:3; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group[open] > .npmm-mobile-group__links::before { animation:npmm-ref-line-draw .46s cubic-bezier(.22,1,.36,1) .045s both; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group[open] .npmm-subitem { animation:npmm-ref-item-enter .34s cubic-bezier(.22,1,.36,1) both; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group[open] .npmm-subitem::before { animation:npmm-ref-branch-draw .28s cubic-bezier(.22,1,.36,1) both; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group[open] .npmm-subitem:nth-child(1) { animation-delay:.070s; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group[open] .npmm-subitem:nth-child(2) { animation-delay:.110s; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group[open] .npmm-subitem:nth-child(3) { animation-delay:.150s; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group[open] .npmm-subitem:nth-child(4) { animation-delay:.190s; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group[open] .npmm-subitem:nth-child(5) { animation-delay:.230s; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group[open] .npmm-subitem:nth-child(n+6) { animation-delay:.270s; } @media (prefers-reduced-motion: reduce) { .npmm-app-accordion__group[open] > .npmm-app-accordion__summary, .npmm-app-accordion__group[open] > .npmm-app-accordion__branch::before, .npmm-app-accordion__group[open] .npmm-subitem, .npmm-app-accordion__group[open] .npmm-subitem::before, .npmm-mobile-group[open] > .npmm-mobile-group__links::before, .npmm-mobile-group[open] .npmm-subitem, .npmm-mobile-group[open] .npmm-subitem::before { animation:none !important; } } /* ========================================================================== 2.20.5 — Open mobile accordion / free category rows - removes the enclosing card around Product accordion groups - removes the dark active pill - makes category headings larger and freer, like the simple company menu - keeps SecureFirst-blue icons, destination arrows and connector tree ========================================================================== */ /* Mobile App/Reference accordions live directly on the drawer surface instead of inside a second rounded container. */ .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) { padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; } /* Categories are free rows with a quiet hairline rhythm, not cards/pills. */ .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group { margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group + .npmm-mobile-group { border-top:1px solid #edf0f5; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group > summary { min-height:58px; padding:10px 7px; border:0; border-radius:0; background:transparent; color:#202329; box-shadow:none; transition:background .20s ease,color .20s ease; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group > summary:hover, .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group > summary:focus-visible { background:#f8faff; outline:0; } /* Opening a category no longer creates a black pill. */ .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group[open] > summary { background:transparent; color:#202329; box-shadow:none; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group[open] > summary small { color:#7b818c; } /* Larger category hierarchy, inspired by the freer Company section. */ .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group__copy { gap:3px; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group__copy strong { font-size:15.5px; line-height:1.2; font-weight:700; letter-spacing:-.018em; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group__copy small { font-size:11.2px; line-height:1.35; color:#7b818c; } /* Keep the icon language blue whether the category is open or closed. */ .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group__icon, .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group[open] > summary .npmm-mobile-group__icon, .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group__destination--inline, .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group[open] > summary .npmm-mobile-group__destination--inline { color:var(--npmm-reference-blue,var(--npmm-mobile-accent,var(--npmm-accent,#0a64ff))); } /* Chevron remains quiet; opening is communicated by rotation plus the blue tree. */ .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group > summary > i { color:#303640; } /* The child tree begins slightly beneath the free heading and keeps the clean blue connector. Child links stay free too; only hover/focus gets a faint wash. */ .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group__links { padding-left:48px; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group__links::before { left:29px; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group__links .npmm-subitem::before { left:-19px; width:12px; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group__links .npmm-subitem:last-child::after { left:-20px; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group__links .npmm-subitem__link { border:0; border-radius:10px; background:transparent; box-shadow:none; } .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group__links .npmm-subitem__link:hover, .npmm-menu.npmm-is-mobile :is( .npmm-mobile-hierarchy--preset-app-accordion, .npmm-mobile-hierarchy--preset-app-list, .npmm-mobile-hierarchy--preset-app-pills, .npmm-mobile-hierarchy--preset-reference-list ) .npmm-mobile-group__links .npmm-subitem__link:focus-visible { background:#f7f9fd; box-shadow:none; } /* ========================================================================== */ /* 2.20.7 - mobile presets for free-grid/company mega menus */ /* ========================================================================== */ .npmm-menu.npmm-is-mobile .npmm-panel--mega[class*="npmm-panel--mobile-mega-"] .npmm-block { order: var(--npmm-mobile-order, 0); } /* Equal cards: neutralises desktop feature/wide/large slots on mobile. */ .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-equal-cards .npmm-panel__grid { gap: 8px; } .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-equal-cards .npmm-block .npmm-card, .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-equal-cards .npmm-block-style--feature .npmm-card, .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-equal-cards .npmm-block-style--large .npmm-card, .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-equal-cards .npmm-block-style--wide .npmm-card, .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-equal-cards .npmm-block-style--banner .npmm-card, .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-equal-cards .npmm-block-style--compact .npmm-card, .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-equal-cards .npmm-block-style--plain .npmm-card { min-height: 78px; padding: 12px 14px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; border: 1px solid var(--npmm-card-border, #e7e9ee); border-radius: 15px; background: #fff; box-shadow: none; } .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-equal-cards .npmm-block .npmm-card__icon, .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-equal-cards .npmm-block-style--feature .npmm-card__icon, .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-equal-cards .npmm-block-style--large .npmm-card__icon, .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-equal-cards .npmm-block-style--wide .npmm-card__icon { width: 40px; height: 40px; margin: 0; border-radius: 12px; } .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-equal-cards .npmm-block .npmm-card__title, .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-equal-cards .npmm-block-style--feature .npmm-card__title, .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-equal-cards .npmm-block-style--large .npmm-card__title, .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-equal-cards .npmm-block-style--wide .npmm-card__title { font-size: 15px; line-height: 1.25; letter-spacing: -.018em; } .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-equal-cards .npmm-block .npmm-card__description, .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-equal-cards .npmm-block-style--feature .npmm-card__description { max-width: none; font-size: 12.5px; line-height: 1.4; } .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-equal-cards .npmm-block-style--feature .npmm-card__arrow, .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-equal-cards .npmm-block-style--large .npmm-card__arrow { position: relative; top: auto; right: auto; margin-left: auto; } /* Compact list: smaller white rows with a clear click target. */ .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-compact-list .npmm-panel__grid { gap: 4px; } .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-compact-list .npmm-block .npmm-card, .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-compact-list .npmm-block-style--feature .npmm-card, .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-compact-list .npmm-block-style--large .npmm-card, .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-compact-list .npmm-block-style--wide .npmm-card { min-height: 62px; padding: 9px 8px; flex-direction: row; align-items: center; gap: 10px; border-color: transparent; border-radius: 12px; background: transparent; box-shadow: none; } .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-compact-list .npmm-block .npmm-card__icon, .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-compact-list .npmm-block-style--feature .npmm-card__icon { width: 34px; height: 34px; margin: 0; border-radius: 10px; } .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-compact-list .npmm-block .npmm-card__title, .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-compact-list .npmm-block-style--feature .npmm-card__title { font-size: 14.5px; } .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-compact-list .npmm-block-style--feature .npmm-card__arrow, .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-compact-list .npmm-block-style--large .npmm-card__arrow { position: relative; top: auto; right: auto; margin-left: auto; } /* Minimal list: no card boxes, only thin separators. */ .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-minimal-list .npmm-panel__grid { gap: 0; } .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-minimal-list .npmm-block .npmm-card, .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-minimal-list .npmm-block-style--feature .npmm-card, .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-minimal-list .npmm-block-style--large .npmm-card, .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-minimal-list .npmm-block-style--wide .npmm-card { min-height: 66px; padding: 11px 4px; flex-direction: row; align-items: center; gap: 11px; border: 0; border-bottom: 1px solid #e8eaf0; border-radius: 0; background: transparent; box-shadow: none; } .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-minimal-list .npmm-block:last-child .npmm-card { border-bottom: 0; } .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-minimal-list .npmm-block .npmm-card__icon, .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-minimal-list .npmm-block-style--feature .npmm-card__icon { width: 32px; height: 32px; margin: 0; border-radius: 9px; background: transparent; box-shadow: none; } .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-minimal-list .npmm-block .npmm-card__title, .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-minimal-list .npmm-block-style--feature .npmm-card__title { font-size: 14.5px; } .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-minimal-list .npmm-block-style--feature .npmm-card__arrow, .npmm-menu.npmm-is-mobile .npmm-panel--mobile-mega-minimal-list .npmm-block-style--large .npmm-card__arrow { position: relative; top: auto; right: auto; margin-left: auto; }