/* ============================================== Divi Mega Menu Pro v3.12 — Frontend CSS ============================================== */ /* ---- Nav ---- */ .dmm-nav-container { position: relative; display:flex; align-items:center; height:100%; } .dmm-nav-menu { list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:2px; width:100%; } .dmm-nav-item { position:relative; list-style:none; } .dmm-nav-link { display: inline-flex; align-items: center; gap: 5px; padding: 9px 14px; text-decoration: none; color: inherit; font: inherit; /* inherit ALL font properties from theme */ letter-spacing: inherit; text-transform: inherit; border-radius: 4px; cursor: pointer; background: none; border: none; transition: color .15s; white-space: nowrap; } .dmm-chev { display:inline-flex; align-items:center; width:.62em; opacity:.55; transition:transform .2s; } .dmm-chev svg { width:100%; height:auto; display:block; } .dmm-nav-item.dmm-open > .dmm-nav-link .dmm-chev { transform:rotate(180deg); } /* Kill any pseudo-element arrows/bullets the theme injects on our menu items (Divi adds an ETmodules-font arrow on .menu-item-has-children — it renders as a broken diamond glyph in shortcode context). Our own SVG chevron is a real . */ .dmm-nav-menu li::before, .dmm-nav-menu li::after, .dmm-nav-menu a::before, .dmm-nav-menu a::after, .dmm-panel-drop li::before, .dmm-panel-drop a::after { content:none !important; } .dmm-nav-menu li, .dmm-dropdown li, .dmm-col-links li { list-style:none !important; } /* Normal dropdown */ .dmm-dropdown { list-style:none; margin:0; padding:6px 0; position:absolute; top:100%; left:0; min-width:200px; background:#fff; border-radius:6px; box-shadow:0 8px 28px rgba(0,0,0,.13); border:1px solid rgba(0,0,0,.07); z-index:9998; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .17s, transform .17s, visibility .17s; pointer-events:none; } /* Invisible bridge across the visual gap so the mouse never leaves a hoverable area on its way from the link down to the dropdown (fixes flicker / instant close). */ .dmm-dropdown::before { content:''; position:absolute; top:-10px; left:0; right:0; height:10px; } .dmm-has-dropdown.dmm-open > .dmm-dropdown { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; } .dmm-dropdown .dmm-nav-link { padding:9px 18px; border-radius:0; font-size:.9em; } .dmm-dropdown .dmm-nav-link:hover { background:#f5f7ff; } .dmm-chev-sub { display:inline-flex; align-items:center; width:.42em; margin-left:auto; opacity:.4; } .dmm-chev-sub svg { width:100%; height:auto; display:block; } /* Nested (level 2+) dropdowns fly out to the side instead of stacking on top */ .dmm-dropdown li { position:relative; } .dmm-dropdown .dmm-dropdown { top:-6px; left:100%; } /* Flip to the left if it would overflow the right edge */ .dmm-dropdown .dmm-dropdown.dmm-flip-left { left:auto; right:100%; } /* Mega item */ .dmm-has-mega { position:static; } .dmm-has-mega .dmm-wrapper { display:block; } .dmm-has-mega .dmm-trigger-btn { display:none; } /* ============================================================ MEGA PANEL — moved to body by JS, uses position:fixed ============================================================ */ .dmm-panel-drop { /* Position and visibility controlled by JS */ position: fixed; z-index: 999999; visibility: hidden; pointer-events: none; box-sizing: border-box; /* Deterministic typography base. The panel is moved to by JS, so it must NOT rely on font-size inherited from the nav/theme — that caused the size drift in v3.6. */ font-size: 14px; line-height: 1.5; /* Background set via inline style from PHP — always solid */ background-color: #ffffff; /* Width set by JS based on data-width attribute */ max-width: 100vw; } .dmm-shadow.dmm-panel-drop, .dmm-shadow .dmm-panel-drop { box-shadow: 0 12px 40px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.07); } /* Animations — applied to panel itself */ .dmm-panel-drop.dmm-anim-fade { opacity:0; transition:opacity .2s ease, visibility .2s; } .dmm-panel-drop.dmm-anim-slide { opacity:0; transform:translateY(-10px); transition:opacity .2s ease, transform .2s ease, visibility .2s; } .dmm-panel-drop.dmm-anim-zoom { opacity:0; transform:scale(.97); transition:opacity .18s ease, transform .18s ease, visibility .18s; } .dmm-panel-drop.dmm-anim-none { opacity:0; transition:opacity .05s, visibility 0s; } .dmm-panel-drop.dmm-open { visibility: visible; pointer-events: auto; opacity: 1; transform: none; } /* ---- Grid inside panel ---- */ .dmm-grid { display:grid; gap:24px; } /* ---- Heading col ---- */ .dmm-heading-cell { display:flex; flex-direction:column; } .dmm-col-heading { display: flex; align-items: flex-end; min-height: 2.8em; padding-bottom: 10px; margin-bottom: 10px; text-decoration: none; /* Colours, border, size set via PHP-generated CSS in footer */ } .dmm-col-links { list-style:none; margin:0; padding:0; } .dmm-col-links li { list-style:none; } .dmm-col-links a { display:block; padding:5px 10px; margin:0 -10px; line-height:1.5; text-decoration:none; border-radius:4px; transition:color .14s, background .14s, padding-left .14s; } .dmm-col-links a:hover { padding-left:16px; } /* ---- Image cell ---- */ .dmm-image-cell .dmm-img-link { display:block; height:100%; min-height:180px; } .dmm-image-cell img { width:100%; height:100%; min-height:180px; object-fit:cover; border-radius:6px; display:block; } /* Centered fit — show the whole image without cropping */ .dmm-image-cell.dmm-img-contain .dmm-img-link { display:flex; align-items:center; justify-content:center; } .dmm-image-cell.dmm-img-contain img { object-fit:contain; height:auto; max-height:240px; } /* ---- Text/both cell ---- */ .dmm-item-link { display:block; text-decoration:none; color:inherit; border-radius:6px; padding:10px; transition:background .14s, color .14s; height:100%; } a.dmm-item-link:hover { background:rgba(0,0,0,.04); } .dmm-item-link.dmm-no-link, .dmm-img-link.dmm-no-link { cursor:default; } .dmm-featured .dmm-item-link { background:rgba(214,156,53,.06); border:1.5px solid rgba(214,156,53,.18); } .dmm-item-img { overflow:hidden; border-radius:6px; margin-bottom:10px; } .dmm-item-img img { width:100%; height:140px; object-fit:cover; display:block; transition:transform .28s; } .dmm-item-link:hover .dmm-item-img img { transform:scale(1.04); } .dmm-item-text { display:flex; flex-direction:column; gap:4px; } .dmm-icon { font-size:20px; width:20px; height:20px; margin-bottom:4px; } .dmm-item-title { font-weight:700; font-size:.91em; display:flex; align-items:center; gap:5px; } .dmm-item-desc { font-size:.8em; opacity:.6; line-height:1.45; } .dmm-badge { font-size:.65em; font-weight:700; padding:2px 7px; border-radius:20px; color:#fff; } /* Image position variants */ .dmm-row { display:flex; gap:10px; align-items:flex-start; } .dmm-img-left .dmm-item-img, .dmm-img-right .dmm-item-img { flex-shrink:0; width:80px; margin-bottom:0; } .dmm-img-left .dmm-item-img img, .dmm-img-right .dmm-item-img img { width:80px; height:70px; } .dmm-img-right.dmm-row { flex-direction:row-reverse; } /* Center position — centre the whole column */ .dmm-item-link.dmm-img-center { text-align:center; } .dmm-item-link.dmm-img-center .dmm-item-text { align-items:center; } .dmm-item-link.dmm-img-center .dmm-item-img img { margin:0 auto; } /* Sub-links */ .dmm-sub-links { list-style:none; margin:6px 0 0 8px; padding:0; border-left:2px solid rgba(0,0,0,.08); } .dmm-sub-links a { display:block; padding:4px 10px; font-size:.82em; text-decoration:none; opacity:.7; transition:opacity .14s; } .dmm-sub-links a:hover { opacity:1; } /* Video */ .dmm-video-label { font-weight:700; margin-bottom:8px; } .dmm-video-wrap { position:relative; width:100%; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:6px; background:#000; } .dmm-video-wrap iframe, .dmm-video-wrap video { position:absolute; top:0; left:0; width:100%; height:100%; border:none; } /* BG image overlay — opacity controlled by --dmm-overlay (set inline from PHP, default .88) */ .dmm-panel-drop[style*="background-image"]::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,var(--dmm-overlay,.88)); border-radius:inherit; pointer-events:none; z-index:0; } .dmm-panel-drop[style*="background-image"] .dmm-grid { position:relative; z-index:1; } /* ============================================================ MOBILE MENU ============================================================ */ .dmm-hamburger { display:inline-flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer; padding:7px; color:inherit; font:inherit; border-radius:6px; transition:background .14s; } .dmm-hamburger:hover { background:rgba(0,0,0,.06); } .dmm-ham-box { position:relative; display:inline-block; width:24px; height:18px; flex-shrink:0; } .dmm-ham-inner, .dmm-ham-inner::before, .dmm-ham-inner::after { position:absolute; left:0; width:24px; height:2px; background:currentColor; border-radius:2px; transition:transform .28s, opacity .2s; } .dmm-ham-inner { top:8px; } .dmm-ham-inner::before { content:''; top:-8px; } .dmm-ham-inner::after { content:''; top:8px; } .dmm-hamburger[aria-expanded="true"] .dmm-ham-inner { background:transparent; } .dmm-hamburger[aria-expanded="true"] .dmm-ham-inner::before { transform:translateY(8px) rotate(45deg); } .dmm-hamburger[aria-expanded="true"] .dmm-ham-inner::after { transform:translateY(-8px) rotate(-45deg); } .dmm-mob-overlay { position:fixed; inset:0; background:rgba(0,0,0,.44); z-index:99998; opacity:0; pointer-events:none; transition:opacity .28s; backdrop-filter:blur(2px); } .dmm-mob-overlay.dmm-vis { opacity:1; pointer-events:auto; } .dmm-mobile-panel { position:fixed; top:0; right:0; width:min(360px,90vw); height:100dvh; background:#fff; z-index:99999; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1), opacity .2s; box-shadow:-4px 0 36px rgba(0,0,0,.16); overflow:hidden; } .dmm-mobile-panel:not([hidden]) { transform:translateX(0); } .dmm-mobile-panel[hidden] { display:flex!important; opacity:0; pointer-events:none; } .dmm-mobile-panel:not([hidden]) { opacity:1; } .dmm-mobile-panel > nav { flex:1; overflow-y:auto; min-height:0; } .dmm-mob-header { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid #f0f2f8; flex-shrink:0; } .dmm-mob-title { font-weight:700; font-size:15px; } .dmm-mob-close { background:#f5f6ff; border:none; cursor:pointer; width:32px; height:32px; border-radius:50%; font-size:15px; display:flex; align-items:center; justify-content:center; } .dmm-mob-list { list-style:none; margin:0; padding:0; overflow-y:auto; flex:1; } .dmm-mob-item { list-style:none; } .dmm-mob-row { display:flex; align-items:stretch; } .dmm-mob-link { flex:1; display:flex; align-items:center; padding:12px 18px; text-decoration:none; color:#1a1f3a; font-weight:600; font-size:14px; transition:background .12s; border:none; background:none; } .dmm-mob-link:hover { background:#f5f7ff; } .dmm-mob-sub-link { font-weight:500; font-size:13px; color:#4a5068; padding-left:30px; } .dmm-mob-toggle { background:none; border:none; width:46px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#7b82a3; border-left:1px solid #f0f2f8; transition:background .12s; flex-shrink:0; } .dmm-mob-toggle:hover { background:#f5f7ff; } .dmm-tog { position:relative; width:12px; height:12px; display:block; } .dmm-tog::before, .dmm-tog::after { content:''; position:absolute; background:currentColor; border-radius:1px; transition:transform .22s; } .dmm-tog::before { width:2px; height:12px; left:5px; top:0; } .dmm-tog::after { width:12px; height:2px; left:0; top:5px; } .dmm-mob-toggle[aria-expanded="true"] .dmm-tog::before { opacity:0; transform:rotate(90deg); } .dmm-mob-toggle[aria-expanded="true"] .dmm-tog::after { transform:rotate(180deg); } .dmm-mob-sub { list-style:none; margin:0; padding:0; background:#f9fafe; border-top:1px solid #f0f2f8; overflow:hidden; max-height:0; transition:max-height .28s; } .dmm-mob-sub:not([hidden]) { max-height:1000px; } .dmm-mob-sub[hidden] { display:block!important; } /* v3.14 — per-item device visibility */ @media (max-width:767px){ .dmm-hide-mobile{display:none!important;} } @media (min-width:768px) and (max-width:980px){ .dmm-hide-tablet{display:none!important;} } @media (min-width:981px){ .dmm-hide-desktop{display:none!important;} } /* v3.14 — separator line */ .dmm-divider-cell{ display:block; } .dmm-divider-line{ width:100%; height:1px; background:rgba(0,0,0,.15); margin:8px 0; } /* v3.15 — mobile bar (logo + hamburger together) */ .dmm-mobile-bar { display:none; /* breakpoint media query switches to flex */ align-items:center; justify-content:space-between; gap:10px; } .dmm-mobile-bar .dmm-mob-logo { flex-shrink:0; } .dmm-mobile-bar .dmm-mob-logo img { max-height:48px; width:auto; display:block; } .dmm-hamburger.dmm-ham-right { order:2; } .dmm-hamburger.dmm-ham-left { order:-1; } /* popup alignment — each variant defines BOTH hidden and shown transforms */ .dmm-mobile-panel.dmm-mob-al-left { left:0; right:auto; transform:translateX(-100%); box-shadow:4px 0 36px rgba(0,0,0,.16); } .dmm-mobile-panel.dmm-mob-al-left:not([hidden]) { transform:translateX(0); } .dmm-mobile-panel.dmm-mob-al-right { right:0; left:auto; transform:translateX(100%); } .dmm-mobile-panel.dmm-mob-al-right:not([hidden]) { transform:translateX(0); } /* Center = dropdown-style popup (NOT full-height drawer) — matches the original */ .dmm-mobile-panel.dmm-mob-al-center { left:50%; right:auto; top:var(--dmm-popup-offset, 10px); height:auto; max-height:calc(100dvh - var(--dmm-popup-offset, 10px) - 20px); border-radius:16px; transform:translate(-50%,-110%); box-shadow:0 12px 44px rgba(0,0,0,.2); padding-bottom:env(safe-area-inset-bottom, 0px); } .dmm-mobile-panel.dmm-mob-al-center:not([hidden]) { transform:translate(-50%,0); } .dmm-mobile-panel.dmm-mob-al-center .dmm-mob-list { min-height:0; } /* panel header — close button only, right-aligned */ .dmm-mob-header { justify-content:flex-end; } /* mega headings inside the mobile accordion */ .dmm-mob-mega-head > .dmm-mob-row { align-items:center; } .dmm-mob-mega-head > .dmm-mob-row > .dmm-mob-toggle { border-left:none; } .dmm-mob-mega-head .dmm-mob-mega-heading { font-weight:700; } /* accent line — inside the sub, only visible when the heading is EXPANDED. Hidden by the sub's max-height:0 + overflow:hidden when collapsed. */ .dmm-mob-mega-head.dmm-mob-lined > .dmm-mob-sub::before { content:''; display:block; width:var(--dmm-line-w, 88%); margin:6px auto 4px; height:var(--dmm-bar-h, 3px); background:var(--dmm-accent, #d69c35); border-radius:3px; } .dmm-mob-mega-link { padding-left:28px !important; } .dmm-mob-badge { color:#fff; font-size:10px; padding:1px 6px; border-radius:20px; font-weight:700; margin-left:6px; } /* v3.15 — fit media to column width */ .dmm-fit-col img, .dmm-fit-col video, .dmm-fit-col iframe { max-width:100% !important; height:auto !important; } .dmm-fit-col.dmm-video-cell .dmm-video-wrap { max-width:100%; } /* v3.15 — icon style: 2 bars (hide middle) */ .dmm-ham-s-bars2 .dmm-ham-inner { background:transparent !important; } .dmm-ham-s-bars2[aria-expanded="true"] .dmm-ham-inner::before { transform:translateY(8px) rotate(45deg); } .dmm-ham-s-bars2[aria-expanded="true"] .dmm-ham-inner::after { transform:translateY(-8px) rotate(-45deg); } /* expand icon variant: chevron (˅ / ˄) instead of + / − */ .dmm-mob-icon-chev .dmm-tog::before { display:none; } .dmm-mob-icon-chev .dmm-tog::after { width:8px; height:8px; left:2px; top:0; background:none; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .22s; } .dmm-mob-icon-chev .dmm-mob-toggle[aria-expanded="true"] .dmm-tog::after { transform:rotate(-135deg); }