/* ========================================================= Dra. Scarlet Silvestre — Landing pages estáticas (HTML + CSS) Sem WordPress, sem JavaScript, sem dependências externas. 3 páginas compartilham este arquivo: index.html -> tema OURO (limpeza de pele) peeling-de-diamante.html -> tema PRATA (.tema-diamante no ) brow-lamination.html -> tema BRONZE (.tema-brow no ) As variáveis --ouro / --ouro-claro / --ouro-escuro guardam o nome histórico, mas funcionam como "cor principal / clara / escura" do tema. ========================================================= */ :root{ --ouro: #C8A158; --ouro-claro: #DBBF89; --ouro-escuro: #AE8434; --escuro: #1C1C1C; --branco: #FFFFFF; --container: 1140px; --topo: 64px; /* altura da barra de troca de cursos */ /* tipografia: serifada de moda nos títulos, sans limpa no texto */ --fonte-titulo: "Playfair Display", Georgia, "Times New Roman", serif; --fonte-texto: "Mulish", system-ui, -apple-system, sans-serif; --sombra-suave: 0 10px 30px rgba(28,28,28,.07); --sombra-card: 0 18px 44px rgba(28,28,28,.10); } /* Cor das dobras escuras da index: "para quem é", "quem é" e rodapé. ATENÇÃO: os JPEG do mosaico e da foto do "quem é" foram achatados sobre esta cor exata, porque os dois têm canto arredondado com transparência. Mudou aqui, refazer os dois arquivos — receita em docs/MANUTENCAO.md. */ /* A index trocou o acento dourado por branco e cinzas claros: preto e branco puxa ainda mais autoridade, e o ouro passou a competir com a arte do hero. Os nomes das variáveis continuam --ouro* porque são o "acento do tema" em todo o arquivo — só o valor mudou. ATENÇÃO: onde o acento é FUNDO (botão cheio, selo, pílula ativa), o texto por cima precisa ser escuro. Essas correções estão no bloco "index sem ouro", mais abaixo. */ .tema-ouro{ --ouro: #E4E1DC; /* acento: branco levemente quente */ --ouro-claro: #F4F2EF; /* quase branco: rótulos, ícones, destaques */ --ouro-escuro: #B7B2AA; /* cinza claro: fundos de botão e fios */ --escuro-dobra:#141210; /* a dobra "para quem é" da index é escura: aguenta sombra forte */ --sombra-empilha:0 -26px 60px rgba(0,0,0,.55); --hero-img:url("../imagens/BG Hero.png"); --hero-base:#BD7F27; --checkout-img:url("../imagens/checkout-limpeza.jpg"); --checkout-img-cel:url("../imagens/checkout-limpeza-celular.jpg"); --hero-cel:url("../imagens/BG LIMPEZA - mobile.png"); --hero-cel-base:#C58834; /* o ouro da esquerda é claro, então o véu precisa ser forte para o texto branco ler */ --hero-veu:linear-gradient(100deg, rgba(58,34,4,.80) 0%, rgba(74,45,9,.60) 26%, rgba(120,78,22,.20) 46%, rgba(120,78,22,0) 62%); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--topo) + 20px)} body{ margin:0; font-family:var(--fonte-texto); font-size:17px; color:var(--escuro); background:var(--branco); -webkit-font-smoothing:antialiased; /* As duas linhas são de propósito. `hidden` é a reserva para navegador antigo; `clip` vence onde existe e faz a mesma coisa SEM transformar o body em contêiner de rolagem — que é o que quebrava o position:sticky da segunda dobra. */ overflow-x:hidden; overflow-x:clip; } img{display:block;max-width:100%;height:auto} a{text-decoration:none;color:inherit} ul{margin:0;padding:0;list-style:none} h1,h2,h3,p,figure,blockquote{margin:0} .sprite{position:absolute;width:0;height:0;overflow:hidden} .container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:20px; } .centro{display:flex;justify-content:center;margin-top:40px} /* ========================================================= BARRA DE TROCA DE CURSOS Pílula flutuante centralizada sobre o topo do hero. Fica dentro de
nas 3 páginas. ========================================================= */ .topo{ position:absolute; top:0;left:0;right:0; z-index:60; padding:22px 0; } .topo__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; } /* logotipo (SVG preto recolorido por CSS — branco sobre o hero) */ .topo__marca{flex:none;display:block;line-height:0} .topo__marca img{ width:clamp(190px,14vw,270px); height:auto; filter:brightness(0) invert(1); opacity:.96; } .troca{ display:inline-flex; align-items:center; gap:4px; max-width:100%; padding:6px; border:1px solid rgba(255,255,255,.42); border-radius:9999px; background:rgba(255,255,255,.16); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 8px 26px rgba(0,0,0,.14); overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; } .troca::-webkit-scrollbar{display:none} .troca__link{ display:inline-block; padding:11px 22px; border-radius:9999px; font-size:16px; line-height:1.2; color:var(--branco); white-space:nowrap; transition:background .25s ease, color .25s ease; } .troca__link:hover{background:rgba(255,255,255,.22)} .troca__link:focus-visible{outline:2px solid var(--branco);outline-offset:2px} .troca__link[aria-current="page"]{ background:var(--branco); color:var(--ouro-escuro); font-weight:700; box-shadow:0 3px 12px rgba(0,0,0,.16); } /* ---------------- ícones ---------------- */ .ico{width:20px;height:20px;flex:none} .ico--spark{width:17px;height:16px;fill:var(--ouro-claro)} .ico--seta{width:25px;height:25px;color:var(--ouro-claro)} .ico--down{width:22px;height:13px} /* ---------------- botões ---------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:14px; padding:19px 34px; border-radius:10px; font:800 16px/1 var(--fonte-texto); text-transform:uppercase; letter-spacing:.06em; box-shadow:0 12px 30px rgba(28,28,28,.18); transition:transform .25s ease, box-shadow .25s ease, filter .25s ease; } .btn:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(28,28,28,.26);filter:brightness(1.04)} .btn:focus-visible{outline:3px solid var(--ouro-escuro);outline-offset:3px} .btn--claro{background:var(--branco);color:var(--ouro-escuro)} .btn--ouro { background:linear-gradient(135deg,var(--ouro) 0%,var(--ouro-escuro) 100%); color:var(--branco); } .btn--grande{font-size:18px;padding:22px 44px} /* pulso discreto para chamar o olho ao CTA principal */ @keyframes pulso{ 0%,100%{box-shadow:0 12px 30px rgba(28,28,28,.18)} 50% {box-shadow:0 12px 30px rgba(28,28,28,.18), 0 0 0 10px rgba(255,255,255,.10)} } .btn--pulso{animation:pulso 2.6s ease-in-out infinite} /* micro-copy de segurança logo abaixo do botão */ .garantia-linha{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 18px; margin-top:16px; font-size:15px; color:rgba(28,28,28,.60); } .garantia-linha span{display:inline-flex;align-items:center;gap:7px} .garantia-linha .ico{width:16px;height:16px;color:var(--ouro)} .garantia-linha--claro{color:rgba(255,255,255,.78)} .garantia-linha--claro .ico{color:var(--branco)} .garantia-linha--esq{justify-content:flex-start} /* ---------------- títulos ---------------- */ .titulo{ font-family:var(--fonte-titulo); font-weight:600; font-size:54px; line-height:1.08; letter-spacing:-.01em; color:var(--ouro-escuro); text-align:center; } .titulo--claro{color:var(--ouro)} .titulo--esq{text-align:left} .titulo--md{font-size:42px} .titulo--sm{font-size:38px} .titulo em{font-style:italic;color:var(--ouro)} /* rótulo pequeno acima dos títulos — dá ar editorial e organiza a leitura */ .rotulo{ display:block; margin-bottom:14px; font-family:var(--fonte-texto); font-size:13px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--ouro); text-align:center; } .rotulo--esq{text-align:left} .subtitulo{ max-width:760px; margin:18px auto 0; font-size:21px; line-height:1.5; color:rgba(28,28,28,.66); text-align:center; } .subtitulo--sm{font-size:19px} /* ========================================================= HERO ========================================================= */ .hero{ position:relative; display:flex; align-items:center; min-height:100vh; padding:180px 0 80px; overflow:hidden; background:#C6A45E; } /* Os fundos de hero POR TEMA abaixo valem só até 1024px: são o hero antigo, de gradiente e ornamento. Do 1025px para cima quem manda é a receita única de foto, lá em cima, alimentada pelas variáveis --hero-img/--hero-base/ --hero-veu de cada tema. Confinar aqui é obrigatório: `.tema-x .hero` tem especificidade maior que `.hero` e venceria a receita nova em qualquer largura. */ .hero .container{position:relative;z-index:1} .hero__conteudo{max-width:660px} .hero__titulo{ margin:22px 0 18px; font-family:var(--fonte-titulo); font-size:62px; font-weight:600; line-height:1.06; letter-spacing:-.015em; color:var(--branco); text-shadow:0 2px 24px rgba(0,0,0,.18); } .hero__titulo em{font-style:italic} .hero__sub{ margin-bottom:22px; font-family:var(--fonte-titulo); font-size:28px; font-weight:500; font-style:italic; line-height:1.25; color:rgba(255,255,255,.86); } .hero__lead{ max-width:560px; margin-bottom:30px; font-size:20px; font-weight:500; line-height:1.55; color:rgba(255,255,255,.82); } .pills{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:34px} .pill{ display:inline-flex; align-items:center; gap:12px; padding:9px 20px 9px 14px; border-radius:9999px; border:1px solid rgba(255,255,255,.20); background:rgba(255,255,255,.11); backdrop-filter:blur(4px); font-size:16px; font-weight:600; color:var(--branco); } /* rótulo do hero da index: filete + caixa alta espaçada, no lugar do antigo badge sólido (que era ouro-claro com texto branco, contraste ruim) */ .hero__rotulo{ display:inline-flex; align-items:center; gap:12px; font-size:13px; font-weight:700; line-height:1; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.92); } .hero__rotulo::before{ content:""; flex:none; width:34px; height:1px; background:rgba(255,255,255,.55); } /* a linha de apoio é sans em QUALQUER largura e nas três páginas: a serifada itálica fica pesada logo abaixo do título, que já é serifado. Fica fora do bloco de 1025px para o celular seguir o mesmo padrão */ .hero__sub{ font-family:var(--fonte-texto); font-style:normal; } /* ========================================================= HERO DA INDEX NO DESKTOP (a partir de 1025px) Aqui o hero da limpeza deixa de ser gradiente + monograma e passa a ser a foto da Dra. Scarlet: imagens/hero-limpeza.jpg (1920x1000, ela à direita e área livre à esquerda, feita para o texto). Tablet e celular continuam no hero antigo de propósito — a versão vertical da foto entra numa próxima rodada. ========================================================= */ @media (min-width:1025px){ /* Uma receita só para as três páginas. O que muda de curso para curso são três variáveis, definidas no bloco de cada tema: --hero-img arte de fundo --hero-base cor enquanto ela carrega --hero-veu véu de leitura sobre a faixa onde fica o texto As três artes têm o mesmo enquadramento: ela à direita, área livre à esquerda, 1920x1000. */ .hero{ /* a altura acompanha a proporção 1,92:1 da foto — entre ~1150px e ~1690px de largura ela aparece inteira, sem corte nenhum */ min-height:clamp(600px,52vw,880px); padding:calc(var(--topo) + 56px) 0 84px; background: var(--hero-veu), /* topo: contraste para o logotipo e a pílula de cursos. É variável porque desce até 24% da altura e, numa arte que já nasce escura no topo, só serve para apagar a cabeça da profissional — a index define o seu, mais curto */ var(--hero-veu-topo,linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 24%)), /* base: emenda sem costura com a barra de confiança */ linear-gradient(180deg, transparent 93%, var(--hero-fecho,var(--ouro-escuro)) 100%), var(--hero-img) right top / cover no-repeat, var(--hero-base); } /* a foto ocupa o papel dos dois: monograma e ornamento virariam sujeira */ /* o ornamento do curso sai: com a foto no lugar, vira sujeira */ .hero::after{content:none} /* ---- a assinatura marcada no fundo, atrás do botão ---- O "S" recortado do próprio logotipo, bem apagado, ocupando o vazio abaixo da coluna de texto. Só no desktop: no celular esse espaço não existe, a foto vem antes do texto. Pintado por mask-image, então a cor vem do CSS e o mesmo arquivo serve aos três temas. */ .hero::before{ content:""; position:absolute; z-index:0; left:-3%; bottom:-6%; width:min(46%,620px); aspect-ratio:691/362; /* imagem de fundo direta, sem mask-image: o monograma original tem fill="currentColor", que não resolve em SVG carregado por URL — a máscara saía vazia. monograma-scarlet-branco.svg é o mesmo desenho com preenchimento branco fixo, o que serve aos três temas porque os três heroes têm fundo escuro nessa área. */ background:url("../imagens/monograma-scarlet-branco.svg") left bottom / contain no-repeat; opacity:.09; pointer-events:none; } /* a coluna de texto para antes de encostar nela em qualquer largura. Estreita o bastante para abrir o vao onde entram as notificacoes. O z-index é o que mantém o texto acima da assinatura — sem ele, um pseudo-elemento posicionado pintaria por cima de conteúdo estático. */ .hero__conteudo{ position:relative; z-index:1; max-width:clamp(460px,38vw,580px); } .hero__titulo{ margin:22px 0 18px; font-size:clamp(46px,4.3vw,66px); line-height:1.02; letter-spacing:-.022em; text-shadow:0 2px 34px rgba(40,22,2,.42); } /* itálico só em "Profunda": marca o que diferencia o curso sem pedir peso */ .hero__titulo em{font-style:italic} /* linha de apoio em sans: leitura mais direta que a serifada itálica */ .hero__sub{ max-width:32ch; margin-bottom:30px; font-family:var(--fonte-texto); font-size:20px; font-weight:500; font-style:normal; line-height:1.5; color:rgba(255,255,255,.85); } /* as três provas em linha, não empilhadas: sobem o botão na dobra */ .pills{ flex-direction:row; flex-wrap:wrap; gap:9px; margin-bottom:34px; } .pill{ padding:9px 16px 9px 11px; gap:9px; border-color:rgba(255,255,255,.26); background:rgba(255,255,255,.12); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); font-size:14.5px; } } /* flutuação das notificações. Usa a propriedade `translate` (e não `transform`) de propósito: o `transform` já está ocupado centralizando o cartão no ponto, e as duas propriedades se somam em vez de se anular */ @keyframes notificacao-flutua{ 0%,100%{translate:0 0} 50% {translate:0 -9px} } /* ========================================================= NOTIFICAÇÕES EM VOLTA DA FOTO (a partir de 1200px) As mesmas três provas do