/* Stagehill Ultimate Member Account Menu v57 */ :root{ --shum-guest-color:#f26b21; --shum-user-color:#00a58f; --shum-button-bg:#1a1a1a; --shum-button-text:#fff; --shum-button-inactive-bg:#eee; --shum-button-inactive-text:#fff; --shum-button-hover-bg:#f26b21; --shum-button-hover-text:#fff; --shum-modal-bg:#fff; --shum-dropdown-bg:#fff; --shum-dropdown-text:#222; --shum-dropdown-hover-bg:#fff4ec; --shum-dropdown-hover-text:#111; --shum-logout-color:#e5233f; --shum-icon-size:38px; --shum-profile-arrow-color:#98a2b3; --shum-profile-label-size:13px; --shum-user-name-size:16px; --shum-dropdown-radius:18px; --shum-dropdown-shadow-strength:18px; --shum-menu-item-font-size:15px; --shum-menu-item-icon-size:22px; --shum-menu-item-gap:18px; --shum-menu-item-padding-y:12px; --shum-menu-item-padding-x:6px; --shum-menu-item-border:#eee; --shum-quick-bg:#fff; --shum-quick-text:#222; --shum-quick-icon:#f26b21; --shum-quick-radius:999px; --shum-quick-height:44px; --shum-logout-font-size:15px; --shum-modal-button-size:156px; --shum-dropdown-width:320px; --shum-mobile-side-padding:28px; --shum-mobile-header-height:160px; --shum-mobile-header-padding:22px; --shum-mobile-header-gap:10px; --shum-mobile-burger-size:56px; --shum-mobile-user-size:56px; --shum-mobile-logo-max-width:250px; --shum-mobile-logo-max-height:118px; --shum-mobile-logo-offset-x:0px; --shum-mobile-logo-offset-y:0px; --shum-desktop-account-margin-left:24px; } .shum-wrap,.shum-wrap *{box-sizing:border-box} .shum-wrap{display:inline-flex;align-items:center;position:relative;z-index:99;font-family:inherit} .shum-icon-btn{width:var(--shum-icon-size);height:var(--shum-icon-size);min-width:var(--shum-icon-size);border:0;border-radius:999px;background:#fff;color:var(--shum-guest-color);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.12);line-height:1;padding:0;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease} .shum-icon-btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.15)} .shum-icon-btn svg{width:62%;height:62%;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .shum-initial-btn{background:var(--shum-user-color);color:#fff;font-weight:700;box-shadow:none} .shum-initial-btn span{font-size:15px;line-height:1} /* Guest modal */ .shum-modal[hidden],.shum-panel{display:none!important}.shum-panel.is-active{display:block!important} .shum-modal{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:24px} .shum-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)} .shum-modal-card{position:relative;width:440px;max-width:min(440px,94vw);max-height:92vh;overflow:auto;background:var(--shum-modal-bg);border-radius:14px;box-shadow:0 18px 60px rgba(0,0,0,.25);padding:28px;z-index:1} .shum-close,.shum-mobile-close{border:0;background:transparent;color:#777;cursor:pointer;font-size:34px;line-height:1;display:flex;align-items:center;justify-content:center} .shum-close{position:absolute;right:16px;top:12px;width:42px;height:42px;z-index:4} .shum-tabs{display:flex;gap:14px;align-items:center;justify-content:center;margin:18px 48px 26px} .shum-tabs button{border:0;border-radius:12px;background:var(--shum-button-inactive-bg);color:var(--shum-button-inactive-text);font-weight:700;cursor:pointer;min-width:calc(var(--shum-modal-button-size) * .78);padding:16px 22px;font-size:18px;transition:background .18s ease,color .18s ease,transform .18s ease} .shum-tabs button.is-active{background:var(--shum-button-bg);color:var(--shum-button-text)} .shum-tabs button:hover{background:var(--shum-button-hover-bg);color:var(--shum-button-hover-text);transform:translateY(-1px)} .shum-warning{padding:14px;background:#fff4e8;border-left:4px solid #f26b21} /* Logged-in desktop dropdown */ .shum-dropdown-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center} .shum-dropdown[hidden],.shum-mobile-backdrop[hidden]{display:none!important} .shum-dropdown{position:absolute;right:0;top:calc(100% + 14px);width:var(--shum-dropdown-width);background:var(--shum-dropdown-bg);color:var(--shum-dropdown-text);border:1px solid rgba(0,0,0,.08);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.16);padding:18px 20px;z-index:999999;text-align:left} .shum-dropdown:before{content:"";position:absolute;right:22px;top:-10px;width:20px;height:20px;background:var(--shum-dropdown-bg);border-left:1px solid rgba(0,0,0,.08);border-top:1px solid rgba(0,0,0,.08);transform:rotate(45deg)} .shum-mobile-close{display:none} .shum-user-head{position:relative;display:flex;gap:14px;align-items:center;padding-bottom:16px;margin-bottom:14px;border-bottom:1px solid rgba(0,0,0,.08)} .shum-avatar{width:38px;height:38px;min-width:38px;border-radius:50%;background:var(--shum-user-color);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700} .shum-user-head strong{display:block;font-size:17px;line-height:1.2;color:var(--shum-dropdown-text)} .shum-user-head a{display:inline-block;margin-top:4px;text-decoration:none;color:#98a0ad;font-size:14px} .shum-quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:#f7f7f7;border-radius:12px;padding:12px;margin:0 0 14px} .shum-quick-action{min-height:48px;border-radius:999px;background:#fff;color:var(--shum-guest-color);display:flex;align-items:center;justify-content:center;text-decoration:none;gap:8px;box-shadow:0 4px 14px rgba(0,0,0,.05)} .shum-quick-action:hover{color:var(--shum-guest-color);transform:translateY(-1px)} .shum-quick-label{display:inline-block;line-height:1;font-size:14px;font-weight:600;white-space:nowrap}.shum-quick-icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .shum-menu-links{display:flex;flex-direction:column;gap:2px} .shum-menu-links a,.shum-logout{display:flex;align-items:center;gap:14px;padding:10px 4px;border-radius:10px;text-decoration:none;color:var(--shum-dropdown-text);font-size:15px;transition:background .16s ease,color .16s ease} .shum-menu-links a:hover{background:var(--shum-dropdown-hover-bg);color:var(--shum-dropdown-hover-text)} .shum-menu-links svg,.shum-logout svg{width:20px;height:20px;stroke:#9aa3b2;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .shum-sep{height:1px;background:rgba(0,0,0,.08);margin:12px 0}.shum-logout{color:var(--shum-logout-color)}.shum-logout svg{stroke:var(--shum-logout-color)} .shum-auto-corner{position:fixed;right:18px;top:18px;z-index:9999} /* Desktop only: keep WorkScout nav normal but align account to far right. */ @media (min-width:701px){ header#main-header #navigation.menu,#main-header #navigation.menu{display:flex!important;align-items:center!important;width:100%!important;gap:0!important} header#main-header #navigation.menu > ul,header#main-header #navigation.menu ul#responsive,#main-header #navigation.menu > ul,#main-header #navigation.menu ul#responsive{flex:0 1 auto!important} header#main-header #navigation.menu > .shum-wrap,#main-header #navigation.menu > .shum-wrap{margin-left:auto!important;float:none!important;align-self:center!important} } /* Mobile header placement only. Do NOT alter WorkScout mmenu animation/list. */ @media (max-width:700px){ header#main-header,#main-header{overflow:visible!important} header#main-header .container,#main-header .container{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;box-sizing:border-box!important} header#main-header .sixteen.columns,#main-header .sixteen.columns{ width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;box-sizing:border-box!important; min-height:var(--shum-mobile-header-height)!important;padding:0 var(--shum-mobile-header-padding)!important; display:grid!important;grid-template-columns:var(--shum-mobile-burger-size) minmax(0,1fr) var(--shum-mobile-user-size)!important; grid-template-areas:"burger logo account"!important;align-items:center!important;column-gap:var(--shum-mobile-header-gap)!important;position:relative!important;overflow:visible!important; } header#main-header .mmenu-trigger,#main-header .mmenu-trigger{ grid-area:burger!important;justify-self:start!important;align-self:center!important;position:relative!important;float:none!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;margin:0!important;padding:0!important;z-index:10!important; width:var(--shum-mobile-burger-size)!important;height:var(--shum-mobile-burger-size)!important;min-width:var(--shum-mobile-burger-size)!important;display:flex!important;align-items:center!important;justify-content:center!important; } /* Let WorkScout's hamburger icon draw itself; only center the clickable button. */ header#main-header .mmenu-trigger > button,#main-header .mmenu-trigger > button, header#main-header .mmenu-trigger .hamburger,#main-header .mmenu-trigger .hamburger{ width:var(--shum-mobile-burger-size)!important;height:var(--shum-mobile-burger-size)!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important; } header#main-header #logo,#main-header #logo{ grid-area:logo!important;justify-self:center!important;align-self:center!important;position:relative!important;float:none!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:translate(var(--shum-mobile-logo-offset-x),var(--shum-mobile-logo-offset-y))!important;margin:0!important;padding:0!important;text-align:center!important;max-width:100%!important;min-width:0!important;z-index:5!important; } header#main-header #logo a,#main-header #logo a{display:inline-block!important;margin:0!important;padding:0!important;max-width:100%!important} header#main-header #logo img,#main-header #logo img{display:block!important;margin:0 auto!important;width:auto!important;max-width:min(var(--shum-mobile-logo-max-width),100%)!important;max-height:var(--shum-mobile-logo-max-height)!important;height:auto!important} header#main-header #navigation.menu,#main-header #navigation.menu{ grid-area:account!important;justify-self:end!important;align-self:center!important;position:relative!important;float:none!important;display:flex!important;align-items:center!important;justify-content:center!important;width:var(--shum-mobile-user-size)!important;height:var(--shum-mobile-user-size)!important;overflow:visible!important;margin:0!important;padding:0!important;z-index:11!important; } header#main-header #navigation.menu > ul,header#main-header #navigation.menu ul#responsive,#main-header #navigation.menu > ul,#main-header #navigation.menu ul#responsive{display:none!important} header#main-header #navigation.menu > .shum-wrap,#main-header #navigation.menu > .shum-wrap{position:relative!important;right:auto!important;left:auto!important;top:auto!important;bottom:auto!important;transform:none!important;margin:0!important;padding:0!important} header#main-header .shum-icon-btn,#main-header .shum-icon-btn{width:var(--shum-mobile-user-size)!important;height:var(--shum-mobile-user-size)!important;min-width:var(--shum-mobile-user-size)!important;min-height:var(--shum-mobile-user-size)!important} header#main-header .shum-icon-btn svg,#main-header .shum-icon-btn svg{width:62%!important;height:62%!important} /* Keep Stagehill account markup out of WorkScout's cloned mmenu. */ .mmenu-init .shum-wrap{display:none!important} /* Closed WorkScout mmenu must not leave the generated title bar visible. */ .mmenu-init.mm-menu:not(.mm-opened),.mm-menu.mm-offcanvas:not(.mm-opened){display:none!important;visibility:hidden!important} /* Remove only the generated 'Menu' title bar. The actual WorkScout list and open/close motion stay untouched. */ .mm-menu .mm-navbar{display:none!important} .mm-panels>.mm-panel.mm-hasnavbar{padding-top:0!important} /* Mobile guest modal: full screen, animated vertically like WorkScout timing. */ .shum-modal{display:block!important;background:#fff!important;padding:0!important;overflow:hidden!important}.shum-modal[hidden]{display:none!important}.shum-backdrop{display:none!important} .shum-modal-card{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;border-radius:0!important;box-shadow:none!important;overflow:auto!important;overscroll-behavior:contain!important;background:var(--shum-modal-bg)!important;padding:calc(env(safe-area-inset-top,0px) + 72px) var(--shum-mobile-side-padding) calc(env(safe-area-inset-bottom,0px) + 28px)!important;box-sizing:border-box!important} .shum-close{position:fixed!important;top:calc(env(safe-area-inset-top,0px) + 18px)!important;right:18px!important;width:54px!important;height:54px!important;border-radius:999px!important;background:#f2f2f2!important;font-size:42px!important;z-index:2147483647!important} .shum-tabs{margin:0 64px 30px!important;justify-content:center!important}.shum-tabs button{width:auto!important;min-width:0!important;padding:18px 30px!important;font-size:20px!important;border-radius:12px!important}.shum-modal-card .um,.shum-modal-card .um-form,.shum-modal-card form,.shum-modal-card .um-field,.shum-modal-card .um-col-alt{width:100%!important;max-width:100%!important;box-sizing:border-box!important}.shum-modal-card input,.shum-modal-card textarea,.shum-modal-card select,.shum-modal-card button,.shum-modal-card .um-button{max-width:100%!important;box-sizing:border-box!important} /* Logged-in user drawer: full-screen, no background scroll, motion from top. */ body>.shum-dropdown-wrap.shum-dropdown-open{position:fixed!important;inset:0!important;z-index:2147483600!important;display:block!important;background:#fff!important;overflow:hidden!important} .shum-dropdown-open .shum-mobile-backdrop{display:none!important}.shum-dropdown-open .shum-icon-btn[data-shum-dropdown-toggle]{display:none!important} .shum-dropdown{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-height:100dvh!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:var(--shum-dropdown-bg)!important;padding:calc(env(safe-area-inset-top,0px) + 56px) var(--shum-mobile-side-padding) calc(env(safe-area-inset-bottom,0px) + 16px)!important;z-index:2147483601!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;box-sizing:border-box!important} .shum-dropdown:before{display:none!important}.shum-mobile-close{display:flex!important;position:fixed!important;top:calc(env(safe-area-inset-top,0px) + 12px)!important;right:18px!important;width:50px!important;height:50px!important;border-radius:10px!important;background:#f2f2f2!important;font-size:42px!important;z-index:2147483647!important} .shum-user-head{flex:0 0 auto!important;padding-bottom:12px!important;margin-bottom:10px!important}.shum-avatar{width:46px!important;height:46px!important}.shum-user-head strong{font-size:20px!important}.shum-user-head a{font-size:16px!important} .shum-quick-actions{flex:0 0 auto!important;margin:8px 0 10px!important;padding:10px!important;gap:10px!important}.shum-quick-action{height:48px!important;min-height:48px!important;padding:0 8px!important}.shum-quick-icon svg{width:24px!important;height:24px!important} .shum-menu-links{flex:1 1 auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;justify-content:space-evenly!important;overflow:hidden!important}.shum-menu-links a,.shum-logout{padding:7px 3px!important;font-size:17px!important;line-height:1.15!important}.shum-menu-links svg,.shum-logout svg{width:22px!important;height:22px!important}.shum-sep{flex:0 0 auto!important;margin:8px 0!important} .shum-dropdown.shum-animate-open{animation:shumAccountFromTop .4s ease both!important}.shum-dropdown.shum-animate-closing{animation:shumAccountToTop .4s ease both!important;pointer-events:none!important}.shum-modal.shum-modal-animate-open .shum-modal-card{animation:shumAccountFromTop .4s ease both!important}.shum-modal.shum-modal-animate-closing .shum-modal-card{animation:shumAccountToTop .4s ease both!important;pointer-events:none!important} } @media (max-width:390px){:root{--shum-mobile-side-padding:22px}.shum-menu-links a,.shum-logout{font-size:16px!important}.shum-tabs{margin-left:46px!important;margin-right:46px!important}.shum-tabs button{padding-left:22px!important;padding-right:22px!important}} @keyframes shumAccountFromTop{from{transform:translate3d(0,-100%,0)}to{transform:translate3d(0,0,0)}} @keyframes shumAccountToTop{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-100%,0)}} body.shum-lock-mobile{position:fixed!important;left:0!important;right:0!important;width:100%!important;overflow:hidden!important;touch-action:none!important} /* v41: remove custom top Login / Sign Up tabs. Switching is handled by Ultimate Member's own grey secondary buttons. */ .shum-tabs{display:none!important;} .shum-modal-card .shum-panel{padding-top:0!important;} @media (max-width:700px){ .shum-modal-card{padding-top:calc(env(safe-area-inset-top,0px) + 86px)!important;} /* v41: keep WorkScout hamburger visually normal while using our 3-column mobile header. */ header#main-header .mmenu-trigger, #main-header .mmenu-trigger{ background-color:#eee!important; border-radius:4px!important; overflow:visible!important; } header#main-header .mmenu-trigger > button, #main-header .mmenu-trigger > button, header#main-header .mmenu-trigger .hamburger, #main-header .mmenu-trigger .hamburger{ position:absolute!important; top:50%!important; left:50%!important; right:auto!important; bottom:auto!important; width:34px!important; height:24px!important; min-width:0!important; min-height:0!important; padding:0!important; margin:0!important; display:block!important; background:transparent!important; border:0!important; box-shadow:none!important; overflow:visible!important; transform:translate(-50%,-50%) scale(.72)!important; -moz-transform:translate(-50%,-50%) scale(.72)!important; } header#main-header .mmenu-trigger .hamburger-box, #main-header .mmenu-trigger .hamburger-box{ display:block!important; position:relative!important; width:34px!important; height:24px!important; margin:0!important; padding:0!important; } header#main-header .mmenu-trigger .hamburger-inner, #main-header .mmenu-trigger .hamburger-inner{ left:0!important; } } /* v41: remove mobile browser blue tap/selection highlight without affecting typing in forms. */ html, body, body *{ -webkit-tap-highlight-color: transparent !important; } /* Prevent blue selection/drag highlight on clickable header/account images and buttons. */ #logo, #logo a, #logo img, .shum-wrap, .shum-wrap *, .shum-modal .shum-close, .shum-dropdown .shum-mobile-close, .mmenu-trigger, .mmenu-trigger *, a, button, img{ -webkit-touch-callout: none !important; -webkit-user-select: none !important; user-select: none !important; } /* Keep text fields usable/selectable. */ input, textarea, select, .um-field, .um-field *, .shum-modal-card input, .shum-modal-card textarea, .shum-modal-card select{ -webkit-user-select: text !important; user-select: text !important; -webkit-touch-callout: default !important; } img{ -webkit-user-drag: none !important; } .shum-wrap a:focus, .shum-wrap button:focus, .shum-modal a:focus, .shum-modal button:focus, .mmenu-trigger button:focus{ outline: none !important; box-shadow: none !important; } /* v41: mobile header layout: logo far left, account button then WorkScout burger on far right. */ @media (max-width:700px){ header#main-header .sixteen.columns, #main-header .sixteen.columns{ display:grid!important; grid-template-columns:minmax(0,1fr) var(--shum-mobile-user-size) var(--shum-mobile-burger-size)!important; grid-template-areas:"logo account burger"!important; align-items:center!important; column-gap:12px!important; width:100%!important; max-width:none!important; min-height:var(--shum-mobile-header-height)!important; padding:0 var(--shum-mobile-header-padding)!important; overflow:visible!important; } header#main-header #logo, #main-header #logo{ grid-area:logo!important; justify-self:start!important; align-self:center!important; text-align:left!important; width:auto!important; max-width:100%!important; min-width:0!important; margin:0!important; padding:0!important; transform:translate(var(--shum-mobile-logo-offset-x),var(--shum-mobile-logo-offset-y))!important; position:relative!important; left:auto!important; right:auto!important; top:auto!important; bottom:auto!important; } header#main-header #logo a, #main-header #logo a{ display:inline-flex!important; align-items:center!important; justify-content:flex-start!important; width:auto!important; max-width:100%!important; margin:0!important; padding:0!important; } header#main-header #logo img, #main-header #logo img{ display:block!important; width:auto!important; height:auto!important; max-width:min(var(--shum-mobile-logo-max-width),100%)!important; max-height:var(--shum-mobile-logo-max-height)!important; object-fit:contain!important; margin:0!important; } header#main-header #navigation.menu, #main-header #navigation.menu{ grid-area:account!important; justify-self:end!important; align-self:center!important; width:var(--shum-mobile-user-size)!important; height:var(--shum-mobile-user-size)!important; min-width:var(--shum-mobile-user-size)!important; min-height:var(--shum-mobile-user-size)!important; display:flex!important; align-items:center!important; justify-content:center!important; margin:0!important; padding:0!important; position:relative!important; left:auto!important; right:auto!important; top:auto!important; bottom:auto!important; transform:none!important; overflow:visible!important; z-index:11!important; } header#main-header .mmenu-trigger, #main-header .mmenu-trigger{ grid-area:burger!important; justify-self:end!important; align-self:center!important; width:var(--shum-mobile-burger-size)!important; height:var(--shum-mobile-burger-size)!important; min-width:var(--shum-mobile-burger-size)!important; min-height:var(--shum-mobile-burger-size)!important; display:flex!important; align-items:center!important; justify-content:center!important; margin:0!important; padding:0!important; float:none!important; position:relative!important; left:auto!important; right:auto!important; top:auto!important; bottom:auto!important; transform:none!important; background:#eee!important; border-radius:4px!important; overflow:visible!important; z-index:12!important; } header#main-header .mmenu-trigger > button, #main-header .mmenu-trigger > button, header#main-header .mmenu-trigger .hamburger, #main-header .mmenu-trigger .hamburger{ position:relative!important; top:auto!important; left:auto!important; right:auto!important; bottom:auto!important; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; padding:0!important; margin:0!important; display:flex!important; align-items:center!important; justify-content:center!important; background:transparent!important; border:0!important; box-shadow:none!important; overflow:visible!important; transform:none!important; -moz-transform:none!important; } header#main-header .mmenu-trigger .hamburger-box, #main-header .mmenu-trigger .hamburger-box{ display:block!important; position:relative!important; width:34px!important; height:24px!important; margin:0!important; padding:0!important; } header#main-header .mmenu-trigger .hamburger-inner, #main-header .mmenu-trigger .hamburger-inner{ left:0!important; } } /* v41: keep WorkScout hamburger line size original while header places it on the far right. */ @media (max-width:700px){ header#main-header .mmenu-trigger > button, #main-header .mmenu-trigger > button, header#main-header .mmenu-trigger .hamburger, #main-header .mmenu-trigger .hamburger{ position:absolute!important; top:50%!important; left:50%!important; right:auto!important; bottom:auto!important; width:34px!important; height:24px!important; min-width:0!important; min-height:0!important; padding:0!important; margin:0!important; display:block!important; background:transparent!important; border:0!important; box-shadow:none!important; overflow:visible!important; transform:translate(-50%,-50%) scale(.72)!important; -moz-transform:translate(-50%,-50%) scale(.72)!important; } header#main-header .mmenu-trigger .hamburger-box, #main-header .mmenu-trigger .hamburger-box{ display:block!important; position:relative!important; width:34px!important; height:24px!important; margin:0!important; padding:0!important; } header#main-header .mmenu-trigger .hamburger-inner, #main-header .mmenu-trigger .hamburger-inner{ left:0!important; } } /* v41: WorkScout already initializes mmenu with position:right, but this theme build lacks the right-position CSS. Add only the missing right-side off-canvas rules so the menu opens right-to-left. */ @media (max-width:992px){ .mm-menu.mm-offcanvas.mm-right, html.mm-right .mm-menu.mm-offcanvas{ left:auto!important; right:0!important; } .mm-menu.mm-offcanvas.mm-right.mm-front, html.mm-right .mm-menu.mm-offcanvas.mm-front, .mm-menu.mm-offcanvas.mm-right.mm-next, html.mm-right .mm-menu.mm-offcanvas.mm-next{ -webkit-transform:translate3d(100%,0,0)!important; transform:translate3d(100%,0,0)!important; -webkit-transition:-webkit-transform .4s ease!important; transition:transform .4s ease!important; } html.mm-opening .mm-menu.mm-offcanvas.mm-right.mm-opened, html.mm-opening.mm-right .mm-menu.mm-offcanvas.mm-opened, html.mm-opening .mm-menu.mm-offcanvas.mm-right.mm-front, html.mm-opening.mm-right .mm-menu.mm-offcanvas.mm-front{ -webkit-transform:translate3d(0,0,0)!important; transform:translate3d(0,0,0)!important; } /* For zposition:front, keep the page in place while the menu slides over it. */ html.mm-right.mm-opening .mm-menu.mm-opened ~ .mm-slideout, html.mm-opening .mm-menu.mm-opened.mm-right ~ .mm-slideout{ -webkit-transform:none!important; transform:none!important; } } /* v41: Force WorkScout/mmenu mobile drawer to open from the RIGHT side. This intentionally does not change the WorkScout burger menu contents or mmenu list styling. It only reverses the off-canvas side and slide direction on mobile. */ @media only screen and (max-width: 767px){ .mm-menu.mm-offcanvas, .mm-menu.mm-offcanvas.mm-opened, .mmenu-init.mm-menu.mm-offcanvas, .mmenu-init.mm-menu.mm-offcanvas.mm-opened{ left:auto!important; right:0!important; } html.mm-opening .mm-menu.mm-opened ~ .mm-slideout, html.mm-opening .mm-menu.mm-offcanvas.mm-opened ~ .mm-slideout, html.mm-opening .mmenu-init.mm-menu.mm-opened ~ .mm-slideout{ -webkit-transform:translate(-80%,0)!important; -ms-transform:translate(-80%,0)!important; transform:translate(-80%,0)!important; -webkit-transform:translate3d(-80%,0,0)!important; transform:translate3d(-80%,0,0)!important; } /* Keep the original WorkScout hamburger line proportions. */ header#main-header .mmenu-trigger .hamburger, #main-header .mmenu-trigger .hamburger{ transform:scale(0.72)!important; -moz-transform:scale(0.72) translateY(3px)!important; } header#main-header .mmenu-trigger .hamburger-inner, header#main-header .mmenu-trigger .hamburger-inner:before, header#main-header .mmenu-trigger .hamburger-inner:after, #main-header .mmenu-trigger .hamburger-inner, #main-header .mmenu-trigger .hamburger-inner:before, #main-header .mmenu-trigger .hamburger-inner:after{ width:34px!important; height:4px!important; border-radius:4px!important; } } @media only screen and (max-width: 175px){ html.mm-opening .mm-menu.mm-opened ~ .mm-slideout, html.mm-opening .mm-menu.mm-offcanvas.mm-opened ~ .mm-slideout, html.mm-opening .mmenu-init.mm-menu.mm-opened ~ .mm-slideout{ -webkit-transform:translate(-140px,0)!important; -ms-transform:translate(-140px,0)!important; transform:translate(-140px,0)!important; -webkit-transform:translate3d(-140px,0,0)!important; transform:translate3d(-140px,0,0)!important; } } @media only screen and (min-width: 550px) and (max-width: 767px){ html.mm-opening .mm-menu.mm-opened ~ .mm-slideout, html.mm-opening .mm-menu.mm-offcanvas.mm-opened ~ .mm-slideout, html.mm-opening .mmenu-init.mm-menu.mm-opened ~ .mm-slideout{ -webkit-transform:translate(-440px,0)!important; -ms-transform:translate(-440px,0)!important; transform:translate(-440px,0)!important; -webkit-transform:translate3d(-440px,0,0)!important; transform:translate3d(-440px,0,0)!important; } } /* v41: restore WorkScout hamburger line proportions and center them inside the moved mobile button. */ @media only screen and (max-width: 767px){ header#main-header .mmenu-trigger, #main-header .mmenu-trigger{ position:relative!important; overflow:visible!important; } header#main-header .mmenu-trigger > button.hamburger, #main-header .mmenu-trigger > button.hamburger, header#main-header .mmenu-trigger .hamburger, #main-header .mmenu-trigger .hamburger{ position:absolute!important; top:50%!important; left:50%!important; right:auto!important; bottom:auto!important; width:34px!important; height:24px!important; min-width:34px!important; min-height:24px!important; padding:0!important; margin:0!important; display:block!important; background:transparent!important; border:0!important; box-shadow:none!important; overflow:visible!important; transform:translate(-50%,-50%) scale(.72)!important; -webkit-transform:translate(-50%,-50%) scale(.72)!important; -moz-transform:translate(-50%,-50%) scale(.72)!important; transform-origin:center center!important; } header#main-header .mmenu-trigger .hamburger-box, #main-header .mmenu-trigger .hamburger-box{ position:relative!important; display:block!important; width:34px!important; height:24px!important; padding:0!important; margin:0!important; transform:none!important; -webkit-transform:none!important; } header#main-header .mmenu-trigger .hamburger-inner, #main-header .mmenu-trigger .hamburger-inner{ display:block!important; position:absolute!important; top:50%!important; left:0!important; right:auto!important; width:34px!important; height:4px!important; margin-top:-2px!important; border-radius:4px!important; background-color:#555!important; } header#main-header .mmenu-trigger .hamburger-inner:before, header#main-header .mmenu-trigger .hamburger-inner:after, #main-header .mmenu-trigger .hamburger-inner:before, #main-header .mmenu-trigger .hamburger-inner:after{ content:""!important; display:block!important; position:absolute!important; left:0!important; width:34px!important; height:4px!important; border-radius:4px!important; background-color:#555!important; } header#main-header .mmenu-trigger .hamburger-inner:before, #main-header .mmenu-trigger .hamburger-inner:before{ top:-10px!important; } header#main-header .mmenu-trigger .hamburger-inner:after, #main-header .mmenu-trigger .hamburger-inner:after{ bottom:-10px!important; } } /* v41: restore the original WorkScout hamburger drawing and X animation exactly. We only keep the plugin's mobile header placement and right-side drawer behavior. */ @media only screen and (max-width: 767px){ header#main-header .mmenu-trigger, #main-header .mmenu-trigger{ width:50px!important; height:50px!important; min-width:50px!important; min-height:50px!important; display:flex!important; align-items:center!important; justify-content:center!important; background-color:#eee!important; border-radius:4px!important; overflow:visible!important; } header#main-header .mmenu-trigger > button.hamburger, #main-header .mmenu-trigger > button.hamburger, header#main-header .mmenu-trigger .hamburger, #main-header .mmenu-trigger .hamburger{ padding:0!important; top:15px!important; left:12px!important; right:auto!important; bottom:auto!important; width:auto!important; height:auto!important; min-width:0!important; min-height:0!important; transform:scale(0.72)!important; -webkit-transform:scale(0.72)!important; -moz-transform:scale(0.72) translateY(3px)!important; position:relative!important; display:inline-block!important; cursor:pointer!important; background-color:transparent!important; border:0!important; margin:0!important; outline:none!important; overflow:visible!important; box-shadow:none!important; color:inherit!important; } header#main-header .mmenu-trigger .hamburger-box, #main-header .mmenu-trigger .hamburger-box{ position:relative!important; display:inline-block!important; width:34px!important; height:24px!important; margin:0!important; padding:0!important; transform:none!important; -webkit-transform:none!important; } header#main-header .mmenu-trigger .hamburger-inner, #main-header .mmenu-trigger .hamburger-inner{ display:block!important; top:50%!important; left:0!important; right:auto!important; bottom:auto!important; outline:none!important; margin-top:-2px!important; } header#main-header .mmenu-trigger .hamburger-inner, header#main-header .mmenu-trigger .hamburger-inner::before, header#main-header .mmenu-trigger .hamburger-inner::after, #main-header .mmenu-trigger .hamburger-inner, #main-header .mmenu-trigger .hamburger-inner::before, #main-header .mmenu-trigger .hamburger-inner::after{ width:34px!important; height:4px!important; background-color:#555!important; border-radius:4px!important; position:absolute!important; transition-property:transform!important; transition-duration:0.15s!important; outline:none!important; transition-timing-function:ease!important; transform:none; } header#main-header .mmenu-trigger .hamburger-inner::before, header#main-header .mmenu-trigger .hamburger-inner::after, #main-header .mmenu-trigger .hamburger-inner::before, #main-header .mmenu-trigger .hamburger-inner::after{ content:""!important; display:block!important; left:0!important; } header#main-header .mmenu-trigger .hamburger-inner::before, #main-header .mmenu-trigger .hamburger-inner::before{ top:-10px!important; bottom:auto!important; outline:none!important; } header#main-header .mmenu-trigger .hamburger-inner::after, #main-header .mmenu-trigger .hamburger-inner::after{ top:auto!important; bottom:-10px!important; outline:none!important; } header#main-header .mmenu-trigger .hamburger--collapse .hamburger-inner, #main-header .mmenu-trigger .hamburger--collapse .hamburger-inner{ top:auto!important; bottom:0!important; transition-duration:0.13s!important; transition-delay:0.13s!important; transition-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)!important; } header#main-header .mmenu-trigger .hamburger--collapse .hamburger-inner::after, #main-header .mmenu-trigger .hamburger--collapse .hamburger-inner::after{ top:-20px!important; bottom:auto!important; transition:top 0.2s 0.2s cubic-bezier(0.33333,0.66667,0.66667,1), opacity 0.1s linear!important; } header#main-header .mmenu-trigger .hamburger--collapse .hamburger-inner::before, #main-header .mmenu-trigger .hamburger--collapse .hamburger-inner::before{ transition:top 0.12s 0.2s cubic-bezier(0.33333,0.66667,0.66667,1), transform 0.13s cubic-bezier(0.55,0.055,0.675,0.19)!important; } header#main-header .mmenu-trigger .hamburger--collapse.is-active .hamburger-inner, #main-header .mmenu-trigger .hamburger--collapse.is-active .hamburger-inner{ transform:translate3d(0,-10px,0) rotate(-45deg)!important; transition-delay:0.22s!important; transition-timing-function:cubic-bezier(0.215,0.61,0.355,1)!important; } header#main-header .mmenu-trigger .hamburger--collapse.is-active .hamburger-inner::after, #main-header .mmenu-trigger .hamburger--collapse.is-active .hamburger-inner::after{ top:0!important; opacity:0!important; transition:top 0.2s cubic-bezier(0.33333,0,0.66667,0.33333), opacity 0.1s 0.22s linear!important; } header#main-header .mmenu-trigger .hamburger--collapse.is-active .hamburger-inner::before, #main-header .mmenu-trigger .hamburger--collapse.is-active .hamburger-inner::before{ top:0!important; transform:rotate(-90deg)!important; transition:top 0.1s 0.16s cubic-bezier(0.33333,0,0.66667,0.33333), transform 0.13s 0.25s cubic-bezier(0.215,0.61,0.355,1)!important; } } /* ========================================================== Stagehill v41 - WorkScout hamburger restored and centered Uses the original WorkScout hamburger geometry + animation. Only the wrapper is centered inside the custom mobile header. ========================================================== */ @media only screen and (max-width: 767px) { body #main-header .mmenu-trigger { width: var(--shum-mobile-burger-size, 58px) !important; height: var(--shum-mobile-burger-size, 58px) !important; min-width: var(--shum-mobile-burger-size, 58px) !important; min-height: var(--shum-mobile-burger-size, 58px) !important; max-width: var(--shum-mobile-burger-size, 58px) !important; max-height: var(--shum-mobile-burger-size, 58px) !important; padding: 0 !important; margin: 0 !important; position: relative !important; display: block !important; box-sizing: border-box !important; overflow: visible !important; } body #main-header .mmenu-trigger .hamburger, body #main-header button.hamburger { padding: 0 !important; margin: 0 !important; position: absolute !important; display: inline-block !important; width: 34px !important; height: 24px !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) scale(0.72) !important; -moz-transform: translate(-50%, -50%) scale(0.72) !important; transform-origin: center center !important; background: transparent !important; border: 0 !important; outline: none !important; overflow: visible !important; line-height: 1 !important; } body #main-header .hamburger-box { width: 34px !important; height: 24px !important; display: block !important; position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; margin: 0 !important; padding: 0 !important; transform: none !important; } body #main-header .hamburger-inner { display: block !important; top: 50% !important; margin-top: -2px !important; left: 0 !important; right: auto !important; bottom: auto !important; transform: none !important; } body #main-header .hamburger-inner, body #main-header .hamburger-inner::before, body #main-header .hamburger-inner::after { width: 34px !important; height: 3px !important; background-color: #555 !important; border-radius: 4px !important; position: absolute !important; transition-property: transform !important; transition-duration: 0.15s !important; transition-timing-function: ease !important; outline: none !important; left: 0 !important; right: auto !important; margin-left: 0 !important; margin-right: 0 !important; transform-origin: center center !important; } body #main-header .hamburger-inner::before, body #main-header .hamburger-inner::after { content: "" !important; display: block !important; } body #main-header .hamburger-inner::before { top: -10px !important; bottom: auto !important; } body #main-header .hamburger-inner::after { bottom: -10px !important; top: auto !important; } /* Original WorkScout collapse animation */ body #main-header .hamburger--collapse .hamburger-inner { top: auto !important; bottom: 0 !important; transition-duration: 0.13s !important; transition-delay: 0.13s !important; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) !important; } body #main-header .hamburger--collapse .hamburger-inner::after { top: -20px !important; bottom: auto !important; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear !important; } body #main-header .hamburger--collapse .hamburger-inner::before { transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19) !important; } body #main-header .hamburger--collapse.is-active .hamburger-inner, body.mm-wrapper_opened #main-header .hamburger--collapse .hamburger-inner, body.mm-wrapper_opening #main-header .hamburger--collapse .hamburger-inner { transform: translate3d(0, -10px, 0) rotate(-45deg) !important; transition-delay: 0.22s !important; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) !important; } body #main-header .hamburger--collapse.is-active .hamburger-inner::after, body.mm-wrapper_opened #main-header .hamburger--collapse .hamburger-inner::after, body.mm-wrapper_opening #main-header .hamburger--collapse .hamburger-inner::after { top: 0 !important; opacity: 0 !important; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear !important; } body #main-header .hamburger--collapse.is-active .hamburger-inner::before, body.mm-wrapper_opened #main-header .hamburger--collapse .hamburger-inner::before, body.mm-wrapper_opening #main-header .hamburger--collapse .hamburger-inner::before { top: 0 !important; transform: rotate(-90deg) !important; transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1) !important; } } /* ========================================================== Stagehill v41 - perfectly centered custom burger glyph The click target remains WorkScout's original .mmenu-trigger. We hide only the misaligned inner glyph and draw centered lines. ========================================================== */ @media only screen and (max-width: 767px) { body #main-header .mmenu-trigger { width: var(--shum-mobile-burger-size, 58px) !important; height: var(--shum-mobile-burger-size, 58px) !important; min-width: var(--shum-mobile-burger-size, 58px) !important; min-height: var(--shum-mobile-burger-size, 58px) !important; max-width: var(--shum-mobile-burger-size, 58px) !important; max-height: var(--shum-mobile-burger-size, 58px) !important; padding: 0 !important; margin: 0 !important; position: relative !important; display: block !important; box-sizing: border-box !important; overflow: visible !important; } /* keep the real button clickable, but do not let its internal bars draw */ body #main-header .mmenu-trigger .hamburger, body #main-header .mmenu-trigger button.hamburger { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; z-index: 3 !important; transform: none !important; opacity: 1 !important; cursor: pointer !important; } body #main-header .mmenu-trigger .hamburger-box, body #main-header .mmenu-trigger .hamburger-inner, body #main-header .mmenu-trigger .hamburger-inner::before, body #main-header .mmenu-trigger .hamburger-inner::after { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* draw the centered icon ourselves */ body #main-header .mmenu-trigger::before, body #main-header .mmenu-trigger::after { content: "" !important; position: absolute !important; left: 50% !important; top: 50% !important; width: 20px !important; height: 3px !important; margin: 0 !important; padding: 0 !important; background: #555 !important; border-radius: 999px !important; transform-origin: center center !important; transition: transform 0.22s ease, box-shadow 0.22s ease, opacity 0.18s ease !important; z-index: 2 !important; } /* closed: middle line plus top/bottom via shadow */ body #main-header .mmenu-trigger::before { transform: translate(-50%, -50%) rotate(0deg) !important; box-shadow: 0 -7px 0 #555, 0 7px 0 #555 !important; opacity: 1 !important; } body #main-header .mmenu-trigger::after { transform: translate(-50%, -50%) rotate(-45deg) !important; box-shadow: none !important; opacity: 0 !important; } /* open: centered X */ body.mm-wrapper_opened #main-header .mmenu-trigger::before, body.mm-wrapper_opening #main-header .mmenu-trigger::before, body #main-header .mmenu-trigger:has(.hamburger.is-active)::before { transform: translate(-50%, -50%) rotate(45deg) !important; box-shadow: none !important; opacity: 1 !important; } body.mm-wrapper_opened #main-header .mmenu-trigger::after, body.mm-wrapper_opening #main-header .mmenu-trigger::after, body #main-header .mmenu-trigger:has(.hamburger.is-active)::after { transform: translate(-50%, -50%) rotate(-45deg) !important; opacity: 1 !important; } } /* Stagehill v41 guest button + custom icon support */ .shum-guest-icon{ background:var(--shum-guest-bg,#000)!important; color:var(--shum-guest-color,#fff)!important; } .shum-guest-icon svg{ stroke:currentColor!important; } .shum-custom-icon{ display:block; width:20px; height:20px; object-fit:contain; } .shum-icon-btn .shum-custom-icon{ width:62%; height:62%; } .shum-menu-links .shum-custom-icon, .shum-logout .shum-custom-icon{ width:20px; height:20px; filter:none; } .shum-menu-links a span{ display:inline-flex; align-items:center; justify-content:center; width:22px; min-width:22px; } /* v42 configurable menu styling and per-item overrides */ .shum-dropdown{border-radius:var(--shum-dropdown-radius,18px)!important;box-shadow:0 18px calc(var(--shum-dropdown-shadow-strength,18px) * 2) rgba(0,0,0,.14)!important;} .shum-user-head strong{font-size:var(--shum-user-name-size,16px)!important;} .shum-profile-link{font-size:var(--shum-profile-label-size,13px)!important;display:inline-flex!important;align-items:center;gap:4px;text-decoration:none!important;} .shum-profile-arrow{color:var(--shum-profile-arrow-color,#98a2b3)!important;} .shum-quick-action{min-height:var(--shum-quick-height,44px)!important;border-radius:var(--shum-quick-radius,999px)!important;background:var(--shum-quick-bg,#fff)!important;color:var(--shum-quick-text,#222)!important;} .shum-quick-action svg{color:var(--shum-quick-icon,#f26b21)!important;stroke:var(--shum-quick-icon,#f26b21)!important;} .shum-menu-links a.shum-menu-link{color:var(--shum-item-text,var(--shum-dropdown-text,#222))!important;background:var(--shum-item-bg,transparent)!important;font-size:var(--shum-item-font-size,var(--shum-menu-item-font-size,15px))!important;gap:var(--shum-menu-item-gap,18px)!important;padding:var(--shum-menu-item-padding-y,12px) var(--shum-menu-item-padding-x,6px)!important;border-bottom-color:var(--shum-menu-item-border,#eee)!important;} .shum-menu-links a.shum-menu-link span:first-child,.shum-menu-links a.shum-menu-link svg,.shum-menu-links a.shum-menu-link img{width:var(--shum-item-icon-size,var(--shum-menu-item-icon-size,22px))!important;height:var(--shum-item-icon-size,var(--shum-menu-item-icon-size,22px))!important;color:var(--shum-item-icon,#98a2b3)!important;stroke:var(--shum-item-icon,#98a2b3)!important;} .shum-menu-links a.shum-menu-link:hover{color:var(--shum-item-hover-text,var(--shum-dropdown-hover-text,#111))!important;background:var(--shum-item-hover-bg,var(--shum-dropdown-hover-bg,#fff4ec))!important;} .shum-logout{font-size:var(--shum-logout-font-size,15px)!important;} /* v45: top shortcut labels, no-icon support, and v42-style dark-mode inheritance */ .shum-quick-icon:empty{display:none!important} .shum-menu-links a.shum-menu-link .shum-menu-icon:empty{display:none!important} .shum-menu-links a.shum-menu-link .shum-menu-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto} .shum-quick-action{padding:0 14px;overflow:hidden} .shum-quick-action .shum-quick-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto} .shum-quick-action .shum-quick-icon svg{display:block} /* Ignore accidental per-item browser color defaults in dark mode. The drawer then follows the dark-mode plugin exactly like v42. */ body.dark-mode .shum-menu-links a.shum-menu-link, body.stagehill-dark-mode .shum-menu-links a.shum-menu-link, body.stagehill-dark .shum-menu-links a.shum-menu-link, body.dark .shum-menu-links a.shum-menu-link, html.dark-mode .shum-menu-links a.shum-menu-link, html.stagehill-dark-mode .shum-menu-links a.shum-menu-link, html.stagehill-dark .shum-menu-links a.shum-menu-link, html.dark .shum-menu-links a.shum-menu-link, [data-theme="dark"] .shum-menu-links a.shum-menu-link { --shum-item-bg: transparent !important; --shum-item-text: var(--shum-dropdown-text) !important; --shum-item-icon: #9aa3b2 !important; --shum-item-hover-bg: var(--shum-dropdown-hover-bg) !important; --shum-item-hover-text: var(--shum-dropdown-hover-text) !important; } /* v48: keep light-mode wp-admin styling, restore visible v42-style dark hover. */ .shum-dropdown, .shum-menu-links a.shum-menu-link, .shum-menu-links a.shum-menu-link *, .shum-quick-actions, .shum-quick-action { transition: background-color .22s ease, background .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease, stroke .22s ease, fill .22s ease, opacity .18s ease, transform .16s ease !important; } /* Normal light mode: respect the plugin settings exactly. */ html:not(.shum-dark-active):not(.dark-mode):not(.stagehill-dark-mode):not(.stagehill-dark) .shum-menu-links a.shum-menu-link, body:not(.shum-dark-active):not(.dark-mode):not(.stagehill-dark-mode):not(.stagehill-dark) .shum-menu-links a.shum-menu-link { background-color: var(--shum-item-bg, transparent); color: var(--shum-item-text, var(--shum-dropdown-text)); } /* Dark mode default item state: no white flash, no saved white backgrounds. */ html.shum-dark-active .shum-menu-links a.shum-menu-link, body.shum-dark-active .shum-menu-links a.shum-menu-link, html.dark-mode .shum-menu-links a.shum-menu-link, html.stagehill-dark-mode .shum-menu-links a.shum-menu-link, html.stagehill-dark .shum-menu-links a.shum-menu-link, body.dark-mode .shum-menu-links a.shum-menu-link, body.stagehill-dark-mode .shum-menu-links a.shum-menu-link, body.stagehill-dark .shum-menu-links a.shum-menu-link, [data-theme="dark"] .shum-menu-links a.shum-menu-link { --shum-item-bg: transparent !important; --shum-item-text: rgba(255,255,255,.78) !important; --shum-item-icon: rgba(255,255,255,.66) !important; --shum-item-hover-bg: rgba(255,255,255,.11) !important; --shum-item-hover-text: #ffffff !important; background-color: transparent !important; background-image: none !important; color: rgba(255,255,255,.78) !important; } /* Dark mode visible hover. */ html.shum-dark-active .shum-menu-links a.shum-menu-link:hover, body.shum-dark-active .shum-menu-links a.shum-menu-link:hover, html.dark-mode .shum-menu-links a.shum-menu-link:hover, html.stagehill-dark-mode .shum-menu-links a.shum-menu-link:hover, html.stagehill-dark .shum-menu-links a.shum-menu-link:hover, body.dark-mode .shum-menu-links a.shum-menu-link:hover, body.stagehill-dark-mode .shum-menu-links a.shum-menu-link:hover, body.stagehill-dark .shum-menu-links a.shum-menu-link:hover, [data-theme="dark"] .shum-menu-links a.shum-menu-link:hover { background-color: rgba(255,255,255,.11) !important; color: #ffffff !important; } /* Dark mode icons follow the same hover color. */ html.shum-dark-active .shum-menu-links a.shum-menu-link:hover svg, body.shum-dark-active .shum-menu-links a.shum-menu-link:hover svg, html.dark-mode .shum-menu-links a.shum-menu-link:hover svg, html.stagehill-dark-mode .shum-menu-links a.shum-menu-link:hover svg, html.stagehill-dark .shum-menu-links a.shum-menu-link:hover svg, body.dark-mode .shum-menu-links a.shum-menu-link:hover svg, body.stagehill-dark-mode .shum-menu-links a.shum-menu-link:hover svg, body.stagehill-dark .shum-menu-links a.shum-menu-link:hover svg, [data-theme="dark"] .shum-menu-links a.shum-menu-link:hover svg { stroke: #ffffff !important; } html.shum-dark-active .shum-menu-links a.shum-menu-link:hover .shum-menu-icon, body.shum-dark-active .shum-menu-links a.shum-menu-link:hover .shum-menu-icon, html.dark-mode .shum-menu-links a.shum-menu-link:hover .shum-menu-icon, html.stagehill-dark-mode .shum-menu-links a.shum-menu-link:hover .shum-menu-icon, html.stagehill-dark .shum-menu-links a.shum-menu-link:hover .shum-menu-icon, body.dark-mode .shum-menu-links a.shum-menu-link:hover .shum-menu-icon, body.stagehill-dark-mode .shum-menu-links a.shum-menu-link:hover .shum-menu-icon, body.stagehill-dark .shum-menu-links a.shum-menu-link:hover .shum-menu-icon, [data-theme="dark"] .shum-menu-links a.shum-menu-link:hover .shum-menu-icon { color: #ffffff !important; } /* v49: restore visible dark-mode item background hover. This is intentionally scoped only to dark mode so light-mode wp-admin styling remains unchanged. */ html.shum-dark-active .shum-dropdown .shum-menu-links a.shum-menu-link, body.shum-dark-active .shum-dropdown .shum-menu-links a.shum-menu-link, html.dark-mode .shum-dropdown .shum-menu-links a.shum-menu-link, html.stagehill-dark-mode .shum-dropdown .shum-menu-links a.shum-menu-link, html.stagehill-dark .shum-dropdown .shum-menu-links a.shum-menu-link, body.dark-mode .shum-dropdown .shum-menu-links a.shum-menu-link, body.stagehill-dark-mode .shum-dropdown .shum-menu-links a.shum-menu-link, body.stagehill-dark .shum-dropdown .shum-menu-links a.shum-menu-link, [data-theme="dark"] .shum-dropdown .shum-menu-links a.shum-menu-link { background: transparent !important; background-color: transparent !important; } html.shum-dark-active .shum-dropdown .shum-menu-links a.shum-menu-link:hover, html.shum-dark-active .shum-dropdown .shum-menu-links a.shum-menu-link:focus, body.shum-dark-active .shum-dropdown .shum-menu-links a.shum-menu-link:hover, body.shum-dark-active .shum-dropdown .shum-menu-links a.shum-menu-link:focus, html.dark-mode .shum-dropdown .shum-menu-links a.shum-menu-link:hover, html.dark-mode .shum-dropdown .shum-menu-links a.shum-menu-link:focus, html.stagehill-dark-mode .shum-dropdown .shum-menu-links a.shum-menu-link:hover, html.stagehill-dark-mode .shum-dropdown .shum-menu-links a.shum-menu-link:focus, html.stagehill-dark .shum-dropdown .shum-menu-links a.shum-menu-link:hover, html.stagehill-dark .shum-dropdown .shum-menu-links a.shum-menu-link:focus, body.dark-mode .shum-dropdown .shum-menu-links a.shum-menu-link:hover, body.dark-mode .shum-dropdown .shum-menu-links a.shum-menu-link:focus, body.stagehill-dark-mode .shum-dropdown .shum-menu-links a.shum-menu-link:hover, body.stagehill-dark-mode .shum-dropdown .shum-menu-links a.shum-menu-link:focus, body.stagehill-dark .shum-dropdown .shum-menu-links a.shum-menu-link:hover, body.stagehill-dark .shum-dropdown .shum-menu-links a.shum-menu-link:focus, [data-theme="dark"] .shum-dropdown .shum-menu-links a.shum-menu-link:hover, [data-theme="dark"] .shum-dropdown .shum-menu-links a.shum-menu-link:focus { background: #242424 !important; background-color: #242424 !important; background-image: none !important; color: #ffffff !important; } /* Some browsers/themes paint the item through pseudo-elements or inner spans. Kill that and let the link background show. */ html.shum-dark-active .shum-dropdown .shum-menu-links a.shum-menu-link:hover::before, html.shum-dark-active .shum-dropdown .shum-menu-links a.shum-menu-link:hover::after, body.shum-dark-active .shum-dropdown .shum-menu-links a.shum-menu-link:hover::before, body.shum-dark-active .shum-dropdown .shum-menu-links a.shum-menu-link:hover::after, html.dark-mode .shum-dropdown .shum-menu-links a.shum-menu-link:hover::before, html.dark-mode .shum-dropdown .shum-menu-links a.shum-menu-link:hover::after, body.dark-mode .shum-dropdown .shum-menu-links a.shum-menu-link:hover::before, body.dark-mode .shum-dropdown .shum-menu-links a.shum-menu-link:hover::after, [data-theme="dark"] .shum-dropdown .shum-menu-links a.shum-menu-link:hover::before, [data-theme="dark"] .shum-dropdown .shum-menu-links a.shum-menu-link:hover::after { background: transparent !important; } /* Preserve the rounded pill/card feel on hover in desktop and mobile drawers. */ .shum-dropdown .shum-menu-links a.shum-menu-link { border-radius: var(--shum-item-radius, 14px); } /* v50: smooth main logo swap in dark mode */ #logo img, .logo img, .site-logo img, .custom-logo-link img, img.custom-logo { transition: opacity .18s ease, filter .22s ease !important; }