/* Orilogy Mobile Menu - expanding toggle + products dropdown. Inherits the theme font; brand green #183B19 / #1E3D24. The overlay is portaled to by the JS so no transformed/blurred Elementor ancestor can trap it — it always covers the full viewport. */ /* ---- Toggle (three clean lines, never a filled box) ---- */ .omm{ display:inline-flex; font-family:inherit; -webkit-tap-highlight-color:transparent; } .omm-overlay{ -webkit-tap-highlight-color:transparent; } .omm-item:focus:not(:focus-visible), .omm-toggle:focus:not(:focus-visible), .omm-close:focus:not(:focus-visible), .omm-shopall:focus:not(:focus-visible), .omm-product:focus:not(:focus-visible){ outline:none; } .omm-toggle{ -webkit-appearance:none;appearance:none; background:transparent !important;border:0 !important;box-shadow:none !important; padding:0;margin:0;width:42px;height:42px;cursor:pointer;color:#241F20; display:inline-flex;align-items:center;justify-content:center; } .omm-toggle:hover,.omm-toggle:focus{background:transparent !important;} .omm-ico{position:relative;display:block;width:26px;height:16px;} .omm-ico i{ position:absolute;left:0;height:2px;width:100%;background:currentColor;border-radius:2px; } .omm-ico i:nth-child(1){top:1px;} .omm-ico i:nth-child(2){top:7px;} .omm-ico i:nth-child(3){top:13px;} /* ---- Toggle colour per page ---- The bars are `background:currentColor`, so this is the only thing that has to change. Something in the header styling forces the toggle to #fff on every page, which is right over the homepage's dark hero but left the icon nearly invisible against the beige header everywhere else - hence the !important and the body-level specificity. Homepage keeps white in every state, stuck or not. Every other page uses the brand primary at rest, then flips back to white once the header sticks - the stuck bar is dark, so a dark icon vanished into it. `--e-global-color-primary` is Elementor's global (it resolves to #241F20 today), so this tracks the kit if the brand colour is ever retuned, with the literal as a fallback. */ body.home .omm-toggle{ color:#fff !important; } body:not(.home) .omm-toggle{ color:var(--e-global-color-primary,#241F20) !important; } body:not(.home) .site-header.is-stuck .omm-toggle{ color:#fff !important; } /* ---- Overlay (lives on ) ---- */ .omm-overlay{ position:fixed;inset:0;z-index:100000; display:flex;flex-direction:column; padding:16px; background:rgba(18,32,18,.34); -webkit-backdrop-filter:blur(16px) saturate(115%); backdrop-filter:blur(16px) saturate(115%); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .32s ease, visibility .32s ease; font-family:inherit; } .omm-overlay *{box-sizing:border-box;font-family:inherit;} .omm-overlay.is-open{opacity:1;visibility:visible;pointer-events:auto;} /* ---- Top bar: full-width nav (expands to the left) + close ---- */ .omm-bar{display:flex;align-items:center;gap:12px;width:100%;} .omm-nav{ flex:1 1 auto;min-width:0; display:flex;align-items:center;gap:6px; padding:6px;border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); overflow-x:auto;scrollbar-width:none; transform:scaleX(.82);transform-origin:right center;opacity:0; transition:transform .4s cubic-bezier(.2,.7,.3,1), opacity .32s ease; } .omm-nav::-webkit-scrollbar{display:none;} .omm-overlay.is-open .omm-nav{transform:scaleX(1);opacity:1;} .omm-item{ flex:0 0 auto; padding:10px 20px;border-radius:999px;border:none;background:transparent; color:rgba(255,255,255,.88);font-size:15px;line-height:1;white-space:nowrap; text-decoration:none;cursor:pointer;transition:background .2s,color .2s; } .omm-item:hover{color:#fff;} .omm-item.is-active{background:#F2EBDE;color:#241F20;} .omm-close{ flex:0 0 auto;width:52px;height:52px;border-radius:999px; border:1.5px solid rgba(255,255,255,.7);background:transparent;color:#fff; font-size:22px;line-height:1;cursor:pointer;transition:background .2s; } .omm-close:hover{background:rgba(255,255,255,.16);} /* ---- Products dropdown ---- */ .omm-dd{ margin-top:16px;flex:1 1 auto;min-height:0;overflow-y:auto; border-radius:22px;padding:14px 16px 18px; background:rgba(28,38,28,.42); border:1px solid rgba(255,255,255,.12); display:none; } .omm-dd.is-open{display:flex;flex-direction:column;} .omm-dd-list{display:flex;flex-direction:column;} .omm-product{ display:flex;align-items:center;gap:18px; padding:14px 6px;text-decoration:none; border-bottom:1px solid rgba(255,255,255,.08); } .omm-product:last-child{border-bottom:none;} .omm-p-thumb{ flex:0 0 auto;width:74px;height:74px;border-radius:16px;overflow:hidden; background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center; } .omm-p-thumb .omm-p-img,.omm-p-thumb img{width:100%;height:100%;object-fit:cover;display:block;} .omm-p-text{display:flex;flex-direction:column;gap:5px;min-width:0;} .omm-p-name{color:#fff;font-size:19px;line-height:1.15;letter-spacing:.01em;} .omm-p-sub{ color:rgba(255,255,255,.62);font-size:14px;line-height:1.35; /* cap the description at 3 lines on mobile */ display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; } .omm-shopall{ align-self:flex-end;margin-top:auto;padding-top:14px; color:#fff !important;font-size:15px;text-decoration:none; border-bottom:1px solid rgba(255,255,255,.65); } .omm-shopall:hover{color:#fff !important;border-bottom-color:#fff;} @media (max-width:420px){ .omm-item{padding:9px 15px;font-size:14px;} .omm-close{width:46px;height:46px;font-size:20px;} .omm-p-thumb{width:64px;height:64px;border-radius:14px;} .omm-p-name{font-size:17px;} }