/* ============================================================= SITE CHROME - header (.snav) + footer (.senior-footer) Gerado a partir de "header/footer claro|dark.txt". Regra de ouro: NADA aqui pode vazar para fora de .snav / #snav-modal / .senior-footer. O modo escuro e ligado por . ============================================================= */ /* --- tokens (eram :root no arquivo original) ------------------ */ .snav, #snav-modal, .senior-footer { --corpo: #33466C; --cor1: #80AF9C; --cor2: #12F7D1; --bg: #F6F9FE; --nav-gap: 16px; --util-gap: 8px; --nav-util-gap: 12px; --hover-dur: 0.28s; --hover-ease: cubic-bezier(0.25, 0.1, 0.25, 1); /* usados por estilos inline no markup */ --snav-logo-filter: none; --snav-modal-scrim: rgba(51, 70, 108, 0.45); --snav-modal-bg: #F6F9FE; --snav-modal-shadow: 0 20px 60px rgba(51, 70, 108, 0.18); --snav-modal-muted: rgba(51, 70, 108, 0.65); --snav-modal-hover: rgba(51, 70, 108, 0.07); --sf-copyright: #33466C; } body[data-theme="dark"] .snav, body[data-theme="dark"] #snav-modal, body[data-theme="dark"] .senior-footer { --corpo: #FFFFFF; --cor1: #12F7D1; --cor2: #12F7D1; --bg: #040609; --snav-logo-filter: brightness(0) invert(1); --snav-modal-scrim: rgba(0, 0, 0, 0.70); --snav-modal-bg: #040609; --snav-modal-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); --snav-modal-muted: rgba(255, 255, 255, 0.60); --snav-modal-hover: rgba(255, 255, 255, 0.07); --sf-copyright: rgba(255, 255, 255, 0.55); } /* --- reset escopado (era `*, *::before, *::after` global) ----- */ .snav, .snav *, .snav *::before, .snav *::after, #snav-modal, #snav-modal *, #snav-modal *::before, #snav-modal *::after { box-sizing: border-box; margin: 0; padding: 0; } /* era a regra global `body { font-family; background; min-height }` */ .snav, #snav-modal { font-family: 'Public Sans', sans-serif; } /* Os ~160 bundles em content/assets/styles/*.min.css ainda trazem `#cabecalho { position:fixed; z-index:9999; height:66px }` (de _header.scss). Como e seletor de id, ele vence `.snav`. Reafirmamos aqui com id+classe o que o header novo precisa - e SO isso, para nao roubar o `top` de `body.has-topbar #cabecalho` e `body.banner-fix #cabecalho`, que tem especificidade maior e devem continuar mandando. */ .snav { --snav-height: 80px; } #cabecalho.snav { height: var(--snav-height); z-index: 100002; } @media (max-width: 1023px) { #cabecalho.snav { height: calc(var(--snav-height) + env(safe-area-inset-top, 0px)); } } /* Barra do admin do WordPress. O core da a ela z-index 99999 (wp-includes/css/admin-bar.css), abaixo dos 100002 do header - com isso os submenus dela abriam por tras do site. Subimos a barra acima do header e abaixo do #snav-modal (200000), que como overlay de tela cheia deve continuar cobrindo tudo. O elemento so existe para quem esta logado; visitante nao e afetado. A posicao vertical do header ja e tratada por body.admin-bar #cabecalho, no _header.scss dos bundles. */ #wpadminbar { z-index: 100010; } /* botao de fechar do modal (era onmouseover/onmouseout inline) */ #snav-modal .snav-modal__close:hover { background: var(--snav-modal-hover) !important; } /* ============ HEADER (.snav) ============ */ .snav { position: fixed; top: 0; left: 0; width: 100%; height: 80px; background: rgba(246, 249, 254, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; padding: 0; z-index: 100002; font-family: 'Public Sans', sans-serif; } .snav__inner { max-width: 1140px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; height: 100%; width: 100%; } .snav__logo { display: flex; align-items: center; flex-shrink: 0; cursor: pointer; text-decoration: none; } .snav__links { display: flex; align-items: center; gap: var(--nav-gap); list-style: none; margin-left: auto; margin-right: var(--nav-gap); } .snav__item { position: relative; height: 80px; display: flex; align-items: center; } .snav__link { font-size: 16px; font-weight: 400; color: var(--corpo); line-height: 35px; cursor: pointer; white-space: nowrap; text-decoration: none; display: block; user-select: none; position: relative; text-shadow: 0 0 0 transparent; transition: text-shadow var(--hover-dur) var(--hover-ease); } .snav__item:hover .snav__link, .snav__item--active .snav__link { text-shadow: 0 0 0.4px var(--corpo), 0 0 0.4px var(--corpo); } .snav__dropdown { position: absolute; top: 80px; left: 50%; transform: translateX(-50%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--hover-dur) var(--hover-ease), visibility var(--hover-dur) var(--hover-ease); } .snav__dropdown::before { content: ''; position: absolute; top: -20px; left: 0; right: 0; height: 20px; } .snav__item:hover .snav__dropdown { opacity: 1; visibility: visible; pointer-events: auto; } .snav__panel { background: var(--bg); border-radius: 0 0 15px 15px; box-shadow: 0 12px 28px rgba(51, 70, 108, 0.10); padding: 20px 16px; } .snav__panel--left { width: 229px; padding: 16px; } .snav__panel--wide { width: 272px; } .snav__segment-list { list-style: none; } .snav__segment-list a { display: block; font-family: 'Public Sans', sans-serif; font-size: 14px; font-weight: 400; color: #33466C; line-height: 1.6; text-decoration: none; padding: 5px 8px; border-radius: 6px; margin: 0 -8px; transition: background var(--hover-dur) var(--hover-ease), color var(--hover-dur) var(--hover-ease); } .snav__segment-list a:hover { background: rgba(51, 70, 108, 0.10); color: #1a2f52; } .snav__segment-all { font-family: 'Public Sans', sans-serif; font-size: 16px; font-weight: 700; color: #00AF9C; line-height: 35px; text-decoration: none; margin-top: 6px; padding: 0 4px; display: flex; align-items: center; gap: 6px; white-space: nowrap; transition: color var(--hover-dur) var(--hover-ease); } .snav__segment-all:hover { color: #007f74; } .snav__panel--right { width: 233px; display: flex; flex-direction: column; gap: 10px; border-left: 1px solid rgba(51, 70, 108, 0.07); } .snav__btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; border-radius: 5px; font-family: 'Public Sans', sans-serif; font-size: 15px; font-weight: 700; color: var(--corpo); text-decoration: none; cursor: pointer; transition: filter var(--hover-dur) var(--hover-ease), transform var(--hover-dur) var(--hover-ease); gap: 8px; } .snav__btn:hover { filter: brightness(0.93); transform: translateY(-1px); } .snav__btn--solid { background: var(--cor2); border: none; } .snav__btn--outline { background: transparent; border: 1.5px solid var(--cor2); } .snav__support { font-size: 13px; font-weight: 400; color: var(--corpo); text-align: center; line-height: 1.5; } .snav__support a { color: var(--cor1); text-decoration: underline; text-underline-offset: 2px; transition: color var(--hover-dur) var(--hover-ease); } .snav__support a:hover { color: #5a9080; } .snav__card { position: relative; width: calc(100% + 32px); margin-left: -16px; margin-right: -16px; margin-bottom: -20px; border-radius: 0 0 15px 15px; overflow: hidden; display: block; /* o card vira quando tem link configurado */ text-decoration: none; color: inherit; } .snav__card-bg { display: block; width: 100%; height: auto; border-radius: 0 0 15px 15px; } .snav__card-cta { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); width: calc(100% - 28px); height: 36px; background: var(--cor2); border-radius: 5px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--corpo); text-decoration: none; white-space: nowrap; transition: filter var(--hover-dur) var(--hover-ease); } .snav__card-cta:hover { filter: brightness(0.93); } .snav__user-wrap { position: relative; display: flex; align-items: center; align-self: stretch; } .snav__user-panel { position: absolute; top: 80px; right: 50%; transform: translateX(50%); width: 233px; background: #F6F9FE; border-radius: 0 0 15px 15px; box-shadow: 0 12px 28px rgba(51, 70, 108, 0.10); padding: 20px 16px; display: flex; flex-direction: column; gap: 10px; z-index: 100003; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--hover-dur) var(--hover-ease), visibility var(--hover-dur) var(--hover-ease); } .snav__user-panel::before { content: ''; position: absolute; top: -20px; left: 0; right: 0; height: 20px; } .snav__user-wrap:hover .snav__user-panel { opacity: 1; visibility: visible; pointer-events: auto; } .snav__tip-wrap { position: relative; display: flex; align-items: center; align-self: stretch; } .snav__tip { position: absolute; top: calc(100% - 10px); left: 50%; transform: translateX(-50%); background: rgba(51, 70, 108, 0.80); color: #fff; font-size: 11px; font-weight: 400; letter-spacing: 0.02em; padding: 4px 9px; border-radius: 5px; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--hover-dur) var(--hover-ease), visibility var(--hover-dur) var(--hover-ease); z-index: 100004; } .snav__tip-wrap:hover .snav__tip, .snav__user-wrap:hover .snav__tip { opacity: 1; visibility: visible; } .snav__icons { display: flex; align-items: center; gap: var(--nav-gap); flex-shrink: 0; align-self: stretch; } .snav__sep { width: 1.5px; height: 33px; background: var(--corpo); opacity: 0.25; border-radius: 1px; margin-left: calc(var(--nav-gap) * -0.25); margin-right: calc(var(--nav-gap) * -0.25); } .snav__icon-btn { display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--corpo); padding: 4px; border-radius: 4px; transition: color var(--hover-dur) var(--hover-ease), background var(--hover-dur) var(--hover-ease); } .snav__icon-btn:hover { color: #1a2f52; background: rgba(51,70,108,0.06); } .snav__lang { position: relative; display: flex; align-items: center; cursor: pointer; padding: 2px; padding-bottom: 12px; margin-bottom: -12px; } .snav__lang-circle { width: 24.947px; height: 24.947px; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--hover-dur) var(--hover-ease); } .snav__lang-circle svg, .snav__lang-circle img { width: 22px; height: 22px; aspect-ratio: 1/1; display: block; object-fit: cover; border-radius: 50%; flex-shrink: 0; } .snav__lang:hover .snav__lang-circle { color: #1a2f52; background: rgba(51,70,108,0.06); } .snav__lang-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 100003; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--hover-dur) var(--hover-ease), visibility var(--hover-dur) var(--hover-ease); } .snav__lang:hover .snav__lang-menu, .snav__lang:focus-within .snav__lang-menu { opacity: 1; visibility: visible; pointer-events: auto; } .snav__lang-menu-inner { background: var(--bg); border-radius: 10px; box-shadow: 0 8px 22px rgba(51, 70, 108, 0.13); padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 44px; } .snav__lang-option { display: flex; align-items: center; justify-content: center; padding: 5px 6px; border-radius: 6px; text-decoration: none; transition: background var(--hover-dur) var(--hover-ease); } .snav__lang-option:hover { background: rgba(51, 70, 108, 0.06); } .snav__lang-option img { width: 22px; height: 22px; aspect-ratio: 1/1; object-fit: cover; border-radius: 50%; display: block; } .snav__cta-phone { display: flex; align-items: center; gap: 7px; height: 34px; border-radius: 50px; border: 1px solid #33466C; background: transparent; padding: 0 16px; flex-shrink: 0; text-decoration: none; font-family: 'Public Sans', sans-serif; font-size: 15px; font-weight: 400; font-style: normal; line-height: 25px; color: #33466C; white-space: nowrap; cursor: pointer; transition: background var(--hover-dur) var(--hover-ease), color var(--hover-dur) var(--hover-ease), border-color var(--hover-dur) var(--hover-ease); } .snav__cta-phone svg path { transition: stroke var(--hover-dur) var(--hover-ease); } .snav__cta-phone:hover { background: #33466C; color: #F6F9FE; border-color: #33466C; } .snav__cta-phone:hover svg path { stroke: #F6F9FE; } .snav__item--gest-emp .snav__dropdown { position: fixed; top: 80px; right: max(24px, calc((100vw - 1140px) / 2 + 24px)); left: auto; transform: none; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--hover-dur) var(--hover-ease), visibility var(--hover-dur) var(--hover-ease); } .snav__item--gest-emp:hover .snav__dropdown { opacity: 1; visibility: visible; pointer-events: auto; } .snav__item--gest-pess .snav__dropdown { position: fixed; top: 80px; right: max(24px, calc((100vw - 1140px) / 2 + 24px)); left: auto; transform: none; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--hover-dur) var(--hover-ease), visibility var(--hover-dur) var(--hover-ease); } .snav__item--gest-pess:hover .snav__dropdown { opacity: 1; visibility: visible; pointer-events: auto; } .snav__mega { width: 840px; background: #F6F9FE; border-radius: 0 0 16px 16px; box-shadow: 0 12px 32px rgba(51, 70, 108, 0.10), 0 2px 6px rgba(51,70,108,0.04); overflow: hidden; font-family: 'Public Sans', sans-serif; } .snav__mega--wide { width: 920px; max-width: calc(100vw - 40px); } .snav__mega-5col { display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px 0; } .snav__mega-col5 { padding: 20px 18px; border-right: 1px solid rgba(51, 70, 108, 0.07); } .snav__mega-col5:last-child { border-right: none; } .snav__mega-col5-rule { height: 1px; background: rgba(51, 70, 108, 0.08); margin: 12px 0; } .snav__mega-item--fin { color: rgba(51, 70, 108, 0.48) !important; font-size: 12px !important; } .snav__mega-item--fin:hover { color: var(--corpo) !important; } .snav__mega-platform { display: flex; align-items: center; gap: 14px; padding: 10px 24px; background: #F6F9FE; border-top: 1px solid rgba(51, 70, 108, 0.07); border-bottom: 1px solid rgba(51, 70, 108, 0.07); } .snav__mega-platform-name { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: #00AF9C; white-space: nowrap; } .snav__mega-platform-rule { width: 1px; height: 13px; background: rgba(51, 70, 108, 0.15); flex-shrink: 0; } .snav__mega-platform-modules { display: flex; align-items: center; gap: 4px; } .snav__mega-module { font-size: 12px; font-weight: 400; color: #4BAAA3; text-decoration: none; transition: color var(--hover-dur) var(--hover-ease); } .snav__mega-module:hover { color: #00AF9C; } .snav__mega-dot { font-size: 10px; color: rgba(51, 70, 108, 0.25); line-height: 1; } .snav__mega-platform-note { margin-left: auto; font-size: 11px; font-weight: 400; color: #9ACBC7; white-space: nowrap; } .snav__mega-products { display: grid; grid-template-columns: 1fr 1fr; } .snav__mega-col { padding: 22px 24px 26px; } .snav__mega-col + .snav__mega-col { border-left: 1px solid rgba(51, 70, 108, 0.07); } .snav__mega-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .10em; color: rgba(51, 70, 108, 0.30); margin-bottom: 16px; } .snav__mega-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } .snav__mega-cat { margin-bottom: 16px; } .snav__mega-cat:last-child { margin-bottom: 0; } .snav__mega-cat-name { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #00AF9C; margin-bottom: 5px; /* sao : sem isso pegam o sublinhado padrao do navegador. Os demais links do mega-menu (.snav__mega-item, .snav__mega-module, .snav__mega-svc) ja zeravam; so o titulo de categoria tinha ficado de fora. */ text-decoration: none; } .snav__mega-cat-items { display: flex; flex-direction: column; gap: 1px; } .snav__mega-item { font-size: 13px; font-weight: 400; color: var(--corpo); text-decoration: none; line-height: 1.6; border-radius: 5px; padding: 3px 8px; margin: 0 -8px; transition: background var(--hover-dur) var(--hover-ease), color var(--hover-dur) var(--hover-ease); } .snav__mega-item:hover { color: #1a2f52; background: rgba(51, 70, 108, 0.10); } .snav__mega-item--note { font-size: 12px; font-weight: 400; color: rgba(51, 70, 108, 0.40); font-style: italic; line-height: 1.5; cursor: default; } .snav__mega-item--note:hover { background: none; color: rgba(51, 70, 108, 0.40); } .snav__mega-services { display: flex; align-items: center; gap: 12px; padding: 9px 24px; border-top: 1px solid rgba(51, 70, 108, 0.07); background: rgba(51, 70, 108, 0.02); } .snav__mega-services-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: rgba(51, 70, 108, 0.28); white-space: nowrap; } .snav__mega-services-rule { width: 1px; height: 12px; background: rgba(51, 70, 108, 0.12); flex-shrink: 0; } .snav__mega-services-items { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .snav__mega-svc { font-size: 12px; font-weight: 400; color: rgba(51, 70, 108, 0.50); text-decoration: none; transition: color var(--hover-dur) var(--hover-ease); } .snav__mega-svc:hover { color: var(--corpo); } .snav__mega-svc-dot { font-size: 10px; color: rgba(51, 70, 108, 0.20); } /* ═══════════════════════════════════════════════════════ COMPONENT 24 — Mega menus Gestão empresarial & Pessoas ════════════════════════════════════════════════════ */ .snav__item--gest-emp .snav__mega--wide { width: 1100px; max-width: calc(100vw - 32px); overflow: initial; min-height: 334px; display: flex; flex-direction: column; justify-content: space-between; } .snav__item--gest-pess .snav__mega { overflow: initial; width: 1100px !important; max-width: calc(100vw - 32px) !important; min-height: 334px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; } /* ═══ PATCH: Colunas iguais com gap uniforme ═══ */ .snav__item--gest-emp .snav__mega-5col { padding: 28px 16px 8px; gap: 0 20px; flex: 1; grid-template-columns: repeat(5, 1fr); } .snav__item--gest-emp .snav__mega-col5 { padding: 0 8px; border-right: none !important; } .snav__item--gest-emp .snav__mega-col5:last-child { border-right: none !important; } /* ── Títulos de coluna — hierarquia clara ── */ .snav__item--gest-emp .snav__mega-cat-name, .snav__item--gest-pess .snav__mega-cat-name, .snav__item--gest-pess .snav__mega-section-label { font-size: 15px !important; font-weight: 700 !important; color: #33466C !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.25 !important; margin-bottom: 4px !important; opacity: 1 !important; } /* ── Itens — fonte menor, hierarquia clara, QUEBRA NATURAL ── */ .snav__item--gest-emp .snav__mega-item, .snav__item--gest-pess .snav__mega-item { display: block !important; font-size: 14px !important; font-weight: 400 !important; color: #33466C !important; line-height: 1.35 !important; padding: 5px 8px !important; margin: 0 -8px !important; white-space: normal !important; overflow: visible !important; text-overflow: unset !important; border-radius: 5px !important; transition: background var(--hover-dur) var(--hover-ease), color var(--hover-dur) var(--hover-ease) !important; } .snav__item--gest-emp .snav__mega-item:hover, .snav__item--gest-pess .snav__mega-item:hover { background: rgba(51,70,108,0.10) !important; color: #1a2f52 !important; } /* ── Gap entre itens ── */ .snav__item--gest-emp .snav__mega-cat-items, .snav__item--gest-pess .snav__mega-cat-items { display: flex !important; flex-direction: column !important; gap: 5px !important; } /* ── Títulos: hover com seta ── */ .snav__item--gest-emp .snav__mega-cat-name, .snav__item--gest-pess .snav__mega-cat-name { display: flex !important; align-items: center !important; justify-content: space-between !important; border-radius: 5px; padding: 3px 6px !important; margin-bottom: 4px !important; margin-left: -6px !important; margin-right: -6px !important; width: calc(100% + 12px) !important; cursor: pointer; transition: background var(--hover-dur) var(--hover-ease) !important; } .snav__item--gest-emp .snav__mega-cat-name::after, .snav__item--gest-pess .snav__mega-cat-name::after { content: ''; display: block; width: 5px; height: 5px; border-right: 1.5px solid #33466C; border-top: 1.5px solid #33466C; transform: rotate(45deg) translate(-1px, 1px); flex-shrink: 0; opacity: 0; transition: opacity var(--hover-dur) var(--hover-ease); } .snav__item--gest-emp .snav__mega-cat-name:hover, .snav__item--gest-pess .snav__mega-cat-name:hover { background: rgba(51,70,108,0.08) !important; } .snav__item--gest-emp .snav__mega-cat-name:hover::after, .snav__item--gest-pess .snav__mega-cat-name:hover::after { opacity: 1; } .snav__mega-cat-name--second { margin-top: 32px !important; } .snav__mega-ver-todas { display: inline-block; margin-top: 8px; padding: 2px 6px; margin-left: -6px; color: #00AF9C; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color var(--hover-dur) var(--hover-ease); } .snav__mega-ver-todas:hover { color: #007f74; } .snav__mega-item--svc-fin { font-weight: 700 !important; color: #33466C !important; font-size: 13px !important; margin-top: 14px !important; line-height: 1.45 !important; white-space: normal !important; } .snav__mega-item--svc-fin:hover { background: none !important; } .snav__mega-footer { display: flex; justify-content: flex-end; align-items: center; padding: 10px 24px 18px; } .snav__mega-portfolio { color: #00AF9C; font-size: 16px; font-weight: 700; font-family: 'Public Sans', sans-serif; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color var(--hover-dur) var(--hover-ease); } .snav__mega-portfolio:hover { color: #007f74; } /* ═══ PATCH: Grid 6 colunas IGUAIS para Gestão de pessoas ═══ */ .snav__mega-gp-grid { grid-template-columns: repeat(6, 1fr) !important; padding: 28px 16px 8px !important; gap: 0 20px !important; } .snav__item--gest-pess .snav__mega-col5 { padding: 0 8px !important; border-right: none !important; } .snav__item--gest-pess .snav__mega-col5:last-child { border-right: none !important; } .snav__mobile-lang { display: none; } .snav__mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: var(--corpo); border-radius: 4px; flex-shrink: 0; transition: background var(--hover-dur) var(--hover-ease); align-items: center; justify-content: center; } .snav__mobile-toggle:hover, .snav__mobile-toggle:focus-visible { background: rgba(51,70,108,0.06); outline: none; } .snav__mobile-toggle__open { display: flex; } .snav__mobile-toggle__close { display: none; } /* ═══════════════════════════════════════════════════════ RESPONSIVE — abaixo de 1024px ════════════════════════════════════════════════════ */ @media (max-width: 1023px) { .snav { padding: env(safe-area-inset-top, 0px) 0 0; background: #F6F9FE; backdrop-filter: none; -webkit-backdrop-filter: none; height: calc(80px + env(safe-area-inset-top, 0px)); overflow: visible; justify-content: flex-start; } .snav__inner { padding: 0 20px; max-width: 100%; } .snav__mobile-toggle { display: flex; order: 10; } .snav__mobile-toggle__open { display: flex; } .snav__mobile-toggle__close { display: none; } .snav--mobile-open .snav__mobile-toggle__open { display: none; } .snav--mobile-open .snav__mobile-toggle__close { display: flex; } .snav__icons { display: flex !important; align-items: center; gap: 14px; margin-left: auto; align-self: center; flex-shrink: 0; } .snav__sep { display: none !important; margin: 0 !important; } .snav__tip-wrap--cart { display: none !important; } .snav__icons > .snav__lang { display: none !important; } .snav__user-wrap, .snav__tip-wrap { display: flex !important; align-items: center; align-self: center; } .snav__user-wrap:hover .snav__user-panel { opacity: 0; visibility: hidden; pointer-events: none; } .snav__user-wrap--open .snav__user-panel { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .snav__user-panel { position: fixed; top: calc(80px + env(safe-area-inset-top, 0px)); right: 16px; left: auto; transform: none; width: min(233px, calc(100vw - 32px)); } .snav__mobile-toggle { margin-left: 4px; } .snav__links { position: fixed; top: calc(80px + env(safe-area-inset-top, 0px)); left: 0; right: 0; width: 100%; max-width: 100vw; max-height: calc(100vh - 80px - env(safe-area-inset-top, 0px)); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 0 0 32px; background: #F6F9FE; box-shadow: 0 8px 24px rgba(51,70,108,0.12); z-index: 100001; display: none; } .snav--mobile-open .snav__links { display: flex; } .snav__item { height: auto !important; width: 100%; display: block; position: static; border-bottom: 1px solid rgba(51,70,108,0.07); } .snav__item:last-child { border-bottom: none; } .snav__link { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; font-size: 16px; line-height: 1.4; white-space: normal; font-weight: 400 !important; touch-action: manipulation; -webkit-tap-highlight-color: transparent; cursor: pointer; width: 100%; } .snav__link { text-shadow: none !important; transition: none !important; } .snav__item:hover .snav__link, .snav__item--active .snav__link { text-shadow: none !important; } .snav__item--has-dropdown > .snav__link::after { content: '' !important; display: inline-block !important; position: static !important; width: 8px !important; height: 8px !important; border-right: 1.5px solid var(--corpo) !important; border-bottom: 1.5px solid var(--corpo) !important; transform: rotate(45deg) translateY(-2px) !important; transition: transform 0.22s ease !important; flex-shrink: 0 !important; margin-left: 12px !important; opacity: 0.45 !important; pointer-events: none !important; background: none !important; text-shadow: none !important; inset: auto !important; } .snav__item--has-dropdown.snav__item--open > .snav__link::after { transform: rotate(-135deg) translateY(2px) !important; opacity: 0.7 !important; } .snav__item:hover > .snav__dropdown, .snav__item--gest-emp:hover > .snav__dropdown, .snav__item--gest-pess:hover > .snav__dropdown { display: none !important; } .snav__item--open:hover > .snav__dropdown, .snav__item--gest-emp.snav__item--open:hover > .snav__dropdown, .snav__item--gest-pess.snav__item--open:hover > .snav__dropdown { display: block !important; } .snav__dropdown { position: static !important; top: auto !important; left: auto !important; transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: none; width: 100% !important; max-width: 100vw !important; overflow: hidden; display: none !important; transition: none !important; } .snav .snav__item--open > .snav__dropdown { display: block !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .snav__panel, .snav__panel--left, .snav__panel--wide { width: 100% !important; max-width: 100% !important; border-radius: 0 !important; box-shadow: none !important; padding: 4px 20px 16px !important; background: rgba(51,70,108,0.025) !important; } .snav__item--gest-emp .snav__mega--wide, .snav__item--gest-pess .snav__mega { width: 100% !important; max-width: 100vw !important; min-height: 0 !important; flex-direction: column !important; } .snav__item--gest-emp .snav__mega-5col, .snav__item--gest-pess .snav__mega-5col { padding: 0 !important; grid-template-columns: 1fr !important; } .snav__item--gest-emp .snav__mega-col5, .snav__item--gest-pess .snav__mega-col5 { padding: 14px 20px !important; border-right: none !important; border-bottom: 1px solid rgba(51,70,108,0.07) !important; } .snav__item--gest-emp .snav__mega-col5:last-child, .snav__item--gest-pess .snav__mega-col5:last-child { border-bottom: none !important; } .snav__mega-col5--active > .snav__mega-cat-name { margin: 0 0 4px !important; width: 100% !important; } .snav__item--gest-emp .snav__mega-cat-name, .snav__item--gest-pess .snav__mega-cat-name { padding: 0 !important; margin: 0 0 4px !important; width: 100% !important; cursor: default; } .snav__item--gest-emp .snav__mega-cat-name::after, .snav__item--gest-pess .snav__mega-cat-name::after { display: none !important; } .snav__item--gest-pess .snav__mega-cat-name--second { margin-top: 28px !important; padding-top: 20px !important; border-top: 1px solid rgba(51,70,108,0.07) !important; } .snav__item--gest-emp .snav__mega-item, .snav__item--gest-pess .snav__mega-item { white-space: normal !important; overflow: visible !important; text-overflow: unset !important; } .snav__mega-footer { padding: 10px 20px 18px !important; justify-content: flex-start !important; border-top: 1px solid rgba(51,70,108,0.07); } .snav__item--gest-emp .snav__dropdown, .snav__item--gest-pess .snav__dropdown { position: static !important; left: auto !important; top: auto !important; transform: none !important; } .snav__mega--wide { width: 100% !important; max-width: 100vw !important; } .snav__mega-5col { display: block !important; padding: 0 !important; } .snav__mega-col5 { padding: 14px 20px; border-right: none !important; border-bottom: 1px solid rgba(51,70,108,0.07); } .snav__mega-col5:last-child { border-bottom: none; } .snav__mega-col5-rule { display: none; } .snav__mega { width: 100% !important; max-width: 100vw !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden; background: rgba(51,70,108,0.025); } .snav__mega-products { display: block !important; } .snav__mega-col { padding: 16px 20px; } .snav__mega-col + .snav__mega-col { border-left: none !important; border-top: 1px solid rgba(51,70,108,0.07); } .snav__mega-inner { display: block !important; grid-template-columns: unset; } .snav__mega-platform { flex-wrap: wrap; gap: 6px 10px; padding: 12px 20px; } .snav__mega-platform-note { margin-left: 0; flex-basis: 100%; white-space: normal; font-size: 10px; } .snav__mega-platform-modules { flex-wrap: wrap; gap: 4px; } .snav__mega-platform-rule { display: none; } .snav__mega-services { flex-wrap: wrap; gap: 6px 4px; padding: 10px 20px; } .snav__mega-services-items { flex-wrap: wrap; } .snav__mega-services-rule { display: none; } .snav__mobile-lang { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 22px; margin-top: 0; } .snav__mobile-lang-label { font-size: 14px; font-weight: 400; color: var(--corpo); } .snav__mobile-lang-options { display: flex; align-items: center; gap: 14px; } .snav__mobile-lang-option { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 4px; text-decoration: none; transition: background 0.15s; } .snav__mobile-lang-option:hover { background: rgba(51,70,108,0.06); } .snav__mobile-lang-option img, .snav__mobile-lang-option svg { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; display: block; flex-shrink: 0; } @media (max-width: 390px) { .snav { padding: env(safe-area-inset-top, 0px) 0 0; } .snav__inner { padding: 0 16px; } .snav__panel, .snav__panel--left, .snav__panel--wide { padding: 4px 16px 14px !important; } .snav__mega-col { padding: 14px 16px; } .snav__mega-platform, .snav__mega-services { padding: 10px 16px; } } } @media (max-width: 1023px) { .snav__cta-phone { display: none; } .snav__mobile-cta-phone { display: flex !important; align-items: center; gap: 8px; width: 100%; padding: 16px 20px; border: none; border-top: 1px solid rgba(51,70,108,0.07); border-bottom: none; border-left: none; border-right: none; border-radius: 0; outline: none; background: transparent; text-decoration: none; font-family: 'Public Sans', sans-serif; font-size: 16px; font-weight: 400; color: #33466C; white-space: nowrap; cursor: pointer; text-align: left; -webkit-appearance: none; appearance: none; transition: background 0.15s; } .snav__mobile-cta-phone:hover { background: rgba(51,70,108,0.04); } } /* ============ FOOTER (.senior-footer) ============ */ .senior-footer * { margin: 0; padding: 0; box-sizing: border-box; } .senior-footer a { color: #FFFFFF !important; text-decoration: none !important; font-family: 'Public Sans', sans-serif; } .senior-footer a:hover, .senior-footer a:focus, .senior-footer a:active, .senior-footer a:visited { color: #FFFFFF !important; text-decoration: none !important; } .senior-footer ul, .senior-footer ol { list-style: none !important; list-style-type: none !important; margin: 0 !important; padding: 0 !important; } .senior-footer li { list-style: none !important; list-style-type: none !important; margin: 0 !important; padding: 0 !important; } .senior-footer ul::before, .senior-footer ul::after, .senior-footer li::before, .senior-footer li::after { content: none !important; display: none !important; } .senior-footer button:focus, .senior-footer button:active { outline: none !important; box-shadow: none !important; } .senior-footer *:focus-visible { outline: 2px solid rgba(255,255,255,0.3) !important; outline-offset: 2px !important; } /* ─── CONTAINER PRINCIPAL ─── */ .senior-footer { position: relative; width: 100%; max-width: 1920px; height: auto; margin: 0 auto; /* Faixa em volta do cartao do rodape. Este e o padrao da variante clara; a escura redefine a variavel mais abaixo, e o campo ACF "Cor de fundo do rodape" a sobrescreve por pagina - site-footer.php escreve a variavel no atributo style do