.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before, .elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-123 .elementor-element.elementor-element-0b763bb .elementor-menu-toggle{margin:0 auto;}.elementor-123 .elementor-element.elementor-element-0b763bb .elementor-nav-menu .elementor-item{font-family:"Noto Sans Hebrew", Sans-serif;font-size:20px;font-weight:500;line-height:1.2em;}.elementor-123 .elementor-element.elementor-element-0b763bb .elementor-nav-menu--main .elementor-item{color:#112B44;fill:#112B44;padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;}.elementor-123 .elementor-element.elementor-element-0b763bb .elementor-nav-menu--main .elementor-item:hover, .elementor-123 .elementor-element.elementor-element-0b763bb .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-123 .elementor-element.elementor-element-0b763bb .elementor-nav-menu--main .elementor-item.highlighted, .elementor-123 .elementor-element.elementor-element-0b763bb .elementor-nav-menu--main .elementor-item:focus{color:#112B44;fill:#112B44;}.elementor-123 .elementor-element.elementor-element-0b763bb .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#112B44;}.elementor-123 .elementor-element.elementor-element-0b763bb{--e-nav-menu-horizontal-menu-item-margin:calc( 36px / 2 );--nav-menu-icon-size:22px;}.elementor-123 .elementor-element.elementor-element-0b763bb .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:36px;}.elementor-123 .elementor-element.elementor-element-0b763bb .elementor-nav-menu--dropdown a, .elementor-123 .elementor-element.elementor-element-0b763bb .elementor-menu-toggle{color:#112B44;fill:#112B44;}.elementor-123 .elementor-element.elementor-element-0b763bb .elementor-nav-menu--dropdown{background-color:#FFFFFF;border-radius:0px 0px 6px 6px;}.elementor-123 .elementor-element.elementor-element-0b763bb .elementor-nav-menu--dropdown a:hover, .elementor-123 .elementor-element.elementor-element-0b763bb .elementor-nav-menu--dropdown a:focus, .elementor-123 .elementor-element.elementor-element-0b763bb .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-123 .elementor-element.elementor-element-0b763bb .elementor-nav-menu--dropdown a.highlighted, .elementor-123 .elementor-element.elementor-element-0b763bb .elementor-menu-toggle:hover, .elementor-123 .elementor-element.elementor-element-0b763bb .elementor-menu-toggle:focus{color:#112B44;}.elementor-123 .elementor-element.elementor-element-0b763bb .elementor-nav-menu--dropdown a:hover, .elementor-123 .elementor-element.elementor-element-0b763bb .elementor-nav-menu--dropdown a:focus, .elementor-123 .elementor-element.elementor-element-0b763bb .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-123 .elementor-element.elementor-element-0b763bb .elementor-nav-menu--dropdown a.highlighted{background-color:#F1F6F8;}.elementor-123 .elementor-element.elementor-element-0b763bb .elementor-nav-menu--dropdown .elementor-item, .elementor-123 .elementor-element.elementor-element-0b763bb .elementor-nav-menu--dropdown .elementor-sub-item{font-family:"Noto Sans Hebrew", Sans-serif;font-size:18px;font-weight:400;}.elementor-123 .elementor-element.elementor-element-0b763bb .elementor-nav-menu--dropdown li:first-child a{border-top-left-radius:0px;border-top-right-radius:0px;}.elementor-123 .elementor-element.elementor-element-0b763bb .elementor-nav-menu--dropdown li:last-child a{border-bottom-right-radius:6px;border-bottom-left-radius:6px;}.elementor-123 .elementor-element.elementor-element-0b763bb .elementor-nav-menu--main .elementor-nav-menu--dropdown, .elementor-123 .elementor-element.elementor-element-0b763bb .elementor-nav-menu__container.elementor-nav-menu--dropdown{box-shadow:0px 8px 24px 0px rgba(17,43,68,0.12);}.elementor-123 .elementor-element.elementor-element-0b763bb .elementor-nav-menu--dropdown a{padding-left:24px;padding-right:24px;padding-top:14px;padding-bottom:14px;}.elementor-123 .elementor-element.elementor-element-0b763bb div.elementor-menu-toggle{color:#112B44;}.elementor-123 .elementor-element.elementor-element-0b763bb div.elementor-menu-toggle svg{fill:#112B44;}.elementor-123 .elementor-element.elementor-element-0b763bb div.elementor-menu-toggle:hover, .elementor-123 .elementor-element.elementor-element-0b763bb div.elementor-menu-toggle:focus{color:#112B44;}.elementor-123 .elementor-element.elementor-element-0b763bb div.elementor-menu-toggle:hover svg, .elementor-123 .elementor-element.elementor-element-0b763bb div.elementor-menu-toggle:focus svg{fill:#112B44;}.elementor-123 .elementor-element.elementor-element-a6b2d95 .e-off-canvas__content{background-color:#FFFFFF;box-shadow:0px 0px 40px 0px rgba(17,43,68,0.25);}.elementor-123 .elementor-element.elementor-element-a6b2d95 .e-off-canvas__overlay{background-color:rgba(17,43,68,0.55);}.elementor-123 .elementor-element.elementor-element-a6b2d95{--e-off-canvas-justify-content:flex-start;--e-off-canvas-align-items:flex-start;--e-off-canvas-width:380px;--e-off-canvas-height:100vh;--e-off-canvas-content-overflow:auto;--e-off-canvas-animation-duration:0.35s;--e-off-canvas-overlay-opacity:1;}.elementor-123 .elementor-element.elementor-element-b7c3e06{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:24px 24px;--row-gap:24px;--column-gap:24px;--padding-top:32px;--padding-bottom:40px;--padding-left:28px;--padding-right:28px;}.elementor-123 .elementor-element.elementor-element-f1a2b43 .elementor-nav-menu .elementor-item{font-family:"Noto Sans Hebrew", Sans-serif;font-size:22px;font-weight:500;line-height:1.3em;}.elementor-123 .elementor-element.elementor-element-f1a2b43 .elementor-nav-menu--main .elementor-item{color:#112B44;fill:#112B44;padding-left:0px;padding-right:0px;padding-top:12px;padding-bottom:12px;}.elementor-123 .elementor-element.elementor-element-f1a2b43 .elementor-nav-menu--main .elementor-item:hover, .elementor-123 .elementor-element.elementor-element-f1a2b43 .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-123 .elementor-element.elementor-element-f1a2b43 .elementor-nav-menu--main .elementor-item.highlighted, .elementor-123 .elementor-element.elementor-element-f1a2b43 .elementor-nav-menu--main .elementor-item:focus{color:#112B44;fill:#112B44;}.elementor-123 .elementor-element.elementor-element-f1a2b43 .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#112B44;}.elementor-123 .elementor-element.elementor-element-f1a2b43{--e-nav-menu-horizontal-menu-item-margin:calc( 0px / 2 );}.elementor-123 .elementor-element.elementor-element-f1a2b43 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:0px;}.elementor-123 .elementor-element.elementor-element-f1a2b43 .elementor-nav-menu--dropdown a, .elementor-123 .elementor-element.elementor-element-f1a2b43 .elementor-menu-toggle{color:#4A6580;fill:#4A6580;}.elementor-123 .elementor-element.elementor-element-f1a2b43 .elementor-nav-menu--dropdown{background-color:rgba(255,255,255,0);}.elementor-123 .elementor-element.elementor-element-f1a2b43 .elementor-nav-menu--dropdown a:hover, .elementor-123 .elementor-element.elementor-element-f1a2b43 .elementor-nav-menu--dropdown a:focus, .elementor-123 .elementor-element.elementor-element-f1a2b43 .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-123 .elementor-element.elementor-element-f1a2b43 .elementor-nav-menu--dropdown a.highlighted, .elementor-123 .elementor-element.elementor-element-f1a2b43 .elementor-menu-toggle:hover, .elementor-123 .elementor-element.elementor-element-f1a2b43 .elementor-menu-toggle:focus{color:#112B44;}.elementor-123 .elementor-element.elementor-element-f1a2b43 .elementor-nav-menu--dropdown a:hover, .elementor-123 .elementor-element.elementor-element-f1a2b43 .elementor-nav-menu--dropdown a:focus, .elementor-123 .elementor-element.elementor-element-f1a2b43 .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-123 .elementor-element.elementor-element-f1a2b43 .elementor-nav-menu--dropdown a.highlighted{background-color:rgba(255,255,255,0);}.elementor-123 .elementor-element.elementor-element-f1a2b43 .elementor-nav-menu--dropdown .elementor-item, .elementor-123 .elementor-element.elementor-element-f1a2b43 .elementor-nav-menu--dropdown .elementor-sub-item{font-family:"Noto Sans Hebrew", Sans-serif;font-size:18px;font-weight:400;}.elementor-123 .elementor-element.elementor-element-f1a2b43 .elementor-nav-menu--dropdown a{padding-left:0px;padding-right:0px;padding-top:8px;padding-bottom:8px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.elementor-123 .elementor-element.elementor-element-0b763bb .elementor-nav-menu .elementor-item{font-size:16px;}.elementor-123 .elementor-element.elementor-element-0b763bb .elementor-nav-menu--main .elementor-item{padding-top:0px;padding-bottom:0px;}.elementor-123 .elementor-element.elementor-element-0b763bb{--e-nav-menu-horizontal-menu-item-margin:calc( 20px / 2 );}.elementor-123 .elementor-element.elementor-element-0b763bb .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:20px;}}@media(max-width:767px){.elementor-123 .elementor-element.elementor-element-0b763bb .elementor-nav-menu .elementor-item{font-size:16px;}.elementor-123 .elementor-element.elementor-element-a6b2d95{--e-off-canvas-width:320px;}}/* Start custom CSS *//* --- Basson header -------------------------------------------------------- Everything below is either a pseudo-element decoration or a property the V4 schema has no prop for. The nav is a CLASSIC Pro widget (no atomic nav element exists in 4.2.2), so it has no style variants at all - its own controls carry the typography/colour/spacing, and only what those controls cannot express fluidly lives here. ------------------------------------------------------------------------ */ /* 1. Nav items fill the header's fluid height. The widget's vertical-padding control only takes fixed px per breakpoint, which cannot track the header's clamp() height - so the item is stretched instead of padded. This also puts the active-item bar exactly on the header's bottom edge at every viewport. */ .elementor .basson-site-header .elementor-widget-nav-menu, .elementor .basson-site-header .elementor-nav-menu--main, .elementor .basson-site-header .elementor-nav-menu--main > ul.elementor-nav-menu { height: 100%; } .elementor .basson-site-header .elementor-nav-menu--main > ul.elementor-nav-menu > li { align-items: stretch; } .elementor .basson-site-header .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item { position: relative; height: 100%; display: flex; align-items: center; } /* 2. Active-item indicator: 30x8 gold bar flush with the header's bottom edge. ::after decoration - not expressible as a style prop. */ .elementor .basson-site-header .elementor-nav-menu--main > ul.elementor-nav-menu > li.current-menu-item > a::after, .elementor .basson-site-header .elementor-nav-menu--main > ul.elementor-nav-menu > li.current-menu-ancestor > a::after { content: ""; position: absolute; bottom: 0; /* the item has zero horizontal padding (post-123.css), so the anchor box IS the word - the bar spans it instead of a fixed 30px (LiaD, 2026-08-16) */ inset-inline: 0; height: 8px; background-color: #FFD92B; } /* 3. The exported icon carries per-path fill="#000000". The V4 styles schema has no `fill` prop (only `stroke`), so the element's `color` cannot reach the paths - this hands them currentColor so `color` works as intended. */ .elementor .basson-header-phone-glyph svg path { fill: currentColor; } /* --- Task 6 finishing pass ------------------------------------------------ 4. Dropdown panel must fit its longest label. Elementor sizes the sub-menu at a fixed 156px while "שירותי תפעול לעסקים" needs 216px, and overflow is visible - the text spilled off the white panel onto the hero behind it. */ .elementor .basson-site-header .elementor-nav-menu--main ul.sub-menu { width: max-content; min-width: 100%; } /* 5. The desktop nav wrapped to two rows between 1025 and ~1150px (items + logo + phone needed ~891px inside an 840px content-wide at 1025). Fluid item spacing recovers ~62px there and is a no-op at 1440+. */ .elementor .basson-site-header .elementor-widget-nav-menu { --e-nav-menu-horizontal-menu-item-margin: calc(clamp(20px, 2.5vw, 36px) / 2); } .elementor .basson-header-phone-number { white-space: nowrap; } /* 6. Mobile: the panel is anchored to the toggle, so it opened 18px above the logo's baseline and covered the tagline. Anchoring it to the nav widget's full height puts it flush with the header's bottom edge at any header height - no magic offset. The !important is required: Elementor's own `top:33px` rule outranks this .elementor-123. */ @media (max-width: 767px) { .elementor .basson-site-header .elementor-nav-menu__container.elementor-nav-menu--dropdown { top: 100% !important; margin-top: 0; } } /* 7. Interaction states (Task 6). Desktop pointers only, per the house rule. The nav's resting state is deliberately flat - the design's only signal is the gold active bar - so hover previews that same bar at the same height as the active-item bar (LiaD, 2026-08-15) — an opacity fade in, not a half-height one. */ @media (min-width: 1025px) { .elementor .basson-site-header .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item::before { content: ""; position: absolute; bottom: 0; inset-inline: 0; height: 8px; background-color: #FFD92B; transform: scaleY(0); transform-origin: bottom; transition: transform 180ms var(--bsn-ease-out); } .elementor .basson-site-header .elementor-nav-menu--main > ul.elementor-nav-menu > li:hover > a.elementor-item::before { transform: scaleY(1); } /* the current item already carries the full-height bar via ::after */ .elementor .basson-site-header .elementor-nav-menu--main > ul.elementor-nav-menu > li.current-menu-item > a.elementor-item::before, .elementor .basson-site-header .elementor-nav-menu--main > ul.elementor-nav-menu > li.current-menu-ancestor > a.elementor-item::before { display: none; } /* Elementor already paints #F1F6F8 on dropdown hover - but instantly */ .elementor .basson-site-header .elementor-nav-menu--dropdown a { transition: background-color 150ms ease; } /* phone CTA: seen constantly, so colour only, no movement */ .elementor .basson-site-header .basson-header-phone-icon { transition: background-color 150ms ease; } .elementor .basson-site-header .basson-header-phone:hover .basson-header-phone-icon { background-color: #F2CC12; } } /* 8. Sticky header (LiaD, 2026-08-16). This one rule is the whole feature, and it is NOT set through the Style > Position panel, because neither Elementor route reaches it: - V4 atomic elements have no Motion-Effects "Sticky" control, and they silently ignore the legacy `sticky` setting (verified on 4.2.2 / Pro 4.2.1: the front end emitted no data-settings and no elementor-sticky class for it). - position:sticky set on the header container itself is inert. Its containing block is
, which is exactly as tall as the header, so the sticky range is zero. Removing that box with display:contents does free the range - but it also promotes the container to a flex item of (kit rule 1 makes a column flex container), where Elementor's own `.e-con { margin-inline: auto }` defeats the stretch and the header collapses to fit-content: 863px at a 1280 viewport. Do not reintroduce display:contents here. Sticking the theme-builder wrapper instead leaves the header's own box untouched - it is a plain block child of a full-width flex item, exactly as before - and the wrapper's containing block is , which is tall. */ header.elementor-location-header { position: sticky; inset-block-start: 0; z-index: 100; } /* 9. Off-canvas navigation on tablet + mobile (header task H1, 2026-09-15). HOOK NAMES. A LOCAL style's label is never emitted in the DOM - only its id is - so the atomic elements below are reached through their local-style id, which is a CLASS, not an element id. The legacy widgets carry readable names through their own CSS-classes control. Map: .e-c2d8f51 basson-nav-toggle the bars trigger, an .e-e0f6b39 basson-offcanvas-close the panel's X, an .e-c4d5e76 basson-offcanvas-cta-icon .basson-header-nav the desktop nav widget 0b763bb .basson-offcanvas the off-canvas widget a6b2d95 .basson-offcanvas-nav the panel's nav-menu f1a2b43 */ /* 9a. Trigger and close: interaction states. House rule - a V4 hover variant compiles into a media:all file with no easing, so hovers live here. */ .elementor .e-c2d8f51, .elementor .e-e0f6b39 { transition: background-color 150ms var(--bsn-ease-out, ease); } .elementor .e-c2d8f51:hover, .elementor .e-e0f6b39:hover { background-color: #F1F6F8; } .elementor .e-c2d8f51:focus-visible, .elementor .e-e0f6b39:focus-visible { outline: 2px solid #112B44; outline-offset: 2px; background-color: #F1F6F8; } /* 9b. The X glyph, drawn as two rotated bars. The media library holds no close icon and this task may not add one, so there is no e-svg to point at. */ .elementor .e-e0f6b39::before, .elementor .e-e0f6b39::after { content: ""; position: absolute; inset-inline-start: 10px; inset-inline-end: auto; inset-block-start: 21px; width: 24px; height: 2px; border-radius: 1px; background-color: currentColor; } .elementor .e-e0f6b39::before { transform: rotate(45deg); } .elementor .e-e0f6b39::after { transform: rotate(-45deg); } /* 9c. The panel's call button reuses the header's phone SVG, whose paths carry fill="#000000" - same reason as block 3 above. */ .elementor .e-c4d5e76 svg path { fill: currentColor; } /* 9d. Blocks 1, 2 and 7 are scoped to .basson-site-header, and the off-canvas widget is a child of that same element - so those rules reach the panel's menu as well. They are undone here rather than re-scoped, which keeps blocks 1-8 byte-identical. */ .elementor .basson-site-header .basson-offcanvas-nav, .elementor .basson-site-header .basson-offcanvas-nav .elementor-nav-menu--main, .elementor .basson-site-header .basson-offcanvas-nav .elementor-nav-menu--main > ul.elementor-nav-menu { height: auto; } .elementor .basson-site-header .basson-offcanvas-nav .elementor-nav-menu--main > ul.elementor-nav-menu > li { display: block; align-items: stretch; } .elementor .basson-site-header .basson-offcanvas-nav .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item { position: relative; height: auto; display: flex; align-items: center; } .elementor .basson-site-header .basson-offcanvas-nav .elementor-nav-menu--main > ul.elementor-nav-menu > li.current-menu-item > a::after, .elementor .basson-site-header .basson-offcanvas-nav .elementor-nav-menu--main > ul.elementor-nav-menu > li.current-menu-ancestor > a::after, .elementor .basson-site-header .basson-offcanvas-nav .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item::before { display: none; } /* 9e. The services children have to read as part of the list, with no hover and no tap. The panel menu runs dropdown:none, and Pro's own sheet then hides EVERY sub-menu, because .elementor-nav-menu--dropdown-none .elementor-nav-menu--dropdown{display:none} also matches