/* .nm-scope carries the theme (colours, base type) and is put on BOTH .nm-scope and the popup overlay (#nmOv). The popup is moved to be a direct child of in JS (see nimto-menu.js) so its `position:fixed` can never get trapped by a transformed ancestor — Elementor's own section/column entrance animations do exactly that, which is what was making the popup appear clipped instead of centred. Since that move takes it out from under #nimto-menu-root, it needs its own copy of the CSS variables (custom properties don't reach across to a detached sibling) — hence a shared class instead of relying on inheritance from the id alone. */ .nm-scope{ /* ---- Nimto brand palette (taken from the printed menu + site) ---- */ --bark:#3B2312; /* darkest wood */ --brand:#7C5230; /* the brown menu bars */ --brand-mid:#9C6B3C; --clay:#B8874E; --gold:#C89B54; /* logo gold */ --gold-soft:#E3C892; --chili:#B0361A; /* the red dot in the logo */ --leaf:#4F7A3F; /* vegetarian */ --sand:#FAF5EC; /* page cream */ --sand-2:#F2E7D5; /* soft panel */ --paper:#FFFFFF; --line:#E7DAC2; --line-soft:#F1E7D6; --ink:#26180B; --ink-2:#5C452F; --muted:#8E7A62; --tab:#C59D5F; /* active tab */ --tab-ink:#2A1B0C; /* text on the active tab */ --sh-1:0 1px 2px rgba(59,35,18,.05); --sh-2:0 6px 22px rgba(59,35,18,.09); --sh-3:0 24px 70px rgba(30,18,8,.34); --r:14px; --clamp-bg:var(--paper); /* colour the fade behind a clamped "…" blends into */ font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-size:16px; line-height:1.5; color:var(--ink); -webkit-font-smoothing:antialiased; } /* Properties that must stay only on the real root — NOT on the popup overlay, which has its own background/positioning and must never replay the load-in animation (it would force the overlay visible again after 0.6s). */ #nimto-menu-root{ background:var(--sand); /* Fills 100% of whatever container it's placed in (no breakout past it — the inner max-width below caps it at a sane reading width once that container is wide), with a gentle fade/slide in on load. */ width:100%; /* Rounds the root's own background/shadow (this alone doesn't need overflow:hidden — background and box-shadow always follow border-radius on the element that owns them). Deliberately NOT using overflow:hidden here: it would make root the sticky nav's containing block instead of the viewport, breaking position:sticky on .nm-top. The sticky bar's own background is rounded separately below to match this top corner. */ border-radius:24px; box-shadow:var(--sh-2); animation:nmRootIn .6s cubic-bezier(.22,.61,.36,1) both; } @keyframes nmRootIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } } .nm-scope *,.nm-scope *::before,.nm-scope *::after{box-sizing:border-box} /* white-space:normal overrides themes (e.g. Hello Elementor's reset.css) that set `button{white-space:nowrap}` — since white-space inherits, that rule was cutting every card description off after one line because cards are