/* ------------------------------------------------------------------ Matos & Leal Advocacia — camada de tema Carregada DEPOIS de base.css. Só troca cores, fontes e alguns detalhes que o build original resolvia em JavaScript. A paleta vem da marca do cliente: ouro #ddb05b sobre preto #0d0d0d. ------------------------------------------------------------------ */ /* --- famílias tipográficas (o build original as injetava no ) --- */ :root { --font-cormorant: "cormorant", "cormorant Fallback"; --font-inter: "inter", "inter Fallback"; --font-mono: "mono", "mono Fallback"; } /* --- paleta ------------------------------------------------------- */ :root { --ouro: #ddb05b; /* cor de marca — fundo dos botões */ --ouro-forte: #c9974a; /* hover */ --ouro-fundo: #241a0a; /* faixa escura de contato */ --ouro-claro: #e6c88a; /* texto de destaque sobre preto */ --ouro-escuro: #8a6420; /* texto de destaque sobre branco */ /* o base.css deriva --accent, --bg-deep e --accent-strong destes três */ --bordo: var(--ouro); --bordo-deep: var(--ouro-fundo); --bordo-soft: var(--ouro-forte); /* o ouro é claro: o texto sobre ele é preto, não branco */ --on-accent: #0d0d0d; } html[data-theme="dark"], :root { --bg-alt: #15110a; --rule: #2a2418; --rule-strong: #3d3524; --fg-mute: #9c9488; --accent-text: var(--ouro); --field: #171208; } html[data-theme="light"] { --bg-alt: #f4f1ea; --rule: #ded8cb; --rule-strong: #b9b1a0; --accent-text: var(--ouro-escuro); --accent-strong: #c39445; --field: #fbf8f1; } /* herói: o base.css força um tom rosado; aqui é ouro */ .hero-with-video { --accent-text: var(--ouro-claro); } /* --- texto sobre o ouro ------------------------------------------- */ .text-on-accent { color: var(--on-accent); } .bg-ink-15 { background-color: rgba(13, 13, 13, .16); } .skip-to-content { color: var(--on-accent); } .group:hover .group-hover-on-accent, .group:focus-visible .group-hover-on-accent { color: var(--on-accent); } /* --- marca --------------------------------------------------------- */ /* a marca já é dourada: não inverter como fazia o original */ .marca-topo { filter: none; } html[data-theme="light"] .marca-topo { filter: brightness(.88) saturate(1.06); } .floating-logo { background-image: url(../img/marca-branca.png); } html[data-theme="light"] .floating-logo { background-image: url(../img/marca-escura.png); } /* a faixa de contato é sempre escura, mesmo no tema claro: o base.css redefine os tokens dela — falta trocar o destaque para ouro */ .bg-bg-deep { --accent-text: var(--ouro-claro); } /* --- cartão do atendimento (classes que o build original animava) --- */ .bio-borda-viva { position: relative; overflow: hidden; } .bio-borda-viva::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient( 115deg, transparent 35%, color-mix(in srgb, var(--accent-text) 16%, transparent) 50%, transparent 65% ); transform: translateX(-120%); transition: transform .9s var(--ease-out); } .bio-borda-viva:hover::after { transform: translateX(120%); } .bio-icone-pulso { animation: bio-pulso 2.8s var(--ease-in-out) infinite; } @keyframes bio-pulso { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-text) 34%, transparent); } 55% { box-shadow: 0 0 0 10px transparent; } } /* --- o fundo do herói ---------------------------------------------- É uma foto, não vídeo. São dois arquivos, um por largura: cada um já sai composto com a figura à direita e o lado esquerdo escuro, para o título ficar por cima com contraste. Um arquivo só não serviria — no celular o 16/9 recortado ao centro mostraria preto, porque a figura está na borda. */ .heroi-filme { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--preto-institucional); } /* A foto vive no pseudo-elemento, não na caixa: assim ela pode respirar devagar sem arrastar junto o degradê, que é filho da caixa. */ .heroi-filme::before { content: ""; position: absolute; inset: 0; /* ancorado no ALTO, não no centro: a seção é mais baixa que a foto e um recorte centrado decepava a cabeça dele em monitor largo. O mesmo vale para a origem do zoom — crescendo a partir do topo, a cabeça fica. */ background: url(../img/heroi-desktop.jpg?ver=2.1.0) 50% 0% / cover no-repeat; transform-origin: 50% 0%; /* 16 s e 14% de zoom (~0,9% por segundo). Começou em 26 s e 7%, que o olho não pegava; esta dose se vê sem virar distração atrás do título. */ animation: heroi-entra 1.4s var(--ease-out) both, heroi-respira 16s var(--ease-in-out) infinite alternate; will-change: transform, opacity; } /* a foto acende em vez de aparecer de estalo */ @keyframes heroi-entra { from { opacity: 0; } to { opacity: 1; } } @keyframes heroi-respira { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(-2.2%, 0, 0); } } /* o fade que costura a foto ao fundo da seção — em toda largura, não só no celular: leve no topo, mais presente na base, onde a foto acaba */ .heroi-filme__costura { position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 180deg, rgba(13, 13, 13, .22) 0%, rgba(13, 13, 13, 0) 14%, rgba(13, 13, 13, 0) 62%, rgba(13, 13, 13, .45) 88%, var(--preto-institucional) 100% ); } /* O herói ocupa a tela inteira, com o cabeçalho flutuando por cima. `dvh` além de `vh` porque no celular a barra do navegador entra e sai da conta. Cada largura tem o seu arquivo de foto, no formato daquela tela — é isso que evita o `cover` comer as laterais para caber. */ #main-content { padding-top: 0; } .hero-with-video { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; } /* No celular vale o mesmo desenho do computador — ele à direita, título à esquerda por cima. O título só precisa de largura limitada para não correr por cima dele. */ @media (max-width: 767px) { .heroi-filme::before { background-image: url(../img/heroi-celular.jpg?ver=2.1.0); } .hero-content { padding-block: 0; max-width: 76%; } .hero-content h1 { font-size: clamp(26px, 7.4vw, 40px); } /* no celular a ação é o WhatsApp flutuante: os botões do herói saem */ .heroi-botoes { display: none; } /* o topo perde a pastilha — sem fundo, sem linha, sem sombra — e fica só o menu na ponta direita, por cima da foto */ header.fixed { width: calc(100% - 24px); max-width: none; justify-content: flex-end; padding: 6px; background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; } .marca-cabecalho { display: none; } [data-abrir-menu] { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .75)); } /* o menu tem de cobrir o cabeçalho: com z-40 contra o z-50 dele, o botão de fechar ficava embaixo da pastilha e não dava para sair do menu */ #mobile-menu { z-index: 60; } /* o menu em gaveta estava com corpo de cartaz: baixa e aproxima */ #mobile-menu nav { gap: 14px; } #mobile-menu nav a { font-size: clamp(19px, 5.4vw, 26px); letter-spacing: -0.01em; } #mobile-menu nav a[href^="https"] { font-size: 15px; } /* --- avaliações em carrossel --------------------------------------- Seis cartões empilhados viravam uma coluna sem fim: quem rola no telemóvel desiste antes do fim. Aqui a lista deixa de ser grelha e passa a ser um trilho que corre de lado com encaixe — um cartão de cada vez, o seguinte a espreitar na borda para dizer que há mais. No computador nada muda: a grelha de 3 colunas fica como está. */ #avaliacoes .avaliacoes-trilho { display: flex; gap: 12px; /* desfaz o que a grelha usava: o `bg-rule` era o risco entre células */ background: transparent; border: 0; border-radius: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* o encaixe tem de bater com a borda do cartão, não com a da caixa */ scroll-padding-left: 0; } #avaliacoes .avaliacoes-trilho::-webkit-scrollbar { display: none; } #avaliacoes .avaliacoes-trilho > li { flex: 0 0 84%; scroll-snap-align: start; border: 1px solid var(--rule); border-radius: 2px; padding: 26px 22px; } } /* --- WhatsApp flutuante --------------------------------------------- Fica abaixo do menu do celular (z-40) para não flutuar por cima dele quando o menu abre. */ .zap-flutuante { position: fixed; right: clamp(14px, 4vw, 26px); bottom: clamp(14px, 4vw, 26px); z-index: 35; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 999px; background: var(--accent); color: var(--on-accent); box-shadow: 0 12px 34px rgba(0, 0, 0, .45); transition: background-color var(--d-feedback) var(--ease-out), transform var(--d-feedback) var(--ease-out); } .zap-flutuante:hover { background: var(--accent-strong); transform: translateY(-2px); } .zap-flutuante:active { transform: translateY(0); } .zap-flutuante svg { position: relative; z-index: 1; } /* o anel que pulsa devagar */ .zap-flutuante__anel { position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--accent); pointer-events: none; animation: zap-pulso 3.2s var(--ease-out) infinite; } @keyframes zap-pulso { 0% { transform: scale(1); opacity: .6; } 70% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(1.6); opacity: 0; } } /* --- entrada por rolagem ------------------------------------------- Só esconde se o JS marcou o . Sem JS — ou se o observador falhar — o conteúdo continua visível. */ html.tem-js .revelar { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); } html.tem-js .revelar.visivel { opacity: 1; transform: none; } /* --- o título do herói ----------------------------------------------- O `base.css` veio COMPILADO do gi.adv.br: só existem as classes utilitárias que aquele site usou. Inventar `text-[clamp(38px,5.9vw,72px)]` no HTML não cria regra nenhuma — o título cai para os 16px do navegador e parece «pequeno demais» quando na verdade está sem estilo. Por isso o corpo desta página mora aqui, e a classe do HTML fica sendo a que existe (64px), como rede. O título dela tem 6 palavras contra as 12 do Marcus: aguenta mais corpo. */ #topo h1 { font-size: clamp(34px, 5.9vw, 76px); } @media (max-width: 767px) { #topo h1 { font-size: clamp(28px, 7.6vw, 42px); } } /* --- lista de itens dentro do cartão de área ------------------------- Cada área traz os serviços que o escritório de facto lista, e não um parágrafo. O traço dourado faz o papel do marcador. */ .lista-itens { list-style: none; margin: 0; padding: 0; } .lista-itens li { position: relative; padding-left: 18px; margin-bottom: 6px; font-size: 13.5px; line-height: 1.5; } .lista-itens li:last-child { margin-bottom: 0; } .lista-itens li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 1px; background: var(--accent); opacity: .85; } /* --- avaliações ---------------------------------------------------- */ /* Os pontos do carrossel só existem onde há carrossel. O alvo de toque é o botão inteiro (24 px); a bolinha é só o desenho, por isso vive no ::before. */ .carrossel-pontos { display: none; } @media (max-width: 767px) { .carrossel-pontos { display: flex; justify-content: center; gap: 2px; margin-top: 18px; } } .carrossel-ponto { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; } .carrossel-ponto::before { content: ""; display: block; width: 7px; height: 7px; border-radius: 999px; background: color-mix(in srgb, var(--fg-soft) 38%, transparent); transition: width var(--d-feedback) var(--ease-out), background-color var(--d-feedback) var(--ease-out); } .carrossel-ponto.ativo::before { width: 20px; background: var(--accent); } .aspas::before { content: "“"; display: block; font-family: var(--font-cormorant), Georgia, serif; font-size: 44px; line-height: .6; color: var(--accent-text); margin-bottom: 12px; } @media (prefers-reduced-motion: reduce) { html.tem-js .revelar { opacity: 1; transform: none; transition: none; } .bio-icone-pulso, .zap-flutuante__anel { animation: none; } /* sem o movimento, mas o fade de entrada fica: é curto e não incomoda */ .heroi-filme::before { animation: heroi-entra 1.4s var(--ease-out) both; } } /* --- utilitários que o build original não gerou ------------------- */ .justify-end { justify-content: flex-end; } .border-fg-soft\/30 { border-color: color-mix(in srgb, var(--fg-soft) 30%, transparent); } .hover\:border-fg-soft\/70:hover { border-color: color-mix(in srgb, var(--fg-soft) 70%, transparent); } /* âncoras não podem parar debaixo do cabeçalho fixo */ main > section[id], footer[id] { scroll-margin-top: 104px; } /* --- credito da Imagine, no rodape ---------------------------------- Subtil por pedido: 10px em maiusculas, a 55% de opacidade, e so acende ao passar o rato. O `space-y-4` do bloco do rodape ja da o afastamento, por isso aqui nao entra `margin-top` - somariam. A logo vive dentro do plugin e troca com o tema, exatamente como a marca d'agua do cliente algumas linhas acima. */ .credito-imagine { display: inline-flex; align-items: center; gap: 9px; color: var(--fg-mute); opacity: .55; transition: opacity .28s ease, color .28s ease; } .credito-imagine:hover, .credito-imagine:focus-visible { opacity: 1; color: var(--fg-soft); } .credito-imagine__marca { display: block; width: 76px; height: 15px; background: url(../img/imagine-branca.png) no-repeat left center; background-size: contain; } html[data-theme="light"] .credito-imagine__marca { background-image: url(../img/imagine-escura.png); }