/** * ========================================================= * COTEIA — MENU MOBILE * ========================================================= */ @media (max-width: 767px) { .coteia-main-menu-inner { grid-template-columns: auto minmax(0, 1fr); gap: 8px; min-height: 56px; padding: 7px var(--coteia-page-padding-mobile); } .coteia-menu-offer-column { grid-column: 1; grid-row: 1; } .coteia-menu-categories-column { grid-column: 2; grid-row: 1; display: flex; justify-content: flex-end; } .coteia-menu-quick-column, .coteia-menu-categories-desktop { display: none !important; } .coteia-menu-offer { min-height: 40px; padding: 7px 12px; font-size: 0.79rem; } .coteia-menu-mobile-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 7px 12px; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 10px; background: rgba(255, 255, 255, 0.10); color: #FFFFFF; font-family: inherit; font-size: 0.80rem; font-weight: 600; cursor: pointer; } .coteia-menu-mobile-toggle-icon, .coteia-menu-mobile-toggle-icon svg { display: block; width: 18px; height: 18px; } .coteia-menu-mobile-panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 9999; display: block; padding: 10px var(--coteia-page-padding-mobile) 14px; background: var(--coteia-menu-background); box-shadow: 0 14px 28px rgba(15, 23, 42, 0.16); } .coteia-menu-mobile-panel[hidden] { display: none !important; } .coteia-menu-mobile-categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .coteia-menu-mobile-categories a { display: flex; align-items: center; min-height: 40px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.07); color: #FFFFFF; font-size: 0.80rem; font-weight: 600; text-decoration: none; } .coteia-menu-mobile-quick { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .coteia-menu-mobile-quick .coteia-menu-quick-button { flex: 1 1 auto; } } @media (max-width: 480px) { .coteia-main-menu-inner { padding-left: 9px; padding-right: 9px; } .coteia-menu-offer, .coteia-menu-mobile-toggle { min-height: 38px; padding-left: 10px; padding-right: 10px; font-size: 0.74rem; } .coteia-menu-mobile-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; } } @media (max-width: 767px) { .coteia-menu-column-divider { display: none !important; } } /* ========================================================= 0.4.0-alpha.23 — PAINEL MOBILE VIA PORTAL NO BODY ========================================================= O painel é movido temporariamente para pelo JavaScript. Assim: - top é relativo à viewport; - left/right são relativos à viewport; - a largura da coluna "Categorias" deixa de limitar o painel. ========================================================= */ @media (max-width: 767px) { .coteia-menu-mobile-panel.coteia-menu-mobile-panel--portal { position: fixed !important; top: var(--coteia-menu-mobile-panel-top, 0px) !important; left: max(10px, env(safe-area-inset-left)) !important; right: max(10px, env(safe-area-inset-right)) !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 12px 14px 14px !important; box-sizing: border-box !important; max-height: calc( 100dvh - var(--coteia-menu-mobile-panel-top, 0px) - 10px ) !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior-y: contain !important; -webkit-overflow-scrolling: touch !important; scrollbar-gutter: stable; z-index: 10001 !important; border-radius: 0 0 12px 12px !important; background: var(--coteia-menu-background, #255FB7) !important; box-shadow: 0 14px 28px rgba(15, 23, 42, 0.16) !important; } .coteia-menu-mobile-panel.coteia-menu-mobile-panel--portal[hidden] { display: none !important; } .coteia-menu-mobile-panel--portal .coteia-menu-mobile-categories { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 8px !important; row-gap: 6px !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .coteia-menu-mobile-panel--portal .coteia-menu-mobile-categories a { display: flex !important; align-items: center !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; min-height: 40px !important; padding: 8px 10px !important; box-sizing: border-box !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .coteia-menu-mobile-panel--portal .coteia-menu-mobile-quick { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } } @media (max-width: 360px) { .coteia-menu-mobile-panel.coteia-menu-mobile-panel--portal { left: max(6px, env(safe-area-inset-left)) !important; right: max(6px, env(safe-area-inset-right)) !important; padding-left: 10px !important; padding-right: 10px !important; } .coteia-menu-mobile-panel--portal .coteia-menu-mobile-categories { column-gap: 5px !important; } .coteia-menu-mobile-panel--portal .coteia-menu-mobile-categories a { padding-left: 7px !important; padding-right: 7px !important; font-size: 0.76rem !important; } } /* alpha.24 — portal acompanha a barra durante transform/sticky do Hero/Menu */ @media (max-width: 767px) { .coteia-menu-mobile-panel.coteia-menu-mobile-panel--portal { will-change: top; } } /* alpha.25 — painel encostado exatamente na base da barra */ @media (max-width: 767px) { .coteia-menu-mobile-panel.coteia-menu-mobile-panel--portal { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } } /* alpha.26 — reduzir qualquer percepção de desacoplamento durante a rolagem */ @media (max-width: 767px) { .coteia-menu-mobile-panel.coteia-menu-mobile-panel--portal { transition: none !important; } } /* alpha.27 — tolerância visual de 2px sob a barra */ @media (max-width: 767px) { .coteia-menu-mobile-panel.coteia-menu-mobile-panel--portal { z-index: 9998 !important; } } /* alpha.28 — overlap dinâmico é calculado no JS somente em Header → Hero → Menu. Nenhuma margem negativa é aplicada à barra para preservar seu fluxo interno. */ /* alpha.36 — categorias mobile herdam exatamente Botões 2–4. */ @media (max-width: 767px) { .coteia-menu-mobile-panel .coteia-menu-mobile-categories a, body .coteia-menu-mobile-panel--portal .coteia-menu-mobile-categories a { background: var(--coteia-menu-quick-bg) !important; color: var(--coteia-menu-quick-text) !important; border-radius: var(--coteia-menu-quick-radius) !important; border: 1px solid rgba(255,255,255,.12) !important; opacity: 1 !important; } } /* alpha.44 — categoria atual no painel mobile. */ @media (max-width: 767px) { .coteia-menu-mobile-panel .coteia-menu-mobile-categories a.is-active, body .coteia-menu-mobile-panel--portal .coteia-menu-mobile-categories a.is-active { background: var(--coteia-menu-category-active-bg) !important; color: var(--coteia-menu-quick-text) !important; border-color: rgba(255,255,255,.22) !important; } } @media (max-width: 767px) { .coteia-menu-mobile-panel .coteia-menu-mobile-categories a:hover, .coteia-menu-mobile-panel .coteia-menu-mobile-categories a:focus-visible, body .coteia-menu-mobile-panel--portal .coteia-menu-mobile-categories a:hover, body .coteia-menu-mobile-panel--portal .coteia-menu-mobile-categories a:focus-visible { background: var(--coteia-menu-quick-hover-bg) !important; color: var(--coteia-menu-quick-text) !important; } } @media (max-width: 767px) { .coteia-menu-mobile-panel .coteia-menu-mobile-categories a.is-active, body .coteia-menu-mobile-panel--portal .coteia-menu-mobile-categories a.is-active { color: var(--coteia-menu-category-active-text, #FFFFFF) !important; } } /* ========================================================= 0.4.0-alpha.62 — BOTÃO 1 ESTÁVEL NO MOBILE ========================================================= */ @media (max-width: 767px) { .coteia-main-menu.coteia-menu-has-offer .coteia-main-menu-inner { grid-template-columns: max-content minmax(0, 1fr) !important; } .coteia-main-menu .coteia-menu-offer-column, .coteia-main-menu .coteia-menu-offer { width: auto !important; min-width: 0 !important; max-width: 100% !important; inline-size: auto !important; flex: 0 0 auto !important; } } /* 0.4.0-alpha.74 — Botão 1 responsivo / mobile */ @media (max-width: 767px) { .coteia-main-menu .coteia-menu-offer-column { min-width: 0 !important; max-width: 58vw !important; } .coteia-main-menu .coteia-menu-offer { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; max-width: 100% !important; line-height: 1.1 !important; white-space: nowrap !important; } .coteia-main-menu .coteia-menu-offer-inner { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 5px !important; min-width: 0 !important; max-width: 100% !important; line-height: 1.1 !important; white-space: nowrap !important; } .coteia-main-menu .coteia-menu-offer-label { display: inline-block !important; align-self: center !important; font-size: inherit !important; line-height: 1.1 !important; white-space: nowrap !important; vertical-align: middle !important; } .coteia-main-menu .coteia-menu-offer-icon, .coteia-main-menu .coteia-menu-offer-icon.coteia-menu-icon-fire-svg { width: 15px !important; min-width: 15px !important; max-width: 15px !important; height: 18px !important; flex: 0 0 15px !important; align-self: center !important; } .coteia-main-menu .coteia-menu-offer-icon img, .coteia-main-menu .coteia-menu-offer-icon svg, .coteia-main-menu .coteia-menu-offer-icon.coteia-menu-icon-fire-svg img { display: block !important; width: 15px !important; height: 18px !important; object-fit: contain !important; } } @media (max-width: 380px) { .coteia-main-menu .coteia-menu-offer { padding-left: 8px !important; padding-right: 8px !important; font-size: 0.71rem !important; } .coteia-main-menu .coteia-menu-offer-inner { gap: 4px !important; } .coteia-main-menu .coteia-menu-offer-icon, .coteia-main-menu .coteia-menu-offer-icon.coteia-menu-icon-fire-svg { width: 14px !important; min-width: 14px !important; max-width: 14px !important; height: 17px !important; flex-basis: 14px !important; } .coteia-main-menu .coteia-menu-offer-icon img, .coteia-main-menu .coteia-menu-offer-icon svg, .coteia-main-menu .coteia-menu-offer-icon.coteia-menu-icon-fire-svg img { width: 14px !important; height: 17px !important; } } @media (max-width:767px){ .coteia-main-menu .coteia-menu-offer-icon, .coteia-main-menu .coteia-menu-offer-icon.coteia-menu-icon-theme, .coteia-main-menu .coteia-menu-offer-icon.coteia-menu-icon-media { width:1.05em !important; min-width:1.05em !important; max-width:1.05em !important; height:1.28em !important; flex:0 0 1.05em !important; } .coteia-main-menu .coteia-menu-offer-icon img, .coteia-main-menu .coteia-menu-offer-icon svg { width:1.05em !important; height:1.28em !important; } }