/* ══════════════════════════════════════════════════════════════ Peças compartilhadas — barra, índice, rodapé, diálogos ════════════════════════════════════════════════════════════════ */ /* ─── Barra ───────────────────────────────────────────────────── */ /* Em repouso a marca tem presença; ao rolar, a barra se recolhe. As medidas vivem no porque a gaveta também precisa delas. */ :root { --barra-h: 5.25rem; --marca-h: 2.75rem; } [data-rolado="true"] { --barra-h: var(--nav-h); --marca-h: 1.875rem; } .barra { position: sticky; top: 0; z-index: 90; background: rgb(247 244 239 / 0.86); backdrop-filter: blur(12px) saturate(1.4); border-bottom: 1px solid transparent; transition: border-color var(--t-mid) var(--ease), background var(--t-mid) var(--ease); view-transition-name: barra; } .barra.is-fixa { background: rgb(247 244 239 / 0.96); border-bottom-color: var(--rule); } .barra__linha { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--amber); transform-origin: left; scale: var(--progresso, 0) 1; transition: scale 90ms linear; } .barra__inner { display: flex; align-items: center; gap: var(--s-6); min-height: var(--barra-h); transition: min-height 320ms var(--ease-out); } .marca { display: flex; align-items: center; flex: none; } .marca img { height: var(--marca-h); width: auto; transition: height 320ms var(--ease-out); } .on-dark .marca img, .rodape .marca img { height: 2.25rem; } .barra__nav { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; } .barra__item { display: inline-flex; align-items: center; gap: var(--s-2); height: 2.5rem; padding-inline: var(--s-3); border-radius: var(--r-pill); color: var(--ink-76); transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .barra__item:hover { color: var(--ink); background: var(--field); } .barra__item[aria-current="page"] { color: var(--ink); } .barra__item[aria-current="page"]::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } /* Menu de frentes */ .frentes { position: relative; } .frentes__gatilho svg { transition: rotate var(--t-fast) var(--ease); } .frentes[data-aberto="true"] .frentes__gatilho svg { rotate: 180deg; } .frentes[data-aberto="true"] .frentes__gatilho { color: var(--ink); background: var(--field); } .frentes__painel { position: absolute; top: calc(100% + var(--s-2)); right: 0; width: min(23rem, calc(100vw - var(--s-8))); background: var(--paper); border: 1px solid var(--navy); padding: var(--s-2); display: grid; gap: 1px; opacity: 0; translate: 0 -6px; pointer-events: none; transition: opacity var(--t-fast) var(--ease), translate var(--t-fast) var(--ease); } /* Ponte invisível sobre o vão entre gatilho e painel: sem ela o ponteiro saía do `.frentes` no meio do caminho e o menu fechava antes do clique. */ .frentes__painel::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--s-2) * -1 - 1px); height: calc(var(--s-2) + 1px); } .frentes[data-aberto="true"] .frentes__painel { opacity: 1; translate: 0 0; pointer-events: auto; } .frente-link { display: grid; grid-template-columns: 3px 1fr; gap: var(--s-4); padding: var(--s-4); transition: background var(--t-fast) var(--ease); } .frente-link:hover { background: var(--field); } .frente-link__cor { background: var(--frente-cor); } .frente-link__nome { font-family: var(--face-display); font-size: var(--t-body); display: block; } .frente-link__fato { font-size: var(--t-caption); color: var(--ink-66); display: block; margin-top: 2px; letter-spacing: 0; text-transform: none; } /* Hambúrguer + gaveta */ .hamburguer { display: none; width: 2.75rem; height: 2.75rem; flex: none; align-items: center; justify-content: center; flex-direction: column; gap: 5px; border: 1px solid var(--rule); border-radius: var(--r-pill); transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .hamburguer:hover { border-color: var(--navy); background: var(--field); } .hamburguer span { display: block; width: 18px; height: 1.5px; border-radius: 1px; background: var(--ink); transition: translate var(--t-mid) var(--ease), rotate var(--t-mid) var(--ease), opacity var(--t-fast); } [data-menu="aberto"] .hamburguer span:nth-child(1) { translate: 0 6.5px; rotate: 45deg; } [data-menu="aberto"] .hamburguer span:nth-child(2) { opacity: 0; } [data-menu="aberto"] .hamburguer span:nth-child(3) { translate: 0 -6.5px; rotate: -45deg; } .gaveta { position: fixed; inset: var(--barra-h) 0 0; z-index: 88; background: var(--paper); padding: var(--s-6) var(--pad-x) var(--s-12); overflow-y: auto; display: grid; align-content: start; gap: 1px; opacity: 0; pointer-events: none; transition: opacity var(--t-mid) var(--ease); } [data-menu="aberto"] .gaveta { opacity: 1; pointer-events: auto; } .gaveta__grupo { font-size: var(--t-caption); font-weight: 500; letter-spacing: var(--track-caption); text-transform: uppercase; color: var(--ink-66); padding: var(--s-5) 0 var(--s-3); } .gaveta .frente-link { border-top: 1px solid var(--rule-soft); } .gaveta .btn { margin-top: var(--s-8); } /* ─── Índice lateral (telas largas) ─────────────────────────────── Régua fina na calha esquerda. Entra em cena só depois da capa e sai no rodapé. O marcador de acento desliza até a seção em leitura, e o contraste inverte quando a banda atrás é Azul Principal. */ .indice { display: none; position: fixed; left: 1.75rem; top: 50%; z-index: 40; grid-auto-flow: row; translate: -10px -50%; opacity: 0; pointer-events: none; transition: opacity 520ms var(--ease-out), translate 520ms var(--ease-out); } .indice.is-vis { opacity: 1; translate: 0 -50%; pointer-events: auto; } /* Trilho + marcador deslizante */ .indice::before, .indice::after { content: ""; position: absolute; left: -0.625rem; width: 1px; } .indice::before { top: 4px; bottom: 4px; background: var(--rule); transition: background var(--t-mid) var(--ease); } .indice::after { top: var(--marca-y, 0); height: var(--marca-h, 1rem); background: var(--accent); transition: top 380ms var(--ease-out), height 380ms var(--ease-out), background var(--t-mid) var(--ease); } /* O rótulo é sobreposto, não empilhado: a régua mantém 1.5rem de largura e nunca invade a coluna de conteúdo. */ .indice__item { position: relative; display: block; width: 1.5rem; padding: 4px 0; font-family: var(--face-display); font-size: var(--t-caption); font-variant-numeric: var(--num-tabular); color: var(--ink-66); transition: color var(--t-mid) var(--ease); } .indice__item span:last-child { position: absolute; left: 2.25rem; top: 50%; translate: -4px -50%; opacity: 0; pointer-events: none; white-space: nowrap; transition: opacity var(--t-fast) var(--ease), translate var(--t-fast) var(--ease); } .indice:hover .indice__item span:last-child { opacity: 1; translate: 0 -50%; } .indice__item:hover, .indice__item.is-ativo { color: var(--ink); } /* Sobre banda escura: o acento vira amarelo, como em `.on-dark em` */ .indice[data-fundo="escuro"] .indice__item { color: var(--paper-58); } .indice[data-fundo="escuro"] .indice__item:hover, .indice[data-fundo="escuro"] .indice__item.is-ativo { color: var(--white); } .indice[data-fundo="escuro"]::before { background: var(--rule-dark); } .indice[data-fundo="escuro"]::after { background: var(--amber); } /* ─── Rodapé ──────────────────────────────────────────────────── */ .rodape { background: var(--navy); color: var(--white); } .rodape a { color: inherit; } .rodape__proposta { display: grid; gap: var(--s-10) var(--s-16); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-block: var(--band-y) calc(var(--band-y) * 0.62); align-items: start; } .rodape__fone { display: inline-flex; align-items: baseline; gap: var(--s-3); font-family: var(--face-display); font-size: var(--t-h1); margin-block: var(--s-5) var(--s-4); border-bottom: 1px solid var(--rule-dark); padding-bottom: var(--s-2); transition: border-color var(--t-fast) var(--ease); } .rodape__fone:hover { border-bottom-color: var(--amber); } /* Formulário */ .forma { display: grid; gap: var(--s-4); } .campo { display: grid; gap: var(--s-2); } .campo > span { font-size: var(--t-caption); letter-spacing: var(--track-caption); text-transform: uppercase; color: var(--paper-58); } .campo input, .campo select { height: 3rem; padding-inline: var(--s-4); background: var(--field-dark); border: 1px solid var(--rule-dark); border-radius: var(--r-1); color: var(--white); transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .campo input::placeholder { color: var(--paper-38); } .campo input:focus { border-color: var(--amber); background: rgb(247 244 239 / 0.1); outline: none; } .forma__dupla { display: grid; gap: var(--s-4); grid-template-columns: 1fr 1fr; } .forma__nota { font-size: var(--t-caption); color: var(--paper-58); } .rodape__mapa { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s-10) var(--s-8); padding-block: calc(var(--band-y) * 0.62); border-top: 1px solid var(--rule-dark); } .rodape__col h3 { font-size: var(--t-caption); font-family: var(--face-text); font-weight: 400; letter-spacing: var(--track-caption); text-transform: uppercase; color: var(--paper-58); margin-bottom: var(--s-4); } .rodape__col ul { display: grid; gap: var(--s-3); } .rodape__col a, .rodape__col button { color: var(--paper-84); transition: color var(--t-fast) var(--ease); text-align: left; } .rodape__col a:hover, .rodape__col button:hover { color: var(--white); } .rodape__sobre p { color: var(--paper-58); max-width: 30ch; margin-top: var(--s-5); } .rodape__legal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-8); padding-block: var(--s-8); border-top: 1px solid var(--rule-dark); font-size: var(--t-caption); color: var(--paper-58); } .rodape__legal a { border-bottom: 1px solid var(--rule-dark); padding-bottom: 1px; transition: border-color var(--t-fast) var(--ease); } .rodape__legal a:hover { border-bottom-color: var(--amber); } .rodape__legal dt { letter-spacing: var(--track-caption); text-transform: uppercase; color: var(--paper-58); margin-bottom: var(--s-2); } .rodape__legal dd { margin: 0; color: var(--paper-84); font-variant-numeric: var(--num-tabular); } .rodape__base { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); align-items: center; justify-content: space-between; padding-block: var(--s-6) var(--s-10); border-top: 1px solid var(--rule-dark); font-size: var(--t-caption); color: var(--paper-58); } .rodape__base nav { display: flex; flex-wrap: wrap; gap: var(--s-5); } /* ─── Botão flutuante do WhatsApp ─────────────────────────────── */ .zap { position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 70; display: flex; align-items: center; gap: var(--s-3); height: 3.25rem; padding-inline: var(--s-4); background: var(--amber); color: var(--navy); border-radius: var(--r-pill); opacity: 0; translate: 0 var(--s-6); pointer-events: none; transition: opacity var(--t-mid) var(--ease), translate var(--t-mid) var(--ease-out); } .zap.is-vis { opacity: 1; translate: 0 0; pointer-events: auto; } .zap svg { width: 1.375rem; height: 1.375rem; } .zap span { font-size: var(--t-body); } /* ─── Diálogos ────────────────────────────────────────────────── */ dialog.folha { width: min(46rem, calc(100vw - var(--s-8))); max-height: min(84vh, 52rem); padding: 0; border: 1px solid var(--navy); border-radius: var(--r-1); background: var(--paper); color: var(--ink); overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); } dialog.folha::backdrop { background: rgb(12 43 82 / 0.55); backdrop-filter: blur(3px); } dialog.folha:not([open]) { display: none; } .folha__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--rule); background: var(--paper); } .folha__fechar { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: var(--r-pill); transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .folha__fechar:hover { border-color: var(--navy); background: var(--field); } .folha__corpo { padding: var(--s-6); overflow-y: auto; overscroll-behavior: contain; } .folha__corpo h3 { font-size: var(--t-h2); margin-block: var(--s-8) var(--s-3); } .folha__corpo h3:first-child { margin-top: 0; } .folha__corpo p { color: var(--ink-76); margin-bottom: var(--s-3); } .folha__corpo ul { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); } .folha__corpo li { color: var(--ink-76); padding-left: var(--s-5); position: relative; } .folha__corpo li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 8px; height: 1px; background: var(--accent); } /* ─── Cookies ─────────────────────────────────────────────────── */ .cookies { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: var(--navy); color: var(--white); border-top: 1px solid var(--rule-dark); translate: 0 100%; transition: translate var(--t-slow) var(--ease-out); } .cookies.is-vis { translate: 0 0; } .cookies__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-8); padding-block: var(--s-5); } .cookies p { color: var(--paper-84); flex: 1 1 22rem; font-size: var(--t-body); } .cookies__acoes { display: flex; gap: var(--s-3); flex-wrap: wrap; } .cookies .btn { min-height: 2.5rem; padding-inline: var(--s-5); } /* ─── Acordeão ────────────────────────────────────────────────── */ .acordeao { border-top: 1px solid var(--rule); } .acordeao__item { border-bottom: 1px solid var(--rule); } .acordeao__q { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: var(--s-5); align-items: start; padding-block: var(--s-5); text-align: left; font-family: var(--face-display); font-size: var(--t-h2); line-height: var(--lh-head); letter-spacing: var(--track-head); transition: color var(--t-fast) var(--ease); } .acordeao__q:hover { color: var(--accent); } .acordeao__sinal { position: relative; width: 1.25rem; height: 1.25rem; margin-top: 0.2em; flex: none; } .acordeao__sinal::before, .acordeao__sinal::after { content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: currentColor; transition: rotate var(--t-mid) var(--ease), opacity var(--t-mid) var(--ease); } .acordeao__sinal::after { rotate: 90deg; } .acordeao__item[data-aberto="true"] .acordeao__sinal::after { rotate: 0deg; opacity: 0; } /* Abertura por altura interpolada: `interpolate-size` deixa o navegador animar 0 → auto sem medir nada em JS. Onde não há suporte, o painel abre sem transição — o conteúdo aparece igual. */ .acordeao__a { height: 0; overflow: hidden; transition: height var(--t-mid) var(--ease); } .acordeao__item[data-aberto="true"] .acordeao__a { height: auto; } .acordeao__a p { color: var(--ink-76); max-width: 66ch; padding-bottom: var(--s-6); } /* ─── Responsivo ──────────────────────────────────────────────── */ @media (min-width: 90rem) { .indice { display: grid; } } /* Só a partir de 1600px a calha comporta o rótulo aberto sem chegar perto da coluna de texto; abaixo disso ele aparece apenas no hover. */ @media (min-width: 100rem) { .indice__item.is-ativo span:last-child { opacity: 1; translate: 0 -50%; } } @media (max-width: 60rem) { .rodape__proposta { grid-template-columns: 1fr; } .rodape__mapa { grid-template-columns: 1fr 1fr; } .rodape__legal { grid-template-columns: 1fr; gap: var(--s-5); } } @media (max-width: 48rem) { /* A barra é mais discreta no celular, mas mantém o degrau ao rolar */ :root { --barra-h: 4.5rem; --marca-h: 2.25rem; } [data-rolado="true"] { --barra-h: 3.75rem; --marca-h: 1.75rem; } /* O hambúrguer precisa ficar fora da regra que esconde os irmãos: como seletor composto ela vence em especificidade e apagaria o próprio menu. */ .barra__nav > :not(.barra__acao, .hamburguer) { display: none; } .hamburguer { display: flex; } .barra__nav { gap: var(--s-3); } .barra__acao .btn span { display: none; } .barra__acao .btn { padding-inline: var(--s-4); } .zap span { display: none; } .zap { width: 3.25rem; padding-inline: 0; justify-content: center; } .forma__dupla { grid-template-columns: 1fr; } .rodape__mapa { grid-template-columns: 1fr; gap: var(--s-8); } .rodape__base { justify-content: flex-start; } } @media (min-width: 48.0625rem) { .gaveta { display: none; } }