/* Meu Precatório · Blog — cabeçalho e rodapé no tema do site (carregado em todas as páginas). Cabeçalho: o do Blocksy continua sendo o cabeçalho (menu, busca, off-canvas), só muda a roupa: Montserrat, linha de 72 px, logo de 40 px, item "Simular proposta" como botão dourado e a faixa institucional (≥ 1280 px, injetada pelo JS). Ele não é uma barra: não tem fundo, borda nem sombra próprios. Quem o pinta é o véu (`.mpb-veil`, injetado pelo JS), um degradê da cor do topo da própria página que desce 44 px além do cabeçalho e se dissolve — não há aresta entre cabeçalho e conteúdo em nenhum dos dois temas. A mesma máscara recorta o desfoque de fundo, senão o desfoque terminaria numa borda reta enquanto a cor se dissolve. A intensidade vem da rolagem, contínua (`--mpb-hdr-in`): em repouso o fundo da página passa quase inteiro por ele. Mesma solução do site (Header.tsx / .hdr-veil). Dois temas, que cruzam por opacidade em 300 ms: claro (padrão) e escuro, com a classe `mpb-hdr-dark` no — posta pelo JS conforme a superfície que passa sob a faixa do cabeçalho (a hero, na home; o rodapé, em qualquer página). Na home o cabeçalho fica fixo sobre a hero (`mpb-hdr-fixed`); nas demais é o cabeçalho inteiro que fica preso ao topo. Rodapé: o do Blocksy é escondido e o plugin imprime o rodapé do site (`.mpf`). */ :root { --mpb-navy-950: #1b1d58; --mpb-navy-900: #282b7e; --mpb-navy-200: #b6b8da; --mpb-navy-100: #dadbec; --mpb-gold: #fcbf00; --mpb-gold-400: #ffd24d; --mpb-line: #e3e8ee; --mpb-paper: #fafbfd; --mpb-canvas: #f6f9fc; --mpb-slate-700: #57554f; --mpb-slate-500: #77756e; --mpb-font: Montserrat, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; } /* ------------------------------------------------------------------ */ /* Cabeçalho */ /* ------------------------------------------------------------------ */ header.ct-header { /* tema claro */ --mpb-hdr-link: var(--mpb-slate-700); --mpb-hdr-link-hover: var(--mpb-navy-900); --mpb-hdr-icon: var(--mpb-navy-900); --mpb-band-fg: var(--mpb-slate-500); --mpb-band-hover: var(--mpb-navy-900); /* Véu fechado é o padrão: sem JS, o cabeçalho continua legível sobre qualquer conteúdo */ --mpb-hdr-in: 1; /* O claro é o papel do próprio blog (o do tema é #fafbfc), e não branco: assim a faixa do cabeçalho é a continuação do fundo da página, e não uma placa mais clara sobre ele. O escuro é mais fundo que a base da hero (#14163f) — um véu que clareia o fundo volta a virar placa. */ --mpb-veil-light: rgba(250, 251, 252, 0.92); --mpb-veil-dark: rgba(12, 14, 40, 0.9); position: relative; font-family: var(--mpb-font); -webkit-font-smoothing: antialiased; } html.mpb-hdr-dark header.ct-header { --mpb-hdr-link: rgba(255, 255, 255, 0.85); --mpb-hdr-link-hover: #fff; --mpb-hdr-icon: #fff; --mpb-band-fg: var(--mpb-navy-200); --mpb-band-hover: #fff; } /* Véu: o fundo do cabeçalho, que se dissolve antes de terminar. A caixa vai 44 px abaixo do cabeçalho e a máscara apaga esses 44 px numa curva, então o limite é degradê e não linha. Fica atrás de tudo — as linhas do cabeçalho ganham `position: relative` logo abaixo. */ .mpb-veil { --mpb-veil-shape: linear-gradient( to bottom, #000 0, #000 calc(100% - 62px), rgba(0, 0, 0, 0.96) calc(100% - 54px), rgba(0, 0, 0, 0.82) calc(100% - 44px), rgba(0, 0, 0, 0.5) calc(100% - 34px), rgba(0, 0, 0, 0.22) calc(100% - 22px), rgba(0, 0, 0, 0.06) calc(100% - 12px), transparent 100% ); position: absolute; left: 0; right: 0; top: 0; bottom: -44px; z-index: 0; pointer-events: none; opacity: var(--mpb-hdr-in, 1); -webkit-mask-image: var(--mpb-veil-shape); mask-image: var(--mpb-veil-shape); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* As duas polaridades ficam empilhadas e cruzam por opacidade: a cor de fundo não é animável entre um rgba escuro e um claro sem passar por um cinza. */ .mpb-veil span { position: absolute; inset: 0; display: block; transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); } .mpb-veil .mpb-veil-light { background-color: var(--mpb-veil-light); opacity: 1; } .mpb-veil .mpb-veil-dark { background-color: var(--mpb-veil-dark); opacity: 0; } html.mpb-hdr-dark .mpb-veil .mpb-veil-light { opacity: 0; } html.mpb-hdr-dark .mpb-veil .mpb-veil-dark { opacity: 1; } @media (prefers-reduced-motion: reduce) { .mpb-veil span { transition: none; } } /* Tudo o que não é o véu pinta por cima dele */ header.ct-header > *:not(.mpb-veil) { position: relative; z-index: 1; } /* Na home o cabeçalho inteiro fica fixo sobre a hero, como no site. O Blocksy declara `#header { position: relative }` (id vence classe), daí o !important. */ html.mpb-hdr-fixed header.ct-header, html.mpb-hdr-fixed #header { position: fixed !important; top: 0; left: 0; right: 0; z-index: 60; } html.mpb-hdr-fixed body.admin-bar header.ct-header, html.mpb-hdr-fixed body.admin-bar #header { top: 32px; } @media (max-width: 782px) { html.mpb-hdr-fixed body.admin-bar header.ct-header, html.mpb-hdr-fixed body.admin-bar #header { top: 46px; } } /* Fora da home o cabeçalho inteiro fica preso ao topo, como no site — e não só a linha do menu. O JS do Blocksy fixa a linha interna sobre a faixa institucional, que ficava invisível o blog inteiro; devolvendo a linha ao fluxo, faixa e menu voltam a ser uma peça só. */ html:not(.mpb-hdr-fixed) header.ct-header, html:not(.mpb-hdr-fixed) #header { position: sticky !important; top: 0; z-index: 60; } html:not(.mpb-hdr-fixed) body.admin-bar header.ct-header, html:not(.mpb-hdr-fixed) body.admin-bar #header { top: 32px; } @media (max-width: 782px) { html:not(.mpb-hdr-fixed) body.admin-bar header.ct-header, html:not(.mpb-hdr-fixed) body.admin-bar #header { top: 46px; } } /* O "sticky" interno do Blocksy volta ao fluxo em qualquer página; a altura da linha fica estável, sem o encolhimento do tema (o cabeçalho do site também não encolhe). */ header.ct-header [data-sticky] { position: static !important; transform: none !important; } header.ct-header .ct-sticky-container { position: static !important; } /* A hero começa colada no topo: sem o respiro que o Blocksy dá ao conteúdo da página */ html.mpb-hdr-fixed #main .ct-container-full, html.mpb-hdr-fixed #main .ct-container { padding-top: 0 !important; } /* Nenhuma linha do cabeçalho tem cor, borda ou sombra próprias: quem pinta é o véu. !important vence as variáveis do tema. */ header.ct-header [data-sticky], header.ct-header [data-row] { --background-color: transparent !important; background-color: transparent !important; border-bottom: 0 !important; box-shadow: none !important; } header.ct-header [data-row] { --height: 72px !important; --shrink-height: 72px !important; --sticky-shrink: 100 !important; } header.ct-header .site-logo-container img { --logo-max-height: 40px !important; max-height: 40px !important; width: auto; height: 40px; } /* Itens do menu: 15 px médio, sem caixa alta */ header.ct-header .menu > li > .ct-menu-link { color: var(--mpb-hdr-link) !important; font-family: var(--mpb-font); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; transition: color 150ms ease-out; } header.ct-header .menu > li > .ct-menu-link:hover, header.ct-header .menu > li > .ct-menu-link[aria-expanded='true'] { color: var(--mpb-hdr-link-hover) !important; } header.ct-header .menu .ct-toggle-dropdown-desktop .ct-icon { fill: currentColor !important; } /* Submenu (Categorias): cartão branco flutuante, como o dropdown do site */ header.ct-header .menu .sub-menu { --background-color: #fff !important; background: #fff !important; border: 1px solid var(--mpb-line); border-radius: 12px; padding: 6px; box-shadow: 0 2px 4px rgba(27, 29, 88, 0.04), 0 30px 60px -24px rgba(27, 29, 88, 0.35); } header.ct-header .menu .sub-menu .ct-menu-link { color: var(--mpb-navy-900) !important; font-family: var(--mpb-font); font-size: 15px; font-weight: 500; text-transform: none; border-radius: 8px; transition: background-color 150ms ease-out; } header.ct-header .menu .sub-menu .ct-menu-link:hover { background: var(--mpb-canvas) !important; } /* "Simular proposta" vira o botão dourado do site (mesmo em vidro escuro) */ header.ct-header .menu > li > .ct-menu-link[href*='vender'], header.ct-header .menu > li > .ct-menu-link[href*='simular'] { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; background: var(--mpb-gold); color: var(--mpb-navy-950) !important; font-size: 14px; font-weight: 600; box-shadow: 0 1px 2px rgba(168, 125, 0, 0.25); transition: background-color 150ms ease-out, transform 150ms ease-out; } header.ct-header .menu > li > .ct-menu-link[href*='vender']:hover, header.ct-header .menu > li > .ct-menu-link[href*='simular']:hover { background: var(--mpb-gold-400); } header.ct-header .menu > li > .ct-menu-link[href*='vender']:active, header.ct-header .menu > li > .ct-menu-link[href*='simular']:active { transform: scale(0.97); } /* Ícones de busca e menu */ header.ct-header .ct-header-search, header.ct-header .ct-header-trigger { --theme-icon-color: var(--mpb-hdr-icon) !important; --theme-icon-hover-color: var(--mpb-hdr-link-hover) !important; color: var(--mpb-hdr-icon) !important; } header.ct-header .ct-header-search .ct-icon, header.ct-header .ct-header-trigger .ct-icon { fill: var(--mpb-hdr-icon) !important; transition: fill 300ms ease; } /* Faixa institucional (injetada pelo JS), só em telas largas. Sem fundo e sem divisória própria: com eles o cabeçalho eram dois retângulos empilhados sobre a página. O que a separa do menu é o que já a separava — corpo menor e contraste mais baixo. */ .mpb-band { display: none; color: var(--mpb-band-fg); font-family: var(--mpb-font); font-size: 12px; transition: color 300ms ease; } @media (min-width: 1280px) { .mpb-band { display: block; } } .mpb-band-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 32px; max-width: 76rem; margin-inline: auto; padding-inline: 2rem; } .mpb-band p { margin: 0; } .mpb-band p span { margin: 0 8px; opacity: 0.5; } .mpb-band nav { display: flex; gap: 20px; } .mpb-band a { color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; transition: color 150ms ease-out; } .mpb-band a:hover { color: var(--mpb-band-hover); } /* ------------------------------------------------------------------ */ /* Rodapé */ /* ------------------------------------------------------------------ */ footer.ct-footer { display: none !important; } .mpf { /* A mesma passagem das cenas do site (.scene + .scene-dark + bg-grid-navy): o rodapé é um painel azul-marinho de topo arredondado que sobe 32 px sobre a seção anterior e projeta para cima uma sombra na própria cor, que só encosta nos últimos ~80 px do branco. Nada de rampa de cor: a borda existe, mas é um contorno, não uma faixa acinzentada. */ --mpf-radius: 32px; --mpf-grid-line: rgba(255, 255, 255, 0.03); --mpf-grid-step: 48px; background-color: var(--mpb-navy-950); border-radius: var(--mpf-radius) var(--mpf-radius) 0 0; /* No site o painel sobe 32 px sobre o padding da seção anterior; aqui a última seção do Elementor (vídeos) ou o fim do post acabam quase sem respiro, então o próprio rodapé guarda a distância e a sombra se projeta sobre papel, não sobre o conteúdo. */ margin-top: clamp(48px, 7vh, 88px); box-shadow: 0 -20px 50px -10px rgba(10, 12, 50, 0.4), 0 -80px 160px -40px rgba(10, 12, 50, 0.32); overflow: hidden; isolation: isolate; z-index: 2; color: var(--mpb-navy-100); font-family: var(--mpb-font); font-size: 14px; line-height: 1.5; position: relative; -webkit-font-smoothing: antialiased; } /* Luz e malha do bg-grid-navy: brilho ciano no canto superior direito, luz azul no esquerdo e a malha de 48 px, esmaecendo para o azul liso antes das colunas (a máscara do bg-grid-navy-fold). */ .mpf::before { content: ""; position: absolute; inset: 0 0 auto; height: clamp(260px, 40vh, 420px); z-index: -1; pointer-events: none; background-image: radial-gradient(60% 80% at 100% 0%, rgba(0, 139, 199, 0.35) 0%, rgba(0, 139, 199, 0) 60%), radial-gradient(50% 100% at 0% 0%, oklch(from var(--mpb-navy-900) l c h / 0.8) 0%, oklch(from var(--mpb-navy-900) l c h / 0) 60%), linear-gradient(var(--mpf-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--mpf-grid-line) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, var(--mpf-grid-step) var(--mpf-grid-step), var(--mpf-grid-step) var(--mpf-grid-step); -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.5) 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.5) 62%, transparent 100%); } /* Superfície escura declarada ao cabeçalho: o painel inteiro, abaixo da curva do topo. Invisível, sem área clicável. */ .mpf-dark-from { position: absolute; left: 0; right: 0; top: var(--mpf-radius); bottom: 0; pointer-events: none; } .mpf *, .mpf *::before, .mpf *::after { box-sizing: border-box; } :where(.mpf) :where(h3, p, ul, li) { margin: 0; padding: 0; } :where(.mpf) :where(ul) { list-style: none; } /* Vence a margem inferior e o recuo que o tema dá por seletor de elemento */ .mpf :is(h3, p, ul, li) { margin-block-end: 0; } .mpf :is(ul) { padding-inline-start: 0; list-style: none; } .mpf a, .mpf a:visited { /* .mpf a (e não :where) para vencer a cor de link do tema */ color: rgba(255, 255, 255, 0.9); text-decoration: none; transition: color 150ms ease-out; } .mpf a:hover, .mpf a:focus-visible { color: #fff; } .mpf :focus-visible { outline: 2px solid #4fb0da; outline-offset: 2px; } .mpf-in { max-width: 76rem; margin-inline: auto; padding: 72px 1.25rem 96px; } @media (min-width: 640px) { .mpf-in { padding: 80px 2rem 96px; } } @media (min-width: 1024px) { .mpf-in { padding-bottom: 32px; } } .mpf-top { display: grid; gap: 40px; } @media (min-width: 1024px) { .mpf-top { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; } .mpf-brand { grid-column: span 3; padding-right: 24px; } .mpf-cols { grid-column: span 9; } } .mpf-brand img { display: block; height: 36px; width: auto; } .mpf-brand p { margin-top: 20px; max-width: 20rem; line-height: 1.6; color: var(--mpb-navy-200); } .mpf-social { display: flex; gap: 8px; margin-top: 24px; } .mpf-social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.1); color: var(--mpb-navy-100); transition: border-color 150ms ease-out, color 150ms ease-out; } .mpf-social a:hover { border-color: rgba(255, 255, 255, 0.3); color: #fff; } .mpf-social svg { width: 16px; height: 16px; fill: currentColor; } .mpf-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; } @media (min-width: 1024px) { .mpf-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.45fr); gap: 32px; } } .mpf-cols h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mpb-navy-200); } .mpf-cols ul { display: grid; gap: 10px; margin-top: 16px; } .mpf-contact { grid-column: span 2; } @media (min-width: 640px) { .mpf-contact { grid-column: span 1; } } .mpf-tabular { font-variant-numeric: tabular-nums lining-nums; } .mpf a.mpf-address { display: block; padding-top: 4px; line-height: 1.6; color: rgba(255, 255, 255, 0.9); } .mpf-legal { display: grid; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 12.5px; line-height: 1.6; color: rgba(182, 184, 218, 0.75); } @media (min-width: 1024px) { .mpf-legal { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; } .mpf-legal p:first-child { grid-column: span 9; } .mpf-legal p:last-child { grid-column: span 3; text-align: right; } } .mpf-nowrap { white-space: nowrap; }