/* ============================================================ KIT MENTA — camada 2, variação do kit Primavera A mesma pele clara (botão da bolinha, lista com luz, fio), com as cores da Perfect Corpus (SJC), 15/10/2026. OS NOMES DAS VARIÁVEIS SÃO OS DA PRIMAVERA, de propósito: o layout 04 pinta por eles. Aqui eles são PAPÉIS, não cores — "--turquesa" é a cor da ação, "--verde" é a seção escura, "--lilas" é a ênfase reservada. DE ONDE VEIO CADA COR (medido nas fotos, 15/10/2026) - O fundo e a seção alternada saem da parede de CIMENTO QUEIMADO da recepção (GMN 02 e 20): cinza frio, matiz 210–240°, saturação 2–5%. O Daniel pediu branco e cinza como base, verde só de acento. - A ação sai do verde da LOGO (#42A88A, matiz 162°), escurecido no mesmo matiz até passar 4,5:1 nas duas superfícies claras. - A seção escura sai do lençol da MACA na sombra (GMN 03): #2A5A4E, matiz 165° — o mesmo verde da logo, só que no escuro. Não é cor inventada: é a marca dela no ambiente dela. - O rosa da florzinha (#BA8496) fica de fora: com o verde, briga (Daniel, 15/10). Fontes: as mesmas da Primavera (EB Garamond + Jost), que o cabeca.mjs carrega. Os posts novos dela usam serifada em caixa alta; combina. ============================================================ */ :root { --fonte-display: 'EB Garamond', 'Iowan Old Style', Georgia, serif; --fonte-corpo: 'Jost', system-ui, -apple-system, sans-serif; /* --- Fundos claros: o cimento ------------------------------ Branco puxado para o verde da marca (matiz 150°, 1%), e o cimento da parede como segunda superfície. Nunca branco puro, nunca cinza morto. */ --creme: #F6F8F7; /* fundo da página */ --creme-fundo: #E8ECEA; /* seção alternada e card claro: o cimento */ --areia: #D3DAD7; /* fio e divisória no claro */ /* --- Texto: verde quase preto, da família da marca ---------- */ --tinta: #1B2B28; /* 13,8:1 no fundo · 12,4:1 no cimento */ --tinta-fraca: #4A5C58; /* 6,6:1 no fundo · 6,0:1 no cimento */ /* --- Verde da logo: a cor da AÇÃO, em degraus -------------- O #42A88A da logo dá 2,7:1 no fundo: só ornamento. */ --turquesa: #1A6E57; /* botão, link, rótulo — 5,8:1 no fundo · 5,2:1 no cimento */ --turquesa-forte: #135444; /* hover */ --turquesa-logo: #42A88A; /* só ornamento, nunca texto */ --turquesa-apagado: #3F6F63; /* bolinha do botão e faixa de prova — o claro sobre ele dá 5,4:1 */ /* --- Verde da maca: a seção ESCURA -------------------------- */ --verde: #1F3E37; /* fundo das seções escuras */ --verde-fundo: #18322C; /* chamada final, mais fundo */ --verde-card: #2B4D45; /* card sobre o verde */ --sobre-verde: #F1F4F2; /* 10,5:1 */ --sobre-verde-medio: #C4D3CD; /* 7,5:1 · 6,0:1 no card */ --sobre-verde-fraco: #A3B8B0; /* 5,6:1 — no card, usar o médio */ --fio-no-verde: #3A5A52; /* --- Ênfase reservada -------------------------------------- A palavra em itálico do título: o verde da logo, um degrau mais escuro (3,7:1, passa em texto grande, ≥24px). No escuro, o menta claro da própria logo (#9CC6BA, 6,2:1). */ --lilas: #2F8F73; --lilas-claro: #9CC6BA; --raio-p: 4px; --raio-m: 4px; --sombra-card: 0 18px 40px -24px rgb(27 43 40 / 0.35); --curva: cubic-bezier(0.32, 0.72, 0, 1); } html { background: var(--creme); } body { font-family: var(--fonte-corpo); color: var(--tinta); background: var(--creme); } /* --- Tipografia -------------------------------------------- Garamond no peso 400 no título: é o "quiet" de "quiet beauty". O 500 fica para número (faixa de prova), onde precisa de presença. Nunca 700: em negrito ela vira convite de casamento. */ .display, .titulo { font-family: var(--fonte-display); font-weight: 400; letter-spacing: -0.01em; } .display { line-height: 0.98; } /* No celular o núcleo dá 28px ao título de seção. Para uma Garamond fina é pouco: ao lado do corpo de 17px ela some (razão 1,6x). 37px devolve o contraste de escala sem quebrar frase curta em três linhas. */ @media (max-width: 47.99rem) { .titulo { font-size: 2.3rem; } } .display em, .titulo em { font-style: italic; color: var(--lilas); } /* Rótulo: Jost pequena, caixa alta, espaçada. Código de marca de luxo (Avivah SP, Maria Luné). Em turquesa, que passa contraste. SEM o traço antes: ele existia (um fio lilás de 2rem) e o Daniel tirou em 07/10, "traço fica muito estranho". O rótulo agora é frase, não etiqueta ("Avaliações das minhas queridas pacientes"), e frase não precisa de marcador. */ .rotulo { display: flex; align-items: center; gap: var(--e3); font-size: var(--texto-micro); letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; color: var(--turquesa); } .conduz { color: var(--tinta-fraca); } ::selection { background: var(--turquesa); color: var(--creme); } :focus-visible { outline: 2px solid var(--turquesa); outline-offset: 3px; } /* --- Superfícies ------------------------------------------- */ .superficie-clara { background: var(--creme); color: var(--tinta); } .superficie-clara-2 { background: var(--creme-fundo); color: var(--tinta); } .superficie-escura { background: var(--verde); color: var(--sobre-verde); } .superficie-funda { background: var(--verde-fundo); color: var(--sobre-verde); } .superficie-escura .rotulo, .superficie-funda .rotulo { color: var(--sobre-verde-medio); } .superficie-escura .conduz, .superficie-funda .conduz { color: var(--sobre-verde-medio); } .superficie-escura em, .superficie-funda em { color: var(--lilas-claro); } .superficie-escura :focus-visible, .superficie-funda :focus-visible { outline-color: var(--sobre-verde); } /* --- Botão ------------------------------------------------- Texto em caixa alta espaçada, como os rótulos: o botão é interface, não frase. */ .botao { border-radius: var(--raio-pilula); padding: 1.05rem 2rem; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; transition: background-color 200ms var(--curva), transform 200ms var(--curva); } /* O BOTÃO PRINCIPAL: A BOLINHA QUE SE ABRE Escolhido pelo Daniel no uiverse em 07/10 ("simples, legal, sem nada mirabolante"). Em repouso é só o texto com uma bolinha atrás do começo e uma seta; no hover a bolinha se estica até virar a pílula inteira e a seta anda 5px para a frente. Adaptado do original: cores da Avivah, a fonte e a caixa alta do kit, e a bolinha de 45px vira 48px, o alvo de toque mínimo do núcleo. COR (trocada pelo Daniel na mesma noite): a bolinha é o verde-musgo da faixa de prova (--turquesa-apagado, #4A7477), não mais o azul-claro do original (#ADDADE). Por ser escura, o texto escuro não pode passar por cima dela: no original as primeiras letras ficam DENTRO da bolinha, e aqui ficariam ilegíveis. Então o texto começa logo depois dela e, quando ela se abre, o texto vira creme (4,65:1 sobre o musgo; o escuro dá 12,1:1 sobre o creme, parado). Para a pílula aberta não ficar com folga só à esquerda, texto e seta andam 1,1rem para o centro. NO CELULAR não existe hover: o botao-toque.js abre a bolinha quando o botão passa pela faixa do meio da tela, e fecha quando ele sai (como os passos e a lista com luz). Sem script, ele continua um link legível com bolinha e seta. */ .botao-principal { --bolinha: var(--turquesa-apagado); --anda: -1.1rem; position: relative; isolation: isolate; background: none; color: var(--tinta); min-height: 3rem; padding: 0 1.3rem 0 3.6rem; gap: 0.7rem; transition: color 320ms var(--curva), transform 200ms var(--curva); } .botao-principal span { transition: transform 320ms var(--curva); } .botao-principal:hover, .botao-principal.aberto { color: var(--creme); } .botao-principal:hover span, .botao-principal.aberto span { transform: translateX(var(--anda)); } .botao-principal::before { content: ""; position: absolute; left: 0; top: 0; z-index: -1; width: 3rem; height: 100%; border-radius: var(--raio-pilula); background: var(--bolinha); transition: width 320ms var(--curva); } .botao-principal svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: translateX(-5px); transition: transform 320ms var(--curva); } .botao-principal:hover::before, .botao-principal.aberto::before { width: 100%; } .botao-principal:hover svg, .botao-principal.aberto svg { transform: translateX(var(--anda)); } .botao-principal:active { transform: scale(0.97); } /* No verde: bolinha de creme translúcido, texto creme sempre (6,2:1). */ .superficie-escura .botao-principal, .superficie-funda .botao-principal { --bolinha: rgb(241 244 242 / 0.16); color: var(--sobre-verde); } /* --- Lista com luz (credenciais) --------------------------- A MESMA luz da página da Helena (kit Cacau, que adaptou o "radio glider" do uiverse), na pele da Primavera. A primeira versão daqui era só uma faixa com borda, e o Daniel sentiu na hora: "a da Helena é mais premium". A diferença está nas três camadas, que agora entram todas: TRILHO 1px de areia na esquerda da lista, que some nas pontas BARRA 2px verde-musgo, que some nas pontas, com BRILHO desfocado em volta ESCORRIDO um degradê musgo que escorre da barra para dentro do item COR: era lilás, e o Daniel achou que destoava (07/10). Testados lado a lado o azul da logo e o verde-musgo: ele escolheu o MUSGO, a mesma cor do botão e da faixa de prova. Mais sóbrio, e a página fica com uma cor de ação só. E o item aceso sobe um degrau de tinta: os outros ficam na tinta fraca, ele vai para a tinta cheia. É esse contraste que faz a luz "acender". O luz-lista.js mede o item e passa --luz-y e --luz-h. Com mouse acende o item sob o cursor; no celular, o do meio da tela (foco.js). Sem script, a lista fica normal. Pseudo-elementos em z-index -1 com `isolation`, para passar por trás do texto sem sumir atrás da seção. */ .lista-luz { --trilho: #C9D2CE; /* um degrau abaixo da areia: no creme-fundo, a areia sumia */ --barra: var(--turquesa-apagado); --escorrido: rgb(63 111 99 / 0.16); 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; } .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); filter: drop-shadow(0 0 7px var(--turquesa-apagado)) drop-shadow(0 0 2px var(--turquesa-apagado)); } .lista-luz::after { width: min(80%, 26rem); background: linear-gradient(90deg, var(--escorrido), transparent); } .lista-luz.luz-acesa::before, .lista-luz.luz-acesa::after { opacity: 1; } .lista-luz.luz-instante::before, .lista-luz.luz-instante::after { transition: opacity 280ms var(--curva); } .lista-luz > li { color: var(--tinta-fraca); transition: color 200ms var(--curva); } .lista-luz > li.luz-ativo { color: var(--tinta); } /* Link de texto com fio lilás embaixo: o lilás como detalhe, não como cor. */ .link-fio { color: inherit; text-decoration: none; border-bottom: 1px solid var(--lilas); padding-bottom: 2px; } .link-fio:hover { border-bottom-width: 2px; } /* Telefone em destaque, mas SEM link. A página tem um objetivo só, o WhatsApp (decisão do Daniel, 07/10): um "ligar" clicável é uma segunda saída. O número continua à vista para quem prefere ligar e copia. Não parece link de propósito: sem sublinhado, sem cor de ação. */ .telefone { font-weight: 500; font-size: 1.0625rem; letter-spacing: 0.02em; } /* --- Detalhes de fundo (pedido do Daniel, 15/10/2026) ---------------- Só neste kit: a Avivah continua sem eles. 1 · O ARCO DO HERO: um círculo de fio, enorme e quase apagado, que nasce fora da tela à esquerda e passa por trás do título. É o arco do retrato ecoado em escala: a opção "A" que o Daniel viu no hero da Avivah (alvos/avivah/opcoes-de-detalhe/A-moldura-e-arco-de-fundo.png). É um ANEL de gradiente no fundo do próprio hero, e não um círculo com borda: assim ele acaba na borda do hero. Com borda, ele vazava para a seção de baixo, e cortar com overflow cortaria junto a faixa de prova, que passa da borda de baixo do hero de propósito. */ .hero-primavera { position: relative; isolation: isolate; } .hero-primavera::before { --r: 31rem; --x: calc(50% - 42rem); --y: 35rem; content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle var(--r) at var(--x) var(--y), transparent calc(var(--r) - 1px), var(--lilas) var(--r), transparent calc(var(--r) + 1.2px)); opacity: 0.3; } @media (max-width: 55.99rem) { .hero-primavera::before { --r: 17rem; --x: -3rem; --y: 19rem; } } /* 2 · AS ONDAS DA CHAMADA FINAL: a mesma textura do fim da página da Helena (nucleo/texturas.css, "textura-ondas"), copiada aqui porque o layout 04 não carrega o texturas.css. A máscara dá a forma; a cor vem do token, então as linhas saem no claro do verde, em alfa baixo. */ .final { position: relative; isolation: isolate; } .final::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-color: var(--sobre-verde); opacity: 0.12; mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-size: 100% auto; -webkit-mask-size: 100% auto; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center 70%; -webkit-mask-position: center 70%; }