/* ============================================================ Cosmetrics — site institucional Tudo que fica abaixo da primeira dobra. O crítico (tokens, cabeçalho, herói, botão) está inline no do index.html. Organização: utilitários → andaimes → seções na ordem da página. Escrito para as páginas de conteúdo reaproveitarem .secao, .env, .btn, .falta e .lista-marcada sem mudança. ============================================================ */ /* ============================================================ 1 · Ritmo de seção ============================================================ */ .secao{ position:relative; padding-block:var(--sec-y); } .secao-titulo{ font-size:clamp(1.7rem,5.6vw,2.75rem); max-width:20ch; } .secao-lead{ margin-top:var(--sp-5); font-size:clamp(1rem,3.2vw,1.12rem); color:var(--muted); max-width:46ch; line-height:1.6; } /* Fundos alternados — porcelana é o padrão do body. Ordem das faixas, de cima para baixo: herói · problema (porcelana) → virada (escuro) → como funciona (porcelana) → IA (card) → telas (rebaixado) → para quem (porcelana) → carta (verde claro) → planos (porcelana) → dúvidas (rebaixado) → fechamento (escuro) */ .ia{ background:var(--card); border-block:1px solid var(--line); } .telas, .duvidas{ background:var(--sunken); } .carta{ background:var(--sage-soft); } .virada, .fechamento{ background:var(--forest); color:var(--porcelain); } .virada::after, .fechamento::after, .carta::after{ content:"";position:absolute;inset:0; background-image:var(--grain);pointer-events:none; } .virada .env, .fechamento .env, .carta .env{position:relative;z-index:1} /* ============================================================ 2 · Andaimes — some quando o conteúdo real chegar ============================================================ .falta = texto que ainda não existe .ph = lugar de imagem que o Israel vai produzir Ambos são propositalmente feios. Se sobrar um no ar, aparece. ============================================================ */ .falta{ display:block; margin-top:var(--sp-3); padding:var(--sp-3) var(--sp-4); border:1px dashed var(--clay); border-radius:var(--r-md); background:rgba(164,85,63,.05); color:var(--clay); font-size:14.5px; font-style:italic; line-height:1.5; } .falta > span:first-child{ display:block; margin-bottom:var(--sp-1); font-size:11px; font-style:normal; font-weight:600; letter-spacing:.08em; text-transform:uppercase; } .falta-escuro{ border-color:var(--honey-soft); background:rgba(240,226,200,.10); color:var(--honey-soft); } .falta-inline{ display:inline-block; margin-top:0; padding:2px 8px; font-size:11px; border-radius:var(--r-full); } .falta-inline > span:first-child{margin-bottom:0} li.falta{margin-left:0;list-style:none} .ph{ display:grid; place-items:center; padding:var(--sp-4); text-align:center; border:1px dashed var(--line-2); border-radius:var(--r-lg); background: repeating-linear-gradient(45deg, rgba(127,144,121,.07) 0 10px, transparent 10px 20px), var(--card); color:var(--sage); font-size:12.5px; font-weight:600; letter-spacing:.02em; line-height:1.4; } .ph-4x5{aspect-ratio:4/5} .ph-3x2{aspect-ratio:3/2} .ph-9x19{aspect-ratio:9/19.5;border-radius:22px} .ph-1x1{aspect-ratio:1/1;border-radius:var(--r-full)} .ph-assinatura{aspect-ratio:180/56;width:180px;border-radius:var(--r-sm)} /* ============================================================ 3 · Listas com marcador ============================================================ */ .lista-marcada{ list-style:none; margin:var(--sp-5) 0 0; padding:0; display:grid; gap:var(--sp-3); } .lista-marcada > li{ position:relative; padding-left:26px; font-size:15.5px; line-height:1.5; } .lista-marcada > li:not(.falta)::before{ content:""; position:absolute;left:2px;top:.45em; width:9px;height:9px; border-radius:var(--r-full); background:var(--sage); } .filtro-nao .lista-marcada > li:not(.falta)::before{ background:none; border-top:2px solid var(--line-2); height:0;width:11px;top:.72em;left:1px;border-radius:0; } /* ============================================================ 4 · Seção 2 — O problema ============================================================ */ .problema-lista{ margin-top:var(--sp-7); display:grid; gap:var(--sp-5); } .problema-item{ padding:var(--sp-6); background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--e1); } .problema-item h3{ font-size:1.15rem; color:var(--forest); } .problema-item p:not(.falta){ margin-top:var(--sp-3); color:var(--muted); font-size:15.5px; } @media(min-width:760px){ .problema-lista{grid-template-columns:repeat(3,1fr);gap:var(--sp-5)} } /* ============================================================ 5 · Seção 3 — A virada ============================================================ */ .virada{text-align:center} .virada .env{max-width:760px} .virada-frase{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.75rem,6.4vw,3rem); line-height:1.15; letter-spacing:-.022em; font-optical-sizing:auto; } .virada-apoio{ margin-top:var(--sp-6); margin-inline:auto; max-width:52ch; font-size:clamp(1rem,3.3vw,1.1rem); line-height:1.68; color:var(--sage-soft); } .virada .falta{ max-width:44ch; margin-inline:auto; margin-top:var(--sp-6); text-align:left; } /* ============================================================ 6 · Seção 4 — Como funciona ============================================================ */ .passos{ list-style:none; margin:var(--sp-8) 0 0; padding:0; display:grid; gap:var(--sp-7); counter-reset:passo; } .passo{position:relative;padding-left:56px} .passo-n{ position:absolute;left:0;top:-4px; width:40px;height:40px; display:grid;place-items:center; border-radius:var(--r-full); background:var(--sage-soft); color:var(--forest); font-family:var(--font-display); font-size:18px; font-weight:600; } .passo h3{font-size:1.2rem;color:var(--forest)} .passo > p:not(.falta){margin-top:var(--sp-3);color:var(--muted);font-size:15.5px} @media(min-width:860px){ .passos{grid-template-columns:repeat(3,1fr);gap:var(--sp-6)} } /* Etiqueta de preço — o único momento animado */ .etiqueta{ margin-top:var(--sp-5); padding:var(--sp-5); background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--e2); max-width:320px; } .etiqueta-linha{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-4); padding-block:var(--sp-2); font-size:14.5px; color:var(--muted); } .etiqueta-linha b{ font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--ink); font-variant-numeric:tabular-nums; } .etiqueta-destaque{ margin-top:var(--sp-2); padding-top:var(--sp-4); border-top:1px solid var(--line); color:var(--forest); } .etiqueta-destaque b{ font-size:26px; color:var(--honey); } .etiqueta-nota{ margin-top:var(--sp-3); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--line-2); } /* estado inicial da conta; o JS troca para [data-pronto] */ .conta{ opacity:.35; transition:opacity var(--dur-3) var(--ease); } .conta[data-pronto]{opacity:1} /* ============================================================ 6b · Seção 5 — A IA ============================================================ */ .ia-grade{ margin-top:var(--sp-8); display:grid; gap:var(--sp-6); } .ia-bloco h3{ margin-top:var(--sp-4); font-size:1.12rem; color:var(--forest); } .ia-bloco p{ margin-top:var(--sp-3); font-size:15.5px; color:var(--muted); } .ia-icone{ display:grid; place-items:center; width:44px;height:44px; border-radius:var(--r-md); background:var(--sage-soft); color:var(--forest); } .ia-icone svg{width:23px;height:23px} .ia-demo{ margin:var(--sp-8) 0 0; } .ia-demo img{ border-radius:var(--r-xl); border:1px solid var(--line); box-shadow:var(--e2); width:100%; } .ia-nota{ margin-top:var(--sp-5); padding-left:var(--sp-4); border-left:2px solid var(--honey-soft); font-size:14px; line-height:1.6; color:var(--muted); max-width:56ch; } @media(min-width:860px){ .ia-grade{grid-template-columns:repeat(3,1fr);gap:var(--sp-7)} } /* ============================================================ 7 · Seção 6 — As telas do app (carrossel) ============================================================ */ .telas .env{margin-bottom:var(--sp-7)} .carrossel{position:relative} .trilho{ display:flex; gap:var(--sp-5); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gut); padding-inline:var(--gut); padding-block:var(--sp-2) var(--sp-4); scrollbar-width:none; -webkit-overflow-scrolling:touch; } .trilho::-webkit-scrollbar{display:none} .tela{ flex:0 0 auto; width:min(66vw,250px); margin:0; scroll-snap-align:center; } .moldura{ border-radius:26px; padding:6px; background:var(--card); border:1px solid var(--line-2); box-shadow:var(--e3); overflow:hidden; } .moldura img{border-radius:21px;width:100%} .tela figcaption{ margin-top:var(--sp-4); font-size:14px; color:var(--muted); line-height:1.45; } .tela figcaption b{ display:block; font-weight:600; color:var(--forest); } .carrossel-controles{ display:none; align-items:center; justify-content:center; gap:var(--sp-4); margin-top:var(--sp-5); } .seta{ width:44px;height:44px; display:grid;place-items:center; border-radius:var(--r-full); border:1px solid var(--line-2); background:var(--card); color:var(--forest); /* botão não herda fonte sozinho — sem esta linha cai no Arial */ font-family:var(--font-body); font-size:17px; cursor:pointer; transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease); } .seta svg{width:19px;height:19px} .seta:hover{background:var(--sage-soft);border-color:var(--sage)} .seta[disabled]{opacity:.35;cursor:default} .seta[disabled]:hover{background:var(--card);border-color:var(--line-2)} .pontos{display:flex;gap:var(--sp-2)} .ponto{ width:7px;height:7px;border-radius:var(--r-full); background:var(--line-2); transition:background var(--dur-2) var(--ease),width var(--dur-2) var(--ease); } .ponto[data-ativo]{background:var(--sage);width:20px} @media(min-width:760px){ .tela{width:270px} .trilho{ padding-inline:max(var(--gut),calc((100vw - var(--max)) / 2)); scroll-padding-inline:max(var(--gut),calc((100vw - var(--max)) / 2)); } .carrossel-controles{display:flex} } /* ============================================================ 8 · Seção 6 — Para quem é ============================================================ */ .filtro{ margin-top:var(--sp-7); display:grid; gap:var(--sp-5); } .filtro-col{ padding:var(--sp-6); border-radius:var(--r-xl); border:1px solid var(--line); background:var(--card); } .filtro-sim{background:var(--sage-soft);border-color:transparent} .filtro-col h3{ font-size:1.05rem; color:var(--forest); } .filtro-nao{background:var(--sunken)} .filtro-nao h3{color:var(--muted)} @media(min-width:760px){ .filtro{grid-template-columns:1fr 1fr} } /* ============================================================ 9 · Seção 7 — Por que eu fiz isso ============================================================ */ .carta-cabeca{ display:flex; align-items:center; gap:var(--sp-5); margin-bottom:var(--sp-7); } .carta-foto{flex:0 0 88px;width:88px} .carta-foto img{border-radius:var(--r-full)} .carta-texto{max-width:56ch} .carta-texto p{ margin-top:var(--sp-5); font-size:clamp(1rem,3.3vw,1.09rem); line-height:1.72; color:var(--ink); } .carta-texto p:first-child{margin-top:0} .carta-texto p:first-child::first-letter{ font-family:var(--font-display); font-size:3.1em; font-weight:600; float:left; line-height:.86; padding-right:.08em; color:var(--forest); } .carta-fecho{ font-family:var(--font-display); font-size:clamp(1.2rem,4.2vw,1.5rem)!important; font-weight:600; line-height:1.3!important; letter-spacing:-.02em; color:var(--forest); padding-top:var(--sp-5); border-top:1px solid rgba(44,59,49,.14); } .assinatura{ margin-top:var(--sp-6); display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; } .assinatura-nome{ font-size:14px; color:var(--forest); font-weight:600; } .assinatura-nome i{ font-style:normal; font-weight:400; color:var(--muted); } @media(min-width:860px){ .carta-cabeca{gap:var(--sp-6)} .carta-foto{flex:0 0 120px;width:120px} } /* ============================================================ 10 · Seção 8 — Planos ============================================================ */ /* Seletor mensal / semestral */ .ciclo{ margin-top:var(--sp-7); display:inline-flex; gap:2px; padding:4px; border-radius:var(--r-full); background:var(--sunken); border:1px solid var(--line); } .ciclo-btn{ font-family:var(--font-body); font-size:14.5px; font-weight:600; letter-spacing:-.01em; color:var(--muted); background:transparent; border:0; border-radius:var(--r-full); padding:9px 18px; cursor:pointer; white-space:nowrap; transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease); } .ciclo-btn:hover{color:var(--ink)} .ciclo-btn[aria-pressed="true"]{ background:var(--forest); color:var(--porcelain); box-shadow:var(--e1); } .ciclo-off{ display:inline-block; margin-left:6px; padding:1px 7px; border-radius:var(--r-full); background:var(--honey-soft); color:var(--honey); font-size:11.5px; font-weight:600; } .ciclo-btn[aria-pressed="true"] .ciclo-off{ background:rgba(240,226,200,.22); color:var(--honey-soft); } .planos-grade{ margin-top:var(--sp-6); display:grid; gap:var(--sp-5); /* sem align-items:start — os três cards ficam da mesma altura para os botões "Começar" alinharem na base. Em página de preço, botão desalinhado passa impressão de descuido. */ } .plano{ position:relative; display:flex; flex-direction:column; padding:var(--sp-6); background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--e1); } .plano h3{font-size:1.15rem;color:var(--forest)} .plano-para:not(.falta){margin-top:var(--sp-2);font-size:14.5px;color:var(--muted)} .plano-preco{ margin-top:var(--sp-5); font-family:var(--font-display); font-weight:600; font-size:2.6rem; line-height:1; letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums; } /* O do preço precisa herdar o 600. Sem isto o navegador aplica "bolder" (= 900), peso que não existe na Fraunces carregada, e ele engorda a letra na marra — fica borrada e mais pesada que o resto. */ .plano-preco b{font-weight:inherit} .plano-preco .moeda{font-size:.44em;vertical-align:.62em;margin-right:.1em;color:var(--muted)} .plano-preco i{font-style:normal;font-size:.3em;font-weight:500;font-family:var(--font-body);color:var(--muted);letter-spacing:0} .plano-cobranca{ margin-top:var(--sp-2); font-size:13px; color:var(--muted); } .plano .lista-marcada{flex:1} .plano .btn{margin-top:var(--sp-6);width:100%} .plano-destaque{ border-color:var(--sage); box-shadow:var(--e2); } .plano-selo{ position:absolute;top:-11px;left:var(--sp-6); padding:3px 12px; border-radius:var(--r-full); background:var(--honey-soft); color:var(--honey); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; } @media(min-width:900px){ .planos-grade{grid-template-columns:repeat(3,1fr)} .plano-destaque{transform:translateY(-10px)} } /* ============================================================ 11 · Seção 9 — Dúvidas ============================================================ */ .duvidas .env{max-width:760px} .duvida{ border-bottom:1px solid var(--line); } .duvida:first-of-type{border-top:1px solid var(--line);margin-top:var(--sp-7)} .duvida summary{ list-style:none; cursor:pointer; padding-block:var(--sp-5); padding-right:36px; position:relative; } .duvida summary::-webkit-details-marker{display:none} .duvida summary h3{ font-family:var(--font-body); font-size:1.02rem; font-weight:600; letter-spacing:-.01em; line-height:1.4; color:var(--forest); display:inline; } .duvida summary::after{ content:"+"; position:absolute;right:2px;top:50%; transform:translateY(-50%); font-size:20px; color:var(--sage); transition:transform var(--dur-2) var(--ease); } .duvida[open] summary::after{transform:translateY(-50%) rotate(45deg)} .duvida > p{ padding-bottom:var(--sp-6); color:var(--muted); font-size:15.5px; line-height:1.65; max-width:60ch; } .duvida > p.falta{margin-bottom:var(--sp-6);padding-bottom:var(--sp-3)} /* ============================================================ 12 · Seção 10 — Fechamento ============================================================ */ .fechamento{text-align:center} .fechamento .env{max-width:680px} .fechamento .secao-titulo{margin-inline:auto;max-width:16ch} .fechamento-sub:not(.falta){ margin-top:var(--sp-5); color:var(--sage-soft); font-size:1.05rem; } .fechamento .falta{max-width:44ch;margin-inline:auto;text-align:left} .fechamento-acoes{ margin-top:var(--sp-7); display:flex; flex-direction:column; align-items:center; gap:var(--sp-5); } .btn-zap{ font-size:14.5px; color:var(--sage-soft); text-decoration:none; border-bottom:1px solid rgba(231,235,223,.35); padding-bottom:2px; } .btn-zap:hover{color:var(--porcelain);border-bottom-color:var(--porcelain)} /* ============================================================ 13 · Rodapé ============================================================ */ .rodape{ padding-block:var(--sp-8); border-top:1px solid var(--line); background:var(--porcelain); } .rodape .env{display:grid;gap:var(--sp-5)} .rodape-links{ display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-6); } .rodape-links a{ font-size:14.5px; color:var(--muted); text-decoration:none; } .rodape-links a:hover{color:var(--forest)} .rodape-fim{font-size:13px;color:var(--line-2)} /* espaço para a barra fixa não cobrir o rodapé no mobile */ @media(max-width:759px){ .rodape{padding-bottom:calc(var(--sp-8) + 76px)} }