/* Custom Mobile Menu – User Overrides This file is intentionally left mostly empty so you can add your own tweaks without modifying the core plugin stylesheet. It is enqueued after custom-mobile-menu.css so selectors here win without !important (in most cases). Recommended usage pattern: 1. Copy the minimal selector you want to adjust from the main file. 2. Paste it here and change only what you need. 3. Avoid broad wildcards to keep specificity predictable. */ .rbb-close-container { display: flex; justify-content:center; margin-bottom: 1rem; } #cmm-modern-search-input { width: 100%; } /* Close button stroke separation (ensure both lines of the X are visible) */ #mobile_menu .rbb-close-canvas-menu:before, #mobile_menu .rbb-close-canvas-menu:after, #cmm_mobile_menu .rbb-close-canvas-menu:before, #cmm_mobile_menu .rbb-close-canvas-menu:after { height:2px; } /* Offset only in X state (when data-state attribute is removed) */ #mobile_menu .rbb-close-canvas-menu:not([data-state="lines"]):before, #cmm_mobile_menu .rbb-close-canvas-menu:not([data-state="lines"]):before { transform:translateY(-1px) rotate(45deg); height: 24px !important; } #mobile_menu .rbb-close-canvas-menu:not([data-state="lines"]):after, #cmm_mobile_menu .rbb-close-canvas-menu:not([data-state="lines"]):after { transform:translateY(1px) rotate(-45deg); } /* Keep hover collapse behavior */ #mobile_menu .rbb-close-canvas-menu:not([data-state="lines"]):hover:before, #cmm_mobile_menu .rbb-close-canvas-menu:not([data-state="lines"]):hover:before, #mobile_menu .rbb-close-canvas-menu:not([data-state="lines"]):hover:after, #cmm_mobile_menu .rbb-close-canvas-menu:not([data-state="lines"]):hover:after { transform:translateY(0) rotate(0deg); } /* ===================================================================== DEBUG: Force opener buttons visible & outline (remove when done) ===================================================================== */ #mobile_menu .opener, #mobile_menu .opener2, #cmm_mobile_menu .opener, #cmm_mobile_menu .opener2 { display:block !important; opacity:1 !important; visibility:visible !important; } /* Optional outline: add class cmm-debug-outline to for visual aid */ body.cmm-debug-outline #mobile_menu .opener, body.cmm-debug-outline #mobile_menu .opener2 { outline:1px dashed #f00; } /* Ensure pseudo elements render (some resets hide empty content) */ .cmm-icon:before { display:inline-block; } /* Example: override with actual discovered codepoints */ /* .cmm-icon-dir-right:before { content:"\e914" !important; } */ /* .cmm-icon-dir-left:before { content:"\e915" !important; } */ #mobile_menu .menu-container > li, #cmm_mobile_menu .menu-container > li, #mobile_menu .cmm-panel > li, #cmm_mobile_menu .cmm-panel > li { border-bottom:1px solid var(--cmm-divider-color) !important; } #mobile_menu .menu-container > li:last-child, #cmm_mobile_menu .menu-container > li:last-child, #mobile_menu .cmm-panel > li:last-child, #cmm_mobile_menu .cmm-panel > li:last-child { border-bottom:none !important; } /* Ensure legacy anchor borders stay suppressed */ #mobile_menu .cmm-panel > li > a, #cmm_mobile_menu .cmm-panel > li > a { border:0 !important; } /* ================================================================ Close button refactor: use glyph instead of before/after strokes ================================================================ */ .rbb-close-canvas-menu { position:relative; width:48px; height:48px; border:none; background:#fff; box-shadow:0 0 10px rgba(0,0,0,.12); border-radius:50%; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; line-height:1; --cmm-close-offset-y:1px; } /* Default glyph (fallback) */ .rbb-close-canvas-menu::before { content:"✕"; font-family:'hnice-icon','Arial',sans-serif; font-size:20px; font-weight:400; display:inline-block; color:#000; position:relative !important; top:var(--cmm-close-offset-y) !important; } /* If an internal icon element provided, hide pseudo glyph */ .rbb-close-canvas-menu:has(i[class*="close"]), .rbb-close-canvas-menu:has(svg), .rbb-close-canvas-menu:has(span[class*="icon"]) { font-size:0; } .rbb-close-canvas-menu:has(i[class*="close"])::before, .rbb-close-canvas-menu:has(svg)::before, .rbb-close-canvas-menu:has(span[class*="icon"])::before { content:""; } .rbb-close-canvas-menu:focus-visible { outline:2px solid #000; outline-offset:3px; } .rbb-close-canvas-menu:hover { box-shadow:0 0 12px rgba(0,0,0,.18); } .rbb-close-canvas-menu.is-dark { background:#181818; } .rbb-close-canvas-menu.is-dark::before { color:#fff; } /* ================================================================ FORCE GLYPH CLOSE ICON (override old rotated line pseudo elements) ================================================================ */ #mobile_menu .rbb-close-canvas-menu::before, #cmm_mobile_menu .rbb-close-canvas-menu::before, .rbb-close-canvas-menu::before { content:'✕' !important; /* fallback glyph */ position:static !important; transform:none !important; left:auto !important; top:auto !important; width:auto !important; height:auto !important; background:none !important; display:inline-block !important; font-family:'hnice-icon','Arial',sans-serif !important; font-size:20px !important; line-height:1 !important; color:currentColor !important; box-shadow:none !important; } #mobile_menu .rbb-close-canvas-menu::after, #cmm_mobile_menu .rbb-close-canvas-menu::after, .rbb-close-canvas-menu::after { content:none !important; display:none !important; } /* Optional: use icon font codepoint if provided (uncomment & adjust) */ /* #mobile_menu .rbb-close-canvas-menu::before, #cmm_mobile_menu .rbb-close-canvas-menu::before, .rbb-close-canvas-menu::before { content:"\00d7" !important; } */ /* ================================================================ Enhanced Backdrop Overlay (assumed desired style: dim + subtle blur + soft radial highlights) Adjust variables below as needed. ================================================================ */ :root { --cmm-overlay-bg: rgba(18,18,20,0.62); --cmm-overlay-blur: 8px; --cmm-overlay-saturate: 140%; --cmm-overlay-vignette: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.10), transparent 55%), radial-gradient(circle at 80% 70%, rgba(255,255,255,0.07), transparent 60%); } .canvas-overlay { background: var(--cmm-overlay-bg) !important; backdrop-filter: blur(var(--cmm-overlay-blur)) saturate(var(--cmm-overlay-saturate)); -webkit-backdrop-filter: blur(var(--cmm-overlay-blur)) saturate(var(--cmm-overlay-saturate)); position:fixed; inset:0; z-index:9998; transition:opacity .35s ease !important; } .canvas-overlay::before { content:""; position:absolute; inset:0; background: var(--cmm-overlay-vignette); pointer-events:none; } body.cmm-menu-open { overflow:hidden; } /* Fallback (no backdrop-filter support) */ @supports not ((backdrop-filter: blur(1px))) { .canvas-overlay { background: rgba(18,18,20,0.78) !important; } }