/* ==================================================================== Disney Parks sub-navigation — v0.31.9. Source of truth: mockups/disney-parks-microsite.html markup 1512–1533 CSS 78–85 (bar, wordmark, burger, pills) 986–1010 (scroll affordance + responsive) 1270–1310 (active underline, wordmark, burger drawer) Scoped under .mmdp-subnav / .mmdp-subnav-menu with the same token block and anchor/button armour as hub.css and wait-times.css. ONE DELIBERATE DEPARTURE FROM THE MOCKUP The mockup pins `.nav{position:sticky;top:0}` — masthead and sub-nav stick together as one unit. George's decision (13 Aug): only this bar stays. So `position:sticky` lives on .mmdp-subnav itself and NOTHING here touches the theme header. The masthead scrolls away; the pills stay one tap away. ==================================================================== */ .mmdp-subnav, .mmdp-subnav-menu, .mmdp-subnav-ov{ --bg:#0C0E13;--surface:#14171F;--surface-2:#1A1E28;--surface-3:#222736; --line:rgba(255,255,255,0.08);--line-2:rgba(255,255,255,0.14); --text:var(--mmdp-text,#F5F5F7);--muted:#A6AAB4;--dim:#7E8695; --ac:var(--mmdp-brand,#3EB5F5);--ac-glow:rgba(62,181,245,0.30); --park-mk:var(--mmdp-accent-magic-kingdom,#5BA3E6);--park-ep:var(--mmdp-accent-epcot,#A78BFA); --park-hs:var(--mmdp-accent-hollywood-studios,#EF8354);--park-ak:var(--mmdp-accent-animal-kingdom,#34D399); --f-ui:'Poppins',system-ui,sans-serif;--f-mono:'JetBrains Mono',ui-monospace,monospace; --f-display:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif; --maxw:var(--mmdp-maxw,1280px); color:var(--text) } .mmdp-subnav *,.mmdp-subnav *::before,.mmdp-subnav *::after, .mmdp-subnav-menu *,.mmdp-subnav-menu *::before,.mmdp-subnav-menu *::after{box-sizing:border-box} /* anchor + button armour (Elementor/theme override defence — all states) */ div.mmdp-subnav a,div.mmdp-subnav a:hover,div.mmdp-subnav a:focus,div.mmdp-subnav a:active,div.mmdp-subnav a:visited, div.mmdp-subnav-menu a,div.mmdp-subnav-menu a:hover,div.mmdp-subnav-menu a:focus,div.mmdp-subnav-menu a:active,div.mmdp-subnav-menu a:visited{ font:inherit;letter-spacing:inherit;text-transform:none;color:inherit;text-decoration:none; background:none;box-shadow:none;text-shadow:none;white-space:normal} div.mmdp-subnav button,div.mmdp-subnav button:hover,div.mmdp-subnav button:focus,div.mmdp-subnav button:active, div.mmdp-subnav-menu button,div.mmdp-subnav-menu button:hover,div.mmdp-subnav-menu button:focus,div.mmdp-subnav-menu button:active{ -webkit-appearance:none;appearance:none;background:none;border:0;border-radius:0;box-shadow:none;text-shadow:none; outline:none;color:inherit;font:inherit;padding:0;margin:0;text-transform:none;letter-spacing:normal} .mmdp-subnav-menu h5{margin:0} /* -------------------------------------------------------------------- The bar -------------------------------------------------------------------- */ .mmdp-subnav{ position:sticky; top:var(--mmdp-subnav-top,0px); /* an admin bar / pinned theme header sets this */ z-index:var(--mmdp-subnav-z,100); background:linear-gradient(180deg,rgba(62,181,245,.06),rgba(12,14,19,0.82)); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); font-family:var(--f-ui) } .admin-bar .mmdp-subnav{--mmdp-subnav-top:32px} @media (max-width:782px){.admin-bar .mmdp-subnav{--mmdp-subnav-top:46px}} .mmdp-subnav .dp-nav{display:block} .mmdp-subnav .dp-row{ position:relative;display:flex;align-items:center;gap:18px;height:48px; max-width:var(--maxw);margin:0 auto;padding:0 24px} /* wordmark */ /* The wordmark is a label for the bar, not another nav item, and it was reading as one — same face, same weight, same size as the pills beside it (George, 14 Aug: "all a bit monotone"). Fraunces is the section's display face and is already loaded, so setting it here separates the two by type. The divider that briefly sat after it is gone (George, 14 Aug). Once the type does the separating, the rule was doing the same job twice — and the row's own 18px gap already holds the wordmark apart from the pills. */ .mmdp-subnav a.dp-word, .mmdp-subnav a.dp-word:hover, .mmdp-subnav a.dp-word:focus, .mmdp-subnav a.dp-word:active, .mmdp-subnav a.dp-word:visited{ font-family:var(--f-display);font-weight:700;font-size:16px;letter-spacing:-.01em; color:var(--text);white-space:nowrap;flex:none;line-height:1;text-decoration:none} /* pills */ .mmdp-subnav .dp-pills-wrap{position:relative;flex:1;display:flex;align-items:center;overflow:hidden;min-width:0} /* The mockup's permanent gradient was dropped because an always-on fade over a row that fits is just haze (George: "looked unnatural"). The real problem is narrower: when pills ARE cut off there is nothing saying so. So the fade is now driven by measurement — subnav.js adds .has-more only while the row actually overflows, and removes it the moment it does not. Nothing to scroll, nothing on screen. It also fades out as you reach the end. */ .mmdp-subnav .dp-pills-wrap::after{ content:"";position:absolute;top:0;bottom:0;right:0;width:56px; pointer-events:none;opacity:0; background:linear-gradient(90deg,rgba(12,14,19,0) 0%,rgba(12,14,19,.85) 70%)} .mmdp-subnav .dp-pills-wrap.has-more::after{opacity:1} .mmdp-subnav .dp-pills-wrap.has-more .dp-pills{justify-content:flex-start} /* Centred, to sit under the masthead's centred nav rather than hard left — the two rows read as one header only if their navigation shares an axis (George, 14 Aug). Reverts to flex-start the moment the row overflows, because a centred scroll container clips its own start edge. */ .mmdp-subnav .dp-pills{ display:flex;gap:6px;overflow-x:auto;flex:1;justify-content:center; scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch; /* Bottom padding is 2px deeper than the top on purpose. The active pill's underline hangs 7px below the pill (mockup 1270–1310) and .dp-pills-wrap clips overflow, so a symmetric 7px leaves the underline sitting exactly on the clip edge with nothing to spare — it survives at 1x and shaves off at fractional device pixel ratios. */ scroll-snap-type:x proximity;padding:7px 0 9px} .mmdp-subnav .dp-pills::-webkit-scrollbar{display:none} /* Typography and box, pinned across EVERY state — and that is not belt and braces, it is the fix for a real bug. The anchor armour above carries `font:inherit` on :hover at (0,0,2,2); a plain `.mmdp-subnav a.dp-pill` is only (0,0,2,1), so the armour was winning on hover and the label jumped from 13px/500 to whatever the theme inherits. Naming the states here takes these to (0,0,3,1) and the type stays put. Same failure the burger hit — the armour out-specifying the component it is meant to protect. */ .mmdp-subnav a.dp-pill, .mmdp-subnav a.dp-pill:hover, .mmdp-subnav a.dp-pill:focus, .mmdp-subnav a.dp-pill:focus-visible, .mmdp-subnav a.dp-pill:active, .mmdp-subnav a.dp-pill:visited{ position:relative;flex:none;scroll-snap-align:start; font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;font-size:14px;font-weight:500;line-height:1.2; letter-spacing:0;text-transform:none;text-decoration:none; padding:6px 13px;border-radius:999px;white-space:nowrap; border:1px solid transparent} /* Colour and fill, state by state. Declared after the block above so they win at equal specificity. */ .mmdp-subnav a.dp-pill{color:var(--muted);background:transparent} .mmdp-subnav a.dp-pill:hover{color:var(--text);background:transparent} /* The gliding hover pill, the same effect as the masthead nav (Core's .mx-glide-pill): one pill slides between items instead of each lighting up on its own. Built by mmdpGlide() in subnav.js. */ .mmdp-subnav .dp-pills,.mmdp-subnav .dp-ch-links{position:relative;isolation:isolate} .mmdp-subnav a.dp-pill{z-index:1} .dp-glide{position:absolute;left:0;top:0;width:0;height:0;border-radius:999px;z-index:0;pointer-events:none;opacity:0; background:color-mix(in srgb,var(--mm-color-primary,#3EB5F5) 10%,transparent);box-shadow:inset 0 0 0 1.5px var(--mm-color-primary,#3EB5F5); transition:transform .26s cubic-bezier(.22,.7,.28,1),width .26s cubic-bezier(.22,.7,.28,1),opacity .13s linear} .dp-glide.is-snap{transition:opacity .13s linear} @media (prefers-reduced-motion:reduce){.dp-glide{transition:opacity .13s linear}} .mmdp-subnav a.dp-pill:focus-visible{outline:2px solid var(--ac);outline-offset:2px} /* Pointer input never paints a ring — see trackModality() in subnav.js. The keyboard ring above is untouched. */ html.mmdp-pointer .mmdp-subnav :focus, html.mmdp-pointer .mmdp-subnav :focus-visible, html.mmdp-pointer .mmdp-subnav-menu :focus, html.mmdp-pointer .mmdp-subnav-menu :focus-visible{outline:none!important;box-shadow:none!important} /* Active pill. The mockup hardcodes .pill.mk/.ep/.hs/.ak and underlines with the generic var(--ac). Here the park's own accent arrives inline as --pill-ac, so a fifth park styles itself with no CSS change at all. The accent colour and the underline carry it — no tinted chip. Saying the same thing three times (colour, fill, border, underline) is louder than the information deserves, and the ring competed with the hover fill for meaning (George, 14 Aug). The colour-mix fallback went with the chip. */ .mmdp-subnav a.dp-pill.is-active, .mmdp-subnav a.dp-pill.is-active:hover, .mmdp-subnav a.dp-pill.is-active:focus, .mmdp-subnav a.dp-pill.is-active:visited{ color:var(--pill-ac,var(--ac)); background:transparent; border-color:transparent} .mmdp-subnav a.dp-pill.is-active::after{ content:"";position:absolute;left:13px;right:13px;bottom:-7px;height:2px; border-radius:2px;background:var(--pill-ac,var(--ac))} /* burger — hidden on desktop, where the pills do the work. Every state is listed, and that is not padding. The anchor/button armour above neutralises theme styling with `div.mmdp-subnav button:active{ border:0;margin:0;padding:0}`, which at (0,0,2,2) out-specifies a plain `.mmdp-subnav button.dp-burger` at (0,0,2,1). So on press the armour was winning: `margin:0` beat `margin-left:auto` and the button jumped from the right edge to the middle of the bar, between pointerdown and click. Chrome then retargeted the click to .dp-row and the tap did nothing — the burger simply would not open on a phone. Naming the pseudo-classes here takes these rules to (0,0,3,2) and the geometry holds through the press. */ .mmdp-subnav button.dp-burger, .mmdp-subnav button.dp-burger:hover, .mmdp-subnav button.dp-burger:focus, .mmdp-subnav button.dp-burger:focus-visible, .mmdp-subnav button.dp-burger:active{ margin:0 0 0 auto;flex:none;width:38px;height:38px;border-radius:50%; border:1px solid var(--line-2);background:transparent;color:var(--text); padding:0;place-items:center;cursor:pointer} /* `display` is deliberately NOT in the group above: the responsive rule flips it to grid at (0,0,2,1), and a grouped `:active{display:none}` at (0,0,3,2) would out-specify it and make the button disappear the instant it is pressed. Visibility is set on its own, at matching specificity, in both places. */ .mmdp-subnav button.dp-burger{display:none} .mmdp-subnav button.dp-burger:hover{border-color:var(--ac);color:var(--ac)} .mmdp-subnav button.dp-burger:focus-visible{outline:2px solid var(--ac);outline-offset:2px} /* The icon never becomes the event target. Without this, a press whose mousedown and mouseup land on different descendants (the vs the ) makes the browser dispatch `click` on their common ancestor instead of the button, and the press is silently swallowed. Cheap insurance, and it matters most on touch, where the finger moves a few pixels mid-tap. */ .mmdp-subnav button.dp-burger svg, .mmdp-subnav button.dp-burger svg *{pointer-events:none} .mmdp-subnav button.dp-burger svg{width:17px;height:17px;display:block} /* -------------------------------------------------------------------- Burger drawer — the sub-nav's payload at mobile width -------------------------------------------------------------------- */ /* Above the bars, always. These defaults used to be 190/191, which sat UNDER a masthead-height z-index — the drawer opened behind the sticky bars and the sub-nav drew straight through it. The bar is variable (a theme can raise it); these sit clear of any sane value for it. */ .mmdp-subnav-ov{position:fixed;inset:0;z-index:var(--mmdp-subnav-ov-z,560);background:rgba(0,0,0,.5)} .mmdp-subnav-ov[hidden]{display:none} .mmdp-subnav-menu{ position:fixed;top:0;right:0;bottom:0;width:min(82vw,330px); z-index:var(--mmdp-subnav-menu-z,561); background:var(--surface);border-left:1px solid var(--line-2); transform:translateX(100%);display:flex;flex-direction:column; font-family:var(--f-ui);overflow-y:auto;-webkit-overflow-scrolling:touch} .mmdp-subnav-menu[hidden]{display:none} .mmdp-subnav-menu.is-open{transform:none} .mmdp-subnav-menu .dp-menu-in{display:flex;flex-direction:column;padding:18px;min-height:100%} /* Same specificity treatment as the burger — see the note there. */ .mmdp-subnav-menu button.dp-menu-x, .mmdp-subnav-menu button.dp-menu-x:hover, .mmdp-subnav-menu button.dp-menu-x:focus, .mmdp-subnav-menu button.dp-menu-x:focus-visible, .mmdp-subnav-menu button.dp-menu-x:active{ align-self:flex-end;color:var(--muted);cursor:pointer;padding:0;margin:0;border:0; width:32px;height:32px;display:grid;place-items:center;flex:none} .mmdp-subnav-menu button.dp-menu-x:hover{color:var(--text)} .mmdp-subnav-menu button.dp-menu-x:focus-visible{outline:2px solid var(--ac);outline-offset:2px} .mmdp-subnav-menu button.dp-menu-x svg, .mmdp-subnav-menu button.dp-menu-x svg *{pointer-events:none} .mmdp-subnav-menu button.dp-menu-x svg{width:20px;height:20px;display:block} /* category headers carry the only divider — one clean line between sections */ .mmdp-subnav-menu .dp-menu-h{ font-family:var(--f-mono);font-size:10px;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--dim);margin:18px 0 8px;padding-top:16px; border-top:1px solid var(--line)} .mmdp-subnav-menu .dp-menu-h:first-of-type{margin-top:6px;padding-top:0;border-top:0} /* Group headings inside Explore, from a nested WordPress menu item. Quieter than the section headings above them, and no divider — the divider marks a section, and these sit inside one. Declared after :first-of-type so it wins at equal specificity. */ .mmdp-subnav-menu .dp-menu-h.dp-menu-h-sub{ border-top:0;padding-top:0;margin:14px 0 2px;color:var(--muted);font-size:9.5px} /* Every text element inside a link gets its OWN colour and font — never inherited through the anchor, because Elementor recolours links. */ .mmdp-subnav-menu a.dp-menu-a{display:block;padding:8px 0} .mmdp-subnav-menu a.dp-menu-a .dp-menu-t{ font-family:var(--f-ui);font-weight:600;font-size:16px;line-height:1.4;color:var(--text)} .mmdp-subnav-menu a.dp-menu-a:hover .dp-menu-t{color:var(--ac)} .mmdp-subnav-menu a.dp-menu-a:focus-visible{outline:2px solid var(--ac);outline-offset:2px} .mmdp-subnav-menu a.dp-menu-a .dp-menu-dot{ width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:9px;vertical-align:middle} /* drawer footer — deliberately softer than the menu above it */ .mmdp-subnav-menu .dp-menu-foot{margin-top:auto;padding-top:6px} .mmdp-subnav-menu .dp-menu-cats{display:flex;flex-wrap:wrap;gap:6px 0;padding:2px 0 4px} .mmdp-subnav-menu .dp-menu-cats a{display:inline-flex;align-items:center;padding:0} .mmdp-subnav-menu .dp-menu-cats a .dp-menu-ct{ font-family:var(--f-ui);font-weight:500;font-size:13.5px;line-height:1.4;color:var(--muted)} .mmdp-subnav-menu .dp-menu-cats a:hover .dp-menu-ct{color:var(--text)} .mmdp-subnav-menu .dp-menu-cats a:not(:last-child)::after{ content:"";width:1px;height:12px;background:var(--line-2);margin:0 12px} .mmdp-subnav-menu a.dp-menu-home{display:block;margin-top:12px;padding:0} .mmdp-subnav-menu a.dp-menu-home .dp-menu-ht{ font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.04em;color:var(--ac)} /* -------------------------------------------------------------------- Responsive — mockup 986–1010: pills out, burger in, INSIDE the sub-nav. Six pills horizontally scrolled on a phone is a worse experience than one clean wordmark and a burger (PRD §3). -------------------------------------------------------------------- */ @media (max-width:900px){ .mmdp-subnav .dp-pills-wrap{display:none} /* All states, so a press cannot knock it back to display:none. */ .mmdp-subnav button.dp-burger, .mmdp-subnav button.dp-burger:hover, .mmdp-subnav button.dp-burger:focus, .mmdp-subnav button.dp-burger:focus-visible, .mmdp-subnav button.dp-burger:active{display:grid} .mmdp-subnav .dp-row{gap:12px;padding:0 16px} } /* ==================================================================== HOVER MOTION STANDARD (v0.30.0 — carried into every new surface) One curve, two durations. Colour-only changes get the fast duration; anything that moves gets the standard one. These sit last in the file so they win on cascade order at equal specificity — do not re-order. ==================================================================== */ .mmdp-subnav,.mmdp-subnav-menu,.mmdp-subnav-ov{--mm-ease:cubic-bezier(.22,.7,.28,1);--mm-t:.22s;--mm-t-fast:.13s} /* colour-only */ .mmdp-subnav .dp-pills-wrap::after, .mmdp-subnav-menu a.dp-menu-a .dp-menu-t, .mmdp-subnav-menu .dp-menu-cats a .dp-menu-ct, .mmdp-subnav-menu button.dp-menu-x{ transition:color var(--mm-t-fast) var(--mm-ease)} /* chrome that changes fill or edge */ .mmdp-subnav a.dp-pill, .mmdp-subnav button.dp-burger{ transition:background var(--mm-t-fast) var(--mm-ease),color var(--mm-t-fast) var(--mm-ease),border-color var(--mm-t-fast) var(--mm-ease)} /* things that move */ .mmdp-subnav-menu{transition:transform var(--mm-t) var(--mm-ease)} @media (prefers-reduced-motion:reduce){ .mmdp-subnav-menu{transition:none!important} .mmdp-subnav a.dp-pill,.mmdp-subnav button.dp-burger{ transition:background var(--mm-t-fast) linear,color var(--mm-t-fast) linear,border-color var(--mm-t-fast) linear} }