/* layout.css — as estruturas grandes: container, seções, grades, cabeçalho, heroes, faixa de CTA e rodapé. Depende de tokens.css e base.css. As media queries moram junto do bloco que modificam, em vez de num arquivo "responsive" à parte. Mexer num componente passa a ser mexer num lugar só, sem a metade esquecida noutro arquivo. Os breakpoints estão em `em` e não em `px` para acompanharem o zoom e o tamanho de fonte escolhidos por quem visita: 30em 480px celular grande 48em 768px tablet em pé 64em 1024px tablet deitado e notebook — aqui o menu horizontal assume 80em 1280px desktop 96em 1536px monitor grande */ /* ---------- Container e seções ---------- */ .fp-container { width: 100%; max-width: var(--fp-container); margin-inline: auto; padding-inline: var(--fp-gutter); } .fp-container--narrow { max-width: var(--fp-container-narrow); } .fp-section { padding-block: var(--fp-section-y); } .fp-section--tight { padding-block: calc(var(--fp-section-y) * 0.6); } .fp-section--alt { background: var(--fp-surface-alt); } .fp-section--dark { background: var(--fp-gradient-navy); color: var(--fp-text-inverse); } /* ---------- Cabeçalho de seção ---------- */ .fp-section__head { display: flex; flex-direction: column; gap: var(--fp-space-xs); margin-bottom: var(--fp-space-xl); max-width: var(--fp-measure); } .fp-section__head--center { align-items: center; text-align: center; margin-inline: auto; } .fp-section__title { font-size: var(--fp-text-4xl); } .fp-section__sub { font-size: var(--fp-text-lg); color: var(--fp-text-muted); } /* ---------- Divisores ---------- Filete que nasce e morre em transparente: separa duas seções sem cortar a página com uma linha de ponta a ponta. Usado onde a alternância de fundo não basta — duas seções claras seguidas leriam como um bloco só. */ .fp-divider { height: var(--fp-hairline); border: 0; background: linear-gradient( 90deg, transparent, var(--fp-border) 15%, var(--fp-border) 85%, transparent ); } /* Versão com losango dourado ao centro, para fechar trechos longos */ .fp-divider--ornate { position: relative; height: var(--fp-space-lg); background: none; display: flex; align-items: center; justify-content: center; } .fp-divider--ornate::before { content: ""; position: absolute; inset-inline: 0; height: var(--fp-hairline); background: linear-gradient(90deg, transparent, var(--fp-border) 30%, var(--fp-border) 70%, transparent); } .fp-divider--ornate::after { content: ""; position: relative; width: 0.5rem; height: 0.5rem; rotate: 45deg; background: var(--fp-gradient-gold); box-shadow: 0 0 0 var(--fp-space-2xs) var(--fp-surface); } .fp-section--alt .fp-divider--ornate::after { box-shadow: 0 0 0 var(--fp-space-2xs) var(--fp-surface-alt); } /* ---------- Grades ---------- */ .fp-grid { display: grid; gap: var(--fp-space-md); grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); } .fp-grid--gap-lg { gap: var(--fp-space-lg); } @media (min-width: 30em) { .fp-grid--2 { --cols: 2; } .fp-grid--4 { --cols: 2; } } @media (min-width: 48em) { .fp-grid--3 { --cols: 3; } } /* Quatro colunas só a partir de 1280px. A 1024px cada uma ficava com cerca de 230px, e um título como "Atendimento presencial e online" quebrava em três linhas desencontradas. Nessa faixa, 2×2 lê melhor. */ @media (min-width: 80em) { .fp-grid--4 { --cols: 4; } } /* Duas colunas desiguais, para pares de texto e imagem */ .fp-split { display: grid; gap: var(--fp-space-xl); align-items: center; } @media (min-width: 64em) { .fp-split { grid-template-columns: 1fr 1fr; gap: var(--fp-space-2xl); } .fp-split--text-wide { grid-template-columns: 1.15fr 1fr; } } /* ---------- Cabeçalho ---------- O mesmo HTML em dois modos, escolhidos por uma classe no : .fp-header sólido, nas páginas internas sem hero body.fp-has-hero .fp-header transparente sobre o hero, sólido ao rolar A decisão fica no e não no cabeçalho porque o cabeçalho é gerado igual para toda página — ele não sabe em que página está. */ .fp-header { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--fp-z-header); height: var(--fp-header-h); display: flex; align-items: center; background: color-mix(in oklab, var(--fp-navy-deep) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: var(--fp-hairline) solid transparent; transition: height var(--fp-duration) var(--fp-ease-out), background var(--fp-duration) var(--fp-ease-out), border-color var(--fp-duration) var(--fp-ease-out), box-shadow var(--fp-duration) var(--fp-ease-out); } /* Sobre o hero o cabeçalho desaparece por completo e deixa a fotografia respirar. Um gradiente discreto no topo mantém o menu legível sobre a imagem, seja ela clara ou escura naquele ponto. O `:not(.is-scrolled)` impede que esta regra dispute com o estado rolado, declarado logo abaixo. */ body.fp-has-hero .fp-header:not(.is-scrolled) { background: linear-gradient( to bottom, color-mix(in oklab, var(--fp-navy-deep) 55%, transparent), transparent ); backdrop-filter: none; -webkit-backdrop-filter: none; } /* Ao rolar: encolhe, fica sólido e ganha o filete dourado */ .fp-header.is-scrolled { height: var(--fp-header-h-scrolled); background: color-mix(in oklab, var(--fp-navy-deep) 97%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: color-mix(in oklab, var(--fp-gold) 26%, transparent); box-shadow: 0 10px 30px -22px var(--fp-navy-deep); } /* Empurra o conteúdo para baixo do cabeçalho fixo. Páginas com hero dispensam o empurrão: ali a imagem passa por baixo do cabeçalho transparente de propósito, e é o que dá a sensação de tela cheia. */ body { padding-top: var(--fp-header-h); } body.fp-has-hero { padding-top: 0; } .fp-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--fp-space-md); width: 100%; } .fp-header__logo { display: block; flex: none; text-decoration: none; line-height: 0; } .fp-header__logo img { height: 2.25rem; width: auto; transition: height var(--fp-duration) var(--fp-ease-out); } .is-scrolled .fp-header__logo img { height: 1.875rem; } /* Em tela muito estreita o logotipo encolhe para caber ao lado do menu */ @media (max-width: 22.5em) { .fp-header__logo img { height: 1.875rem; } } /* ---------- Navegação desktop ---------- */ .fp-nav { display: none; } .fp-nav__list { display: flex; align-items: center; gap: var(--fp-space-md); list-style: none; margin: 0; padding: 0; } .fp-nav__link { position: relative; display: block; padding-block: var(--fp-space-2xs); color: var(--fp-on-navy); font-size: var(--fp-text-sm); font-weight: var(--fp-weight-extrabold); text-decoration: none; white-space: nowrap; transition: color var(--fp-duration-fast) var(--fp-ease-out); } /* O filete dourado abre do centro no hover e no item da página atual */ .fp-nav__link::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 1.5px; background: var(--fp-gradient-gold); transform: scaleX(0); transition: transform var(--fp-duration) var(--fp-ease-out); } .fp-nav__link:hover { color: var(--fp-gold-soft); } .fp-nav__link:hover::after, .fp-nav__link[aria-current]::after { transform: scaleX(1); } .fp-nav__link[aria-current] { color: var(--fp-gold); } @media (min-width: 64em) { .fp-nav { display: block; } } @media (min-width: 80em) { .fp-nav__list { gap: var(--fp-space-lg); } } /* ---------- Ações do cabeçalho ---------- */ .fp-header__actions { display: flex; align-items: center; gap: var(--fp-space-2xs); flex: none; } /* Os dois níveis de especificidade (`.fp-header .x`) são deliberados. Estes elementos também carregam `.fp-btn`, que vive em components.css e carrega depois deste arquivo; com um nível só, a regra de lá venceria por ordem e o botão reapareceria. Já aconteceu: o menu vazou no mobile. */ .fp-header .fp-header__cta { display: none; } @media (min-width: 48em) { .fp-header .fp-header__cta { display: inline-flex; } } /* O botão do assistente aparece a partir de 64em, exatamente onde o hambúrguer sai. Abaixo disso quem oferece a entrada é o menu lateral: nenhuma largura fica sem acesso, e o cabeçalho estreito não precisa acomodar dois botões lado a lado. */ .fp-header .fp-header__assistente { display: none; } @media (min-width: 64em) { .fp-header .fp-header__assistente { display: inline-flex; } .fp-header .fp-header__toggle { display: none; } } /* ---------- Heroes ---------- Dois tamanhos da mesma peça: .fp-hero a Home: ocupa a tela, fotografia, presença máxima .fp-hero--compact as internas: respira menos e entrega o conteúdo antes Quem chega numa página de área já sabe o que procura; fazê-la esperar uma tela inteira de abertura seria cobrar apresentação de quem já entrou. */ .fp-hero { position: relative; display: flex; align-items: center; min-height: min(46rem, 100svh); padding-block: calc(var(--fp-header-h) + var(--fp-space-2xl)) var(--fp-space-2xl); background: var(--fp-navy-deep); color: var(--fp-text-inverse); overflow: hidden; isolation: isolate; } /* A fotografia de fundo */ .fp-hero__media { position: absolute; inset: 0; z-index: -2; } .fp-hero__media img { width: 100%; height: 100%; object-fit: cover; /* No celular a moldura vertical pede o topo da foto; no desktop, o centro */ object-position: 50% 22%; } @media (min-width: 64em) { .fp-hero__media img { object-position: 60% 30%; } } /* Véu duplo sobre a fotografia: uma camada escurece para o texto ter onde se apoiar, a outra puxa o navy da marca. Sem ele, texto claro sobre a parte clara da foto reprova em contraste — e não é possível prever que parte da foto vai ficar atrás do texto em cada largura de tela. */ .fp-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 100deg, color-mix(in oklab, var(--fp-navy-deep) 92%, transparent) 0%, color-mix(in oklab, var(--fp-navy-deep) 78%, transparent) 42%, color-mix(in oklab, var(--fp-navy-deep) 35%, transparent) 100% ), linear-gradient( to top, color-mix(in oklab, var(--fp-navy-deep) 85%, transparent) 0%, transparent 45% ); } /* No mobile o texto toma a largura inteira, e o véu precisa fechar mais */ @media (max-width: 47.99em) { .fp-hero__media::after { background: linear-gradient( to bottom, color-mix(in oklab, var(--fp-navy-deep) 80%, transparent) 0%, color-mix(in oklab, var(--fp-navy-deep) 88%, transparent) 100% ); } } .fp-hero__content { position: relative; max-width: 46rem; display: flex; flex-direction: column; gap: var(--fp-space-md); } .fp-hero__title { font-size: var(--fp-text-5xl); font-weight: var(--fp-weight-extrabold); line-height: var(--fp-leading-tight); color: var(--fp-text-inverse); } /* Uma palavra do título em dourado — o acento da marca onde ele pesa */ .fp-hero__title em { font-style: italic; color: var(--fp-gold); } .fp-hero__text { font-size: var(--fp-text-lg); color: var(--fp-on-navy-muted); max-width: 34rem; } .fp-hero__actions { display: flex; flex-wrap: wrap; gap: var(--fp-space-2xs); margin-top: var(--fp-space-2xs); } /* No celular os botões viram blocos: alvo grande e ordem evidente */ @media (max-width: 29.99em) { .fp-hero__actions { flex-direction: column; align-items: stretch; } .fp-hero__actions .fp-btn { width: 100%; } } /* ---------- Hero compacto — páginas internas ---------- */ .fp-hero--compact { min-height: 0; padding-block: calc(var(--fp-header-h) + var(--fp-space-xl)) var(--fp-space-xl); background: var(--fp-gradient-navy); } .fp-hero--compact .fp-hero__title { font-size: var(--fp-text-4xl); } .fp-hero--compact .fp-hero__content { gap: var(--fp-space-sm); max-width: 46rem; } /* O monograma em marca d'água: profundidade sem ruído atrás do texto */ .fp-hero--compact::after { content: ""; position: absolute; inset-block: -10%; inset-inline-end: -4rem; aspect-ratio: 173 / 254; background: url("/assets/images/monograma-fp.svg") no-repeat center / contain; opacity: 0.06; z-index: -1; pointer-events: none; } @media (max-width: 47.99em) { .fp-hero--compact::after { display: none; } } /* ---------- Migalhas ---------- */ .fp-breadcrumb { font-size: var(--fp-text-xs); color: var(--fp-on-navy-muted); } .fp-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fp-space-3xs); list-style: none; margin: 0; padding: 0; } .fp-breadcrumb li:not(:last-child)::after { content: "/"; margin-inline-start: var(--fp-space-3xs); color: color-mix(in oklab, var(--fp-gold) 55%, transparent); } .fp-breadcrumb a { text-decoration: none; } .fp-breadcrumb a:hover { color: var(--fp-gold); } .fp-breadcrumb [aria-current="page"] { color: var(--fp-on-navy); } /* ---------- Faixa de CTA ---------- Fecha as páginas com o convite ao contato. Toda página termina nela: quem leu até o fim não deveria precisar procurar como falar com o escritório. */ .fp-cta-band { position: relative; background: var(--fp-gradient-navy); color: var(--fp-text-inverse); padding-block: var(--fp-space-2xl); overflow: hidden; isolation: isolate; } /* Filete dourado marcando o topo da faixa */ .fp-cta-band::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px; background: var(--fp-gradient-gold); } .fp-cta-band__inner { display: flex; flex-direction: column; gap: var(--fp-space-md); align-items: center; text-align: center; } .fp-cta-band__title { font-size: var(--fp-text-3xl); color: var(--fp-text-inverse); max-width: 24ch; } .fp-cta-band__text { color: var(--fp-on-navy-muted); max-width: 52ch; } .fp-cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--fp-space-2xs); justify-content: center; } @media (max-width: 29.99em) { .fp-cta-band__actions { flex-direction: column; align-self: stretch; } .fp-cta-band__actions .fp-btn { width: 100%; } } /* ---------- Rodapé ---------- */ .fp-footer { background: var(--fp-gradient-navy); color: var(--fp-on-navy); padding-block: var(--fp-space-2xl) var(--fp-space-lg); } .fp-footer__grid { display: grid; gap: var(--fp-space-xl); grid-template-columns: 1fr; } @media (min-width: 48em) { .fp-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } } @media (min-width: 64em) { .fp-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } } .fp-footer__logo img { height: 2.75rem; width: auto; margin-bottom: var(--fp-space-sm); } .fp-footer__title { font-family: var(--fp-font-sans); font-size: var(--fp-text-xs); font-weight: var(--fp-weight-extrabold); letter-spacing: var(--fp-tracking-widest); text-transform: uppercase; color: var(--fp-gold); margin-bottom: var(--fp-space-sm); } .fp-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--fp-space-2xs); } .fp-footer__list a { color: var(--fp-on-navy-muted); font-size: var(--fp-text-sm); text-decoration: none; } .fp-footer__list a:hover { color: var(--fp-gold); } /* Alvo de toque folgado no mobile, sem inchar os links no desktop */ @media (max-width: 47.99em) { .fp-footer__list a { display: block; padding-block: var(--fp-space-3xs); min-height: 2.25rem; } } .fp-footer__bottom { margin-top: var(--fp-space-xl); padding-top: var(--fp-space-md); border-top: var(--fp-hairline) solid var(--fp-border-inverse); display: flex; flex-direction: column; gap: var(--fp-space-xs); font-size: var(--fp-text-xs); color: var(--fp-on-navy-muted); } /* O aviso da OAB: discreto, mas em todas as páginas — é exigência do Código de Ética, não uma escolha de layout */ .fp-footer__aviso { max-width: var(--fp-measure); line-height: var(--fp-leading-normal); } @media (min-width: 64em) { .fp-footer__bottom { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: var(--fp-space-lg); } }