/* ============================================================================= Page Designer — Burger Menu Slide-out Dedicated stylesheet. Loaded into BOTH the published preview (via views/frontend_page.php) AND the editor canvas (via navbar.js block init). ALL selectors below use the pd-nav-slideout-* namespace exclusively. No GrapesJS classes are referenced. No element outside this namespace is styled. Safe to load on any page without conflict. ============================================================================= */ /* Slide-out container — fixed-position panel injected at end of by the slideout.js init script. */ .pd-nav-slideout { position: fixed; top: 0; bottom: 0; width: 300px; max-width: 85vw; background: var(--pd-color-bg, #ffffff); /* v3.7.21 — opaque slide-out = page background, no admin token */ box-shadow: 0 0 32px rgba(0, 0, 0, 0.45); z-index: 9999; padding: 56px 0 24px 0; overflow-y: auto; box-sizing: border-box; transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; display: block; color: inherit; font-family: inherit; } /* Side: Left (default) — slide in from the left edge */ .pd-nav-slideout.pd-nav-slideout-pos-left { left: 0; right: auto; transform: translateX(-100%); opacity: 1; visibility: visible; } .pd-nav-slideout.pd-nav-slideout-pos-left.pd-nav-slideout-open { transform: translateX(0); } /* Side: Right — slide in from the right edge */ .pd-nav-slideout.pd-nav-slideout-pos-right { left: auto; right: 0; transform: translateX(100%); opacity: 1; visibility: visible; } .pd-nav-slideout.pd-nav-slideout-pos-right.pd-nav-slideout-open { transform: translateX(0); } /* Side: Centre — fade in (no slide), horizontally centred */ .pd-nav-slideout.pd-nav-slideout-pos-center { left: 50%; right: auto; transform: translateX(-50%); opacity: 0; visibility: hidden; } .pd-nav-slideout.pd-nav-slideout-pos-center.pd-nav-slideout-open { transform: translateX(-50%); opacity: 1; visibility: visible; } /* Inner list reset */ .pd-nav-slideout-list { display: block; margin: 0; padding: 0; list-style: none; } .pd-nav-slideout-list > li { display: block; margin: 0; padding: 0; list-style: none; width: 100%; } /* Link styling — dark theme, white text, divider lines */ .pd-nav-slideout-link { display: block; width: 100%; padding: 16px 24px; color: inherit; text-decoration: none; font-size: 15px; font-weight: 500; border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); background: transparent; transition: background 0.15s ease, color 0.15s ease; box-sizing: border-box; } .pd-nav-slideout-link:hover, .pd-nav-slideout-link:focus { background: color-mix(in srgb, currentColor 8%, transparent); /* v3.7.21 — neutral hover, no admin token */ color: inherit; text-decoration: none; } .pd-nav-slideout-link.pd-nav-slideout-link-last { border-bottom: none; } /* Backdrop overlay */ .pd-nav-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 9998; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .pd-nav-backdrop.pd-nav-backdrop-show { opacity: 1; visibility: visible; } /* Close (X) button injected at the top of the slide-out by the JS */ .pd-nav-slideout-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: none; background: transparent; font-size: 26px; line-height: 1; color: inherit; cursor: pointer; padding: 0; z-index: 1; } .pd-nav-slideout-close:hover { color: #ffffff; } /* Touch comfort on phone and tablet (layout rule 6: reach 44px). The shared device-polish rule already raises any button inside a block to a 44px MIN-HEIGHT, which on its own left this 36px square X rendering 36 wide by 44 tall — an oblong. Sized here so it grows as a proper square instead. Same correction as the Partners carousel arrow, 2026-09-02. */ @media (max-width: 768px) { .pd-nav-slideout-close { width: 44px; height: 44px; } } /* Body scroll lock when any slide-out is open */ body.pd-nav-slideout-locked { overflow: hidden; } /* ============================================================================= Panel-mode header neutralisation — ALWAYS-ON breakpoint only When a navbar is in panel display mode (.pd-nav-display-panel) AND the user has chosen "Always On" for the breakpoint, the slide-out replaces the in-header menu at every viewport width, so we hide the link wrappers and force the burger visible unconditionally. For the Tablet / Laptop / Mobile breakpoints we deliberately do NOT match here — those are handled by the per-navbar @media rules that navbar.js writes via editor.Css.setRule(), keyed on data-pd-nav-uid. Scoping by [data-pd-nav-breakpoint="always"] keeps this rule from stomping the @media-based breakpoint rules. ============================================================================= */ .navbar.pd-nav-display-panel[data-pd-nav-breakpoint="always"] .navbar-items-c, .navbar.pd-nav-display-panel[data-pd-nav-breakpoint="always"] .navbar-menu, .navbar.pd-nav-display-panel[data-pd-nav-breakpoint="always"] .navbar-nav { display: none !important; } .navbar.pd-nav-display-panel[data-pd-nav-breakpoint="always"] .navbar-burger { display: block !important; }