/* ====================================================================== ITX-Navigation - itx-nav.css (Base / all widths) Prefix: itx_nav_ ARCHITECTURE The breakpoint-dependent rules live in itx-nav-desktop.css and itx-nav-mobile.css. They are NOT wrapped in @media inside the file; instead the media query is applied via the media attribute of the tag - using the breakpoint configured in the backend (see class-itx-nav-render.php). There is therefore NO hardcoded breakpoint in the CSS; the value is controlled solely by the plugin setting. CSS VARIABLES This stylesheet defines NO :root block. All values are provided as var(--name, fallback). To customize, add your own block - prefer the "body" selector over ":root" so that page-builder variables (e.g. Elementor --e-global-color-*) remain resolvable, since those are usually defined on the kit class at . See the code example in the backend (Design -> ITX-Navigation -> Code Beispiele). ICONS Menu, close and indicator icons are SVG files referenced through the CSS variables --itx-nav-menu-icon / --itx-nav-close-icon / --itx-nav-indicator-icon and rendered via CSS mask, so they inherit the current text color. The URLs are set automatically by the plugin (default SVGs or the uploaded files). ====================================================================== */ /* --- Reset / Base --- */ .itx_nav_nav *, .itx_nav_offcanvas * { box-sizing: border-box; } .itx_nav_menu, .itx_nav_submenu { list-style: none; margin: 0; padding: 0; } .itx_nav_link { text-decoration: none; display: block; color: inherit; } /* Buttons: reset */ .itx_nav_toggle, .itx_nav_burger, .itx_nav_offcanvas-close { appearance: none; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; font-size: inherit; line-height: 1; color: inherit; } /* Focus styles (accessibility) */ .itx_nav_link:focus-visible, .itx_nav_toggle:focus-visible, .itx_nav_burger:focus-visible, .itx_nav_offcanvas-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; } /* --- Indicator icon (used on desktop and mobile) --- Rendered as a CSS mask so it follows the current text color. Rotation is defined per context (desktop: hover/focus, mobile: open). */ .itx_nav_toggle-icon { display: inline-block; width: var(--itx-nav-indicator-size, 0.7em); height: var(--itx-nav-indicator-size, 0.7em); background-color: currentColor; -webkit-mask: var(--itx-nav-indicator-icon) center / contain no-repeat; mask: var(--itx-nav-indicator-icon) center / contain no-repeat; transition: transform var(--itx-nav-indicator-duration, 0.2s) ease; } /* --- Overlay (JS controlled) --- */ .itx_nav_overlay { position: fixed; inset: 0; z-index: 1099; background: var(--itx-nav-overlay-bg, rgba(0 0 0 / .45)); opacity: 0; pointer-events: none; transition: opacity var(--itx-nav-overlay-duration, 0.3s) ease; } .itx_nav_overlay--visible { opacity: 1; pointer-events: auto; }