/* ============================================================ MUNDO | LP "Consultoria para clínicas" — a página da noite ------------------------------------------------------------ O resto vem de fora, nesta ordem: /ferramentas/_motor/sistema.css cores, fontes, o papel /assets/nav.css a barra /assets/lp.css as peças de toda LP ──────────────────────────────────────────────────────────── POR QUE ESTA PÁGINA É ESCURA O site inteiro é papel sobre uma mesa clara. Só um bloco foge disso: a Imersão, na home, que é papel escuro. Escuro já quer dizer "o de cima" neste sistema, então a landing page desse serviço não inventa uma linguagem nova: ela acende a mesma mesa à noite. A metáfora não muda. Muda a luz. mesa #16281E, com a textura de pontinhos em claro folha #F3ECDD, o bege da paleta, um tom abaixo do papel do resto do site. O porquê está lá embaixo, no :root, junto com a medida de contraste ouro #E8A26A, o mesmo âmbar da Imersão da home ──────────────────────────────────────────────────────────── AS TRÊS REGRAS DO ESCURO, E POR QUE ELAS EXISTEM 1 · Elevação é camada, não sombra. No claro, uma peça sobe ganhando sombra. No escuro a sombra não aparece: quem sobe fica mais claro. Por isso existem --mesa-2 e --mesa-3, e por isso a sombra do sistema é quase toda trocada por um fio de luz no topo da peça. 2 · Nada de branco puro nem de cor saturada. Branco puro sobre escuro serra o olho, e cor saturada vibra. Por isso o texto é #F4EFE2 e o acento é um âmbar já dessaturado, não um laranja. 3 · Nada de letra fina. Texto claro sobre fundo escuro já parece mais fino do que é. O corpo continua no peso normal e o que era 45% de opacidade sobe. ──────────────────────────────────────────────────────────── O RITMO DA PÁGINA 01 mesa escura a abertura, só tipo e a figura 02 folha clara onde vaza 03 folha clara os números 04 FOLHA ESCURA o que eu faço, o termo 05 folha clara como começa 06 folha clara quem faz 07 folha clara dúvidas 08 MESA ESCURA a carta, com moldura de ouro Duas peças escuras e nada mais. Uma página inteira escura cansa de ler; escuro que volta duas vezes vira gesto. ============================================================ */ :root{ /* ── A mesa, e as duas camadas acima dela ── */ --mesa:#16281E; --mesa-2:#1E3529; --mesa-3:#24402F; /* ── A luz: off-white, nunca branco puro ── */ --luz:#F4EFE2; --luz-76:rgba(244,239,226,.78); --luz-52:rgba(244,239,226,.56); --luz-34:rgba(244,239,226,.38); --fio-luz:rgba(244,239,226,.22); --fio-luz-forte:rgba(244,239,226,.42); /* ── O ouro: o mesmo âmbar da Imersão da home ── */ --ouro:#E8A26A; --ouro-fraco:rgba(232,162,106,.12); --ouro-fio:rgba(232,162,106,.42); /* Mais respiro que as outras páginas. Espaço é o que faz uma página parecer cara. */ --secao:clamp(3.4rem,6.4vw,6rem); /* ── O PAPEL, UM TOM ABAIXO ── No resto do site a folha é #FBF7EE, quase branca, e ela funciona porque a mesa em volta também é clara. Aqui a mesa é escura: papel quase branco no meio do escuro vira lanterna e cansa a vista em página longa. Então a folha desce um degrau dentro da própria paleta, para o bege que já existia como segunda camada, e a segunda camada desce junto para as duas continuarem se separando. folha #FBF7EE → #F3ECDD (o --folha-2 da paleta) folha-2 #F3ECDD → #EAE0CD (a meio caminho da mesa clara) Papel mais escuro come contraste do texto, então as três tintas fracas descem junto. Medido: no bege novo, a cinza de apoio sai de 4,06:1 para 5,73:1 e a terracota de 4,17:1 para 5,24:1. As duas passam a cumprir o mínimo de 4,5:1 que antes não cumpriam. */ --folha:#F3ECDD; --folha-2:#EAE0CD; --tinta-45:#545E57; --tinta-25:#79837C; --terra:#9C4A1A; --terra-fraca:rgba(156,74,26,.085); --terra-fio:rgba(156,74,26,.34); --fio-terra:rgba(156,74,26,.55); } /* A textura da mesa vira luz sobre escuro, em vez de tinta sobre claro. Sem isto os pontinhos somem. */ body::before{ background-image:radial-gradient(rgba(244,239,226,.085) .5px,transparent .5px); opacity:1; } /* Papel claro sobre mesa escura projeta sombra de verdade, e ela precisa ser mais funda para o papel descolar do fundo. */ .folha,.carta,.pasta-folha{ box-shadow:0 2px 0 rgba(0,0,0,.28), 0 30px 60px -28px rgba(0,0,0,.75); } /* ============================================================ 1 · A BARRA, À NOITE ------------------------------------------------------------ A barra clara do resto do site brilharia demais aqui em cima e roubaria a manchete. Ela vira uma peça da mesa, elevada uma camada, com o botão em ouro. ============================================================ */ .navbar--campanha{ background:var(--mesa-2); border-color:var(--fio-luz-forte); box-shadow:0 1px 0 rgba(0,0,0,.3), 0 18px 34px -22px rgba(0,0,0,.8); } .navbar--campanha.scrolled{ background:var(--mesa-3); box-shadow:0 1px 0 rgba(0,0,0,.35), 0 26px 46px -24px rgba(0,0,0,.9); } /* O texto do logo é desenhado com currentColor dentro do símbolo, então quem o pinta é a cor herdada do link. CSS apontando para o não alcança: o instancia o desenho numa árvore própria, fora do alcance do seletor. */ .navbar--campanha .nav-logo,.footer-logo{color:var(--luz)} .navbar--campanha .nav-cta{ background:var(--ouro);color:#22160C;border-color:var(--ouro); box-shadow:0 1px 0 rgba(0,0,0,.28); } .navbar--campanha .nav-cta:hover{background:#EEB27F;border-color:#EEB27F} .pular{background:var(--ouro);color:#22160C} /* ============================================================ 2 · A ABERTURA, SOBRE A MESA ------------------------------------------------------------ Uma coisa por seção, e nesta seção a coisa é a frase. Por isso ela é a maior da página inteira e tem espaço de sobra em volta. ============================================================ */ .abertura{padding:clamp(7rem,12vw,10.5rem) 0 clamp(3rem,6vw,5rem)} /* Nas outras landing pages a figura da abertura some no celular, porque lá ela ilustra. Aqui ela É o argumento: os três furos dela são as três partes da Ficha 02. Então no celular ela não some, desce. */ .abertura-fig{display:block;margin-top:clamp(26px,5vw,38px)} @media(min-width:1024px){.abertura-fig{margin-top:0}} .abertura-cabeco{border-bottom-color:var(--fio-luz-forte)} .abertura-cabeco .rotulo{color:var(--ouro)} .abertura-cabeco .fim{color:var(--luz-34)} .abertura h1{color:var(--luz);font-variation-settings:'wdth' 88,'opsz' 96} /* No claro o verde marca a metade que carrega o argumento. Aqui o verde some no fundo, então quem marca é o ouro. */ .abertura h1 em{color:var(--ouro)} .abertura-sub{color:var(--luz-76)} .abertura-apoio{color:var(--luz-52)} /* As etiquetas só viram claras DENTRO da abertura. O .abertura-tags é reaproveitado na Ficha 06, que é folha clara: sem o .abertura na frente, as etiquetas de lá ficavam quase brancas sobre papel claro e sumiam. */ .abertura .abertura-tags .etq{ border-color:var(--fio-luz);color:var(--luz-76);background:rgba(244,239,226,.04); } .abertura .abertura-tags .etq--verde{ border-color:var(--ouro-fio);color:var(--ouro);background:var(--ouro-fraco); } .fig-cab .mono-s{color:var(--luz-34)} /* O botão de ouro: a única peça saturada da página. */ .btn--ouro{ background:var(--ouro);color:#22160C;border-color:var(--ouro); box-shadow:0 1px 0 rgba(0,0,0,.3), 0 14px 26px -16px rgba(0,0,0,.8); } .btn--ouro:hover{background:#EEB27F;border-color:#EEB27F;box-shadow:0 1px 0 rgba(0,0,0,.3), 0 20px 34px -18px rgba(0,0,0,.9)} /* ============================================================ 3 · A JORNADA, E OS TRÊS FUROS ------------------------------------------------------------ A figura da abertura é a página inteira em um desenho: seis estações do caminho do paciente e três lugares onde ele escapa. Os três furos são exatamente as três partes da Ficha 02. É HTML, e não desenho: assim o texto é texto de verdade, com a fonte da marca, e quem usa leitor de tela ouve a jornada inteira em vez de ouvir "imagem". ============================================================ */ .jornada{ background:var(--mesa-2);border:1px solid var(--fio-luz-forte);border-radius:2px; box-shadow:0 1px 0 rgba(244,239,226,.06) inset, 0 26px 50px -28px rgba(0,0,0,.9); overflow:hidden; } .jornada-cab{ display:flex;align-items:center;justify-content:space-between;gap:14px; padding:12px 17px 11px;border-bottom:1px solid var(--fio-luz);background:var(--mesa-3); } .jornada-cab .mono-s{color:var(--luz-34)} .jornada-cab .mono-s:last-child{color:var(--ouro)} .jornada-corpo{padding:clamp(18px,2.6vw,24px) clamp(16px,2.4vw,20px) clamp(20px,2.8vw,26px)} /* O tronco é uma linha só, desenhada no