.elementor-7632 .elementor-element.elementor-element-be69702{padding:0px 0px 0px 20px;text-align:start;}.elementor-7632 .elementor-element.elementor-element-be69702 img{width:26%;}.elementor-7632 .elementor-element.elementor-element-73ae60c{padding:0px 020px 0px 0px;}.elementor-7632 .elementor-element.elementor-element-73ae60c.elementor-element{--align-self:stretch;--order:99999 /* order end hack */;--flex-grow:1;--flex-shrink:0;}.elementor-7632 .elementor-element.elementor-element-73ae60c .elementor-menu-toggle{margin:0 auto;}/* Start custom CSS for theme-site-logo, class: .elementor-element-be69702 *//* ============================================================ THE LOGO, TURNED WHITE Paste into: the LOGO widget -> Advanced -> Custom CSS, in the FILM header only. brightness(0) crushes the image to pure black whatever it was, then invert(1) flips it to pure white. Works on any solid mark without needing a second file. opacity .82 rather than 1: on a film page the logo should be present, not competing. Full white was a badge on a poster. ============================================================ */ .elementor-7632 .elementor-element.elementor-element-be69702 img{ filter:brightness(0) invert(1)!important; opacity:.82!important; transition:opacity .25s ease!important} .elementor-7632 .elementor-element.elementor-element-be69702:hover img{opacity:1!important} /* If the mark comes out muddy rather than clean white, the file is not solid black — upload a white version instead and delete this. *//* End custom CSS */ /* Start custom CSS for nav-menu, class: .elementor-element-73ae60c *//* ============================================================ HEALTH SUPPLY CLUB — DARK HEADER (the film pages) Paste into: the WordPress Menu widget -> Advanced -> Custom CSS in the FILM header only. Not Header Booms, not Header Biz. Same structure as the light header, inverted. Nothing is spaced or sized differently on purpose: moving between a fitness page and a film page should read as the same site in a dark room, not two designs. ============================================================ */ /* ---------- THE BAR ITSELF ---------- The container needs a black background. If the container's own Background setting is easier, use that instead and delete this block. Otherwise put this on the CONTAINER's Custom CSS, not the menu's. */ /* .elementor-7632 .elementor-element.elementor-element-73ae60c{ background-color:#0B0E0F!important; border-bottom:1px solid rgba(255,255,255,.08)!important} */ /* ---------- TOP LEVEL ---------- */ .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item{ font-family:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important; font-weight:600!important; font-size:13px!important; letter-spacing:.02em!important; /* not pure white — 88% sits back a little so the films lead */ color:rgba(244,249,248,.88)!important; padding:10px 15px!important; border-radius:7px!important; transition:background-color .25s ease,color .25s ease!important} .elementor-nav-menu--main .elementor-nav-menu > li{margin:0 2px!important} .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:hover, .elementor-nav-menu--main .elementor-nav-menu > li:hover > a.elementor-item{ background:rgba(255,255,255,.09)!important; color:#FFFFFF!important} /* the current page */ .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item-active, .elementor-nav-menu--main .elementor-nav-menu > li.current-menu-item > a.elementor-item, .elementor-nav-menu--main .elementor-nav-menu > li.current-menu-ancestor > a.elementor-item{ background:rgba(255,255,255,.13)!important; color:#FFFFFF!important} /* Elementor's own underline and fade are switched off — the pill does it */ .elementor-nav-menu--main .elementor-item:before, .elementor-nav-menu--main .elementor-item:after{display:none!important} .elementor-nav-menu--main .elementor-item .sub-arrow{ margin-inline-start:5px!important;opacity:.5; transition:transform .3s cubic-bezier(.22,1,.36,1)!important} .elementor-nav-menu--main li:hover > .elementor-item .sub-arrow{ transform:rotate(180deg)} /* ---------- THE DROPDOWN ---------- Lighter than the page, not darker. On a black ground a darker panel disappears; this one lifts off it. */ .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu{ background:#191D1F!important; border:0!important; border-radius:10px!important; padding:7px!important; margin-top:8px!important; min-width:230px!important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.12), 0 20px 44px -20px rgba(0,0,0,.9)!important; overflow:hidden!important} .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu li{margin:0!important} .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu a.elementor-sub-item{ display:flex!important;align-items:center!important; justify-content:space-between!important; padding:10px 13px!important; border-radius:6px!important; font-family:'Figtree',sans-serif!important; font-size:13px!important;font-weight:500!important; letter-spacing:0!important;text-transform:none!important; color:rgba(240,247,246,.78)!important; border:0!important; transition:background-color .2s ease,color .2s ease!important} .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu a.elementor-sub-item:hover, .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu li:hover > a.elementor-sub-item{ background:rgba(255,255,255,.09)!important; color:#FFFFFF!important} .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu a.elementor-sub-item::after{ content:"\203A";font-size:15px;line-height:1;color:#F2A65A; opacity:0;transform:translateX(-3px); transition:opacity .2s ease,transform .25s cubic-bezier(.22,1,.36,1)} .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu a.elementor-sub-item:hover::after{ opacity:1;transform:none} .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu li.current-menu-item > a.elementor-sub-item{ background:rgba(255,255,255,.12)!important;color:#FFFFFF!important} /* ---------- MOBILE ---------- */ .elementor-nav-menu__container.elementor-nav-menu--dropdown{ background:#191D1F!important; border-radius:12px!important; margin-top:10px!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 24px 48px -24px rgba(0,0,0,.95)!important} .elementor-nav-menu--dropdown a.elementor-item, .elementor-nav-menu--dropdown a.elementor-sub-item{ font-family:'Figtree',sans-serif!important; font-size:14.5px!important;font-weight:500!important; color:rgba(240,247,246,.86)!important; padding:13px 16px!important; border-radius:7px!important; border:0!important} .elementor-nav-menu--dropdown a.elementor-item:hover, .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active{ background:rgba(255,255,255,.09)!important;color:#fff!important} .elementor-nav-menu--dropdown a.elementor-sub-item{ font-size:13.5px!important; color:rgba(240,247,246,.64)!important; padding-inline-start:30px!important} /* ---------- THE MOBILE PANEL SITS LEFT ---------- Centred items read as decorative rather than functional, and with five of them the eye has no edge to run down. Left only on mobile — the desktop bar keeps its own alignment. */ @media (max-width:1024px){ .elementor-nav-menu--dropdown a.elementor-item, .elementor-nav-menu--dropdown a.elementor-sub-item, .elementor-nav-menu__container.elementor-nav-menu--dropdown a{ text-align:left!important; justify-content:flex-start!important} .elementor-nav-menu--dropdown, .elementor-nav-menu__container.elementor-nav-menu--dropdown{ text-align:left!important} .elementor-nav-menu--dropdown li, .elementor-nav-menu--dropdown .menu-item{ text-align:left!important} } /* the burger */ .elementor-menu-toggle{ background:rgba(255,255,255,.09)!important; border-radius:8px!important; padding:9px!important; color:rgba(244,249,248,.9)!important} .elementor-menu-toggle:hover{background:rgba(255,255,255,.16)!important} @media (prefers-reduced-motion:reduce){ .elementor-nav-menu--main .elementor-item, .elementor-nav-menu--main .sub-arrow, .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item, .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item::after{ transition:none!important} }/* End custom CSS */