/** * D-E Header Nav — front-end panel styles. * * The `dehn-js` class is added to by an inline head script, so the * default `.de-header-nav` section is collapsed before first paint (no flash). * If JavaScript is unavailable, the class is absent and the section renders * normally so content is never trapped. */ /* Pre-init collapse (default target class only) + collapsed state. */ html.dehn-js .de-header-nav:not(.dehn-init), .dehn-panel.dehn-collapsed { height: 0 !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border-top-width: 0 !important; border-bottom-width: 0 !important; } html.dehn-js .de-header-nav:not(.dehn-init), .dehn-panel { overflow: hidden !important; position: relative; } /* Replicated Divi layout wrappers around a moved panel: they exist purely so * Divi's scoped CSS selectors keep matching — neutralize any of their own * box styling so they add nothing visually. */ .dehn-host .dehn-wrap { display: block !important; background: transparent !important; padding: 0 !important; margin: 0 !important; border: 0 !important; min-height: 0 !important; height: auto !important; width: auto !important; max-width: none !important; position: static !important; overflow: visible !important; } /* Reserved clearance so the close (X) sits outside the editable rows. * Divi's own per-section padding settings will override this default. */ .dehn-panel { padding-top: var(--dehn-close-clearance, 72px); width: 100%; } /* Rows are hidden until the panel opens, then fade/slide in with a stagger. */ .dehn-panel .et_pb_row { opacity: 0; transform: translateY(14px); transition: opacity var(--dehn-fade, 250ms) ease-out, transform var(--dehn-fade, 250ms) ease-out; transition-delay: calc(var(--dehn-row-i, 0) * 60ms); } .dehn-panel.dehn-open .et_pb_row { opacity: 1; transform: none; } /* Close (X) button, injected top-right. */ .dehn-close { position: absolute; top: var(--dehn-close-offset, 24px); right: var(--dehn-close-offset, 24px); z-index: 20; display: inline-flex; align-items: center; justify-content: center; padding: 4px; margin: 0; border: 0; background: transparent; cursor: pointer; line-height: 0; color: var(--dehn-close-color, currentColor); opacity: 0; pointer-events: none; transition: opacity var(--dehn-fade, 250ms) ease-out; } .dehn-panel.dehn-open .dehn-close { opacity: 1; pointer-events: auto; } .dehn-close svg { display: block; width: var(--dehn-close-size, 28px); height: auto; fill: var(--dehn-close-color, currentColor); } @media (prefers-reduced-motion: reduce) { .dehn-panel, .dehn-panel .et_pb_row, .dehn-close { transition: none !important; } }