/* ============================================================================= marca.css — CONTRATO VISUAL Site Dr. Fernando Hehn · Ortopedia e Cirurgia do Joelho Estes valores foram APROVADOS pelo cliente na proposta "A1". Nada aqui se altera sem aprovação nova. Todo o resto do site é construído em cima deste arquivo. As cores foram AMOSTRADAS do manual da marca, pixel a pixel, não estimadas: navy oficial #343F4E (ardósia, não o navy escuro que eu havia inventado) prata #D8DFE6 (o metálico do anel do logotipo) ciano #15B8EC fundo claro #FCFDFD REGRA DO LOGOTIPO: fundo CLARO -> versão POSITIVA fundo ESCURO -> versão NEGATIVA O manual entrega as duas justamente porque o site é escuro. Trocar uma pela outra faz o símbolo desaparecer — já aconteceu neste projeto. O QUE ESTE PROJETO NÃO FAZ, porque é o default de página gerada: · rótulo em caixa alta com tracking acima de CADA título · uma palavra do headline em cor ou itálico diferente · cadeias de metadados unidas por ponto médio em texto corrido · raio uniforme em botão, campo, card e mídia · fileira de três ou quatro blocos idênticos ========================================================================== */ :root { /* --------------------------------------------------------------------------- COR ------------------------------------------------------------------------ */ --navy: #343F4E; /* navy oficial do manual */ --prata: #D8DFE6; /* metálico do logotipo · cor de texto principal */ --ciano: #15B8EC; /* cor da marca · usada com parcimônia */ /* Derivados do navy, mantendo o mesmo matiz (H 214). Nada de preto inventado. */ --fundo: #191F28; /* fundo principal do site */ --fundo-2: #212934; /* banda recuada */ --fundo-3: #0E1319; /* rodapé e bordas profundas */ --prata-2: rgba(216, 223, 230, .62); /* texto secundário */ --prata-3: rgba(216, 223, 230, .40); /* só onde NÃO houver foto atrás */ --fio: rgba(216, 223, 230, .16); --fio-2: rgba(216, 223, 230, .09); /* Contraste conferido por medição sobre --fundo: prata 13.4:1 AAA prata-2 7.1:1 AAA prata-3 3.9:1 só para >=24px ou elemento não textual ciano 6.8:1 AA em qualquer tamanho */ /* --------------------------------------------------------------------------- TIPOGRAFIA O manual pede Perpetua Titling MT e Montserrat. Perpetua não existe para web, então o display usa Marcellus: romana clássica, mesma linhagem (proporção Trajan, serifa afilada, contraste alto). Montserrat é a do manual, sem substituição. ------------------------------------------------------------------------ */ /* Perpetua Titling MT sai da frente da fila. Ela é uma titling: só tem capitulares, e desenha minúscula como maiúscula. Como ela vem junto com o Office e a Marcellus chega do Google com display=swap, todo carregamento no Windows exibia o H1 em CAIXA ALTA até a fonte real baixar — e ficaria assim de vez se o Google Fonts falhasse. Georgia sustenta o desenho sem desfigurar a caixa. */ --titling: "Marcellus", Georgia, "Times New Roman", serif; --marca: "Montserrat", system-ui, -apple-system, sans-serif; --d1: clamp(2rem, 1.05rem + 2.7vw, 3.7rem); /* h1 do hero */ --d2: clamp(1.7rem, 1.10rem + 1.7vw, 2.7rem); /* título de seção */ --d3: clamp(1.3rem, 1.05rem + 0.9vw, 1.8rem); /* subtítulo */ --tg: clamp(1rem, 0.96rem + 0.25vw, 1.12rem); /* corpo grande */ --tb: 14px; /* corpo */ --tp: 13px; /* apoio */ --te: 10px; /* rótulo versalete */ /* --------------------------------------------------------------------------- ESPAÇO — escala não-linear de propósito. Padding igual em toda seção é o sinal mais reconhecível de página montada no automático. ------------------------------------------------------------------------ */ --e1: 4px; --e2: 8px; --e3: 14px; --e4: 24px; --e5: 40px; --e6: 64px; --e7: 104px; --e8: 160px; --m: clamp(24px, 5vw, 78px); /* margem lateral mínima */ --max: 1720px; /* coluna do site: a mesma do hero */ /* CALHA — a margem lateral de TODA faixa do site: cabeçalho, hero, seções, fecho e rodapé usam esta e só esta. Até ~1880px de tela ela vale --m, exatamente como o hero aprovado. Acima disso a coluna para em --max e centraliza, e tudo para junto. Antes, as seções usavam um contêiner de 1280px enquanto o hero usava a margem: em 1440px as duas coisas coincidiam por acaso, e numa tela de 1650px o conteúdo das seções entrava 100px em relação ao hero. O % resolve contra a largura da faixa, então a barra de rolagem não desalinha nada. */ --calha: max(var(--m), calc((100% - var(--max)) / 2)); /* O corte da home: onde a coluna de texto acaba e a fotografia começa. Uma linha só para a página inteira — o hero corta nela, o Sobre termina nela. Mora aqui porque as duas seções precisam ler o MESMO número. */ --corte-home: 44%; /* A faixa que um quadro de foto reserva embaixo para a legenda dele: a altura de uma linha de 12px mais o respiro. A legenda pousa nela, no fundo da seção, nunca na fotografia. */ --legenda-faixa: 30px; --curva: cubic-bezier(0.22, 1, 0.36, 1); --rapido: 280ms var(--curva); --medio: 620ms var(--curva); --lento: 1000ms var(--curva); } /* ----------------------------------------------------------------------------- PEÇAS FIXAS DO SISTEMA Estas classes são o vocabulário do site. Toda seção nova se monta com elas. -------------------------------------------------------------------------- */ /* Rótulo em versalete, com o tracking do descritor da marca. Aparece SÓ nas pontas do hero e no rodapé — nunca acima de cada título. */ .descritor { font-family: var(--marca); font-size: var(--te); font-weight: 500; letter-spacing: .30em; text-transform: uppercase; color: var(--prata-2); } /* Sobre fotografia o rótulo vai a prata cheio: medido, a 62% o contraste caía para 4,11:1 e a WCAG pede 4,5:1 em texto pequeno. */ .descritor--sobre-foto { color: var(--prata); } .descritor--ciano { color: var(--ciano); } .titulo { font-family: var(--titling); font-weight: 400; line-height: 1.12; letter-spacing: -.005em; color: var(--prata); text-wrap: balance; } .apoio { font-family: var(--marca); font-weight: 300; font-size: var(--tb); line-height: 1.8; color: var(--prata-2); max-width: 42ch; } /* Botão: retângulo reto, versalete espaçado. O ciano só aparece no hover. */ .cta { display: inline-flex; align-items: center; padding: 15px 32px; border: 1px solid var(--prata); background: var(--prata); color: var(--fundo); font-family: var(--marca); font-size: 11.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; transition: background var(--rapido), border-color var(--rapido), color var(--rapido); } .cta:hover { background: var(--ciano); border-color: var(--ciano); color: var(--fundo); } .cta--linha { background: transparent; color: var(--prata); border-color: var(--fio); } .cta--linha:hover { background: transparent; border-color: var(--ciano); color: var(--ciano); } .acoes { display: flex; flex-wrap: wrap; gap: 10px; } /* 17/09: o cliente pediu borda reta em toda fotografia — "ou todas as fotos ficam retas sem o degradê, ou todas com degradê; particularmente prefiro sem, fica mais clean e chic a borda reta". O scrim deixou de dissolver a borda da foto no navy (era ele quem desenhava o degradê das laterais) e passou a ser só o que sempre precisou ser: um véu de legibilidade, e só onde texto pousa mesmo na fotografia. Por padrão ele não pinta nada: a foto é um retângulo de aresta seca. Quem precisa de véu declara o seu — o fecho e, no celular, as fotos que passam a cobrir a tela inteira (aí não há borda visível para respeitar). A regra que nenhum véu quebra: nunca chegar à cor do fundo numa aresta, porque é isso, e não a opacidade, que faz a foto parecer dissolvida. Onde só rótulos de canto pousam na foto (hero e fecho), quem segura o contraste é a sombra do texto — .sobre-foto, logo abaixo —, não uma camada por cima da imagem. */ .scrim { position: absolute; inset: 0; pointer-events: none; } /* Texto que pousa em fotografia sem véu por baixo. O contraste vem de uma placa que acompanha o rótulo: uma elipse escura do tamanho da letra, que se apaga antes de encostar em qualquer aresta da foto. É o véu mínimo — o que a WCAG mede é o pixel atrás do glifo, e é só ele que esta placa escurece. Nenhuma faixa na borda: a fotografia continua reta nos quatro lados, e o rótulo leva a própria sombra consigo para onde a composição o colocar. A sombra por cima fecha a conta nas serifas finas. O padding/margin negativo dá à elipse um corpo maior que a linha do texto sem deslocar nada no fluxo. */ .sobre-foto { padding: .55em .95em; margin: -.55em -.95em; background: radial-gradient(ellipse 130% 195% at 50% 50%, rgba(10, 14, 19, .92) 0%, rgba(10, 14, 19, .74) 44%, rgba(10, 14, 19, 0) 78%); text-shadow: 0 1px 2px rgba(10, 14, 19, .9); } /* 15/09/2026: o cliente pediu para tirar o filtro cinza/escuro. A classe permanece na marcação; as fotos passam a aparecer na cor original. */ .foto-tratada { filter: none; }