/* ============================================================ KIT OURO — camada 2, variação do kit Moderno (Layout 3) Dra. Ana Paula Macarini, Macarini Face e Sorriso (Jacareí), 05/11/2026. O corpo deste arquivo é o do kit Moderno (escada de superfícies, fio, brilho de topo, luz, lista com luz). Os NOMES das variáveis são os dele, como PAPÉIS: "--cacau" é o escuro dominante, "--lavanda" é o acento dos números, "--luz" é a luz quente. O que muda está no :root e no bloco "AJUSTES DO OURO", no fim. DE ONDE VEIO CADA COR (medido nas fotos dela, 05/11/2026) - Escuro: o fundo dos retratos profissionais (foto 05: #48362A, matiz 24°; foto 01: quase preto). A escada desce desse marrom-espresso. - Claro: o mármore da recepção (neutro, ~#C6C6C0 na foto), aquecido um nada para o branco não ficar hospitalar. - Acento: o dourado do "M" da logo na parede (#C6C084 a #D8CCA8, um champanhe, não amarelo). Só em número medido, como a lavanda. - Luz: a madeira do chão e do ripado (#9C7242, matiz 31°). FONTES: Bodoni Moda (serifada de alto contraste: lentes de porcelana, estética do sorriso, premium) + Jost no texto e nos rótulos. A monoespaçada do Moderno tem cara de tecnologia; aqui não cabe. ============================================================ */ :root { --fonte-display: 'Bodoni Moda', 'Didot', Georgia, serif; --fonte-corpo: 'Jost', system-ui, -apple-system, sans-serif; /* O papel da mono (rótulo, número, etiqueta) passa para a Jost em caixa alta: a separação de papéis fica, a cara de terminal sai. */ --fonte-mono: 'Jost', system-ui, -apple-system, sans-serif; /* --- Escuro: espresso dos retratos ---------------------- */ --cacau-fundo: #17110D; /* 0 · piso */ --cacau: #231A14; /* 1 · banda */ --cacau-claro: #342820; /* 2 · card */ --cacau-alto: #45362C; /* 3 · card sobre card, hover */ /* --- Claro: o mármore ------------------------------------- */ --creme: #FBF9F5; --creme-fundo: #F2EDE5; --areia: #E2D8CA; /* --- Texto ------------------------------------------------ */ --tinta: #1F1712; /* 16,8:1 no creme */ --tinta-fraca: #6A5A4E; /* 6,3:1 no creme · 5,7:1 no creme-fundo */ --sobre-escuro: #F3ECE2; /* 14,6:1 no cacau */ --sobre-escuro-medio: #C4B5A5; /* 8,5:1 */ --sobre-escuro-fraco: #B0A090; /* 6,7:1 · 5,6:1 no card */ --sobre-card-fraco: #E2D8CA; /* 10,1:1 no card */ --borda-no-escuro: #3D2F26; --fio-no-claro: #EAE3D8; --brilho-topo: inset 0 1px 0 rgb(255 255 255 / 0.06); --curva: cubic-bezier(0.32, 0.72, 0, 1); --duracao-hover: 200ms; /* --- Champanhe do "M": o acento, só em número medido ------- */ --lavanda: #D6C79A; /* 10,2:1 no cacau · 8,5:1 no card */ /* O mesmo dourado escurecido, para rótulo em fundo CLARO. */ --ouro-no-claro: #7A6034; /* 5,4:1 no creme */ /* --- Luz: a madeira ---------------------------------------- */ --luz: #C99A62; --erro: #A33A22; --raio-p: 0; --raio-m: 0; --raio-pilula: 0; } body { font-family: var(--fonte-corpo); color: var(--sobre-escuro); background: var(--cacau); } /* --- Tipografia ------------------------------------------- A grotesca faz TUDO que é fala. A monoespaçada faz tudo que é etiqueta. A separação é rígida e é ela que dá o tom do kit. */ .display, .titulo { font-family: var(--fonte-display); font-weight: 700; } /* Tracking negativo forte: Space Grotesk foi desenhada com espaço de sobra, e em tamanho de display isso lê como frouxo. */ .display { letter-spacing: -0.035em; } .titulo { letter-spacing: -0.025em; } .sobrelinha { font-family: var(--fonte-mono); font-weight: 400; letter-spacing: 0.1em; /* menos que os 0,14 do kit de saúde: mono já vem espaçada, e somar os dois esparrama */ color: var(--sobre-escuro-medio); } .conduz { color: var(--sobre-escuro-medio); } /* --- Seção clara: a pausa dentro do escuro ------------------ Aqui a polaridade inverte por completo. É o ritmo do kit: blocos escuros longos, cortados por um claro que respira. */ .secao-clara { background: var(--creme); color: var(--tinta); } .secao-clara .conduz, .secao-clara .texto-corrido { color: var(--tinta-fraca); } .secao-clara .sobrelinha { color: var(--tinta-fraca); } .secao-fundo { background: var(--cacau-fundo); } /* --- Botões: a ação é INVERSÃO, não cor --------------------- A referência não tem botão colorido: ele é sempre o oposto do fundo. Isso é mais forte do que parece — a ação vira o ponto de maior contraste da tela, e nenhum outro elemento pode competir. */ .botao { font-family: var(--fonte-mono); font-weight: 700; font-size: var(--texto-peq); letter-spacing: 0.08em; text-transform: uppercase; } /* Uma reflexão atravessa o botão ao passar o mouse. Não é gradiente de fundo, que brigaria com o canto reto e o chapado do kit — é uma faixa de luz cruzando uma superfície sólida, como acontece em material de verdade. Some sozinha ao sair, e sob movimento reduzido nem entra. */ .botao { position: relative; overflow: hidden; isolation: isolate; } .botao::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, var(--luz) 40%, transparent) 50%, transparent 62%); transform: translateX(-120%); transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1); } .botao:hover::after, .botao:focus-visible::after { transform: translateX(120%); } @media (prefers-reduced-motion: reduce) { .botao::after { display: none; } } /* Mas NÃO no botão principal: ele ganhou a luz contínua logo abaixo, e duas luzes no mesmo elemento é uma competindo com a outra. Uma por estado — contínua em repouso, escala no hover. O botão secundário fica com a faixa, que é o efeito dele. */ .botao-principal::after { display: none; } .botao-principal { background: var(--creme); color: var(--tinta); } /* ============================================================ A LUZ QUE VAI E VEM — adaptado do CSS que o Daniel usa nos botões da Orbis (docs/Recursos/codigos-do-daniel.md). O original é Elementor e faz três coisas. Entram duas: ENTRA a luz percorrendo o botão sem parar, 5s, ida e volta. É o que dá vida sem depender do cursor — e num CTA de página de conversão isso é a função, não enfeite. ENTRA o `scale` no hover, que é resposta física ao cursor. SAI `border-radius: 10px`. Decisão do kit, canto reto. SAI a pilha de sombras 3D (`0 5px 0 #2a4575` mais um borrão de 30px a 56% de alfa). Contado nos 74 DESIGN.md: 64 evitam drop shadow, e esse borrão é exatamente a "harsh drop shadow" que a high-end-visual-design proíbe por nome. ⚠ O ORIGINAL TEM UM BUG, e vale avisar a Orbis: a primeira sombra é `inset 0px 0px 5px 5px #,` — um `#` sozinho, que não é cor válida. Quando um valor da lista é inválido, o navegador descarta a DECLARAÇÃO INTEIRA, e nem `!important` salva. Ou seja: hoje aquele botão não tem sombra nenhuma das três, nem a de baixo-relevo. POR QUE EU NÃO ANIMO `background-position`, que é o que o original faz: essa propriedade força REPINTURA a cada quadro. Com cinco botões numa página, rodando infinito, é repintura constante — cara no celular. `transform` roda na GPU e faz o mesmo desenho. Mesma luz, sem o custo. ============================================================ */ .botao-principal::before { content: ""; position: absolute; inset: -1px; z-index: -1; background: linear-gradient(100deg, transparent 34%, color-mix(in srgb, var(--luz) 42%, transparent) 50%, transparent 66%); animation: luz-passando 5s ease-in-out infinite; will-change: transform; } @keyframes luz-passando { 0%, 100% { transform: translateX(-62%); } 50% { transform: translateX(62%); } } /* Sob movimento reduzido a luz SAI, não para. O núcleo encurta toda animação para uma volta de 0,01ms, e sem keyframe ativo o `transform` cai para `none` — a faixa ficava estacionada no MEIO do botão, uma mancha dourada atrás do texto. Medido no print. */ @media (prefers-reduced-motion: reduce) { .botao-principal::before { display: none; } } /* O hover: cresce e se arma. O `scale` é o que o Daniel gosta no botão da Orbis; 1,03 e não 1,05 porque o nosso botão é largo — quanto maior o elemento, menos escala ele precisa para o olho registrar o mesmo salto. Em botão de 300px, 5% são 15px de crescimento e lê como pulo. */ .botao-principal:hover { transform: scale(1.03); } /* E afunda ao clicar, que é a outra metade do gesto: o original usa scale(1) partindo de 1,05; aqui vai abaixo do repouso, para o clique ter reação própria em vez de só desfazer o hover. */ .botao-principal:active { transform: scale(0.99); } /* O ANEL SAIU. Eu tinha escrito aqui que "o hover não clareia, ele se ARMA: um anel por dentro, na cor do fundo". Era defensável e era demais: com a luz contínua já rodando e o scale no hover, o anel virava um terceiro acontecimento no mesmo gesto, e lia como borda aparecendo. Decisão do Daniel, e ela é melhor: o hover do botão é UMA coisa só — ele cresce. Igual ao botão da Orbis, que é o que ele já sabe que converte. Menos é o ponto. */ .secao-clara .botao-principal { background: var(--tinta); color: var(--creme); } /* --- Superfícies do navegador ------------------------------- As partes que ninguém desenha continuam carregando o design. Seleção, cursor de texto, barra de rolagem, anel de foco e os algarismos vêm com o padrão do navegador, que não pertence a sistema nenhum. É o sinal mais barato de que a página foi construída, e o mais esquecido. */ ::selection { background: var(--cacau-claro); color: var(--sobre-escuro); } html { caret-color: var(--lavanda); scrollbar-color: var(--cacau-claro) var(--cacau-fundo); scrollbar-width: thin; } /* `currentColor` dava 1,46:1 no botão creme — um anel de foco invisível, que é pior que anel nenhum porque parece resolvido. A lavanda tem contraste nas duas polaridades e é o único uso dela fora de número. */ :focus-visible { outline: 3px solid var(--lavanda); outline-offset: 3px; } /* Algarismo de largura fixa onde número se compara ou se alinha. */ /* Só onde a fonte não é monoespaçada — em mono já é o padrão. */ .nota-numero, .hero-assinatura { font-variant-numeric: tabular-nums; } /* --- O número medido --------------------------------------- O dispositivo que o kit de saúde não tem: o dado em monoespaçada, grande, com a lavanda. Só entra número CONFERÍVEL. */ .medida { font-family: var(--fonte-mono); font-size: var(--texto-lg); line-height: 1; font-weight: 700; color: var(--lavanda); /* `font-variant-numeric` e não `font-feature-settings: 'tnum'`: fazem a mesma coisa, mas o segundo é a porta de baixo — qualquer outra regra que declare `font-feature-settings` apaga esta inteira, porque a propriedade substitui a lista toda em vez de somar. A de cima não tem esse problema. (A Space Mono já tem dígito de largura fixa por ser monoespaçada; isto garante o alinhamento se o kit trocar de fonte um dia.) */ font-variant-numeric: tabular-nums; } /* A monoespaçada fica no NÚMERO, onde ela alinha algarismo. Sai do rótulo, onde ela era só fantasia de "técnico" — que é exatamente o tell que as duas skills apontam. */ .medida-rotulo { font-size: var(--texto-micro); line-height: 1.4; color: var(--sobre-escuro-fraco); margin-top: var(--e2); } /* DENTRO DO CARTÃO DE VIDRO o rótulo sobe para a tinta mais clara, e isto é a mesma lição da escada de superfícies: superfície diferente precisa de degrau de tinta diferente. Aqui é pior que no card comum, porque o fundo é uma FOTO — ele muda de cliente para cliente. Medido nos pixels renderizados, com o tom fraco: 2,7:1 sobre a foto do consultório. Tinta fraca sobre fundo imprevisível é aposta, e numa ferramenta que gera página nova toda semana a aposta sai cara. */ .cartao-dado .medida-rotulo, .cartao-dado .cartao-rotulo { color: var(--sobre-escuro); } /* --- Cartão de dado sobre a foto ---------------------------- O recurso mais copiável da referência: um retângulo escuro, meio transparente, encostado na foto, com um rótulo mono e um número. Ele faz a foto virar evidência em vez de enfeite. */ /* Vidro embaçado, de verdade. A primeira versão tinha 88% de opacidade e 2px de desfoque — na prática era um quadrado marrom com transparência, e o Daniel viu na hora. Vidro precisa de três coisas ao mesmo tempo: fundo BEM translúcido, desfoque forte o bastante para a imagem atrás virar cor em vez de forma, e uma borda clara de 1px que faz a luz "pegar" na quina. Sem a borda, fica névoa; com ela, fica painel. */ .cartao-dado { /* 74% e não 52%, e o motivo é medido NOS PIXELS, não no token: este cartão flutua sobre uma FOTO, então o contraste do texto depende da imagem que estiver atrás — e foto clara deixava o rótulo ilegível. Medido no recorte renderizado, antes: 2,70:1 sobre a foto do consultório e 3,55:1 no hero. Os dois abaixo do mínimo de 4,5. Subir a opacidade firma o fundo e tira a leitura das mãos da foto. O vidro continua: `backdrop-filter` segue borrando, e 26% de transparência ainda deixa a imagem aparecer por baixo. Perde-se um pouco de translucidez para ganhar texto legível em qualquer foto, e numa ferramenta que gera página para cliente diferente toda semana, esse é o lado certo da troca. */ background: color-mix(in srgb, var(--cacau-fundo) 74%, transparent); border: 1px solid color-mix(in srgb, var(--sobre-escuro) 20%, transparent); padding: var(--e4) var(--e6); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); /* O brilho de topo, no elemento em que ele tem mais função: vidro. A skill descreve isto como "edge refraction" — a aresta de cima de uma placa de vidro pega luz porque o material tem espessura. Aqui vale um pouco mais que o 0,08 padrão, porque a placa está sobre uma FOTO, e foto tem ruído que engole detalhe fino. */ box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14); } /* Quem não tem backdrop-filter recebe o fundo quase opaco, senão o texto fica ilegível sobre a foto. */ @supports not (backdrop-filter: blur(1px)) { .cartao-dado { background: color-mix(in srgb, var(--cacau-fundo) 92%, transparent); } } /* --- Lista com régua e ícone de traço ----------------------- */ .lista-regua { list-style: none; padding: 0; margin: 0; } .lista-regua li { display: flex; align-items: center; gap: var(--e3); padding-block: var(--e3); border-bottom: 1px solid var(--borda-no-escuro); font-size: var(--texto-peq); } .secao-clara .lista-regua li { border-bottom-color: var(--areia); } .lista-regua svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; opacity: 0.65; } /* --- Lista com luz ------------------------------------------ Adaptada do "radio glider" do uiverse (MIT). No original a luz vai até o item CLICADO; aqui ela vai até o item sob o cursor, e no celular até o item que passa pelo meio da tela. Quem decide qual é o luz-lista.js; este bloco só desenha. Do original entram três coisas e saem três. ENTRA o trilho de 1px que some nas pontas ENTRA a barra com brilho desfocado em volta ENTRA o degradê que escorre da barra para dentro do item SAI o amarelo #f7e479, que é cor de outro projeto. Aqui é a --luz, o âmbar medido na foto SAI a curva com quique (cubic-bezier(.37,1.95,.66,.56)). Passa do ponto e volta, e em página de consultório isso lê como brinquedo. Vai a --curva do kit SAI a altura dividida em partes iguais. Nossos itens têm alturas diferentes, e no celular o texto quebra em mais linhas: a barra pararia fora do lugar. O script mede o item de verdade e passa posição e altura em --luz-y e --luz-h Tudo em pseudo-elemento: o trilho é o FUNDO da lista, a barra é o ::before, o degradê é o ::after. Nada é inserido no HTML, então a lista continua sendo uma lista para o leitor de tela. `isolation` pela lição dos passos: os dois pseudos ficam em z-index -1 para passar POR TRÁS do texto, e sem contexto próprio eles desceriam para trás do fundo da seção. */ .lista-luz { --trilho: var(--borda-no-escuro); --barra: var(--luz); --escorrido: color-mix(in srgb, var(--luz) 12%, transparent); position: relative; isolation: isolate; padding-left: var(--e4); background: linear-gradient(to bottom, transparent, var(--trilho) 18%, var(--trilho) 82%, transparent) left top / 1px 100% no-repeat; } .secao-clara .lista-luz { /* Âmbar sobre creme quase não se vê: a barra fica cacau, e o âmbar sobra só no brilho em volta dela e no escorrido. */ --trilho: var(--areia); --barra: var(--cacau); --escorrido: color-mix(in srgb, var(--luz) 16%, transparent); } .lista-luz::before, .lista-luz::after { content: ""; position: absolute; left: 0; top: 0; z-index: -1; height: var(--luz-h, 0px); transform: translateY(var(--luz-y, 0px)); opacity: 0; pointer-events: none; transition: transform 480ms var(--curva), height 480ms var(--curva), opacity 280ms var(--curva); } .lista-luz::before { width: 2px; background: linear-gradient(to bottom, transparent, var(--barra) 50%, transparent); /* drop-shadow e não box-shadow: ele segue o desenho do degradê, então o brilho também some nas pontas, como no original. */ filter: drop-shadow(0 0 6px var(--luz)); } .lista-luz::after { /* Ajustável por lista: 24rem cobre um item de lista curta, mas numa linha de tabela de 1.500px o brilho morria antes do título. */ width: var(--escorrido-largura, min(70%, 24rem)); background: linear-gradient(90deg, var(--escorrido), transparent); } .lista-luz.luz-acesa::before, .lista-luz.luz-acesa::after { opacity: 1; } /* A primeira vez que acende não tem de onde deslizar: aparece no lugar. */ .lista-luz.luz-instante::before, .lista-luz.luz-instante::after { transition: opacity 280ms var(--curva); } /* O item aceso sobe um degrau de tinta. */ .lista-luz > li { transition: color var(--duracao-hover) var(--curva); } .lista-luz > li.luz-ativo { color: var(--sobre-escuro); } .secao-clara .lista-luz > li.luz-ativo { color: var(--tinta); } .lista-luz svg { transition: color var(--duracao-hover) var(--curva), opacity var(--duracao-hover) var(--curva); } .lista-luz > li.luz-ativo svg { color: var(--luz); opacity: 1; } /* --- WhatsApp ----------------------------------------------- */ .zap-flutuante { position: fixed; right: var(--e4); bottom: var(--e4); z-index: 50; background: var(--creme); color: var(--tinta); font-family: var(--fonte-mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: var(--e3) var(--e6); box-shadow: 0 2px 10px rgba(26, 14, 8, 0.4); } body:has(.zap-flutuante) { padding-bottom: 4.5rem; } @media (min-width: 48rem) { body:has(.zap-flutuante) { padding-bottom: 0; } } /* --- Véu do hero -------------------------------------------- Mais fechado que o do kit de saúde porque o fundo é escuro: a foto precisa emendar no painel sem costura visível. */ .hero-veu { background: linear-gradient(to top, rgba(28, 14, 8, 0.94) 0%, rgba(28, 14, 8, 0.72) 34%, rgba(28, 14, 8, 0.40) 66%, rgba(28, 14, 8, 0.58) 100%); } /* ============================================================ LUZ E SUPERFÍCIE A página era cor chapada. Cor chapada não tem profundidade porque não tem de onde a luz vir. Uma fonte só, sempre do ALTO À ESQUERDA, que é de onde vem a janela nas fotos do consultório. Toda superfície escura recebe a mesma queda de luz; toda superfície clara recebe o mesmo calor no topo. Fonte que muda de lugar entre seções destrói a ilusão na hora. ============================================================ */ /* O GRADIENTE MUDOU DE EMPREGO, e isto é o item 8 da folha de valores. ANTES: as três superfícies levavam um radial de --luz espalhado por toda a área. Toda superfície com um brilho difuso. O relato de quem viu a página foi exato: "percebi um leve gradient nas sessões escuras, nada além". Difuso não lê como profundidade — lê como névoa. Linear, literal: "No atmospheric gradients, no spotlight cards." Ferrari usa gradiente em exatamente dois lugares, e um deles é a TRANSIÇÃO ENTRE SEÇÕES (linear-gradient(180deg, #3c3c3c, #030303 64%)). AGORA: a luz marca a JUNTA. Ela entra na borda de cima, onde a seção anterior encosta nesta, e morre em 14rem. Deixa de ser atmosfera e passa a ser acontecimento — a mesma diferença entre esfregada e evento que a gente aprendeu nas entradas de bloco. A profundidade que o gradiente tentava fazer agora é trabalho da escada de superfícies e do fio, que é como os 74 fazem. */ .superficie-escura { background-color: var(--cacau); background-image: /* A junta: luz na borda de cima, apagando rápido. */ linear-gradient(to bottom, color-mix(in srgb, var(--luz) 9%, transparent) 0, transparent 14rem), /* E o peso acumulando no rodapé do bloco, que dá o chão. */ linear-gradient(to bottom, transparent 78%, color-mix(in srgb, #120804 22%, transparent) 100%); } .superficie-funda { background-color: var(--cacau-fundo); background-image: linear-gradient(to bottom, color-mix(in srgb, var(--luz) 6%, transparent) 0, transparent 10rem); } .superficie-clara { background-color: var(--creme); background-image: linear-gradient(to bottom, color-mix(in srgb, var(--luz) 7%, transparent) 0, transparent 12rem); } /* ---------- O card elevado: o degrau 2 finalmente em uso ---------- Medido antes desta mudança: os cards de depoimento usavam --cacau-fundo (#2C170E) DENTRO de uma seção --cacau (#49291B). O card era mais escuro que a seção em que estava — afundado, não elevado. E o #60473C, medido na foto justamente como superfície elevada, não aparecia em lugar nenhum da página. Card sobe, nunca desce. Fio de 1px para recortar da banda, e o brilho de topo para a aresta pegar luz. Nenhuma sombra: é o que os 74 fazem. */ .superficie-card { background-color: var(--cacau-claro); border: 1px solid var(--borda-no-escuro); box-shadow: var(--brilho-topo); } /* Sobre superfície clara o mesmo papel, com o fio que faltava. */ .secao-clara .superficie-card, .superficie-clara .superficie-card { background-color: var(--creme-fundo); border-color: var(--fio-no-claro); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7); } /* ============================================================ AJUSTES DO OURO — o que a troca de fonte exige A grotesca do Moderno pedia peso 700 e tracking negativo forte. A Bodoni em 700 fica pesada e fecha os contrapontos: o peso de título aqui é 500, e o tracking vai quase a zero. ============================================================ */ .display, .titulo { font-weight: 500; } .display { letter-spacing: -0.015em; } .titulo { letter-spacing: -0.01em; } .topo-marca, .rodape-marca { font-weight: 500; letter-spacing: 0; } .passo-titulo, .tratamento-titulo { font-weight: 500; letter-spacing: 0; } /* Itálico da Bodoni: é ele que dá o tom de editorial de beleza. A palavra entre asteriscos no conteúdo vira . */ .display em, .titulo em { font-style: italic; font-weight: 400; color: var(--lavanda); } .superficie-clara .titulo em, .superficie-clara .display em { color: var(--ouro-no-claro); }