/* ============================================================================ TEMA "TERRACOTA & ARGILA" + TIPOGRAFIA FRAUNCES / INTER Carregado DEPOIS de style.css. Sobrescreve os tokens do tema original sem tocar no CSS compilado do Tailwind. ========================================================================== */ :root{ /* --- tipografia -------------------------------------------------------- Inter no corpo, botoes e numeros (legibilidade no mobile). Fraunces so nos titulos: cria hierarquia, que antes nao existia. */ --app-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --app-font-serif: "Fraunces", Georgia, "Times New Roman", serif; --app-font-display: "Fraunces", Georgia, "Times New Roman", serif; /* --- superficies -------------------------------------------------------- */ --background: 24 100% 98%; /* creme #FFF9F5 */ --card: 34 60% 99%; --popover: 0 0% 100%; --muted: 30 50% 98%; /* --- texto -------------------------------------------------------------- */ --foreground: 17 21% 20%; /* cacau #3D2E28 */ --card-foreground: 17 21% 20%; --popover-foreground:17 21% 20%; --muted-foreground: 23 14% 34%; /* #63544B - contraste 6.9:1 (antes 4.9:1) */ /* --- marca -------------------------------------------------------------- */ --primary: 17 52% 50%; /* terracota #C2643F */ --primary-foreground: 0 0% 100%; --secondary: 26 51% 92%; /* areia #F5E9E0 */ --secondary-foreground:17 21% 20%; --accent: 26 51% 92%; --accent-foreground: 17 21% 20%; --ring: 17 52% 50%; /* --- linhas ------------------------------------------------------------- */ --border: 27 39% 86%; /* #EADBCF */ --card-border: 27 39% 86%; --popover-border: 27 39% 86%; --input: 27 39% 86%; /* --- sidebar / charts (mesma familia) ----------------------------------- */ --sidebar: 24 100% 98%; --sidebar-foreground: 17 21% 20%; --sidebar-border: 27 39% 86%; --sidebar-primary: 17 52% 50%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 26 51% 92%; --sidebar-accent-foreground: 17 21% 20%; --sidebar-ring: 17 52% 50%; --chart-1: 17 52% 50%; --chart-2: 26 51% 92%; --chart-3: 17 21% 20%; --chart-4: 27 39% 86%; --chart-5: 23 12% 43%; --shadow-color: 17 21% 20%; } /* ===== TITULOS ============================================================ Tailwind aplica .font-sans nos h1/h2/h3. :is() garante especificidade maior que a classe, entao nao precisa de !important. */ h1, h2, h3, :is(h1, h2, h3).font-sans{ font-family: var(--app-font-display); font-optical-sizing: auto; letter-spacing: -.015em; text-wrap: balance; /* evita palavra orfa sozinha na linha */ } h1{ line-height: 1.1 } h2{ line-height: 1.16 } h3{ line-height: 1.25 } p, li{ text-wrap: pretty } /* ===== CORRECOES DE UX ==================================================== */ /* A barra fixa do topo cobria o bloco de precos quando o CTA rolava ate ele. */ [id]{ scroll-margin-top: 52px } html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100% } body{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; /* trava qualquer estouro lateral no mobile */ } /* Contador: o amarelo puro era o unico elemento fora da paleta (heranca do tema rosa) e o digito claro sobre fundo quase branco dava contraste ~1,6:1. Caramelo escuro: mesma familia quente da pagina e legivel. */ .text-\[\#A65F20\]{ color: #A65F20 } .bg-\[\#fdf6f2\]{ background-color: #FDF5EC } /* Toque no mobile: sem o flash cinza do Android, com estado de foco visivel. */ button, a, [role="button"]{ -webkit-tap-highlight-color: transparent } :focus-visible{ outline: 2px solid hsl(var(--primary)); outline-offset: 3px; border-radius: 8px; } ::selection{ background: hsl(var(--primary) / .20) } /* Imagens nunca estouram a largura da tela. ATENCAO: nao declarar height aqui. O CSS do Tailwind vive dentro de @layer, e qualquer regra fora de layer ganha dele independente da especificidade -- um "height:auto" aqui anula h-full, h-40 etc. em TODAS as imagens. */ img{ max-width: 100% } /* ===== FAQ: deixa obvio o que esta aberto e separa a resposta da pergunta ==== */ button[aria-expanded="true"]{ color: hsl(var(--primary)) } h3:has(> button[aria-expanded="true"]) + div{ border-left: 2px solid hsl(var(--primary) / .32); padding-left: 14px; margin-bottom: 4px; } /* ===== compensa a altura da barra fixa do topo =============================== */ .pt-9{ padding-top: 2.6rem } /* barra do topo agora tem ~30px */ /* ===== texto em destaque dentro de paragrafos apagados ======================= */ .text-muted-foreground strong{ color: hsl(var(--foreground)); font-weight: 600 } .avl-bar strong{ color: #fff; font-weight: 600 } .avl-bar .avl-next strong{ color: rgba(255,255,255,.92) } /* ===== numeros nunca em serifa (precos, contador, passos) =================== */ .tabular-nums{ font-family: var(--app-font-sans); font-variant-numeric: tabular-nums } /* ===== BARRA DE ANUNCIO DO TOPO ============================================ Terracota profunda, mesma familia do cabecalho do card Premium: a barra e o card passam a conversar. O ponto pulsante e cor de areia de proposito -- o verde fica reservado exclusivamente aos botoes de compra. A copy tem duas versoes: completa no desktop, enxuta no celular, para caber sempre em UMA linha. */ .avl-bar{ font-size: clamp(10.4px, 3.1vw, 12.5px); line-height: 1.3; padding-block: 7px; column-gap: 7px; color: #FFEFE3; font-weight: 400; } .avl-bar strong{ color: #fff; font-weight: 600 } .avl-dot{ margin-right: 1px } .avl-sep, .avl-sep2{ display: inline-block; padding: 0 .55em; opacity: .42; color: #fff } .avl-full{ display: none } .avl-short{ display: inline } @media (min-width: 700px){ .avl-bar{ font-size: 13.5px; padding-block: 8px } .avl-full{ display: inline } .avl-short{ display: none } } /* ===== ACESSIBILIDADE: MOVIMENTO REDUZIDO ================================== Respeita quem desligou animacoes no sistema (no Windows: Configuracoes > Acessibilidade > Efeitos visuais > Efeitos de animacao). EXCECAO: os dois carrosseis continuam rodando, so que bem mais devagar. Congelados eles pareciam quebrados, e os selos carregam informacao. */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .ticker-track{ animation-name: ticker-h !important; animation-duration: 42s !important; animation-timing-function: linear !important; animation-iteration-count: infinite !important; } [style*="marquee"]{ animation-duration: 34s !important; animation-iteration-count: infinite !important; } } /* ===== ESCALA DE TEXTO ====================================================== Calibrada para leitura confortavel de um publico 30-60 no celular. O que mudou e POR QUE: - descricoes (.text-sm) subiram de 14px para 16px: era o tamanho de 31 blocos de texto corrido, pequeno demais para leitura prolongada; - paragrafo principal (.text-base) de 16px para 17.5px; - titulos subiram junto, senao a hierarquia achatava; - entrelinha de 1.4 para 1.6 nos textos corridos; - rotulos MAIUSCULOS podem ficar menores: caixa alta ja e legivel. As FONTES sao as mesmas (Fraunces + Inter) e as proporcoes entre os niveis foram mantidas, entao o desenho da pagina nao muda de carater. */ .text-base{ font-size: 17.5px; line-height: 1.6 } .text-sm { font-size: 16px; line-height: 1.6 } .text-lg { font-size: 19px; line-height: 1.55 } .text-xs { font-size: 13px; line-height: 1.45 } .text-2xl { font-size: 26px } .text-3xl { font-size: 32px } .text-\[13px\]{ font-size: 14.5px; line-height: 1.4 } .text-\[11px\]{ font-size: 12px } .text-\[10px\]{ font-size: 11.5px } @media (min-width: 640px){ .sm\:text-lg { font-size: 19.5px; line-height: 1.55 } .sm\:text-xl { font-size: 22px } .sm\:text-2xl{ font-size: 27px } .sm\:text-3xl{ font-size: 33px } .sm\:text-4xl{ font-size: 39px } .sm\:text-sm { font-size: 16px; line-height: 1.6 } } @media (min-width: 768px){ .md\:text-4xl{ font-size: 39px } .md\:text-5xl{ font-size: 50px } } /* textos corridos respiram um pouco mais que rotulos e botoes */ p.text-base, p.text-sm, p.text-lg, p.leading-relaxed{ line-height: 1.62 } button, a[href]{ line-height: 1.3 } /* ============================================================================ PASSE DE ACABAMENTO — RITMO, MOLDURAS E DETALHES ========================================================================== */ /* ===== RITMO DE SECOES ====================================================== A pagina inteira era um unico creme do topo ao rodape: 11.500px sem nenhuma pausa visual. Agora ela tem capitulos, com a areia (#FAF0E4) marcando os blocos de conteudo e o creme reservado aos momentos de decisao. 1 topo ........... creme 2-3 produto ....... areia 4-5 prova ......... creme 6-8 valor ......... areia 9 oferta ......... creme (o momento do preco fica no fundo mais claro) 10-11 confianca ... areia 12 duvidas ........ creme A troca acontece por gradiente, nao por linha: nao existe emenda visivel. */ .pt-9 > :nth-child(2){ background: linear-gradient(180deg,#FFF9F5 0,#FAF0E4 88px,#FAF0E4 100%) } .pt-9 > :nth-child(3){ background: linear-gradient(180deg,#FAF0E4 0,#FAF0E4 calc(100% - 88px),#FFF9F5 100%) } .pt-9 > :nth-child(6){ background: linear-gradient(180deg,#FFF9F5 0,#FAF0E4 88px,#FAF0E4 100%) } .pt-9 > :nth-child(7){ background: #FAF0E4 } .pt-9 > :nth-child(8){ background: linear-gradient(180deg,#FAF0E4 0,#FAF0E4 calc(100% - 64px),#FFF9F5 100%) } .pt-9 > :nth-child(10){ background: linear-gradient(180deg,#FFF9F5 0,#FAF0E4 88px,#FAF0E4 100%) } .pt-9 > :nth-child(11){ background: linear-gradient(180deg,#FAF0E4 0,#FAF0E4 calc(100% - 88px),#FFF9F5 100%) } /* ===== MOLDURA EM ARCO DA ESPECIALISTA ====================================== A foto e um recorte sem fundo. Dentro de um retangulo vazio ela parecia flutuar solta; o arco com fundo de areia devolve o "chao" e da um ar de retrato editorial, que combina com o carater artesanal da pagina. */ .avl-arco{ width: 216px; height: 254px; border-radius: 108px 108px 26px 26px } @media (min-width: 640px){ .avl-arco{ width: 238px; height: 280px; border-radius: 119px 119px 28px 28px } } /* ===== DEPOIMENTOS ========================================================== O texto vinha cortado em 4 linhas e perdia o fecho da frase, que e justamente a parte emocional do depoimento. */ .line-clamp-4{ -webkit-line-clamp: 8 } /* setas do carrossel: eram circulos translucidos soltos sobre a borda */ button:has(> svg.lucide-chevron-left), button:has(> svg.lucide-chevron-right){ background: #fff !important; border: 1px solid #C2643F2e !important; box-shadow: 0 3px 12px rgba(194,100,63,.14) !important; } /* ===== SOMBRAS UNIFICADAS =================================================== Tudo que flutua usa a mesma sombra quente, em vez de cinza neutro. */ .shadow-sm{ box-shadow: 0 1px 4px rgba(138,74,46,.06) } .shadow-lg{ box-shadow: 0 8px 26px rgba(138,74,46,.10) } /* ===== FAIXA DE MOLDES ====================================================== Miniaturas um pouco maiores e com o mesmo raio dos cards da pagina. */ .ticker-viewport + div img, [style*="marquee"] img{ border-radius: 12px }