with no visible glyph. Draw a crisp 3-line icon with pseudo elements. */ #mobileHeader .toggleMenu { position: relative; display: inline-flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 !important; padding: 0 !important; flex: 0 0 44px !important; float: none !important; background: transparent !important; border: 0 !important; border-radius: var(--em-radius-control); cursor: pointer; } #mobileHeader .toggleMenu * { display: none !important; } #mobileHeader .toggleMenu::before, #mobileHeader .toggleMenu::after { content: ""; position: absolute; left: 11px; width: 22px; height: 2.5px; background: #f4f7f9; border-radius: 2px; pointer-events: none; } /* Top bar + middle bar (via box-shadow) since the div has no inner span. */ #mobileHeader .toggleMenu::before { top: 15px; box-shadow: 0 6.5px 0 #f4f7f9; } #mobileHeader .toggleMenu::after { top: 28px; } /* Centered logo */ #mobileHeader #logo { flex: 1 1 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; margin: 0 !important; padding: 0 8px !important; width: auto !important; float: none !important; min-width: 0 !important; } #mobileHeader #logo h1 { margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; } #mobileHeader #logo a { display: inline-flex !important; align-items: center !important; justify-content: center !important; float: none !important; } #mobileHeader #logo img { max-width: 165px !important; max-height: 38px !important; width: auto !important; height: auto !important; object-fit: contain !important; margin: 0 auto !important; display: block !important; } /* Right-side header action (phone/search) sizing to match the trigger. */ #mobileHeader .mobileHeaderIcon { width: 44px !important; height: 44px !important; margin: 0 !important; color: #f4f7f9 !important; position: fixed !important; top: 10px !important; right: 20px !important; } #mobileHeader .mobileHeaderIcon a { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100%; height: 100%; color: #f4f7f9; line-height: 1; } #mobileHeader .mobileHeaderIcon svg, #mobileHeader .mobileHeaderIcon i, #mobileHeader .mobileHeaderIcon .safiricon { width: 22px; height: 22px; font-size: 20px; line-height: 1; display: inline-block; vertical-align: middle; } #mobileHeader #infoBlock { display: none !important; } /* Scroll-to-top button: stacked vertically above the WhatsApp launcher to prevent overlap. */ .safirTop { right: 20px !important; bottom: 82px !important; width: 42px; height: 42px; z-index: 991; } body .safirTop:not(.show) { opacity: 0; visibility: hidden; pointer-events: none; } .safirTop.show { bottom: 82px !important; opacity: 1; visibility: visible; } } #logo { display: block; flex: 0 0 auto; width: auto; padding: 18px 0; } #logo a { float: none; } #logo img { width: auto; max-width: 220px; max-height: 52px; } #infoBlock { display: flex; width: auto; flex: 0 1 auto; align-items: center; gap: 30px; padding: 15px 0; } #infoBlock .item, #infoBlock .item:first-child { display: flex; min-height: 32px; align-items: center; gap: 10px; margin: 0; } #infoBlock .item .icon { display: flex; width: 28px; align-items: center; } #infoBlock .item .safiricon svg { width: 22px; height: 22px; color: #dce7ef; } #infoBlock .item .text, #infoBlock .item .text a, body.headerWhite #infoBlock .item .text, body.headerWhite #infoBlock .item .text a { display: block; margin: 0; color: #f1f5f7; } #infoBlock .item .text .title, body.headerWhite #infoBlock .item .text .title { color: #aebdca; font-size: 10px; font-weight: 500; letter-spacing: .07em; } #infoBlock .item .text .data { font-size: 14px; font-weight: 600; white-space: nowrap; } #menuGroup, .is-sticky #menuGroup, body.headerWhite .is-sticky #menuGroup { background: var(--em-paper); border: 0; border-bottom: 1px solid var(--em-line); box-shadow: none; } body.stickyMenu.desktop #menuGroup-sticky-wrapper.is-sticky #menuGroup, body.stickyMenu.desktop #menuGroup-sticky-wrapper.is-sticky #menuGroup .inner, body.headerWhite.stickyMenu.desktop #menuGroup-sticky-wrapper.is-sticky #menuGroup, body.headerWhite.stickyMenu.desktop #menuGroup-sticky-wrapper.is-sticky #menuGroup .inner { background: rgba(253, 253, 252, .97) !important; } body.stickyMenu.desktop #menuGroup-sticky-wrapper.is-sticky #menuGroup { border-bottom: 1px solid var(--em-line) !important; box-shadow: 0 10px 30px rgba(16, 37, 61, .08) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } body.stickyMenu.desktop #menuGroup-sticky-wrapper.is-sticky #menu a, body.headerWhite.stickyMenu.desktop #menuGroup-sticky-wrapper.is-sticky #menu a { color: var(--em-navy-950) !important; } #menuGroup .inner { background: transparent; } #menu > ul { display: flex; align-items: center; justify-content: space-between; } #menu li { float: none; margin: 0; } #menu a, body.headerWhite #menu a { color: var(--em-ink); font-size: 14px; font-weight: 600; line-height: 58px; } #menu > ul > li > a .safiricon { display: none; } #menu a::before { height: 3px; background: var(--em-red-600); } #menu .sub-menu { top: 58px; overflow: hidden; background: var(--em-paper); border: 1px solid var(--em-line); border-radius: var(--em-radius-control); box-shadow: 0 16px 36px rgba(16, 37, 61, .10); transform: translateY(8px); } #menu li:hover > .sub-menu, #menu li:focus-within > .sub-menu { transform: translateY(0); } #menu .sub-menu li { border-color: var(--em-line); } body.desktop #menuGroup #menu .sub-menu a { min-width: 230px; padding: 12px 16px; color: var(--em-navy-950) !important; font-size: 13px; font-weight: 600; line-height: 22px; } body.desktop #menuGroup #menu .sub-menu a:hover, body.desktop #menuGroup #menu .sub-menu a:focus-visible { background: var(--em-surface); color: var(--em-navy-950) !important; } /* Footer */ footer { color: #dbe5ec; background: var(--em-navy-950); border: 0; } body footer { border-color: var(--em-navy-950); } footer .columns { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1.2fr; gap: 42px; margin: 0; padding: 64px 0; } footer .column { float: none; width: auto; padding: 0; } footer .footerHeading { margin-bottom: 20px; padding: 0; border: 0; color: #f4f7f9; font-size: 18px; font-weight: 700; } footer .column.about .columnContent { color: #acbdc9; font-size: 15px; line-height: 1.75; } footer .column.menu ul { margin: 0; } footer .column.menu li { padding: 0 0 12px; line-height: 24px; } footer .column.menu a { color: #c5d2db; font-size: 15px; } footer .column.menu a:hover { color: #f4f7f9; } footer .column.menu .safiricon { display: none; } footer .column.contact .contactItem { margin-bottom: 12px; } footer .column.contact .contactItem .icon { width: 30px; height: 30px; background: transparent; color: #9eb0bd; } footer .column.contact .contactItem .icon::before { width: 18px; height: 18px; margin: 6px; font-size: 17px; line-height: 18px; } footer .column.contact .contactItem .table { min-height: 30px; } footer .column.contact .contactItem .table .data, footer .column.contact .contactItem .table .data a { color: #c5d2db; font-size: 14px; line-height: 1.55; } .whatsappButton { left: auto !important; right: 24px; bottom: 24px; box-shadow: 0 8px 24px rgba(16, 37, 61, .18); } .whatsappButton:hover::before { color: #fdfdfc; } #whatsappBlock.left { right: 24px; left: auto !important; } .safirTop { right: 88px; overflow: hidden; background: var(--em-navy-900) !important; color: #fdfdfc !important; border-radius: var(--em-radius-control); } .safirTop.show { bottom: 31px; } /* ========================================================================== Off-canvas mobile menu (#hamburgermenu) The parent Rota theme ships an unstyled/broken drawer on this child theme: the menu list runs horizontally, sprite icons are hidden, and the close affordance is invisible. We rebuild the whole drawer here as a modern slide-in panel. The parent JS still handles open/close (toggling the panel transform via inline left/right or an `open` state); we drive visuals only. ========================================================================== */ @media (max-width: 1100px) { /* Width is locked to 300px because the parent JS animates the panel with `left: -300px` / `left: 0`; a wider panel would leave a strip visible. */ #hamburgermenu { width: 300px; padding: 0; background: var(--em-paper); box-shadow: 0 20px 60px rgba(16, 37, 61, .28); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* Dimming overlay behind the drawer (parent toggles #overlay via fadeIn). */ #overlay { background: rgba(16, 37, 61, .5); backdrop-filter: blur(2px); } /* Logo bar at the top of the drawer, on the navy brand color. */ #hamburgermenu .logoBlock { display: flex; align-items: center; justify-content: space-between; min-height: 68px; margin: 0; padding: 14px 18px; background: var(--em-navy-900); } #hamburgermenu .logoBlock a { display: inline-flex; align-items: center; } #hamburgermenu .logoBlock img { width: auto; max-width: 170px; max-height: 40px; } /* Modern close button drawn with two centered pseudo bars forming an exact X. */ #hamburgermenu .logoBlock .close { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; flex: 0 0 38px !important; border-radius: var(--em-radius-control) !important; background: rgba(244, 247, 249, .12) !important; cursor: pointer !important; padding: 0 !important; margin: 0 !important; border: 0 !important; font-size: 0 !important; line-height: 0 !important; overflow: hidden !important; text-indent: -9999px !important; transition: background var(--em-transition) !important; } #hamburgermenu .logoBlock .close:hover { background: rgba(244, 247, 249, .22) !important; } #hamburgermenu .logoBlock .close * { display: none !important; } #hamburgermenu .logoBlock .close::before, #hamburgermenu .logoBlock .close::after { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 18px !important; height: 2px !important; background: #f4f7f9 !important; border-radius: 2px !important; transform-origin: center center !important; margin: 0 !important; padding: 0 !important; border: 0 !important; pointer-events: none !important; } #hamburgermenu .logoBlock .close::before { transform: translate(-50%, -50%) rotate(45deg) !important; } #hamburgermenu .logoBlock .close::after { transform: translate(-50%, -50%) rotate(-45deg) !important; } /* Search field: strictly centered within drawer width without parent margin drift. */ #hamburgermenu .searchForm { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 14px 16px !important; box-sizing: border-box !important; border-bottom: 1px solid var(--em-line) !important; background: var(--em-paper) !important; overflow: hidden !important; } #hamburgermenu .searchForm form, #hamburgermenu .searchForm .safir-searchform { position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; left: auto !important; right: auto !important; float: none !important; } #hamburgermenu .searchForm input[type="text"], #hamburgermenu .searchForm input[type="search"], #hamburgermenu .searchForm input { display: block !important; width: 100% !important; max-width: 100% !important; height: 42px !important; line-height: 42px !important; margin: 0 !important; padding: 0 42px 0 14px !important; color: var(--em-ink) !important; font-size: 14px !important; background: var(--em-surface) !important; border: 1px solid var(--em-line) !important; border-radius: var(--em-radius-control) !important; box-sizing: border-box !important; outline: none !important; float: none !important; -webkit-appearance: none !important; } #hamburgermenu .searchForm input:focus { border-color: var(--em-cyan-600) !important; background: #ffffff !important; } #hamburgermenu .searchForm button { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: 42px !important; height: 42px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: var(--em-muted) !important; font-size: 0 !important; text-indent: -9999px !important; overflow: hidden !important; box-shadow: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23596979' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; } #hamburgermenu .searchForm button:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2310253d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") !important; } #hamburgermenu .searchForm button::before, #hamburgermenu .searchForm button::after { display: none !important; } /* Menu list: force a clean vertical stack (parent renders it as a flex row). The parent JS clones #menu into #mobileMenuContainer, so we target that id explicitly (it wins over any inline .menu). */ #hamburgermenu #mobileMenuContainer #menu, #hamburgermenu #mobileMenuContainer .menu { display: block; width: 100%; height: auto; margin: 0; padding: 8px 0; } #hamburgermenu #mobileMenuContainer li { display: block; position: relative; width: 100%; margin: 0; padding: 0; border: 0; } #hamburgermenu #mobileMenuContainer li a { display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: 48px; padding: 12px 18px; color: var(--em-ink); font-size: 15px; font-weight: 500; border: 0; border-bottom: 1px solid var(--em-line); } #hamburgermenu #mobileMenuContainer li a:hover, #hamburgermenu #mobileMenuContainer li.active > a, #hamburgermenu #mobileMenuContainer li.current-menu-item > a { color: var(--em-red-700); background: var(--em-surface); } /* Hide the legacy sprite icons; the drawer reads cleaner as plain text. */ #hamburgermenu #mobileMenuContainer li a .safiricon, #hamburgermenu #mobileMenuContainer li a .icon { display: none; } /* Sub-menus are collapsed by default; JS slideToggles them open. */ #hamburgermenu #mobileMenuContainer .sub-menu { display: none; margin: 0; padding: 0; } #hamburgermenu #mobileMenuContainer .sub-menu li a { padding-left: 34px; font-size: 14px; font-weight: 400; color: var(--em-muted); background: var(--em-surface); } /* Reserve room on parent items for the expand chevron. */ #hamburgermenu #mobileMenuContainer .menu-item-has-children > a { padding-right: 52px; } /* Chevron: parent JS injects into each parent item. We hide any raw text (+ / -) injected by JS and render only a crisp CSS arrow. */ #hamburgermenu #mobileMenuContainer .mobilearrow { position: absolute !important; top: 0 !important; right: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 48px !important; height: 48px !important; cursor: pointer !important; font-size: 0 !important; color: transparent !important; line-height: 0 !important; text-indent: -9999px !important; overflow: hidden !important; background: transparent !important; border: 0 !important; } #hamburgermenu #mobileMenuContainer .mobilearrow::before { content: "" !important; position: absolute !important; top: 18px !important; right: 20px !important; width: 9px !important; height: 9px !important; border-right: 2px solid var(--em-muted) !important; border-bottom: 2px solid var(--em-muted) !important; transform: rotate(45deg) !important; transition: transform var(--em-transition) !important; text-indent: 0 !important; } #hamburgermenu #mobileMenuContainer .mobilearrow.active::before { top: 22px !important; transform: rotate(-135deg) !important; } /* Language selector + social row at the foot of the drawer. */ #hamburgermenu #languageSelectorContainer { padding: 16px 18px 8px !important; margin: 12px 0 0 !important; border-top: 1px solid var(--em-line) !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; float: none !important; } #hamburgermenu .languageSelector { display: inline-flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; float: none !important; background: transparent !important; box-shadow: none !important; border: 0 !important; } #hamburgermenu .languageSelector a { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; padding: 2px !important; margin: 0 !important; border-radius: 6px !important; background: var(--em-surface) !important; border: 1px solid var(--em-line) !important; float: none !important; transition: transform var(--em-transition), border-color var(--em-transition) !important; } #hamburgermenu .languageSelector a:hover { transform: scale(1.08) !important; border-color: var(--em-navy-900) !important; } #hamburgermenu .languageSelector img { width: 20px !important; height: 20px !important; border-radius: 3px !important; display: block !important; margin: 0 !important; } #hamburgermenu #mobileSocial { padding: 6px 18px 24px !important; margin: 0 !important; border-top: 0 !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; float: none !important; } #hamburgermenu #mobileSocial .safirSocial { display: inline-flex !important; align-items: center !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; float: none !important; } #hamburgermenu #mobileSocial .safirSocial li { display: inline-block !important; margin: 0 !important; padding: 0 !important; float: none !important; } #hamburgermenu #mobileSocial .safirSocial a { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; margin: 0 !important; padding: 0 !important; color: var(--em-navy-900) !important; background: var(--em-surface) !important; border: 1px solid var(--em-line) !important; border-radius: 8px !important; float: none !important; transition: background var(--em-transition), color var(--em-transition), transform var(--em-transition) !important; position: relative !important; } #hamburgermenu #mobileSocial .safirSocial a:hover { color: #ffffff !important; background: var(--em-navy-900) !important; border-color: var(--em-navy-900) !important; transform: translateY(-2px) !important; } } }