/* ===================================================== BASE ===================================================== */ #leo-mobile-drawer { display: none; } /* * CELULAR + TABLET * Desktop começa em 1000px. */ @media (max-width: 999px) { #leo-mobile-drawer { display: block; position: fixed; inset: 0; z-index: 999999; visibility: hidden; pointer-events: none; } #leo-mobile-drawer.leo-open { visibility: visible; pointer-events: auto; } body.leo-mobile-menu-open { overflow: hidden !important; } /* ================================================= OVERLAY ================================================= */ #leo-mobile-drawer .leo-drawer-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .48); opacity: 0; transition: opacity .25s ease; } #leo-mobile-drawer.leo-open .leo-drawer-overlay { opacity: 1; } /* ================================================= PAINEL ================================================= */ #leo-mobile-drawer .leo-drawer-panel { position: absolute; top: 0; bottom: 0; left: 0; width: 82vw; max-width: 420px; background: #ffffff; display: flex; flex-direction: column; overflow: hidden; transform: translateX(-101%); transition: transform .28s ease; box-shadow: 8px 0 25px rgba(0,0,0,.15); } #leo-mobile-drawer.leo-open .leo-drawer-panel { transform: translateX(0); } /* ================================================= TOPO AMARELO ================================================= */ #leo-mobile-drawer .leo-drawer-header { flex: 0 0 72px; height: 72px; padding: 0 20px 0 24px; background: #FFD400; display: flex; align-items: center; justify-content: space-between; } /* LOGO */ #leo-mobile-drawer .leo-drawer-logo { display: flex; align-items: center; } #leo-mobile-drawer .leo-drawer-logo img { display: block; width: auto !important; height: auto !important; max-width: 125px !important; max-height: 50px !important; margin: 0 !important; } /* BOTÃO X */ #leo-mobile-drawer .leo-drawer-close { width: 40px; height: 40px; padding: 0; margin: 0; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; } #leo-mobile-drawer .leo-drawer-close svg { width: 28px; height: 28px; fill: none; stroke: #171717; stroke-width: 1.7; stroke-linecap: round; } /* ================================================= BUSCA ================================================= */ #leo-mobile-drawer .leo-drawer-search-area { flex: 0 0 auto; padding: 15px; background: #f4f4f4; } #leo-mobile-drawer .leo-drawer-search { width: 100%; margin: 0; } #leo-mobile-drawer .leo-drawer-search input[type="search"] { width: 100%; height: 54px; padding: 0 17px; margin: 0; border: 0 !important; outline: none !important; box-shadow: none !important; border-radius: 13px; background: #ffffff; color: #222222; font-size: 17px; font-weight: 400; } #leo-mobile-drawer .leo-drawer-search input::placeholder { color: #a9a9a9; opacity: 1; } /* ================================================= ÁREA ROLÁVEL ================================================= */ #leo-mobile-drawer .leo-drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: #ffffff; } /* TÍTULO */ #leo-mobile-drawer .leo-drawer-title { padding: 23px 20px 15px; font-size: 13px; line-height: 1.2; font-weight: 700; letter-spacing: .2px; color: #555555; } /* ================================================= MENU ================================================= */ #leo-mobile-drawer .leo-drawer-menu { padding: 0 18px 4px; } #leo-mobile-drawer .leo-drawer-list { list-style: none; margin: 0; padding: 0; } #leo-mobile-drawer .leo-menu-node { list-style: none; margin: 0; padding: 0; } /* ITEM */ #leo-mobile-drawer .leo-drawer-menu-item, #leo-mobile-drawer .leo-view-all { min-height: 55px; display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 0; border-bottom: 1px solid #e5e5e5; color: #202020 !important; text-decoration: none !important; font-size: 15px; line-height: 1.25; font-weight: 400; cursor: pointer; } /* SETINHA */ #leo-mobile-drawer .leo-drawer-chevron { width: 9px; height: 9px; flex: 0 0 9px; margin-right: 4px; border-top: 1.5px solid #171717; border-right: 1.5px solid #171717; transform: rotate(45deg); transition: transform .22s ease; } #leo-mobile-drawer .leo-menu-node.is-open > .leo-drawer-menu-item > .leo-drawer-chevron { transform: rotate(135deg); } /* ================================================= SUBMENUS ================================================= */ #leo-mobile-drawer .leo-drawer-submenu { background: #f8f8f8; margin: 0 -18px; padding: 0 18px; } #leo-mobile-drawer .leo-drawer-submenu[hidden] { display: none !important; } /* NÍVEL 1 */ #leo-mobile-drawer .leo-depth-1 > .leo-menu-node > .leo-drawer-menu-item { padding-left: 14px; min-height: 50px; font-size: 14.5px; color: #333333 !important; } /* NÍVEL 2 */ #leo-mobile-drawer .leo-depth-2 > .leo-menu-node > .leo-drawer-menu-item { padding-left: 28px; min-height: 48px; font-size: 14px; color: #444444 !important; } /* NÍVEL 3 */ #leo-mobile-drawer .leo-depth-3 > .leo-menu-node > .leo-drawer-menu-item { padding-left: 42px; min-height: 46px; font-size: 13.5px; } /* VER TODOS */ #leo-mobile-drawer .leo-view-all { min-height: 49px; padding-left: 14px; font-size: 14px; font-weight: 600; color: #123B82 !important; } /* ================================================= RODAPÉ ================================================= */ #leo-mobile-drawer .leo-drawer-footer { flex: 0 0 auto; padding: 8px 18px 11px; background: #ffffff; border-top: 1px solid #e2e2e2; } #leo-mobile-drawer .leo-drawer-action { min-height: 51px; display: flex; align-items: center; gap: 15px; color: #222222 !important; text-decoration: none !important; font-size: 15px; line-height: 1.25; font-weight: 400; } /* CONTA */ #leo-mobile-drawer .leo-account-icon { width: 22px; height: 22px; flex: 0 0 22px; fill: #171717; stroke: #171717; stroke-width: 1.5; } /* CEP */ #leo-mobile-drawer .leo-cep-trigger-icon { width: 22px !important; height: 22px !important; flex: 0 0 22px !important; margin: 0 !important; color: #171717 !important; } #leo-mobile-drawer .leo-cep-trigger-icon path, #leo-mobile-drawer .leo-cep-trigger-icon circle { stroke: currentColor !important; } #leo-mobile-drawer .leo-cep-trigger { width: auto !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* ================================================= ESCONDE OFFCANVAS ORIGINAL DO BLOCKSY ================================================= */ body.leo-mobile-menu-open #offcanvas { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } } /* ===================================================== AJUSTES EXCLUSIVOS PARA TABLET 690px até 999px ===================================================== */ @media (min-width: 690px) and (max-width: 999px) { #leo-mobile-drawer .leo-drawer-panel { width: 440px; max-width: 440px; } #leo-mobile-drawer .leo-drawer-header { height: 78px; flex-basis: 78px; padding-left: 28px; padding-right: 24px; } #leo-mobile-drawer .leo-drawer-logo img { max-width: 140px !important; max-height: 54px !important; } #leo-mobile-drawer .leo-drawer-search-area { padding: 17px 20px; } #leo-mobile-drawer .leo-drawer-search input[type="search"] { height: 56px; font-size: 17px; } #leo-mobile-drawer .leo-drawer-title { padding-left: 24px; padding-right: 24px; } #leo-mobile-drawer .leo-drawer-menu { padding-left: 22px; padding-right: 22px; } #leo-mobile-drawer .leo-drawer-footer { padding-left: 22px; padding-right: 22px; } }