/* ===========================================================
HEADER NAV -- "3-Column List" (Solutions) + "Featured + Learn List"
(Resources) mega-menu styles.
2026-09-28 — client brief: new Solutions dropdown (3 columns, no
rollover states) + new Resources dropdown (left: featured blog/
whitepaper card, right: plain "Learn" list, no rollover states).
Pairs with the two new `sub_menu_type` branches added to
template-parts/header.php ('columns' and 'featured') on the SAME
existing mega_menu_v2 repeater used by every other nav dropdown.
Standalone file -- not merged into style.css. Scoped entirely to the
two new modifier classes below (.dpv2-header__mega--columns /
.dpv2-header__mega--featured) plus their own descendant classes, so
nothing here can affect the header's existing "submenu" or "mega
card" dropdown styles already in style.css.
Open/close (fade + height animation, backdrop, mobile accordion) is
ALL handled already by the existing .dpv2-header__mega rules in
style.css + the existing toggle JS in script.js -- this file only
styles the CONTENTS of these two new panel types. No rollover/hover
states are included here, per "We won't have rollover states at the
moment" on both dropdowns -- only a plain color-only focus/hover on
links for basic usability (:focus-visible), no motion/transform.
2026-09-28 update: horizontal sizing/gutters (1440px max-width, 120px
side padding) now come from the SAME .dpv2-header__mega-container
class every other mega panel already uses (style.css line ~152 +
~2225), instead of being redeclared here -- one definition of "how
wide the panel is" for the whole header, not a second copy that could
drift out of sync with it.
=========================================================== */
/* -----------------------------------------------------------------
Shared column building blocks (used by BOTH dropdown types)
----------------------------------------------------------------- */
/**
* 2026-09-28: typography + panel sizing updated to match the client's
* Figma spec (pasted design tokens) exactly:
* - Panel: 1440x528, top:80px, border-bottom:2px, padding 40/120/80/120,
* column gap 60px.
* - Column 1 ("has-desc" items, e.g. Global Platform/Global Dataset):
* 340x222 box, 40px gap between items (2026-09-29: corrected from an
* initial 24px reading of the same spec); heading = Eina01-SemiBold
* 14px/100%, 8% letter-spacing, uppercase, --Color-Data-500 (#4152F3);
* item title = Eina01-SemiBold 22px/140%, color Iron (#3F3C3A);
* item description = Eina01-Regular 14px/140%, color Iron.
* - Plain columns (Industry/Use Case): 340x374 box, 18px gap between
* items; item title = Eina01-Regular 22px/140%, color Iron.
* Iron / Data-500 read from the theme's existing custom properties when
* present, falling back to the literal Figma values otherwise (same
* var(--token, #hex) pattern already used throughout style.css).
*/
.dpv2-header__mega-column-heading {
margin: 0 0 1.5rem;
font-family: "Eina01-SemiBold", sans-serif;
font-size: 0.813rem;
font-weight: 400; /* the SemiBold font file itself carries the weight */
line-height: 1; /* 100% */
letter-spacing: 0.08em; /* 8% */
text-transform: uppercase;
color: var(--color-data, #4152F3);
}
.dpv2-header__mega-column-list {
display: flex;
flex-direction: column;
gap: 1.125rem; /* 18px -- plain columns (Industry / Use Case) */
margin: 0;
padding: 0;
}
/* Column 1 (items with a description) uses a wider 24px gap per spec --
detected via the same --has-desc modifier already on its items, so no
extra markup/field is needed to tell the two column types apart. */
/* 2026-09-29 FIX 14: client confirmed exact dev-mode values for this
column ("Global Platform" / "Global Dataset" block: 340x222, gap:40px
between the two blocks) -- was 1.5rem/24px, corrected to 2.5rem/40px. */
.dpv2-header__mega-column-list:has(.dpv2-header__mega-column-item--has-desc) {
gap: 2.5rem; /* 40px */
}
.dpv2-header__mega-column-item {
list-style: none;
}
.dpv2-header__mega-column-link {
display: flex;
flex-direction: column;
gap: 0.625rem;
text-decoration: none;
color: var(--color-iron, #3F3C3A);
font-family: Eina01-Regular;
/* font-weight: 400; */
font-size: 22px;
/* line-height: 140%; */
/* letter-spacing: 0%; */
transition: color 0.3s ease; /* same easing as .dpv2-header__submenu-link */
}
/* 2026-09-28: hover/focus color -- matches the existing mega/submenu link
treatment sitewide (.dpv2-header__submenu-link:hover, style.css line
~215), so these new columns behave identically to every other nav
dropdown link instead of having their own one-off hover style.
FIX: the actual visible text sits in the .dpv2-header__mega-column-
item-title span below, which sets its OWN explicit color -- that
always wins over the parent :hover color (a child's own declared
color is never overridden by an ancestor's, inherited or not), so the
rule on the alone was firing but never visibly doing anything.
Targeting the title span directly under :hover/:focus-visible fixes
it. Description text is left its normal color on purpose (also
matches how the description doesn't invert on the reference block's
own hover elsewhere in the header). */
.dpv2-header__mega-column-link:hover .dpv2-header__mega-column-item-title,
.dpv2-header__mega-column-link:focus-visible .dpv2-header__mega-column-item-title {
color: var(--color-data, #4152F3);
}
.dpv2-header__mega-column-item-title {
font-family: "Eina01-Regular", sans-serif;
font-size: 1.375rem; /* 22px */
font-weight: 400;
line-height: 1.4; /* 140% */
letter-spacing: 0;
color: var(--color-iron, #3F3C3A);
transition: color 0.3s ease;
}
/* Column 1 items ("Global Platform" / "Global Dataset" in the brief's
screenshot) get a SemiBold title (same 22px size, heavier weight) plus
a description line underneath -- plain link-list columns simply never
set item_description, so this rule only ever applies where content
calls for it. */
.dpv2-header__mega-column-item--has-desc .dpv2-header__mega-column-item-title {
font-family: "Eina01-SemiBold", sans-serif;
font-weight: 400; /* weight comes from the SemiBold font file */
}
.dpv2-header__mega-column-item-desc {
font-family: "Eina01-Regular", sans-serif;
font-size: 0.875rem; /* 14px */
font-weight: 400;
line-height: 1.4; /* 140% */
letter-spacing: 0;
color: var(--color-iron, #3F3C3A);
}
.dpv2-header__mega-column-link:focus-visible {
outline: 2px solid var(--color-data, #4152F3);
outline-offset: 4px;
border-radius: 2px;
}
/* -----------------------------------------------------------------
Solutions -- "3-Column List" (.dpv2-header__mega--columns)
----------------------------------------------------------------- */
.dpv2-header__mega--columns {
/* 1440px + 120px side padding now inherited from the shared
.dpv2-header__mega-container this panel is already wrapped in
(see header.php) -- not redeclared here. */
max-width: 100%;
top: 5rem; /* 80px */
box-sizing: border-box;
}
/* 2026-09-28 FIX 6 ("white thick line" bug, reported via screen
recording): border-bottom used to be unconditional on this class, so
it rendered even while the panel was CLOSED. style.css's own base rule
collapses .dpv2-header__mega to height:0 when closed -- but with
box-sizing:border-box, a height:0 box still paints its own border
(border-box only changes how the 0 is interpreted, it doesn't erase
the border itself), so a light 2px line sat permanently just under the
header, and during the close animation -- where `visibility` is
deliberately DELAYED behind the height transition (see style.css's
".dpv2-header__mega.is-visible" / plain rule, "transition: ... 0s
linear var(--dpv2-header-mega-duration)") -- the panel spends its last
~0.3s visible at essentially just that 2px sliver, reading as a hard
white/light edge flashing under the header on close. Scoping the
border to .is-visible (the same class style.css's own JS-driven open
state already toggles) means it only ever paints while the panel is
actually open and full height, matching how it behaves on the live
site. */
/* .dpv2-header__mega--columns.is-visible {
border-bottom: 2px solid var(--color-border, #E5E5E5);
} */
/* 2026-09-28 FIX 3: min-height:33rem (528px, the Figma desktop panel
height) used to apply unconditionally at every width. On mobile that
became a hard FLOOR the JS close animation could never get under: after
"< Solutions" collapses the panel's height back to 0px, min-height still
clamped the rendered box to 528px, so ~528px of leftover Solutions
content stayed visible, pushed back into normal flow (is-open was
already removed by then), stacked right above the rest of the main list
(Industries/Resources/Contact) below it -- exactly the "back button
shows old content mixed with the main menu" bug. Desktop-only now; the
existing height JS is what actually sizes the panel everywhere else.
2026-09-29 FIX 7 (closing header effect not proper, reported via screen
recording -- video showed the panel staying full-height with no visible
shrink for the whole close animation, then vanishing outright): the
min-height above being unconditional on desktop meant it kept clamping
the rendered box to 528px for the ENTIRE close transition too, since
script.js's closeMegaPanel() animates the *inline* height style down to
0px but min-height always wins against a smaller height value. So the
box never visibly shrank -- it just sat at 528px until the transition's
trailing `visibility: hidden` (delayed the full 0.32s, see style.css's
".dpv2-header__mega" / ".is-visible" pair) flipped it off in one frame,
reading as an abrupt, un-animated close instead of a smooth collapse.
Scoping min-height to .is-visible (removed the instant is-visible comes
off, i.e. before the close animation starts) fixed THAT specific bug,
while still giving the open panel its full Figma height once it
activates.
2026-09-29 FIX 17 ("extra blank space" seen on the open panel itself,
reported via screen recording -- removed here entirely): the FIX 7
version above still forced 528px on every OPEN panel regardless of
actual content. That 528px figure assumed the columns' original,
looser vertical rhythm (24px between "Global Platform"/"Global
Dataset", 18px between plain-list items, etc.); after FIX 14 and the
client's other since-tightened column spacing, the real content only
needs ~335px, so the 528px floor was now reserving ~270px of empty
space below the last item on every open Solutions panel -- the exact
"extra blank space" being reported. There's no still-accurate number
to replace 528px with (it was only ever an approximation of whatever
the content happened to measure at the time), and the JS's own height
animation already sizes the panel to fit its actual content on open,
close, and handover between dropdowns -- so removing the min-height
constraint entirely, rather than picking a new fixed number that would
just go stale again the next time spacing changes, is what actually
fixes this for good. */
/* 2026-09-29 FIX 10 ("content gets cut" on iPad Pro / other ~1025-1439px
desktop widths, reported via screenshot -- "Competitive Intelligence"
clipped at the right edge): the 120px side padding on
.dpv2-header__mega-container (style.css) only kicks in at min-width:
1440px -- below that, and above the 1024px mobile breakpoint, the
container has NO side padding at all, so its full width is whatever
the viewport is (e.g. 1032px on a smaller desktop/tablet-landscape
screen). Three fixed 21.25rem/340px columns + two 3.75rem/60px gaps
need 1140px minimum no matter what -- wider than that container at
these in-between widths -- so the third column ran past the panel's
right edge and got clipped by its overflow:hidden.
Fix: minmax(0, 21.25rem) lets each column shrink below 340px when the
container is narrower than 1140px (same "no need fix width" fix the
Resources panel's card column got), while still capping at exactly
340px -- matching the Figma spec exactly -- whenever there's enough
room, so nothing changes at 1440px+ desktop widths. */
/* 2026-09-29 FIX 11 ("spacing issue" -- extra empty space above "BY
DELIVERY METHOD" and below the last column item, reported via
screenshot): style.css's shared .dpv2-header__mega-container (every
mega panel, including the older "submenu"/mega-card styles) already
carries its own padding-top:2rem/padding-bottom:2.5rem (32px/40px).
.dpv2-header__mega-columns below THEN adds its own 2.5rem/5rem
(40px/80px) on top of that, since it's a child sitting inside that
already-padded container -- the two stack, so the panel's actual top
gap came out to 72px (32+40) instead of the spec's 40px, and the
bottom gap came out to 120px (40+80) instead of the spec's 80px.
Zeroing the container's own top/bottom padding for just this panel
type (its left/right padding -- the part that's actually shared/still
needed -- is untouched) means .dpv2-header__mega-columns' 40px/80px is
the ONLY vertical padding in play, matching Figma exactly. Applied to
.dpv2-header__mega--featured too, below, for the exact same reason. */
.dpv2-header__mega--columns .dpv2-header__mega-container {
padding-top: 0;
padding-bottom: 0;
}
.dpv2-header__mega--columns .dpv2-header__mega-columns {
display: grid;
grid-template-columns: repeat(3, minmax(0, 21.25rem)); /* up to 340px columns, shrinks if the container is narrower */
justify-content: space-between;
gap: 3.75rem; /* 60px */
padding: 2.5rem 0 5rem; /* top 40px / bottom 80px -- left/right handled by .dpv2-header__mega-container */
}
/* -----------------------------------------------------------------
Resources -- "Featured + Learn List" (.dpv2-header__mega--featured)
----------------------------------------------------------------- */
/* 2026-09-28: exact Figma desktop spec pasted by the client (1440 canvas).
Panel: 1440x554, top:80px, border-bottom:2px, padding 40/120/80/120,
left/right gap 60px -- same .dpv2-header__mega-container pattern as the
Solutions panel handles the 1440/120px sizing, so only the panel's own
top/border/height/gap are set here. Left column (card + "Featured"
heading) 740x434, gap 24px between them. Right column (Learn list)
340px wide, gap 24px (heading-to-list spacing -- already the existing
.dpv2-header__mega-column-heading margin, unchanged). */
.dpv2-header__mega--featured {
top: 5rem; /* 80px, matches .dpv2-header__mega--columns */
box-sizing: border-box;
}
/* 2026-09-28 FIX 6 ("white thick line" bug) -- same issue and same fix as
.dpv2-header__mega--columns.is-visible above: border-bottom scoped to
.is-visible so it only paints while the panel is actually open, instead
of leaving a permanent (and, during the close transition, briefly
full-width-and-isolated) light line under the header. */
/* .dpv2-header__mega--featured.is-visible {
border-bottom: 2px solid var(--color-border, #E5E5E5);
} */
/* 2026-09-29 FIX 11 -- same double-padding issue as
.dpv2-header__mega--columns above (see that rule's comment): the
shared .dpv2-header__mega-container already has its own top/bottom
padding, and .dpv2-header__mega-featured-layout below adds its own
40px/80px on top of that. Zeroing the container's vertical padding
here so the layout's own padding is the only one that applies. */
.dpv2-header__mega--featured .dpv2-header__mega-container {
padding-top: 0;
padding-bottom: 0;
}
/* 2026-09-29: client feedback -- left column ("Featured" heading + card)
no longer needs a hard-coded 46.25rem/740px width; only the right
column (the "Learn" list) stays a fixed 21.25rem/340px per spec. `1fr`
lets the card column fill whatever space is actually left inside
.dpv2-header__mega-container instead of assuming one specific overall
panel width, so it can't drift out of sync with that container the way
two independently-hardcoded widths could. justify-content:space-between
is dropped since it only mattered for distributing leftover space
between two fixed-width columns -- with the left column now `1fr`
there's no leftover space to distribute. */
.dpv2-header__mega--featured .dpv2-header__mega-featured-layout {
display: grid;
grid-template-columns: 1fr 21.25rem; /* card flexible / 340px, fixed per spec */
gap: 3.75rem; /* 60px */
padding: 2.5rem 0 5rem; /* top 40px / bottom 80px -- left/right handled by .dpv2-header__mega-container */
align-items: start;
}
/* 2026-09-29: client feedback -- no gap here; the "Featured" heading and
the card below it should sit flush, not 24px apart. */
.dpv2-header__mega-featured {
display: flex;
flex-direction: column;
}
/* 2026-09-29: width changed from a hard-coded 46.25rem/740px to 100% --
now that the grid column itself is `1fr` (see
.dpv2-header__mega-featured-layout), the card should just fill that
column rather than carrying its own separate fixed width that could
disagree with it. */
.dpv2-header__mega-featured-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 25rem; /* 400px */
border-radius: 1.25rem; /* 20px */
padding: 1.25rem; /* 20px */
/* background-color: #1A1A1A; */
background-size: cover;
background-position: center;
text-decoration: none;
overflow: hidden;
}
/* Dark gradient overlay so the badge/title/button stay legible over any
photo -- angle + stops match the client's Figma exactly (291.44deg,
43.15% / 75.07%). Kept as a separate ::before layer (rather than
stacked into the card's own `background` shorthand) because the photo
itself is set via an inline background-image style from header.php --
two independent layers is simpler and works the same whether or not a
photo is present.
2026-09-29: the Figma-spec diagonal alone only darkens the band from
~43% to ~75% along that 291.44deg line -- toward the card's
bottom-right. The badge + title sit top-left (see
.dpv2-header__mega-featured-content), so against a light/bright
featured image that corner could still read low-contrast even with
the diagonal present. Added a flat overlay underneath it (same
linear-gradient stacked as a second background layer, listed first =
painted below the diagonal) so every corner gets a base darkening
regardless of the photo, while the diagonal still adds the extra
depth toward the bottom-right per spec. */
.dpv2-header__mega-featured-card::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(291.44deg, rgba(0, 0, 0, 0) 43.15%, rgba(0, 0, 0, 0.6) 75.07%),
rgba(0, 0, 0, 0.35);
pointer-events: none;
}
.dpv2-header__mega-featured-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 2.5rem; /* 40px, between badge and title */
}
/* 2026-09-29: per the client's Figma spec, this pill is an outline
style -- transparent fill, 1px solid white border -- not the
frosted-glass fill it had before (background: rgba(255,255,255,.14) +
backdrop-filter blur). Border uses box-sizing:border-box so the 1px
stroke doesn't add to the pill's padded size. */
.dpv2-header__mega-featured-badge {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.75rem;
border-radius: 6.25rem;
background: transparent;
border: 1px solid #FFFFFF;
box-sizing: border-box;
color: #FFFFFF;
font-family: "Eina01-SemiBold", sans-serif;
font-size: 0.875rem; /* 14px */
font-weight: 400; /* weight comes from the SemiBold font file */
line-height: 1; /* 100% */
letter-spacing: 0;
}
/* 2026-09-29: background here is now just the fallback -- header.php /
header-light.php set the real color as an inline style per badge type
(Blog/Case Studies/Press/White Papers), matching the same four colors
already used for these exact labels on the "Ground Truth" resources
archive page. This rule only fires if that inline style is ever
missing for some reason. */
.dpv2-header__mega-featured-badge-dot {
width: 0.5rem; /* 8px */
height: 0.5rem; /* 8px */
border-radius: 50%;
background: var(--color-data, #4152F3);
}
/* 2026-09-29 FIX 12 ("content length box should be added" per Figma):
client confirmed the exact dev-mode values for this text node --
width:360px, height:137px (~4 lines at this type size), font-size:32px/
line-height:120%/letter-spacing:-1% (already matched below). Without a
width constraint the title was wrapping at the full card content width
instead, running edge-to-edge instead of leaving the clear space on the
right side of the card that the Figma reference shows. */
/* 2026-09-29: 4-line clamp added per Figma (confirmed with the manager) --
without it, a longer featured post title would just keep growing the
360px-wide box taller (no limit), eventually pushing past the card's
fixed 400px height instead of truncating with an ellipsis at 4 lines
the way the Figma component does. display:-webkit-box is required for
-webkit-line-clamp to take effect (this is a span by default, and
line-clamp only works on a box with that display type); the plain
`line-clamp` property is included alongside the -webkit- one for
current/future non-WebKit browser support, per current CSS spec. */
.dpv2-header__mega-featured-title {
max-width: 22.5rem; /* 360px */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
line-clamp: 4;
overflow: hidden;
text-overflow: ellipsis;
color: #FFFFFF;
font-family: "Eina01-SemiBold", sans-serif;
font-size: 2rem; /* 32px */
font-weight: 400; /* weight comes from the SemiBold font file */
line-height: 1.2; /* 120% */
letter-spacing: -0.01em; /* -1% */
}
/* 2026-09-28: "button white as per other" -- reuses the sitewide
.btn.btn-white classes (style.css) for padding/radius/color/font/hover
instead of a one-off style, so this button looks and behaves exactly
like every other white CTA button on the site. This class only adds
what's specific to sitting inside the featured card: positioned above
the ::before gradient overlay, pinned to the bottom-left via the card's
own justify-content:space-between. */
.dpv2-header__mega-featured-btn {
position: relative;
z-index: 1;
align-self: flex-start;
}
.dpv2-header__mega-featured-card:focus-visible {
outline: 2px solid var(--color-data, #4152F3);
outline-offset: 4px;
}
/* -----------------------------------------------------------------
Responsive -- Solutions columns stack to a single column on mobile
(per the client's mobile screenshot): generous vertical rhythm between
each column/group, "BY X" heading + items reading top to bottom in one
list rather than 3 side-by-side columns.
----------------------------------------------------------------- */
@media (max-width: 1024px) {
/* 2026-09-29 FIX 13 ("spacing issue" on mobile, Solutions + Resources --
client confirmed exact dev-mode values for the full-screen panel's
main content frame: 400x1020, padding 40/24/40/24, gap:60 between
groups. Was 1.75rem/1.25rem/2.5rem padding (28/20/40) and a 3rem/48px
group gap -- close, but not an exact match.
2026-09-29 FIX 16: the 60px group gap above was itself then corrected
to 50px once the client annotated each individual gap on this panel
(see the two rules below, and the heading margin further down) --
50px is the gap between one "BY X" group's last item and the next
group's heading (e.g. "Global Dataset"'s description down to "BY
INDUSTRY"), not the 60px figure from the main-frame-level spec. */
.dpv2-header__mega--columns .dpv2-header__mega-columns {
grid-template-columns: 1fr;
gap: 3.125rem; /* 50px, between "BY DELIVERY METHOD" / "BY INDUSTRY" / "BY USE CASE" groups */
padding: 2.5rem 1.5rem; /* 40px top/bottom, 24px sides */
}
/* 2026-09-29 FIX 16: corrected from 2rem/32px to 1.5rem/24px per the
client's annotated gap between "Global Platform"'s description and
the "Global Dataset" heading right below it. */
.dpv2-header__mega-column-list:has(.dpv2-header__mega-column-item--has-desc) {
gap: 1.5rem; /* 24px, Global Platform / Global Dataset block spacing on mobile */
}
.dpv2-header__mega-column-item-desc {
max-width: none;
}
/* 2026-09-29 FIX 16: corrected from 1.5rem/24px to 1.875rem/30px per
the client's annotated gap between a "BY X" heading and the content
directly under it (both the has-desc column's "Global Platform"
title and the plain columns' first list item) -- mobile-only, since
this wasn't part of the client's feedback for desktop. */
.dpv2-header__mega-column-heading {
margin-bottom: 1.875rem; /* 30px */
}
/* 2026-09-28: per the client's own Figma (M_Nav_Open_Resources mobile
frame), the Featured card doesn't appear on mobile at all -- that
screen shows only the "LEARN" heading + list, all the way down to
the Contact pill with nothing else above it. Desktop keeps both
columns; mobile drops the Featured column entirely rather than
stacking it above/below the list. */
.dpv2-header__mega-featured {
display: none;
}
/* 2026-09-29 FIX 13 -- same corrected padding as the Solutions panel
above (client asked for both to be checked); the internal 2rem gap
between the "LEARN" heading and its list is unrelated/unchanged --
that 60px figure from Figma is specifically the group-to-group gap
in the Solutions panel's multi-heading layout, which Resources
doesn't have on mobile (Featured card is hidden, only one list). */
.dpv2-header__mega--featured .dpv2-header__mega-featured-layout {
grid-template-columns: 1fr;
gap: 2rem;
padding: 2.5rem 1.5rem; /* 40px top/bottom, 24px sides */
}
/* Desktop gives the card a fixed 740x400px box (Figma spec); mobile
needs it fluid instead, filling whatever width the stacked single
column gives it (kept here even though the card itself is hidden on
mobile above, in case a future breakpoint change brings it back).
The old margin-top:6rem title override from before the card was
restructured into a proper flex column (badge/title in their own
gap:40px wrapper, button pinned via justify-content: space-between)
is gone too -- that positioning is now automatic at every width,
nothing to re-push on mobile. */
.dpv2-header__mega-featured-card {
width: 100%;
height: auto;
min-height: 16rem;
}
}
/* -----------------------------------------------------------------
Mobile full-screen drill-down -- per the client's Figma (M_Nav_Open,
M_Nav_Open_Solutions, M_Nav_Open_Resources): opening a dropdown on
mobile REPLACES the main Solutions/Resources/About list full-screen,
not an inline accordion pushed in below it. The visitor backs out via
the "<" button (returns to the main list) or closes the whole menu via
"X" (see script.js for both).
Deliberately generic -- targets any .dpv2-header__mega, not just the
new --columns/--featured styles -- so every dropdown (including the
existing "submenu" and "mega card" styles) gets the same full-screen
behavior instead of only these two new ones.
Mechanics: style.css's own mobile block (~line 1515) already sets
.dpv2-header__mega to position:static/height:0 for the inline-
accordion look; this overrides that so the open panel covers the
whole menu panel instead, only while that item is .is-open. height:
auto here needs !important because the existing accordion JS
(setMobileAccordionOpen) sets an inline pixel height on the same
element for its open/close animation -- without !important that
inline style would win and cap the panel at its old accordion height
instead of filling the screen.
2026-09-28 FIX: originally used position:fixed anchored to the
viewport, but .dpv2-header__menu (an ancestor) sets its own
clip-path -- like `transform`, clip-path creates a new containing
block for `position:fixed` descendants in most browsers, so "fixed"
here was actually resolving against that clipped/animating box, not
the real viewport. The panel rendered in the wrong place, leaving the
"Solutions" trigger + a duplicate close icon visible above it instead
of being covered. position:absolute + inset:0 against
.dpv2-header__menu-panel--main (already position:relative, and the
real ancestor .dpv2-header__actions/"Contact" also anchors to) is the
correct containing block here -- same layout math, no clip-path
surprise.
----------------------------------------------------------------- */
@media (max-width: 1024px) {
/* 2026-09-28 FIX 2: position:absolute + inset:0 alone still wasn't
covering the full page -- it fills whatever box its containing block
(.dpv2-header__menu-panel--main) actually renders at, and that box's
own ancestor chain (.dpv2-header__menu-panel: height:100%, inside
.dpv2-header__menu: height:auto) only sizes to fit its IN-FLOW
content. An absolutely positioned child doesn't count toward that
"auto" height, and CSS treats a 100% height against an "auto"-height
parent as itself auto -- so the whole chain quietly collapsed down to
roughly the height of the still-visible main list instead of the
screen, which is why the panel looked like it was pushing/sliding in
a short box rather than covering the page. Giving .dpv2-header__menu
a real (non-auto) height while the mobile menu is open breaks that
collapse -- height:100% on every descendant down to the mega panel
now resolves against an actual number, so inset:0 truly reaches the
bottom of the screen. */
.dpv2-header__mega-column-heading {
font-size: 0.875rem;
}
.dpv2-header__menu.is-open {
height: calc(100dvh - var(--dpv2-header-height));
}
/* 2026-09-28 FIX 5: hiding the logo/toggle (see further down this file)
still left a blank gap at the very top of the screen, because the
panel was position:absolute against .dpv2-header__menu-panel--main,
which itself only starts BELOW the header's height (.dpv2-header__menu
has always been offset "top: calc(var(--dpv2-header-height) - 1px)"
in style.css) -- hiding the header's CONTENTS doesn't change that
offset, so the drawer -- and this panel inside it -- still started
partway down the screen either way, just with blank white space
above it instead of the logo.
Fix: switch the panel to position:fixed (viewport-relative, ignores
that offset entirely) once a sub-panel is open, so inset:0 reaches
the TRUE top of the screen, not just the top of its old container.
This is the same position:fixed that caused the original clip-path
containing-block bug (see the FIX note above) -- neutralized this
time by explicitly clearing .dpv2-header__menu's clip-path while a
sub-panel is open (right below), since clip-path only matters for
the main menu's OWN reveal animation, which has already finished
playing by the time you can even tap into a sub-panel. */
.dpv2-header__menu:has(.dpv2-header__nav-item--has-children.is-open) {
clip-path: none;
}
/* 2026-09-28 FIX 4: opening/closing was a hard jump instead of a slide.
That's because the panel was ONLY made position:absolute while
.is-open was present -- the CLOSED state came from style.css's
position:static/height:0 rule instead. Toggling between position:
static and position:absolute (or fixed) isn't something a browser
can animate (position is a discrete swap, not an interpolated
value), so there was nothing to transition between open and closed;
it just snapped.
Fix: the panel is position:fixed + inset:0 at ALL times on mobile
now (open or closed), and "closed" instead means slid off the right
edge via transform: translateX(100%). Both position and height stay
constant across open/close, so `transform` is now the ONLY thing
changing -- and transform IS animatable, so the browser can smoothly
slide it in from the right and back out again instead of popping.
visibility + a delayed transition on it (same pattern as
.dpv2-header__menu's own open/close further up style.css) keeps the
off-screen panel out of the tab order and unclickable without
cutting the slide-out short. */
.dpv2-header__nav-item--has-children > .dpv2-header__mega {
position: fixed;
inset: 0;
height: auto !important;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: var(--color-white, #FFFFFF);
/* Above .dpv2-header itself (z-index:1000 in style.css) so this
panel fully covers the now-hidden logo/toggle bar's old space
too, and above the main nav list, below .dpv2-header__actions
(z-index: 1111 in style.css) so the "Contact" pill stays
visible/clickable over this panel, matching the Figma screens. */
z-index: 1005;
transform: translateX(100%);
visibility: hidden;
pointer-events: none;
transition: transform 0.36s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.36s;
}
.dpv2-header__nav-item--has-children.is-open > .dpv2-header__mega {
transform: translateX(0);
visibility: visible;
pointer-events: auto;
transition: transform 0.36s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
}
/* Respect the same reduced-motion preference the existing accordion
JS already checks (prefersReducedMotion()) -- jump instead of
slide, no transition at all. */
@media (prefers-reduced-motion: reduce) {
.dpv2-header__nav-item--has-children > .dpv2-header__mega,
.dpv2-header__nav-item--has-children.is-open > .dpv2-header__mega {
transition: none;
}
}
/* Reserve room at the bottom so content doesn't disappear under the
floating "Contact" pill -- same 8rem bottom padding style.css's own
.dpv2-header__menu-scroll already reserves for the main list. */
.dpv2-header__nav-item--has-children.is-open > .dpv2-header__mega .dpv2-header__mega-container,
.dpv2-header__nav-item--has-children.is-open > .dpv2-header__mega .dpv2-header__mega-featured-layout {
padding-bottom: 8rem;
}
/* 2026-09-29 FIX 9 ("CTA overlaps content" on iPad Mini / other >768px
mobile widths, reported via screenshot): style.css's own mobile rule
for .dpv2-header__actions (~line 1596) is `position: absolute; ...
bottom: 0`, meant to pin the floating "Contact" pill to the bottom
of the mobile menu drawer. That works for the main accordion list,
but this panel's own containing block for "position: absolute" is
.dpv2-header__menu-panel--main -- an ancestor the sub-panel opening
doesn't touch at all (only .dpv2-header__mega itself was switched to
position:fixed/inset:0 above, see FIX 4/5's comment) -- so once a
sub-panel opens, "bottom:0" is still measured against that SHORTER,
un-stretched ancestor's own natural content height, landing the pill
partway down the now much-taller full-screen panel instead of at the
real bottom of the screen, overlapping list items along the way.
Fix: while a sub-panel is open, switch the pill to position:fixed
(viewport-relative, immune to which ancestor happens to be
"positioned") so bottom:0 always means the true bottom of the
screen, matching how it already behaves on the un-drilled main
list. */
.dpv2-header:has(.dpv2-header__nav-item--has-children.is-open) .dpv2-header__actions {
position: fixed;
}
}
/* -----------------------------------------------------------------
Mobile "< / X" icon bar -- see script.js, which injects this into
every .dpv2-header__mega panel. Hidden on desktop; pinned to the top
of the now-full-screen panel so it stays reachable while scrolling a
long list (e.g. the "BY USE CASE" column).
2026-09-28: matches the client's own Figma component exactly (icon-only
"<" left / "X" right, no text label, no divider line under it, generous
top padding before the first "BY ..." heading). Went through two other
shapes first: a plain "< / X" bar UNDER the still-visible
.dpv2-header__nav-trigger (section name showed twice, two close
controls once you count the header's own hamburger-to-X), then a single
"< Solutions" text button with no close icon (fixed the duplication but
dropped the "X" the Figma actually wants). This is the Figma version --
the duplicate-X problem is solved by hiding the header's own
hamburger/X toggle instead (see ".dpv2-header__toggle" override below),
so this panel's own "X" is the only close control on screen once a
sub-panel is open. The trigger row above the panel stays hidden the
same way it already was.
----------------------------------------------------------------- */
.dpv2-header__mega-mobile-bar {
display: none;
}
@media (max-width: 1024px) {
/* The row that normally shows "Solutions" / opens the accordion --
redundant once its panel is open full-screen, since this bar's
back arrow replaces it. */
.dpv2-header__nav-item--has-children.is-open > .dpv2-header__nav-trigger {
display: none;
}
/* 2026-09-28: per the client's Figma, the logo + toggle disappear
once a sub-panel is open -- not just the toggle. Two reasons: (1)
only one "X" on screen at a time -- this panel's own close button
is now THE close control, so the header's hamburger-to-X would
just be a second, redundant one stacked above it; (2) the logo
doesn't belong on top of a drill-down panel that already has its
own "<" back control, per the client's reference.
IMPORTANT: this targets .dpv2-header__logo and .dpv2-header__toggle
individually, NOT the .dpv2-header wrapper itself -- .dpv2-header__
menu (the whole mobile drawer, including this open panel) is a
DESCENDANT of .dpv2-header in the markup, so hiding .dpv2-header
would inherit visibility:hidden down onto the drawer too and blank
out everything except the one element that explicitly resets it
back to visible. Scoping to just these two children avoids that. */
.dpv2-header:has(.dpv2-header__nav-item--has-children.is-open) .dpv2-header__logo,
.dpv2-header:has(.dpv2-header__nav-item--has-children.is-open) .dpv2-header__toggle {
visibility: hidden;
}
/* 2026-09-29 FIX 13: client confirmed exact dev-mode values -- this bar
is a fixed 72px tall frame with only left/right 24px padding (icons
vertically centered by align-items:center within that fixed height,
no separate top/bottom padding needed). Was 1.5rem/1.25rem/1rem
(24px/20px/16px), which didn't match. */
.dpv2-header__mega-mobile-bar {
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 2;
height: 4.5rem; /* 72px */
padding: 0 1.5rem; /* 24px sides */
background: var(--color-white, #FFFFFF);
}
/* 2026-09-29: box shrunk from 2rem/32px to 1.5rem/24px to match
.dpv2-header__toggle's own width (1.5rem, style.css) -- the main
header's hamburger/X button -- so this bar's back/close icons sit at
the same size and the same left/right position (both containers now
share the same 1.5rem/24px side padding, see .dpv2-header__mega-
mobile-bar above and .dpv2-header__container's mobile padding in
style.css) as the header control they're replacing while a sub-panel
is open.
2026-09-29 FIX 15 ("minor position shift still observed", reported
via screen recording): height was still 1.5rem/24px here, but
.dpv2-header__toggle itself is only 1.125rem/18px tall (style.css).
Both boxes share the same vertical CENTER (this bar and the header
are both 4.5rem/72px tall, and both buttons are centered in them via
align-items:center) -- but a 24px box and an 18px box centered on
the same line don't share the same TOP/bottom edge, only the same
middle. That 3px top-edge offset is what the recording was catching
as a "shift" between the two icons even though they're centered on
the same line. Matching the height exactly (1.125rem) removes that
last bit of mismatch. */
.dpv2-header__mega-mobile-back,
.dpv2-header__mega-mobile-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.125rem;
padding: 0;
border: 0;
background: transparent;
color: var(--color-iron, #3F3C3A);
cursor: pointer;
}
.dpv2-header__mega-mobile-back:focus-visible,
.dpv2-header__mega-mobile-close:focus-visible {
outline: 2px solid var(--color-data, #4152F3);
outline-offset: 2px;
border-radius: 0.25rem;
}
.dpv2-header__mega-mobile-back svg,
.dpv2-header__mega-mobile-close svg {
width: 1.125rem;
height: 1.125rem;
}
.dpv2-header__mega-mobile-back{
justify-content: left;
}
}
/* -----------------------------------------------------------------
2026-09-29 FIX 8 ("blank space fluctuates" when hovering Solutions/
Resources and moving the cursor slightly, reported via screen
recording): the nav link's own hover hit-box is only 45px tall
(--dpv2-header__nav-link's min-height:2.8125rem in style.css), but
the header itself is 80px tall (--dpv2-header-height:5rem) and
centers that link vertically -- leaving a ~17.5px dead strip above
AND below the visible "Solutions" text where the cursor is still
plainly over the header bar, and right up against the mega panel's
own top edge (mega panel's `top` is the full header height), but is
NOT over any element with a mouseenter/mouseleave listener (only
the link itself and the panel have one -- see script.js). Any small
wiggle of the mouse into that gap fires the link's mouseleave,
which starts closeMega()'s close animation (scheduleCloseMega, 180ms
in script.js) before the cursor reaches the panel -- and if the
panel is still mid-open (openMegaPanel animating height from 0) when
that happens, the two animations collide and the panel's height
visibly snaps back down partway before reopening, reading as the
"blank space fluctuating" the recording shows.
Fix: extend the link's own invisible hover box to fill the FULL
header height (padding-top/bottom sized so 45px content + 2×17.5px
padding = 80px), so the hoverable area is flush with both the top of
the header and the top of the mega panel with no dead zone between
them. Desktop only (matches isDesktop() in script.js, 1025px+) --
the mobile accordion trigger already has its own full-width/height
tap target and isn't affected by this hover-based gap at all.
Scoped to only the items that actually open a mega panel, since
plain nav links (About, etc.) have nothing below them to lose hover
into. */
@media (min-width: 1025px) {
.dpv2-header__nav-item--has-children > .dpv2-header__nav-link {
padding-top: 1.09375rem; /* 17.5px */
padding-bottom: 1.09375rem; /* 17.5px */
}
}
.dpv2-header__mega-featured-card-container:hover .btn{
gap: 0.75rem !important;
}
.dpv2-header__mega-featured-card-container{
overflow: hidden;
border-radius: 1.25rem;
position: relative;
}
.dpv2-header__mega-featured-card-container img{
transition: transform 0.4s ease;
border-radius: 1.25rem;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.dpv2-header__mega-featured-card-container:hover img{
transform: scale(1.02);
}
/* .dpv2-header__mega-featured-card::before{
z-index: 0;
} */
a, button{
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
}