/*
* Header nav dropdown show/hide.
*
* Loaded directly via wp_enqueue_style (outside the Tailwind build) so
* its selectors are guaranteed not to be tree-shaken by the Tailwind
* content scanner.
*
* Two states:
* - Default: hidden, faded, slightly translated down (faster transition).
* - Visible: shown when the parent is hovered, when focus is
* anywhere inside the dropdown, or when JS toggles
* data-open="true" (click or keyboard).
*
* On mobile the dropdown lives inline inside the slide-down drawer; the
* `data-context="mobile"` selector swaps the opacity/transform animation
* for a simple display: none/flex toggle so it flows naturally in the
* vertical stack.
*/
.aiims-nav-dropdown {
visibility: hidden;
opacity: 0;
/* Combined transform: slightly above + scaled down + tilted forward
so the open animation feels like the card unfolds from the trigger. */
transform: translateY(-6px) scale(0.96);
transform-origin: top center;
pointer-events: none;
transition:
opacity 220ms cubic-bezier(0.16, 1, 0.3, 1),
transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
visibility 0s linear 260ms;
will-change: transform, opacity;
}
/*
* Hover-bridge.
*
* The dropdown card sits ~12 px below the trigger (Tailwind `mt-3`).
* Without a bridge, when the cursor travels from the trigger DOWN to
* the menu items it crosses that 12 px gap where it isn't hovering
* either element — `:hover` drops on the parent and the menu
* fades out before the user reaches the first item.
*
* `::before` extends the dropdown's hit-area upwards into the gap so
* the parent stays in :hover state the whole way down.
*
* Desktop only — the mobile dropdown is inline (no gap to bridge).
*/
[data-aiims-dropdown][data-context="desktop"] .aiims-nav-dropdown::before {
content: "";
position: absolute;
top: -16px; /* gap is 12 px; 4 px extra to overlap trigger edge */
left: 0;
right: 0;
height: 16px;
pointer-events: auto;
}
.aiims-has-dropdown:hover > .aiims-nav-dropdown,
.aiims-has-dropdown:focus-within > .aiims-nav-dropdown,
.aiims-nav-dropdown[data-open="true"] {
visibility: visible;
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
transition:
opacity 220ms cubic-bezier(0.16, 1, 0.3, 1),
transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
visibility 0s linear 0s;
}
/* ---------------------------------------------------------------------
Per-item entrance — staggered slide-in.
When the dropdown becomes visible, each item rises into place
with a small delay per index so the menu reads like a quick cascade
rather than every item appearing at once.
--------------------------------------------------------------------- */
[data-aiims-dropdown][data-context="desktop"] .aiims-nav-dropdown > li {
opacity: 0;
transform: translateY(-6px);
transition:
opacity 260ms cubic-bezier(0.16, 1, 0.3, 1),
transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.aiims-has-dropdown:hover > .aiims-nav-dropdown > li,
.aiims-has-dropdown:focus-within > .aiims-nav-dropdown > li,
.aiims-nav-dropdown[data-open="true"] > li {
opacity: 1;
transform: translateY(0);
}
/* Stagger up to 8 items — covers the current 7 services with headroom. */
[data-aiims-dropdown][data-context="desktop"] .aiims-nav-dropdown > li:nth-child(1) { transition-delay: 30ms; }
[data-aiims-dropdown][data-context="desktop"] .aiims-nav-dropdown > li:nth-child(2) { transition-delay: 60ms; }
[data-aiims-dropdown][data-context="desktop"] .aiims-nav-dropdown > li:nth-child(3) { transition-delay: 90ms; }
[data-aiims-dropdown][data-context="desktop"] .aiims-nav-dropdown > li:nth-child(4) { transition-delay: 120ms; }
[data-aiims-dropdown][data-context="desktop"] .aiims-nav-dropdown > li:nth-child(5) { transition-delay: 150ms; }
[data-aiims-dropdown][data-context="desktop"] .aiims-nav-dropdown > li:nth-child(6) { transition-delay: 180ms; }
[data-aiims-dropdown][data-context="desktop"] .aiims-nav-dropdown > li:nth-child(7) { transition-delay: 210ms; }
[data-aiims-dropdown][data-context="desktop"] .aiims-nav-dropdown > li:nth-child(8) { transition-delay: 240ms; }
/* ---------------------------------------------------------------------
Per-item hover treatment.
Each item slides right by 4 px, the text smoothly recolours, and a
slim 3 px accent bar grows from the left edge as a visual cue. Pure
CSS — no JS. Scoped to desktop dropdown items so the mobile inline
variant stays simple.
--------------------------------------------------------------------- */
[data-aiims-dropdown][data-context="desktop"] .aiims-nav-dropdown > li > a {
position: relative;
transition:
color 220ms cubic-bezier(0.16, 1, 0.3, 1),
background-color 220ms cubic-bezier(0.16, 1, 0.3, 1),
transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
padding-left 220ms cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform, padding-left;
}
[data-aiims-dropdown][data-context="desktop"] .aiims-nav-dropdown > li > a::before {
content: "";
position: absolute;
left: 6px;
top: 50%;
width: 3px;
height: 0;
background: #0a89ca;
border-radius: 999px;
transform: translateY(-50%);
opacity: 0;
transition:
height 240ms cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-aiims-dropdown][data-context="desktop"] .aiims-nav-dropdown > li > a:hover,
[data-aiims-dropdown][data-context="desktop"] .aiims-nav-dropdown > li > a:focus-visible {
transform: translateX(4px);
padding-left: 1.25rem; /* nudge text right to make room for the bar */
}
[data-aiims-dropdown][data-context="desktop"] .aiims-nav-dropdown > li > a:hover::before,
[data-aiims-dropdown][data-context="desktop"] .aiims-nav-dropdown > li > a:focus-visible::before {
height: 60%;
opacity: 1;
}
/* ---------------------------------------------------------------------
prefers-reduced-motion — keep colour transitions, drop the movement.
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.aiims-nav-dropdown,
.aiims-has-dropdown:hover > .aiims-nav-dropdown,
.aiims-has-dropdown:focus-within > .aiims-nav-dropdown,
.aiims-nav-dropdown[data-open="true"] {
transform: none;
transition: opacity 150ms ease, visibility 0s linear;
}
[data-aiims-dropdown][data-context="desktop"] .aiims-nav-dropdown > li {
opacity: 1;
transform: none;
transition: none;
}
[data-aiims-dropdown][data-context="desktop"] .aiims-nav-dropdown > li > a {
transition: color 150ms ease, background-color 150ms ease;
}
[data-aiims-dropdown][data-context="desktop"] .aiims-nav-dropdown > li > a:hover {
transform: none;
padding-left: 1rem;
}
}
[data-aiims-dropdown][data-context="mobile"] .aiims-nav-dropdown {
transform: none;
transition: none;
display: none;
}
[data-aiims-dropdown][data-context="mobile"] .aiims-nav-dropdown[data-open="true"] {
display: flex;
visibility: visible;
opacity: 1;
pointer-events: auto;
}