/* 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). Dois temas, como no site: branco (padrão) e, com a classe `mpb-hdr-dark` no , vidro escuro translúcido. Na home o cabeçalho fica fixo sobre a hero (`mpb-hdr-fixed`); o JS da hero alterna o tema quando a cortina clara cobre a faixa do 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-bg: #fff; --mpb-hdr-border: var(--mpb-line); --mpb-hdr-shadow: 0 1px 0 rgba(27, 29, 88, 0.04), 0 8px 24px -16px rgba(27, 29, 88, 0.25); --mpb-hdr-link: var(--mpb-slate-700); --mpb-hdr-link-hover: var(--mpb-navy-900); --mpb-hdr-icon: var(--mpb-navy-900); --mpb-band-bg: var(--mpb-paper); --mpb-band-fg: var(--mpb-slate-500); --mpb-band-hover: var(--mpb-navy-900); --mpb-hdr-blur: 0px; font-family: var(--mpb-font); -webkit-font-smoothing: antialiased; } html.mpb-hdr-dark header.ct-header { --mpb-hdr-bg: rgba(27, 29, 88, 0.85); --mpb-hdr-border: rgba(255, 255, 255, 0.1); --mpb-hdr-shadow: none; --mpb-hdr-link: rgba(255, 255, 255, 0.85); --mpb-hdr-link-hover: #fff; --mpb-hdr-icon: #fff; --mpb-band-bg: rgba(27, 29, 88, 0.4); --mpb-band-fg: var(--mpb-navy-200); --mpb-band-hover: #fff; --mpb-hdr-blur: 12px; } /* 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; } } /* Com o cabeçalho inteiro fixo, o "sticky" interno do Blocksy (que o JS do tema fixa ao topo da janela e cobriria a faixa institucional) volta ao fluxo; a altura da linha fica estável. */ html.mpb-hdr-fixed header.ct-header [data-sticky] { position: static !important; transform: none !important; } html.mpb-hdr-fixed header.ct-header [data-row] { --height: 72px !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; } /* A cor fica na linha "sticky" do Blocksy (é ela que vira fixa ao rolar nas outras páginas); as linhas internas ficam transparentes. !important vence as variáveis do tema. */ header.ct-header [data-sticky] { --background-color: transparent !important; background-color: var(--mpb-hdr-bg) !important; border-bottom: 1px solid var(--mpb-hdr-border); box-shadow: var(--mpb-hdr-shadow); -webkit-backdrop-filter: blur(var(--mpb-hdr-blur)); backdrop-filter: blur(var(--mpb-hdr-blur)); transition: background-color 500ms ease, border-color 500ms ease, box-shadow 500ms ease; } header.ct-header [data-row] { --background-color: transparent !important; background-color: transparent !important; --height: 72px !important; --shrink-height: 64px !important; --sticky-shrink: 89 !important; } html:not(.mpb-hdr-fixed) header.ct-header [data-sticky*='yes'] [data-row] { --height: 64px !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 */ .mpb-band { display: none; border-bottom: 1px solid var(--mpb-hdr-border); background: var(--mpb-band-bg); color: var(--mpb-band-fg); font-family: var(--mpb-font); font-size: 12px; -webkit-backdrop-filter: blur(var(--mpb-hdr-blur)); backdrop-filter: blur(var(--mpb-hdr-blur)); transition: background-color 500ms ease, color 500ms ease, border-color 500ms 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 página termina em branco (vídeos, conteúdo) e o rodapé é azul-marinho: a passagem é uma rampa em OKLCH, sem a zona cinza do degradê sRGB, com stops em ease-in-out. */ --mpf-ramp: clamp(96px, 14vh, 180px); background: linear-gradient( to bottom in oklch, #fff 0, oklch(from var(--mpb-navy-950) l c h / 0.06) calc(var(--mpf-ramp) * 0.12), oklch(from var(--mpb-navy-950) l c h / 0.24) calc(var(--mpf-ramp) * 0.3), oklch(from var(--mpb-navy-950) l c h / 0.55) calc(var(--mpf-ramp) * 0.5), oklch(from var(--mpb-navy-950) l c h / 0.82) calc(var(--mpf-ramp) * 0.7), oklch(from var(--mpb-navy-950) l c h / 0.96) calc(var(--mpf-ramp) * 0.88), var(--mpb-navy-950) var(--mpf-ramp) ) #fff; color: var(--mpb-navy-100); font-family: var(--mpb-font); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } .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: calc(var(--mpf-ramp) + 40px) 1.25rem 96px; } @media (min-width: 640px) { .mpf-in { padding: calc(var(--mpf-ramp) + 48px) 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; }