/* mobile-breakpoint: 1200px */ /* Mobile nav overlay — accordion menu shown below the breakpoint instead of the desktop mega-menu (see mega-menu.css's own @media block, which hides .zds-header__inner and shows .zmob-toggle). Scoped under .zmob-*, no collision with .zmm-* — except cards, which intentionally reuse .zmm-card from mega-menu.css so mobile cards stay visually identical to desktop. Sizing/colors below are placeholders (token-based, not yet pixel-matched to Figma) — refine as the mobile Figma spec comes in. */ /* display: none/flex owned entirely by mega-menu.css's breakpoint rules — mega-menu.css loads before this file, so redeclaring `display` here would win the same-specificity source-order tie and permanently hide the toggle, even inside the @media(max-width:1200px) block that shows it. */ .zds-v1 .zmob-toggle { align-items: center; justify-content: center; width: 40px; height: 40px; padding: 8px; border: none; outline: none; border-radius: var(--zds-radius-md); background: transparent; cursor: pointer; } .zds-v1 .zmob-toggle:hover, .zds-v1 .zmob-toggle:focus { background-color: transparent; color: inherit; } .zds-v1 .zmob-toggle .zds-icon { --zds-icon-color: var(--zds-color-cream); } @media (min-width: 797px) and (max-width: 1200px) { .zds-v1 .zmob-toggle { width: 48px; height: 48px; } .zds-v1 .zmob-toggle .zds-icon { --zds-icon-size: 32px; } } .zds-v1.zmob-overlay { position: fixed; inset: 0; z-index: 1001; display: flex; flex-direction: column; background: var(--zds-color-cream); overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity 0.2s ease; } body.zmob-is-open .zmob-overlay { opacity: 1; visibility: visible; } /* WP admin bar is position:fixed at top:0 too (z-index 99999, above our 1001) — the overlay's own inset:0 ignores the margin-top WP adds to push page content below it, so logged-in users see the overlay's header start underneath the admin bar. Match WP's own admin-bar height + its 782px responsive breakpoint (not ours) to push the overlay down. */ body.admin-bar .zmob-overlay { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .zmob-overlay { top: 46px; } } /* header-mobile-opened-light (Figma, 390px width) */ .zds-v1 .zmob-overlay__header { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 64px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--zds-color-on-light-border-subtle); } .zds-v1 .zmob-logo img { display: block; height: 22.4px; width: 112px; } .zds-v1 .zmob-close { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 8px; border-radius: var(--zds-radius-md); border: none; outline: none; background: transparent; cursor: pointer; } .zds-v1 .zmob-close:hover, .zds-v1 .zmob-close:focus { background-color: transparent; color: inherit; } .zds-v1 .zmob-close .zds-icon { --zds-icon-color: var(--zds-color-deep-green); } /* Navigation Items (Figma, 390px width) */ .zds-v1 .zmob-nav { padding: var(--zds-space-6) 0 0; } .zds-v1 .zmob-nav__list { list-style: none; margin: 0; padding: 0; } /* No border between rows in Figma — each row's own 16px padding (below) already provides the vertical rhythm, no extra margin needed. */ /* Nav Item - Agentic teams: font is Outfit Light 24px/145% (body/large — see tokens.css's two-family system comment), not the heading family. */ .zds-v1 .zmob-nav__link, .zds-v1 .zmob-nav__trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--zds-space-4); border: none; outline: none; background: transparent; font-family: var(--zds-font-family-base); font-weight: var(--zds-font-weight-light); font-size: var(--zds-body-size-large); line-height: var(--zds-body-line-height); color: var(--zds-color-deep-green); text-decoration: none; cursor: pointer; } .zds-v1 .zmob-nav__link:hover, .zds-v1 .zmob-nav__link:focus, .zds-v1 .zmob-nav__trigger:hover, .zds-v1 .zmob-nav__trigger:focus { background-color: transparent; color: var(--zds-color-deep-green); text-decoration: none; } .zds-v1 .zmob-nav__dropdown { display: flex; flex-direction: column; align-items: flex-start; padding: var(--zds-space-5); background: var(--zds-color-cream); } .zds-v1 .zmob-dropdown__content { display: flex; flex-direction: column; gap: var(--zds-space-10); width: 100%; } .zds-v1 .zmob-dropdown__content--row { flex-direction: row; flex-wrap: wrap; } .zds-v1 .zmob-dropdown__content--row .zmob-left { flex: 1 1 280px; min-width: 0; width: auto; } /* No flex-grow — .zmob-right keeps its own card width (max-width, base rule above) instead of stretching to fill the row when it wraps onto a line by itself. */ .zds-v1 .zmob-dropdown__content--row .zmob-right { flex: 0 1 420px; min-width: 0; width: auto; } /* .zmm-indicator (+/- accordion icon, reused from mega-menu.css) defaults to a dark-green tile + cream icon, made for the dark desktop header — on the overlay's cream background that's invisible. Same override values as .zds-header.zmm-light's confirmed light-theme swap (mega-menu.css). */ .zds-v1.zmob-overlay .zmm-indicator { width: 24px; height: 24px; background: var(--zds-color-on-light-border); } .zds-v1.zmob-overlay .zmm-indicator .zds-icon { --zds-icon-color: var(--zds-color-deep-green); } /* mega-menu.css's +/- swap is keyed on .is-open — mobile-menu.js toggles .zmob-nav__item--open on the
  • instead, so the swap needs its own rule here rather than relying on the shared .is-open one. Opacity (not display) to match mega-menu.css's crossfade — display:none/block can't transition, which made the minus icon pop in instead of fading in. */ .zds-v1 .zmob-nav__item--open .zmm-indicator__open { opacity: 0; } .zds-v1 .zmob-nav__item--open .zmm-indicator__close { opacity: 1; } /* Same .is-open vs .zmob-nav__item--open mismatch as above — mega-menu.css's card fade-in (.has-dropdown.is-open .zmm-card) never matches on mobile, leaving reused .zmm-card--icon/.zmm-card--person markup stuck at its idle opacity: 0. */ .zds-v1 .zmob-nav__item--open .zmm-card { opacity: 1; transform: translateY(0); } /* .zls-trigger/.zls-dropdown (language switcher, reused from language-switcher.php) default to .btn-white-dark-bg — cream text/icon on a near-transparent cream tint, made for the dark desktop header. Same override values as .zds-header.zmm-light's confirmed light-theme swap, plus Switcher Button (Figma, 390px width)'s own box dimensions. */ .zds-v1.zmob-overlay .zls-trigger { box-sizing: border-box; width: 77px; height: 34px; padding: 10px 16px; gap: 8px; border-radius: var(--zds-radius-sm); background: var(--zds-color-on-light-border); } .zds-v1.zmob-overlay .zls-trigger:hover:not([disabled]):not([aria-disabled="true"]), .zds-v1.zmob-overlay .zls-trigger:active:not([disabled]):not([aria-disabled="true"]), .zds-v1.zmob-overlay .zls-trigger:focus:not([disabled]):not([aria-disabled="true"]) { background-color: var(--zds-color-on-light-border); border-color: transparent; box-shadow: none; } .zds-v1.zmob-overlay .zls-trigger__code { font-family: var(--zds-font-family-heading); font-weight: var(--zds-font-weight-medium); font-size: 16px; line-height: 130%; color: var(--zds-color-deep-green); } .zds-v1.zmob-overlay .zls-trigger__icon { --zds-icon-color: var(--zds-color-deep-green); } .zds-v1.zmob-overlay .zls-dropdown { background: var(--zds-color-on-light-border); } .zds-v1.zmob-overlay .zls-option__code, .zds-v1.zmob-overlay .zls-option__name { color: var(--zds-color-deep-green); } /* Bottom-pinned (matches desktop .zmm-sub-column) — in the row layout (568-1200px, .zmob-left--row) a column without a heading stretches to its row-mate's height via the parent's default align-items:stretch, so pinning its card to the bottom keeps both columns' cards level instead of the headed one sitting lower. */ .zds-v1 .zmob-sub-column { width: 100%; display: flex; flex-direction: column; justify-content: flex-end; } /* Person cards only (see walker.php) — stacks from the top instead of the default bottom-pin. */ .zds-v1 .zmob-sub-column--top { justify-content: flex-start; } .zds-v1 .zmob-sub-column__heading { margin: 0 0 var(--zds-space-5); font-family: var(--zds-font-family-base); font-weight: var(--zds-font-weight-regular); font-size: 14px; line-height: 18px; color: var(--zds-color-taupe); text-transform: uppercase; } .zds-v1 .zmob-sub-column .zmm-card + .zmm-card { margin-top: 10px; } .zds-v1 .zmob-sub-column .zmm-card--person { width: 100%; } @media (min-width: 798px) { .zds-v1 .zmob-card--person .zmob-card__photo { display: none; } } @media (max-width: 797px) { .zds-v1 .zmob-card--person { display: flex; align-items: center; gap: 12px; width: 100%; height: auto; background-image: none !important; } .zds-v1 .zmob-card--person::before, .zds-v1 .zmob-card--person::after { content: none; } .zds-v1 .zmob-card__photo { flex-shrink: 0; width: 88px; height: 72px; border-radius: var(--zds-radius-sm); background-color: var(--zds-color-mint); background-size: cover; background-position: center top; } .zds-v1 .zmm-card--person-coming-soon .zmob-card__photo { background-color: var(--zds-color-taupe); filter: saturate(0.11) contrast(0.94); } .zds-v1 .zmob-card__body { display: flex; flex-direction: column; justify-content: flex-end; align-self: stretch; gap: var(--zds-space-2); flex: 1; min-width: 0; } .zds-v1 .zmob-card--person .zmm-card__badge { position: static; } .zds-v1 .zmob-card--person .zmm-card__name { position: static; max-width: none; } .zds-v1 .zmob-card--person .zmm-card__arrow { position: absolute; bottom: var(--zds-space-4); right: var(--zds-space-4); width: 32px; height: 32px; } } @media (min-width: 798px) and (max-width: 1200px) { .zds-v1 .zmob-card--person::after { opacity: 0; } .zds-v1 .zmob-card--person.zmm-card--person-coming-soon::after { opacity: 1; } } .zds-v1 .zmob-left { display: flex; flex-direction: column; gap: var(--zds-space-8); width: 100%; } @media (min-width: 568px) and (max-width: 1200px) { .zds-v1 .zmob-left--row { flex-direction: row; flex-wrap: wrap; } .zds-v1 .zmob-left--row .zmob-sub-column { flex: 1 1 calc(50% - var(--zds-space-4)); min-width: 0; } } @media (min-width: 798px) { .zds-v1 .zmob-left--w280.zmob-left--row .zmob-sub-column { flex: 1 1 23%; width: 23%; min-width: 0; } } /* max-width caps every width variant (280/520/674/880) regardless of layout mode (stacked under .zmob-left, or wrapped alone onto its own line in the --row layout) — at full container width a short image block forces `cover` to crop the (often square) mobile-specific photo down to a thin, badly-framed sliver. */ .zds-v1 .zmob-right { width: 100%; max-width: 420px; margin-inline: auto; display: flex; flex-direction: column; border-radius: var(--zds-radius-sm); overflow: hidden; } /* Every right-column width except 280 (520/674/880) — fixed card height per Figma's mobile "Adv" frame, instead of height auto-sizing to content (which collapsed .zmob-right__image to its padding alone, hiding the photo). */ .zds-v1 .zmob-right--fixed { height: 436px; border-radius: var(--zds-radius-sm); } .zds-v1 .zmob-right--fixed .zmob-right__image { flex: 1; height: auto; } .zds-v1 .zmob-right--w280 { position: relative; isolation: isolate; gap: var(--zds-space-6); max-width: none; } .zds-v1 .zmob-right--w280 .zmob-right__image { position: absolute; inset: 0; z-index: 0; padding: 0; } .zds-v1 .zmob-right--w280 .zmob-right__heading, .zds-v1 .zmob-right--w280 .zmob-right__bottom { position: relative; z-index: 1; } .zds-v1 .zmob-right--w280 .zmob-right__bottom { padding-top: 0; background: transparent; } /* Top image block + solid-color bottom bar — same shape as desktop's .zmm-right__top/.zmm-right__bottom (mega-menu.css), no gradient. */ .zds-v1 .zmob-right__image { position: relative; height: auto; padding-top: 24px; padding-inline: 16px; padding-bottom: var(--zds-space-3); background-size: cover; background-position: center top; display: flex; align-items: flex-start; } .zds-v1 .zmob-right--dark { background: var(--zds-color-deep-green); color: var(--zds-color-cream); } .zds-v1 .zmob-right--light { background: var(--zds-color-cream); color: var(--zds-color-deep-green); } .zds-v1 .zmob-right--light .zmob-right__image { border-radius: var(--zds-radius-sm); overflow: hidden; } .zds-v1 .zmob-right__heading { position: relative; z-index: 1; display: block; width: 100%; text-align: center; font-family: var(--zds-font-family-heading); font-weight: var(--zds-font-weight-bold); font-size: 24px; line-height: 1.2; color: var(--zds-color-cream); } /* No-image case — heading sits directly on the solid background instead. */ .zds-v1 .zmob-right > .zmob-right__heading { padding: var(--zds-space-5) var(--zds-space-5) 0; } .zds-v1 .zmob-right__bottom { display: flex; flex-direction: column; align-items: flex-start; gap: var(--zds-space-4); padding-top: var(--zds-space-3); padding-inline: 16px; padding-bottom: 24px; } .zds-v1 .zmob-right__subtext { display: block; width: 100%; font-family: var(--zds-font-family-base); font-weight: var(--zds-font-weight-light); font-size: 18px; line-height: 140%; letter-spacing: 0; text-align: center; } .zds-v1 .zmob-right__bottom .btn { width: 100%; } .zds-v1 .zmob-lang { flex-shrink: 0; display: flex; align-items: center; padding: var(--zds-space-6) var(--zds-space-4); } .zds-v1 .zmob-cta { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--zds-space-4); margin-top: 129px; padding: var(--zds-space-5) var(--zds-space-4); } .zds-v1.zmob-overlay.zmob-accordion-open .zmob-cta { margin-top: 0; } .zds-v1 .zmob-cta__btn { width: 100%; } .zds-v1 .zmob-home-indicator { display: flex; justify-content: center; align-items: center; align-self: stretch; height: 34px; } .zds-v1 .zmob-home-indicator__bar { width: 134px; height: 5px; background: rgba(17, 34, 30, 0.2); border-radius: 100px; } @media (max-width: 389px) { .zds-v1 .zmob-right--light .zmob-right__image { background-size: 110%; } } @media (min-width: 1201px) { .zds-v1.zmob-overlay { display: none; } }