/* FONTES:INICIO — gerado por design/baixar-fontes.js, não edite à mão */ /* Fontes hospedadas aqui mesmo, para não depender do Google Fonts. Regerar com: node design/baixar-fontes.js Só o subconjunto latin, e um arquivo variável por família. */ @font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 700 800; font-display: swap; src: url('/assets/fonts/baloo2.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/assets/fonts/nunito.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* FONTES:FIM */ /* ========================================================================== Dona Joh Indica — estilos das landings de captação Mobile-first. Tudo que importa na primeira dobra. Cada nicho tem identidade própria, montada por tokens numa classe no : .nicho-maternidade → dobra teal, acento amarelo, fundo de poá .nicho-casa → dobra laranja, acento verde-água, fundo de azulejo (a home fica no laranja da marca, com os raios do selo original) ========================================================================== */ :root { /* Paleta tirada das artes da mascote */ --laranja: #E56A24; --laranja-escuro: #A8410F; --laranja-claro: #F59331; --teal: #17878A; --teal-escuro: #0C5457; --teal-claro: #23A6A4; --agua: #7FD8CE; --amarelo: #F5C21B; --creme: #FDF6EA; --creme-fundo: #FBF1E0; --marrom: #3B2A21; --marrom-suave: #6B5648; /* Verde do WhatsApp — usado só no CTA, de propósito */ --wpp: #25D366; --wpp-escuro: #1BAE53; --raio: 14px; --raio-g: 22px; --sombra-cta: 0 6px 0 var(--wpp-escuro); --sombra-card: 0 2px 14px rgba(59, 42, 33, .10); --fonte-display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif; --fonte-texto: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; --largura: 560px; } /* -------------------------------------------------------------------------- Tokens por nicho — trocar a classe do troca a página inteira -------------------------------------------------------------------------- */ body { /* Padrão: a marca, usada na home */ --dobra-a: var(--laranja-claro); --dobra-b: var(--laranja); --dobra-c: var(--laranja-escuro); --dobra-sombra: rgba(122, 55, 12, .30); --destaque: var(--amarelo); /* palavra em evidência no H1 */ --faixa-bg: var(--teal); /* faixa com o nome do nicho */ --faixa-cor: var(--creme); --solido: var(--laranja); /* tiles de ícone, números, sinais + */ --fechamento-bg: var(--teal); /* banda final, sempre a cor oposta */ --sub-cor: #FFF1DE; --nota-cor: #FFE7CB; --rotulo-cor: #FFD9AF; } body.nicho-maternidade { --dobra-a: var(--teal-claro); --dobra-b: var(--teal); --dobra-c: var(--teal-escuro); --dobra-sombra: rgba(6, 52, 54, .32); --destaque: var(--amarelo); --faixa-bg: var(--laranja); --faixa-cor: var(--creme); --solido: var(--teal); --fechamento-bg: var(--laranja); --sub-cor: #DDF2F1; --nota-cor: #BFE5E3; --rotulo-cor: #A6DAD7; } body.nicho-casa { --dobra-a: var(--laranja-claro); --dobra-b: var(--laranja); --dobra-c: var(--laranja-escuro); --dobra-sombra: rgba(122, 55, 12, .30); --destaque: var(--agua); --faixa-bg: var(--teal); --faixa-cor: var(--creme); --solido: var(--laranja); --fechamento-bg: var(--teal); --sub-cor: #FFF1DE; --nota-cor: #FFE7CB; --rotulo-cor: #FFD9AF; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--fonte-texto); font-size: 16px; line-height: 1.55; color: var(--marrom); background: var(--creme-fundo); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3 { font-family: var(--fonte-display); line-height: 1.12; margin: 0; } .limite { width: 100%; max-width: var(--largura); margin-inline: auto; } .sprite { display: none; } /* -------------------------------------------------------------------------- Aviso de navegador in-app (Instagram/Facebook) — só aparece via JS -------------------------------------------------------------------------- */ .aviso-inapp { background: var(--amarelo); color: var(--marrom); font-size: 13.5px; font-weight: 700; text-align: center; padding: 10px 16px; line-height: 1.35; } /* -------------------------------------------------------------------------- Primeira dobra -------------------------------------------------------------------------- */ .dobra { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 18px 20px 26px; overflow: hidden; background: radial-gradient(120% 90% at 50% 8%, var(--dobra-a) 0%, var(--dobra-b) 46%, var(--dobra-c) 100%); color: var(--creme); text-align: center; } .dobra::before { content: ""; position: absolute; inset: 0; pointer-events: none; } /* Home — os raios de sol do selo original da mascote */ .dobra--raios::before { inset: auto; /* precisa vir antes de top/left, senão anula os dois */ top: -46%; left: 50%; width: 190vmax; height: 190vmax; transform: translateX(-50%); background: repeating-conic-gradient( from 0deg at 50% 50%, rgba(255, 255, 255, .085) 0deg 5deg, rgba(255, 255, 255, 0) 5deg 11deg ); } /* Maternidade — poá, o padrão de tecido de enxoval */ .dobra--poa::before { background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .14) 2.6px, transparent 3px) 0 0 / 32px 32px, radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .08) 1.9px, transparent 2.3px) 16px 16px / 32px 32px; } /* Casa — grade de azulejo com o ponto na junta */ .dobra--azulejo::before { background: linear-gradient(rgba(255, 255, 255, .09) 1.5px, transparent 1.5px) 0 0 / 100% 46px, linear-gradient(90deg, rgba(255, 255, 255, .09) 1.5px, transparent 1.5px) 0 0 / 46px 100%, radial-gradient(circle at 0 0, rgba(255, 255, 255, .16) 2.6px, transparent 3px) 0 0 / 46px 46px; } .dobra > * { position: relative; } .marca { display: inline-flex; align-items: center; gap: 9px; align-self: center; text-decoration: none; margin-bottom: auto; } .marca__joh { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--creme); background: var(--marrom-suave); } .marca__nome { font-family: var(--fonte-display); font-weight: 700; font-size: 17px; letter-spacing: .2px; } .marca__nome b { font-weight: 800; color: var(--destaque); } /* Selo circular do nicho — o busto da mascote com a medalha do assunto */ .selo { display: flex; flex-direction: column; align-items: center; margin: 14px 0 16px; } .selo__disco { position: relative; width: clamp(112px, 30vw, 148px); aspect-ratio: 1; border-radius: 50%; padding: 5px; background: var(--creme); box-shadow: 0 4px 0 rgba(59, 42, 33, .18); } .selo__joh { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 22%; background: var(--marrom-suave); } .selo__medalha { position: absolute; right: -4px; bottom: 2px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--faixa-bg); border: 3px solid var(--creme); color: var(--creme); } .selo__medalha svg { width: 22px; height: 22px; } .selo__faixa { margin-top: -12px; padding: 5px 18px; border-radius: 999px; background: var(--faixa-bg); color: var(--faixa-cor); border: 2.5px solid var(--creme); font-family: var(--fonte-display); font-weight: 800; font-size: 14px; letter-spacing: .6px; text-transform: uppercase; white-space: nowrap; } .titulo { font-size: clamp(27px, 8vw, 38px); font-weight: 800; text-wrap: balance; text-shadow: 0 2px 0 var(--dobra-sombra); } .titulo em { font-style: normal; color: var(--destaque); } .sub { margin: 12px auto 0; max-width: 30em; font-size: clamp(14.5px, 4vw, 16.5px); line-height: 1.45; color: var(--sub-cor); text-wrap: pretty; } .chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 15px 0 0; padding: 0; } .chips li { padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .17); border: 1px solid rgba(255, 255, 255, .34); font-size: 12.5px; font-weight: 700; } /* CTA */ .cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 400px; margin: 20px auto 0; padding: 16px 20px; border: 0; border-radius: var(--raio-g); background: var(--wpp); color: #08331A; font-family: var(--fonte-display); font-size: clamp(17px, 4.8vw, 20px); font-weight: 800; text-decoration: none; box-shadow: var(--sombra-cta); cursor: pointer; animation: pulsa 2.6s ease-in-out 1.2s infinite; } .cta:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--wpp-escuro); animation: none; } .cta__icone { width: 25px; height: 25px; flex: none; fill: currentColor; } @keyframes pulsa { 0%, 92%, 100% { transform: scale(1); } 96% { transform: scale(1.035); } } @media (prefers-reduced-motion: reduce) { .cta { animation: none; } } .cta__nota { margin: 10px auto 0; max-width: 32em; font-size: 12.5px; line-height: 1.4; color: var(--nota-cor); } /* Lojas monitoradas */ .lojas { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 18px 0 0; padding: 0; } .lojas__rotulo { width: 100%; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--rotulo-cor); margin-bottom: 2px; } .lojas li:not(.lojas__rotulo) { padding: 5px 13px; border-radius: 8px; background: var(--creme); color: var(--marrom); font-weight: 800; font-size: 13px; } /* -------------------------------------------------------------------------- Tira de categorias — o que dá cara ao nicho logo abaixo da dobra -------------------------------------------------------------------------- */ .tira { padding: 26px 20px 30px; background: var(--creme); border-bottom: 1px solid rgba(59, 42, 33, .08); } .tira__rotulo { margin: 0 0 16px; text-align: center; font-size: 11.5px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: var(--marrom-suave); } .categorias { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 8px; margin: 0; padding: 0; } .categoria { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; line-height: 1.2; text-align: center; color: var(--marrom); } .categoria svg { width: 30px; height: 30px; padding: 7px; box-sizing: content-box; border-radius: 50%; background: color-mix(in srgb, var(--solido) 13%, transparent); color: var(--solido); } /* -------------------------------------------------------------------------- Seções internas -------------------------------------------------------------------------- */ .secao { padding: 46px 20px; } .secao--creme { background: var(--creme); } .secao__titulo { font-size: clamp(23px, 6.5vw, 29px); font-weight: 800; text-align: center; text-wrap: balance; } .secao__intro { margin: 10px auto 0; max-width: 34em; text-align: center; color: var(--marrom-suave); text-wrap: pretty; } /* Benefícios */ .beneficios { list-style: none; display: grid; gap: 12px; margin: 26px 0 0; padding: 0; } .beneficio { display: flex; gap: 13px; align-items: flex-start; padding: 15px 16px; border-radius: var(--raio); background: var(--creme); box-shadow: var(--sombra-card); } .secao--creme .beneficio { background: #fff; } .beneficio__icone { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--solido); color: var(--creme); } .beneficio__icone svg { width: 22px; height: 22px; } .beneficio h3 { font-size: 17px; font-weight: 800; } .beneficio p { margin: 3px 0 0; font-size: 14.5px; color: var(--marrom-suave); } /* Como funciona */ .passos { list-style: none; counter-reset: passo; display: grid; gap: 14px; margin: 26px 0 0; padding: 0; } .passos li { counter-increment: passo; display: flex; gap: 13px; align-items: center; font-size: 15px; } .passos li::before { content: counter(passo); flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--solido); color: var(--creme); font-family: var(--fonte-display); font-weight: 800; font-size: 17px; } /* FAQ */ .faq { margin-top: 24px; display: grid; gap: 9px; } .faq details { border-radius: var(--raio); background: var(--creme); box-shadow: var(--sombra-card); overflow: hidden; } .secao--creme .faq details { background: #fff; } .faq summary { padding: 14px 44px 14px 16px; font-weight: 800; font-size: 15.5px; cursor: pointer; list-style: none; position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-family: var(--fonte-display); font-size: 22px; font-weight: 700; color: var(--solido); } .faq details[open] summary::after { content: "–"; } .faq p { margin: 0; padding: 0 16px 15px; font-size: 14.5px; color: var(--marrom-suave); } /* CTA de fechamento */ .fechamento { padding: 44px 20px 50px; background: var(--fechamento-bg); color: var(--creme); text-align: center; } .fechamento .secao__titulo { color: var(--creme); } .fechamento .secao__intro { color: rgba(255, 255, 255, .82); } /* -------------------------------------------------------------------------- Home — cartões dos grupos, cada um na cor do seu nicho -------------------------------------------------------------------------- */ .grupos { list-style: none; display: grid; gap: 14px; margin: 24px 0 0; padding: 0; } .grupo-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--raio-g); background: var(--creme); color: var(--marrom); text-decoration: none; box-shadow: var(--sombra-card); text-align: left; border-left: 6px solid var(--cor-nicho, var(--laranja)); } .grupo-card--maternidade { --cor-nicho: var(--teal); } .grupo-card--casa { --cor-nicho: var(--laranja); } .grupo-card__icone { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: var(--cor-nicho); color: var(--creme); } .grupo-card__icone svg { width: 28px; height: 28px; } .grupo-card h3 { font-size: 18px; font-weight: 800; } .grupo-card p { margin: 2px 0 0; font-size: 14px; color: var(--marrom-suave); } .grupo-card__amostra { margin: 6px 0 0; font-size: 12px; font-weight: 700; color: var(--cor-nicho); } .grupo-card__seta { margin-left: auto; flex: none; font-size: 24px; color: var(--cor-nicho); font-weight: 800; } /* A home mostra a mascote de corpo inteiro */ .joh-corpo { width: clamp(190px, 52vw, 260px); margin: 10px auto 0; border-radius: var(--raio-g); } /* -------------------------------------------------------------------------- Rodapé -------------------------------------------------------------------------- */ .rodape { padding: 30px 20px 38px; background: var(--marrom); color: #D9C8BC; font-size: 12.5px; line-height: 1.55; text-align: center; } .rodape__marca { font-family: var(--fonte-display); font-weight: 800; font-size: 16px; color: var(--creme); margin-bottom: 8px; } .rodape__links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 0 0 14px; padding: 0; } .rodape__links a { color: var(--amarelo); text-decoration: none; font-weight: 700; } .rodape__aviso { max-width: 44em; margin: 0 auto; opacity: .85; } .rodape__aviso + .rodape__aviso { margin-top: 7px; } /* -------------------------------------------------------------------------- Telas maiores — a página continua sendo uma coluna, só respira mais -------------------------------------------------------------------------- */ @media (min-width: 720px) { .dobra { padding: 24px 24px 40px; } .secao { padding: 60px 24px; } .tira { padding: 32px 24px 36px; } .categorias { grid-template-columns: repeat(6, 1fr); max-width: var(--largura); margin-inline: auto; } .beneficios { grid-template-columns: 1fr 1fr; } .grupos { grid-template-columns: 1fr 1fr; } .grupo-card { flex-wrap: wrap; } .grupo-card__seta { margin-left: auto; } }