@charset "UTF-8"; /* Theme Name: Marina Amaral Theme URI: https://marinaamaral.com.br Author: Guia-se Lagoa Santa Author URI: https://lagoasantaguiase.com.br Description: Tema de Marina Amaral — Design de Sistemas de Bem-Estar. Version: 1.0.0 Requires at least: 6.4 Requires PHP: 8.0 Text Domain: marina-amaral */ /* ========================================================================== Marina Amaral — Design de Sistemas de Bem-Estar Paleta e tipografia conforme o Manual da Marca (clientes/marina-amaral/ manual-da-marca/Design System.pdf e Logo.pdf). A marca é tipográfica: o wordmark "marina amaral." (sempre minúsculo, ponto final rosa). O símbolo "O arco" só aparece na tela Em Breve e nos ícones (favicon, painel). Três modos, escolhidos pelo TERRITÓRIO do conteúdo, nunca por gosto: Editorial (Papel #FBF6F0), Estrutura (Gesso #F3EEE6, mono, cantos retos) e Sentir (Blush #F8EAE3, arcos-janela, cantos 24px). Na home: 01 Início ........ Editorial 05 Para você ..... Sentir 02 Números ....... Estrutura 06 Histórias ..... Editorial 03 O método ...... Estrutura 07 O livro ....... Editorial 04 Empresas ...... Estrutura 08 O fecho ....... Editorial (a ordem e os modos são os da arquitetura aprovada na Fase 1) Dois desenhos da home com a mesma marcação: o que muda está nos blocos .desenho-2 (fotos em arco, faixas inclinadas) e .desenho-1 (fotos retas, caixas no método e em empresas). A classe vem no . ========================================================================== */ /* ---------- Variáveis (Manual da Marca) ---------- */ :root { /* Constante da marca — mesma em todos os modos */ --rosa: #D8265E; --rosa-sobre-escuro: #F08CAB; /* o ponto do wordmark clareia sobre fundo escuro */ --tinta: #231B16; /* Superfícies por modo (nunca branco/preto puro) */ --papel: #FBF6F0; /* Modo Editorial */ --gesso: #F3EEE6; /* Modo Estrutura */ --blush: #F8EAE3; /* Modo Sentir */ /* Acentos do Modo Sentir (Design System, seção 03) */ --terracota: #C8602C; --verde: #2F4B3A; --bg: var(--papel); --text: #231B16; --text-muted: #6F6259; --border: rgba(35, 27, 22, 0.15); --accent: var(--rosa); --font-titulo: 'Instrument Serif', Georgia, 'Times New Roman', serif; --font-texto: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* só no Modo Estrutura */ --largura: 1200px; --margem: clamp(16px, 4vw, 40px); --altura-topo: 72px; --inclinacao: clamp(28px, 4.5vw, 64px); /* altura das faixas inclinadas do Desenho 2 */ } :root[data-theme="dark"] { --bg: var(--tinta); --text: #FBF6F0; --text-muted: #b8ab9f; --border: rgba(251, 246, 240, 0.16); --accent: var(--rosa-sobre-escuro); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* A foto do Desenho 1 sangra até a borda da tela; clip corta a sobra sem criar o contexto de rolagem que o hidden criaria (e que quebraria o position: sticky do topo). */ html { overflow-x: clip; scroll-padding-top: var(--altura-topo); /* mesma parada do main.js: a seção começa colada embaixo do topo */ } body { font-family: var(--font-texto); font-weight: 400; /* Archivo Regular como base — Light (300) fica só pra blocos grandes de texto de apoio, Regular lê melhor em tamanhos menores */ font-size: 17px; line-height: 1.6; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } h1, h2, h3 { font-family: var(--font-titulo); font-weight: 400; /* Instrument Serif nunca em bold, ver Manual da Marca */ line-height: 1.1; text-wrap: pretty; margin: 0 0 0.4em; } h1 { font-size: clamp(36px, 6vw, 58px); } p { margin: 0 0 1em; text-wrap: pretty; } /* Regra de ouro da ênfase (Manual da Marca): a palavra emocional da frase em itálico rosa — uma ênfase por frase, nunca bold no serif, nunca sublinhado. */ em, .enfase { font-style: italic; color: var(--rosa); } :root[data-theme="dark"] em, :root[data-theme="dark"] .enfase { color: var(--rosa-sobre-escuro); } .eyebrow { font-family: var(--font-texto); font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; color: var(--rosa); text-decoration: none; } a.eyebrow:hover { text-decoration: underline; } :root[data-theme="dark"] .eyebrow { color: var(--rosa-sobre-escuro); } a { color: var(--accent); } /* ---------- Wordmark e símbolo (O arco) ---------- */ .wordmark { display: inline-flex; align-items: baseline; font-family: var(--font-titulo); font-size: 26px; line-height: 1; text-transform: lowercase; font-style: normal; font-weight: 400; text-decoration: none; color: var(--text); } .wordmark::after { content: '.'; color: var(--rosa); } :root[data-theme="dark"] .wordmark::after { color: var(--rosa-sobre-escuro); } .wordmark--sm { font-size: 15px; } /* Símbolo "O arco": duas janelas-arco (monoline) com o ponto rosa vivendo no arco direito. Versão formal (arcos iguais) — usar nos Modos Editorial e Estrutura, LinkedIn e slides. Ver Logo.pdf, seção 01-02. */ .arco-simbolo { display: inline-flex; } .arco-simbolo .arco-ponto { fill: var(--rosa); } :root[data-theme="dark"] .arco-simbolo .arco-ponto { fill: var(--rosa-sobre-escuro); } .arco-simbolo .arco-traco { fill: none; stroke: var(--text); stroke-width: 6; } /* Ponto "pulando" de um arco pro outro — só na tela Em Breve (o símbolo do header/rodapé do site fica parado). cx/cy/r são animáveis via CSS como qualquer outra propriedade SVG; 75 e 25 são os centros dos arcos direito e esquerdo, 49 é o "chão" (repouso), no viewBox do símbolo (ver marinaamaral_arco_svg()). Três animações em paralelo, sincronizadas pela mesma duração/timing: cx faz o deslocamento horizontal, cy desenha o arco de salto (sobe até o ápice, cai com um pequeno "estouro" de pouso e acomoda), e r dá o impacto de pouso (achata um pouco no ar, alarga no choque com o chão). Sem isso — só cx — o ponto parece arrastar de lado, não pular. */ @keyframes marinaamaral-arco-cx { 0%, 35% { cx: 75; } 48%, 85% { cx: 25; } 98%, 100% { cx: 75; } } @keyframes marinaamaral-arco-cy { 0%, 35% { cy: 49; } /* parado, arco direito */ 40% { cy: 24; } /* ápice do salto 1 */ 44% { cy: 54; } /* pouso — estoura um pouco abaixo do chão (impacto) */ 46% { cy: 48; } /* quique de volta */ 48%, 85% { cy: 49; } /* acomodado, arco esquerdo */ 90% { cy: 24; } /* ápice do salto 2 */ 94% { cy: 54; } /* pouso */ 96% { cy: 48; } /* quique de volta */ 98%, 100% { cy: 49; } /* acomodado, arco direito de novo */ } @keyframes marinaamaral-arco-r { 0%, 35%, 48%, 85%, 98%, 100% { r: 7; } 40%, 90% { r: 6; } /* levemente menor no ar */ 44%, 94% { r: 9; } /* achata/alarga no impacto do pouso */ 46%, 96% { r: 7; } } #em-breve .arco-simbolo .arco-ponto { animation: marinaamaral-arco-cx 6s cubic-bezier(0.45, 0, 0.55, 1) infinite, marinaamaral-arco-cy 6s cubic-bezier(0.45, 0, 0.55, 1) infinite, marinaamaral-arco-r 6s cubic-bezier(0.45, 0, 0.55, 1) infinite; } @media (prefers-reduced-motion: reduce) { #em-breve .arco-simbolo .arco-ponto { animation: none; } } /* ---------- Tela "Em Breve" (Modo Editorial: Papel + hairlines) ---------- */ #em-breve { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px; text-align: center; /* "Arcada" (Logo.pdf, seção 02): o símbolo repetido como textura de fundo. A imagem vem via `style` inline (marinaamaral_arcada_bg_url()), aqui só o comportamento do ladrilho. */ background-repeat: repeat; background-size: 70px 70px; } .em-breve_card { max-width: 620px; padding: 56px 48px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 24px 60px rgba(35, 27, 22, 0.08); } .em-breve_simbolo { display: flex; justify-content: center; margin-bottom: 28px; } .em-breve_marca { margin-bottom: 8px; } .em-breve_lede { font-size: 19px; color: var(--text-muted); line-height: 1.6; margin-top: 16px; } .em-breve_footer { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); display: flex; align-items: baseline; justify-content: center; gap: 10px; font-size: 14px; color: var(--text-muted); } /* A margem de baixo do eyebrow tirava o @ da linha. */ .em-breve_footer .eyebrow { margin: 0; } .em-breve_credit { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 13px; color: var(--text-muted); text-decoration: none; } .credito_badge { display: inline-flex; align-items: center; justify-content: center; } .credito_badge img { display: block; } @media (max-width: 480px) { #em-breve { padding: 16px; } .em-breve_card { padding: 36px 24px; } .eyebrow { letter-spacing: 0.12em; } } /* ========================================================================== SITE ========================================================================== */ /* ---------- Peças comuns ---------- */ .wrap { width: 100%; max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto; padding-inline: var(--margem); } .wrap--texto { max-width: calc(760px + 2 * var(--margem)); } section { position: relative; } h2 { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.05; } h3 { font-size: 22px; line-height: 1.2; } .lede { max-width: 440px; font-size: 16px; color: var(--text-muted); } .eyebrow { margin: 0 0 18px; font-size: 11px; } .eyebrow--suave { color: #A0897C; /* cinza quente do manual */ } /* Mono só no Modo Estrutura (Design System, seção 04). */ .eyebrow--mono { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; } .eyebrow--claro { color: rgba(251, 246, 240, 0.55); } .acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; } .botao { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 24px; font-size: 14px; font-weight: 500; line-height: 1.2; text-align: center; text-decoration: none; border-radius: 999px; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .botao--tinta { background: var(--tinta); color: var(--papel); } .botao--tinta:hover { background: var(--rosa); color: var(--papel); } .botao--rosa { background: var(--rosa); color: var(--papel); } .botao--rosa:hover { background: #B01E4C; color: var(--papel); } .botao--verde { background: var(--verde); color: var(--papel); } .botao--verde:hover { background: #22382B; color: var(--papel); } .botao:focus-visible, .link-seta:focus-visible, .topo_menu a:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; } .link-seta { font-size: 14px; color: var(--rosa); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } .clientes { margin: 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; } /* Legenda "escrita à mão" do Desenho 2: Instrument Serif itálico, rosa. */ .mao { position: absolute; font-family: var(--font-titulo); font-style: italic; font-size: 22px; line-height: 1; color: var(--rosa); white-space: nowrap; transform: rotate(-6deg); z-index: 4; } .triangulo { position: absolute; width: 34px; height: 30px; clip-path: polygon(0 0, 100% 50%, 0 100%); z-index: 4; } .triangulo--rosa { background: var(--rosa); } .triangulo--terracota { background: var(--terracota); } /* Visível só para leitor de tela; aparece ao receber foco (o "pular"). */ .pular { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } a.pular:focus { top: 8px; left: 8px; z-index: 100; width: auto; height: auto; padding: 10px 16px; clip-path: none; background: var(--tinta); color: var(--papel); } /* ---------- Topo ---------- */ .topo { position: sticky; top: 0; z-index: 50; background: var(--papel); border-bottom: 1px solid var(--border); } .topo_linha { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: calc(var(--largura) + 2 * var(--margem)); height: var(--altura-topo); margin: 0 auto; padding-inline: var(--margem); } .topo { transition: background-color 0.35s ease, border-color 0.35s ease; } .topo_marca { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; } .topo_marca .arco-simbolo { flex: none; margin-top: -2px; } .topo_marca .arco-traco { transition: stroke 0.35s ease; } .topo .wordmark { font-size: 24px; transition: color 0.35s ease; } /* Rolou a página: o topo vira tinta, e o que estava escuro fica papel. O ponto do wordmark e o do símbolo clareiam para o rosa sobre escuro, como o manual manda (Design System, seção 02). */ .topo.rolado { background: var(--tinta); border-bottom-color: transparent; } .topo.rolado .wordmark { color: var(--papel); } .topo.rolado .wordmark::after { color: var(--rosa-sobre-escuro); } .topo.rolado .arco-traco { stroke: var(--papel); } .topo.rolado .arco-ponto { fill: var(--rosa-sobre-escuro); } .topo.rolado .topo_abrir { color: var(--papel); } @media (min-width: 961px) { .topo_menu ul a { transition: color 0.35s ease; } .topo.rolado .topo_menu ul a { color: rgba(251, 246, 240, 0.85); } .topo.rolado .topo_menu ul a:hover { color: var(--rosa-sobre-escuro); } } .topo_menu { display: flex; align-items: center; gap: 32px; } .topo_menu ul { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; } .topo_menu ul a { font-size: 13.5px; color: var(--text); text-decoration: none; } .topo_menu ul a:hover { color: var(--rosa); } .topo_cta { min-height: 38px; padding: 8px 18px; font-size: 13px; } .topo_abrir { display: none; } /* ========================================================================== 01 · INÍCIO ========================================================================== */ .inicio { background: var(--papel); } .inicio_grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; } .inicio h1 { max-width: 11.5em; font-size: clamp(42px, 5.6vw, 72px); line-height: 1.02; } /* --- Desenho 2: a colagem --- */ .desenho-2 .inicio { padding: 72px 0 calc(96px + var(--inclinacao)); } .colagem { position: relative; height: 540px; } .colagem_foto { position: absolute; object-fit: cover; } /* Arco-janela (Modo Sentir): semicírculo em cima, cantos 24px embaixo. */ .colagem_foto--arco, .colagem_foto--arco-p { border-radius: 999px 999px 24px 24px; } .colagem_foto--circulo { aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--papel); z-index: 3; } .colagem--inicio .colagem_foto--arco { left: 16%; top: 0; width: 52%; height: 84%; z-index: 2; } .colagem--inicio .colagem_foto--inclinada { right: 0; top: 22%; width: 40%; height: 50%; border-radius: 4px; transform: rotate(5deg); z-index: 1; } .colagem--inicio .colagem_foto--circulo { left: 4%; bottom: 0; width: 32%; } .colagem--inicio .triangulo { right: 16%; top: 2%; transform: rotate(-18deg); } .colagem--inicio .mao { left: 38%; bottom: 9%; } /* --- Desenho 1: uma foto só, sangrando até a borda direita --- O topo tem a altura da TELA (menos a barra), para abrir inteiro no notebook. A coluna da foto é a mais estreita (5 de 12): perto do formato em pé da foto, o corte é pequeno e a Marina aparece de corpo inteiro. */ .desenho-1 .inicio_grade { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; } .desenho-1 .inicio_texto { padding: 48px 0; align-self: center; } .inicio_foto-reta { margin-right: calc(-1 * (max(0px, (100vw - var(--largura)) / 2 - var(--margem)) + var(--margem))); height: calc(100vh - var(--altura-topo)); height: calc(100svh - var(--altura-topo)); min-height: 480px; max-height: 820px; } .inicio_foto-reta img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; } /* A foto em camada (computador): ao rolar, a foto desce dentro da moldura 1/4 do que a página rolou (--hero-y, em px, vem do main.js), e parece subir bem mais devagar que o texto, que por sua vez sobe mais rápido que a página e esmaece (main.js). A sobra da foto não passa de 25%: com mais, a cabeça dela sai do quadro em tela larga, com a página parada. Para isso ela é 25% mais alta que a moldura e começa com a sobra para cima; quando o hero sai da tela, a sobra acabou. O transform soma com o translate da entrada. */ .inicio_foto-reta { overflow: hidden; } .inicio_foto-reta img { display: block; } @media (min-width: 961px) { .inicio_foto-reta { position: relative; } .inicio_foto-reta img { position: absolute; left: 0; top: -25%; height: 125%; transform: translateY(var(--hero-y, 0)); } } /* Convite para rolar: uma linha fina no pé do hero, com o ponto rosa descendo por ela (MOVIMENTO). Some quando a pessoa começa a rolar. */ .inicio_rolar { position: absolute; left: max(var(--margem), (100vw - var(--largura)) / 2); bottom: 28px; z-index: 2; width: 1px; height: 56px; background: rgba(35, 27, 22, 0.22); transition: opacity 0.4s ease; } .inicio_rolar::after { content: ''; position: absolute; left: -2.5px; top: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--rosa); } .rolou .inicio_rolar { opacity: 0; } .desenho-2 .inicio_rolar { display: none; } @media (max-width: 960px), (max-height: 620px) { .inicio_rolar { display: none; } } /* ========================================================================== 02 · NÚMEROS ========================================================================== */ .numeros_lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; } .numeros_item { display: flex; align-items: baseline; gap: 12px; min-width: 0; } .numeros_item dt { flex: none; font-family: var(--font-titulo); font-size: clamp(30px, 3vw, 38px); line-height: 1; } .numeros_mais { color: var(--rosa); } /* Algarismos de mesma largura: durante a contagem o "mil" e o "+" não ficam pulando a cada número. */ .contador { font-variant-numeric: tabular-nums lining-nums; } .numeros_item dd { margin: 0; font-size: 12px; line-height: 1.35; } /* --- Desenho 2: faixa de tinta com a borda de cima inclinada --- */ .desenho-2 .numeros { padding: 36px 0 44px; background: var(--tinta); color: var(--papel); } /* A inclinação é um triângulo de tinta por cima do fim da seção anterior: sobe da esquerda para a direita, como no layout. */ .desenho-2 .numeros::before, .desenho-2 .empresas::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--inclinacao); margin-bottom: -1px; background: var(--tinta); } .desenho-2 .numeros::before { clip-path: polygon(0 100%, 100% 0, 100% 100%); } .desenho-2 .numeros_mais { color: var(--rosa-sobre-escuro); } .desenho-2 .numeros_item dd { color: rgba(251, 246, 240, 0.6); } .desenho-2 .numeros .clientes { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(251, 246, 240, 0.14); color: rgba(251, 246, 240, 0.45); } /* --- Desenho 1: faixa clara, quatro colunas com fio entre elas --- */ .desenho-1 .numeros { background: var(--papel); border-block: 1px solid var(--border); } .desenho-1 .numeros_item { flex-direction: column; gap: 8px; padding: 30px 24px; border-left: 1px solid var(--border); } .desenho-1 .numeros_item:first-child { border-left: 0; padding-left: 0; } .desenho-1 .numeros_item dd { color: var(--text-muted); } /* ========================================================================== 03 · O MÉTODO (Modo Estrutura) ========================================================================== */ .metodo { padding: 104px 0; background: var(--gesso); } .metodo_grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; } .metodo_texto { max-width: 340px; font-size: 15px; color: var(--text-muted); } .etapas { margin: 0; padding: 0; list-style: none; } .etapa h3 { margin: 0 0 6px; } .etapa p { margin: 0; font-size: 14px; color: var(--text-muted); } .etapa_codigo { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--rosa); } /* --- Desenho 2: lista com o triângulo e o código à direita --- */ .desenho-2 .etapa { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "seta titulo codigo" "seta texto texto"; column-gap: 16px; padding: 26px 0; border-bottom: 1px solid rgba(35, 27, 22, 0.18); } .desenho-2 .etapa:first-child { padding-top: 4px; } .desenho-2 .etapa::before { content: ''; grid-area: seta; width: 22px; height: 22px; margin-top: 4px; clip-path: polygon(0 0, 100% 50%, 0 100%); background: var(--rosa); } .desenho-2 .etapa--2::before { background: var(--terracota); } .desenho-2 .etapa--3::before { background: var(--verde); } .desenho-2 .etapa h3 { grid-area: titulo; } .desenho-2 .etapa p { grid-area: texto; max-width: 480px; } .desenho-2 .etapa_codigo { grid-area: codigo; } /* --- Desenho 1: três caixas com borda (a caixa é do Modo Estrutura) --- */ .desenho-1 .etapas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--tinta); } .desenho-1 .etapa { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 26px; border-left: 1px solid var(--tinta); } .desenho-1 .etapa:first-child { border-left: 0; } /* Hover das caixas: a cor da etapa (rosa, terracota, verde) sobe do pé da caixa e o texto clareia por cima. A transição fica nas peças de dentro, e não na .etapa, para não brigar com a entrada (.revelar) dela. */ .desenho-1 .etapa { position: relative; isolation: isolate; overflow: hidden; --etapa-cor: var(--rosa); } .desenho-1 .etapa--2 { --etapa-cor: var(--terracota); } .desenho-1 .etapa--3 { --etapa-cor: var(--verde); } .desenho-1 .etapa::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--etapa-cor); scale: 1 0; transform-origin: bottom; transition: scale 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); } .desenho-1 .etapa h3, .desenho-1 .etapa p, .desenho-1 .etapa_codigo { transition: color 0.35s ease, translate 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); } @media (hover: hover) { .desenho-1 .etapa:hover::before { scale: 1 1; } .desenho-1 .etapa:hover h3 { color: var(--papel); translate: 0 -4px; } .desenho-1 .etapa:hover p { color: rgba(251, 246, 240, 0.86); translate: 0 -4px; } .desenho-1 .etapa:hover .etapa_codigo { color: var(--papel); } } /* Desenho 2: o triângulo anda um pouco para a direita e o título ganha a cor da etapa. */ .desenho-2 .etapa::before, .desenho-2 .etapa h3 { transition: translate 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.3s ease; } @media (hover: hover) { .desenho-2 .etapa:hover::before { translate: 8px 0; } .desenho-2 .etapa:hover h3 { color: var(--rosa); } .desenho-2 .etapa--2:hover h3 { color: var(--terracota); } .desenho-2 .etapa--3:hover h3 { color: var(--verde); } } /* ========================================================================== 04 · PARA EMPRESAS (Modo Estrutura, escuro) ========================================================================== */ .empresas { padding: 104px 0; background: var(--tinta); color: var(--papel); } .empresas em { color: var(--rosa-sobre-escuro); } .frente h3 { margin: 0 0 6px; font-size: 20px; color: var(--papel); } .frente p { margin: 0; font-size: 13.5px; color: rgba(251, 246, 240, 0.62); } .frente_rotulo { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rosa-sobre-escuro); } .empresas_pe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 36px; } .empresas .clientes { color: rgba(251, 246, 240, 0.5); } /* --- Desenho 2: foto inclinada + frentes em linhas --- */ .desenho-2 .empresas { padding-top: calc(72px + var(--inclinacao) / 2); } .desenho-2 .empresas::before { clip-path: polygon(0 0, 100% 100%, 0 100%); } .desenho-2 .empresas_grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; } .empresas_foto { position: relative; margin: 0; transform: rotate(-3deg); } .empresas_foto img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; object-position: 50% 30%; } .selo { position: absolute; left: -8px; bottom: 28px; padding: 6px 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--papel); background: var(--rosa); } .desenho-2 .frentes { margin-top: 28px; border-top: 1px solid rgba(251, 246, 240, 0.14); } .desenho-2 .frente { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 20px; padding: 20px 0; border-bottom: 1px solid rgba(251, 246, 240, 0.14); } .desenho-2 .frente_rotulo { margin: 5px 0 0; } .desenho-2 .empresas_pe { justify-content: flex-start; } /* --- Desenho 1: chapéu na linha do título, frentes em três caixas --- */ .desenho-1 .empresas_cabeca { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; } .desenho-1 .frentes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 36px; } .desenho-1 .frente { padding: 24px 22px 28px; border: 1px solid rgba(251, 246, 240, 0.28); } .desenho-1 .frente_rotulo { margin: 0 0 12px; } .frente_lista { margin: 12px 0 0; padding: 0; list-style: none; } .frente_lista li { padding: 8px 0; font-size: 13.5px; color: rgba(251, 246, 240, 0.72); border-top: 1px solid rgba(251, 246, 240, 0.14); } .desenho-1 .empresas_pe { margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(251, 246, 240, 0.14); flex-wrap: nowrap; } .desenho-1 .empresas_pe .botao { flex-shrink: 0; white-space: nowrap; } /* Os clientes. Parados, em linha que quebra; com movimento liberado no aparelho, viram a faixa que corre (bloco MOVIMENTO, no fim). */ .clientes--faixa { flex: 1 1 auto; min-width: 0; } .clientes_volta { display: flex; flex-wrap: wrap; row-gap: 8px; } .clientes_volta + .clientes_volta { display: none; } .clientes_volta .clientes_nome:last-child::after { content: none; } .clientes_nome { white-space: nowrap; transition: color 0.3s ease; } .clientes_nome::after { content: '·'; margin: 0 22px; color: var(--rosa-sobre-escuro); } .clientes--faixa:hover .clientes_nome:hover { color: var(--papel); } /* As caixas: com o mouse em cima, uma linha rosa percorre a borda (sobe pelo topo, desce pela direita, volta pelo pé e sobe pela esquerda) e o título fica rosa. Dois traços: o ::before desenha topo e direita, o ::after pé e esquerda. A transição fica nas peças de dentro, e não na .frente, para não brigar com a entrada (.revelar) dela. */ .desenho-1 .frente { position: relative; } .desenho-1 .frente::before, .desenho-1 .frente::after { content: ''; position: absolute; width: 0; height: 0; box-sizing: border-box; border: 1px solid transparent; pointer-events: none; } .desenho-1 .frente::before { top: -1px; left: -1px; transition: width 0.25s ease 0.25s, height 0.25s ease 0s, border-color 0s linear 0.5s; } .desenho-1 .frente::after { right: -1px; bottom: -1px; transition: width 0.25s ease 0.75s, height 0.25s ease 0.5s, border-color 0s linear 1s; } .desenho-1 .frente h3 { transition: color 0.35s ease; } @media (hover: hover) { .desenho-1 .frente:hover::before, .desenho-1 .frente:hover::after { width: calc(100% + 2px); height: calc(100% + 2px); } .desenho-1 .frente:hover::before { border-top-color: var(--rosa-sobre-escuro); border-right-color: var(--rosa-sobre-escuro); transition: width 0.25s ease, height 0.25s ease 0.25s, border-color 0s; } .desenho-1 .frente:hover::after { border-bottom-color: var(--rosa-sobre-escuro); border-left-color: var(--rosa-sobre-escuro); transition: width 0.25s ease 0.5s, height 0.25s ease 0.75s, border-color 0s linear 0.5s; } .desenho-1 .frente:hover h3 { color: var(--rosa-sobre-escuro); } } /* As palestras: a linha com o mouse anda um pouco e ganha uma seta. */ .frente_lista li { display: flex; justify-content: space-between; gap: 12px; transition: color 0.3s ease, translate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); } .frente_lista li::after { content: '→'; color: var(--rosa-sobre-escuro); opacity: 0; translate: -8px 0; transition: opacity 0.3s ease, translate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); } @media (hover: hover) { .frente_lista li:hover { color: var(--papel); translate: 6px 0; } .frente_lista li:hover::after { opacity: 1; translate: 0 0; } } /* ========================================================================== 05 · PARA VOCÊ (Modo Sentir) ========================================================================== */ .voce { padding: 104px 0; background: var(--blush); } .voce em { color: var(--terracota); } .voce_grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; } .voce_texto p { max-width: 480px; font-size: 15.5px; color: var(--text-muted); } .nota { font-size: 12.5px; color: #A76A62; } /* --- Desenho 2: a colagem --- */ .colagem--voce .colagem_foto--circulo { border-color: var(--blush); } .colagem--voce .colagem_foto--arco { left: 6%; top: 4%; width: 46%; height: 72%; transform: rotate(-4deg); z-index: 1; } .colagem--voce .colagem_foto--arco-p { right: 2%; top: 18%; width: 40%; height: 58%; transform: rotate(5deg); z-index: 2; } .colagem--voce .colagem_foto--circulo { left: 22%; bottom: 0; width: 30%; } .colagem--voce .triangulo { left: 52%; top: 0; transform: rotate(24deg); } .colagem--voce .mao { right: 6%; bottom: 8%; } /* --- Desenho 1: um arco só, à esquerda --- */ .desenho-1 .voce_grade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } /* O arco é a moldura (corta o que sobra) e a foto mexe por dentro dele: abre como janela ao chegar e desliza devagar ao rolar (MOVIMENTO). */ .voce_arco { width: 100%; /* com aspect-ratio, o item da grade não estica sozinho */ overflow: hidden; border-radius: 999px 999px 24px 24px; aspect-ratio: 4 / 5; } .voce_arco img { display: block; width: 100%; height: 100%; object-fit: cover; } /* O grifo à mão embaixo do destaque do título (o *texto* do painel). Sem movimento, fica desenhado; com movimento, risca quando o título chega. */ .voce h2 em { padding-bottom: 0.08em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9c30-5 62-6 96-3s70 3 98-2' fill='none' stroke='%23C8602C' stroke-width='2.4' stroke-linecap='round' stroke-opacity='.75'/%3E%3C/svg%3E") 0 100% / 100% 0.22em no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* ========================================================================== 06 · HISTÓRIAS (Modo Editorial) ========================================================================== */ .historias { padding: 104px 0; background: var(--papel); } .historias_lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 48px; } .historia { margin: 0; padding-top: 22px; border-top: 1px solid rgba(35, 27, 22, 0.22); } .historia .eyebrow { margin-bottom: 14px; font-size: 10.5px; letter-spacing: 0.16em; } .historia blockquote { margin: 0 0 16px; } .historia blockquote p { margin: 0; font-family: var(--font-titulo); font-size: 24px; line-height: 1.25; } .historia figcaption { font-size: 13px; color: var(--text-muted); } /* O carrossel: o main.js põe a lista numa janela (.historias_janela) e liga .carrossel. A fila anda um depoimento para a esquerda de tempos em tempos; quem sai pela esquerda volta pela direita. Sem JavaScript, ou com "reduzir movimento", fica a grade de colunas de sempre. */ .historias_janela { overflow: hidden; margin-top: 48px; } .historias_lista.carrossel { display: flex; margin-top: 0; } .carrossel .historia { flex: 0 0 calc((100% - 80px) / 3); } @media (max-width: 960px) { .carrossel .historia { flex-basis: 100%; } } /* ========================================================================== 07 · O LIVRO (Modo Editorial) ========================================================================== */ .livro { padding: 120px 0; } .livro_texto { max-width: 470px; } .livro_texto p { font-size: 15.5px; } /* --- Desenho 2: a foto sangra a seção, texto em papel por cima --- */ /* Scrim do manual (Design System, seção 05) mais um da esquerda, que é onde o texto mora. */ .desenho-2 .livro { min-height: 600px; display: flex; align-items: center; color: var(--papel); background: linear-gradient(90deg, rgba(35, 27, 22, 0.8) 0%, rgba(35, 27, 22, 0.55) 42%, rgba(35, 27, 22, 0) 72%), linear-gradient(transparent, rgba(35, 27, 22, 0.72)), var(--livro-foto) 60% 40% / cover no-repeat, var(--tinta); } .desenho-2 .livro em { color: var(--rosa-sobre-escuro); } .desenho-2 .livro .eyebrow { color: var(--rosa-sobre-escuro); } .desenho-2 .livro_texto p { color: rgba(251, 246, 240, 0.85); } /* --- Desenho 1: papel, texto à esquerda, foto em pé à direita --- */ /* Fundo escuro (pedido dele em 28/09/2026): a seção do livro fica na tinta, como Para empresas, com o texto claro e os acentos no rosa-sobre-escuro. */ .desenho-1 .livro { background: var(--tinta); color: var(--papel); } .desenho-1 .livro h2, .desenho-1 .livro .eyebrow { color: var(--papel); } .desenho-1 .livro em { color: var(--rosa-sobre-escuro); } .desenho-1 .livro_grade { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; } .desenho-1 .livro_texto p { color: rgba(251, 246, 240, 0.72); } /* A seção cabe inteira na tela quando o menu leva até ela: menos folga em cima e embaixo, e a foto na altura que sobra (tela menos o topo fixo e a folga), mantendo o 4:5. Em tela alta, a foto fica no tamanho da coluna, como antes. */ @media (min-width: 961px) { .desenho-1 .livro { --livro-folga: clamp(40px, 7vh, 88px); padding: var(--livro-folga) 0; } .desenho-1 .livro_moldura { justify-self: end; width: min(100%, max(300px, (100svh - var(--altura-topo) - 2 * var(--livro-folga)) * 0.8)); } } /* A moldura: duas linhas soltas em volta da foto, afastadas dela, uma branca e uma rosa, retas e de canto vivo, tortas cada uma para um lado e afastadas de forma desigual, então se cruzam em alguns pontos. Só enfeite. --moldura-longe é o afastamento (menor no celular, para não passar da borda da tela). */ .livro_moldura { --moldura-longe: 22px; position: relative; width: 100%; } .livro_moldura::before, .livro_moldura::after { content: ''; position: absolute; pointer-events: none; z-index: 0; } .livro_moldura::before { inset: calc(-1 * var(--moldura-longe)) calc(-0.7 * var(--moldura-longe)) calc(-1.2 * var(--moldura-longe)) calc(-1.1 * var(--moldura-longe)); border: 1.5px solid rgba(251, 246, 240, 0.7); rotate: -1.6deg; } .livro_moldura::after { inset: calc(-1.3 * var(--moldura-longe)) calc(-1.1 * var(--moldura-longe)) calc(-0.8 * var(--moldura-longe)) calc(-0.6 * var(--moldura-longe)); border: 1.5px solid var(--rosa-sobre-escuro); rotate: 2.2deg; } .livro_moldura .livro_foto { z-index: 1; } .livro_foto { position: relative; margin: 0; overflow: hidden; /* o zoom lento da foto (MOVIMENTO) fica dentro da moldura */ } .livro_foto img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 54% 40%; } .livro_foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(35, 27, 22, 0.72)); } .livro_foto figcaption { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 1; font-family: var(--font-titulo); font-style: italic; font-size: 20px; line-height: 1.25; color: var(--papel); } /* ========================================================================== 07b · CONTATO O formulário para onde vão todos os botões de contato. Vem do plugin Konversa para WordPress; aqui ele ganha o desenho da marca (o plugin só traz o mínimo, de propósito). Gesso: é a seção de "fazer", como o método. ========================================================================== */ .contato { position: relative; isolation: isolate; overflow: hidden; padding: 104px 0; background: var(--gesso); } .contato > .wrap { position: relative; z-index: 1; } /* O fundo: três manchas de cor desfocadas (dão calor) e quatro arcos-janela de traço fino (dão desenho), cada um no seu canto. O movimento fica no bloco MOVIMENTO: as manchas deslizam devagar e os arcos sobem e descem, cada um no seu ritmo. */ .contato_fundo { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .contato_mancha { position: absolute; border-radius: 50%; filter: blur(70px); } .contato_mancha--1 { right: 4%; top: -8%; width: 46vw; max-width: 620px; aspect-ratio: 1; background: rgba(240, 140, 171, 0.42); } .contato_mancha--2 { right: 26%; bottom: -18%; width: 38vw; max-width: 520px; aspect-ratio: 1; background: rgba(200, 96, 44, 0.22); } .contato_mancha--3 { left: -10%; top: 30%; width: 34vw; max-width: 460px; aspect-ratio: 1; background: rgba(248, 234, 227, 0.95); } .contato_arco { position: absolute; aspect-ratio: 3 / 4; border: 1.5px solid; border-bottom: 0; border-radius: 999px 999px 0 0; } .contato_arco--1 { right: -3%; top: 8%; width: 300px; border-color: rgba(216, 38, 94, 0.35); } .contato_arco--2 { right: 34%; bottom: -12%; width: 220px; border-color: rgba(200, 96, 44, 0.4); } .contato_arco--3 { left: 3%; bottom: -20%; width: 360px; border-color: rgba(47, 75, 58, 0.28); } .contato_arco--4 { right: 8%; bottom: 6%; width: 120px; border-color: rgba(216, 38, 94, 0.3); } @media (max-width: 960px) { .contato_mancha--1 { width: 90vw; } .contato_mancha--2 { width: 80vw; right: -10%; } .contato_mancha--3 { width: 70vw; } .contato_arco--1 { width: 130px; right: -16%; top: 1%; } .contato_arco--2 { width: 140px; right: 60%; bottom: -6%; } .contato_arco--3 { width: 220px; left: -22%; bottom: -8%; } .contato_arco--4 { width: 80px; } } .contato_grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; } .contato_texto p { max-width: 400px; font-size: 15.5px; color: var(--text-muted); } .contato_direto { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(35, 27, 22, 0.15); font-size: 14px !important; } .contato_direto a { color: var(--rosa); text-underline-offset: 4px; } .contato_sem-formulario { font-size: 16px; } /* --- O formulário do plugin, no desenho da marca --- O plugin desenha tudo a partir de variáveis --kf-*: aqui só se trocam as variáveis, sem disputar seletor com o plugin. TUDO preso a .konversa-formulario--site: vale só com o visual "Do site" (Konversa > Formulário > Visual). Com o visual "Do Konversa" escolhido, o tema sai da frente e o formulário fica com a marca do app. A grade de duas colunas é o único ajuste que vale para os dois: é o encaixe na seção, não visual. */ .contato .konversa-formulario--site { --kf-fonte: var(--font-texto); --kf-texto: var(--text); --kf-rotulo: var(--text-muted); --kf-fundo: var(--papel); --kf-borda-caixa: 1px solid rgba(35, 27, 22, 0.12); --kf-espaco: 32px; --kf-campo-fundo: var(--gesso); --kf-campo-borda: rgba(35, 27, 22, 0.2); --kf-campo-texto: var(--text); --kf-raio: 2px; --kf-foco: var(--rosa); --kf-foco-suave: rgba(216, 38, 94, 0.28); --kf-botao-fundo: var(--rosa); --kf-botao-texto: var(--papel); --kf-botao-fundo-hover: #B01E4C; --kf-botao-raio: 999px; --kf-ok-fundo: var(--blush); --kf-ok-borda: var(--rosa); } .contato .konversa-formulario { max-width: none; scroll-margin-top: calc(var(--altura-topo) + 24px); } .contato .konversa-ancora { scroll-margin-top: calc(var(--altura-topo) + 24px); } .contato .konversa-formulario form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; } /* Assunto, nome, mensagem, consentimento e botão ocupam a linha toda; e-mail e telefone dividem. */ .contato .konversa-formulario__campo:has(select), .contato .konversa-formulario__campo:has(input[autocomplete="name"]), .contato .konversa-formulario__campo:has(textarea), .contato .konversa-formulario__consentimento, .contato .konversa-formulario__acoes { grid-column: 1 / -1; } .contato .konversa-formulario__campo { margin: 0 0 18px; } /* Rótulo em eyebrow, como no resto do site. */ .contato .konversa-formulario--site .konversa-formulario__campo label { margin-bottom: 6px; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; } .contato .konversa-formulario--site .konversa-formulario__campo input, .contato .konversa-formulario--site .konversa-formulario__campo select, .contato .konversa-formulario--site .konversa-formulario__campo textarea { min-height: 46px; padding: 10px 14px; font-size: 15px; } .contato .konversa-formulario--site .konversa-formulario__botao { min-height: 48px; padding: 12px 32px; font-size: 15px; font-weight: 500; } @media (max-width: 960px) { .contato { padding: 80px 0; } .contato_grade { grid-template-columns: minmax(0, 1fr); gap: 32px; } } @media (max-width: 560px) { .contato .konversa-formulario--site { --kf-espaco: 22px 18px; } .contato .konversa-formulario form { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== 08 · O FECHO + RODAPÉ Desenho 2 (e páginas internas): papel. Desenho 1: tinta, como a arquitetura pediu ("editorial escuro"). ========================================================================== */ .fecho { padding: 88px 0 28px; background: var(--papel); border-top: 1px solid var(--border); } .fecho_linha { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; } .fecho_pergunta { margin: 0; font-family: var(--font-titulo); font-size: clamp(36px, 4.6vw, 56px); line-height: 1.05; } .fecho_contatos { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .fecho_contatos a { font-size: 14px; color: inherit; text-decoration: underline; text-decoration-color: var(--rosa); text-underline-offset: 5px; } .fecho_contatos a:hover { color: var(--rosa); } .fecho_rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; margin-top: 72px; padding-top: 20px; border-top: 1px solid var(--border); } .wordmark--p { font-size: 18px; } .fecho_assinatura { margin: 0; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); } .fecho_credito { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); text-decoration: none; } .desenho-1 .fecho { background: var(--tinta); color: var(--papel); border-top: 0; } .desenho-1 .fecho em, .desenho-1 .fecho .wordmark::after { color: var(--rosa-sobre-escuro); } .desenho-1 .fecho .wordmark { color: var(--papel); } .desenho-1 .fecho_rodape { border-top-color: rgba(251, 246, 240, 0.16); } .desenho-1 .fecho_assinatura, .desenho-1 .fecho_credito { color: rgba(251, 246, 240, 0.55); } /* O símbolo antes do nome, como no topo. No fecho escuro (Proposta 1) o traço clareia. */ .fecho_marca .arco-simbolo { margin-top: -1px; } .desenho-1 .fecho_marca .arco-traco { stroke: var(--papel); } .desenho-1 .fecho_marca .arco-ponto { fill: var(--rosa-sobre-escuro); } /* ---------- Páginas internas ---------- */ .pagina { padding: 56px 0 96px; } .pagina_texto { font-size: 16px; } .caminho ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 32px; padding: 0; list-style: none; font-size: 13px; } .caminho li { display: inline-flex; align-items: center; gap: 10px; color: var(--text-muted); } .caminho li + li::before { content: ''; width: 6px; height: 10px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='M1 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='M1 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / contain; } .caminho a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); text-decoration: none; } .caminho a:hover { color: var(--rosa); } .caminho [aria-current] { color: var(--text); } /* O botão de WhatsApp é do plugin Konversa para WordPress, com o visual dele. */ /* ========================================================================== TELAS MENORES ========================================================================== */ @media (max-width: 1080px) { .topo_menu ul { gap: 20px; } .topo_menu { gap: 20px; } } /* O menu vira tela cheia. O topo NÃO usa backdrop-filter: ele faria o menu fixo abrir espremido dentro do topo. */ @media (max-width: 960px) { .topo_abrir { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; font: inherit; font-size: 13px; color: var(--text); background: none; border: 0; cursor: pointer; } .topo_abrir-traco, .topo_abrir-traco::before { display: block; width: 20px; height: 1.5px; background: currentColor; transition: transform 0.2s ease; } .topo_abrir-traco { position: relative; } .topo_abrir-traco::before { content: ''; position: absolute; top: 6px; } .topo_abrir[aria-expanded="true"] .topo_abrir-traco { transform: translateY(3px) rotate(45deg); } .topo_abrir[aria-expanded="true"] .topo_abrir-traco::before { transform: translateY(-6px) rotate(-90deg); } .topo_menu { position: fixed; top: var(--altura-topo); left: 0; right: 0; bottom: 0; display: none; flex-direction: column; align-items: flex-start; gap: 32px; padding: 32px var(--margem); background: var(--papel); overflow-y: auto; } .topo_menu.aberto { display: flex; } .topo_menu ul { flex-direction: column; gap: 0; width: 100%; } .topo_menu ul a { display: block; padding: 14px 0; font-family: var(--font-titulo); font-size: 30px; border-bottom: 1px solid var(--border); } .topo_cta { min-height: 48px; font-size: 14px; } body.menu-aberto { overflow: hidden; } .inicio_grade, .desenho-1 .inicio_grade, .metodo_grade, .desenho-2 .empresas_grade, .voce_grade, .desenho-1 .voce_grade, .desenho-1 .livro_grade { grid-template-columns: minmax(0, 1fr); gap: 40px; } .desenho-2 .inicio { padding-top: 48px; } .colagem { height: 460px; max-width: 520px; width: 100%; margin: 0 auto; } .numeros_lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; } .numeros_item { flex-direction: column; gap: 6px; } .desenho-1 .numeros_item { padding: 22px 0; border-left: 0; border-top: 1px solid var(--border); } .desenho-1 .numeros_item:nth-child(-n+2) { border-top: 0; } .desenho-1 .numeros_lista { gap: 0 16px; } .desenho-1 .inicio_texto { padding: 56px 0 0; } .inicio_foto-reta { margin-right: calc(-1 * var(--margem)); margin-left: calc(-1 * var(--margem)); min-height: 0; height: auto; max-height: none; } .inicio_foto-reta img { aspect-ratio: 4 / 4.4; height: auto; } .desenho-1 .etapas, .desenho-1 .frentes, .historias_lista { grid-template-columns: minmax(0, 1fr); } .desenho-1 .etapa { border-left: 0; border-top: 1px solid var(--tinta); } .desenho-1 .etapa:first-child { border-top: 0; } .desenho-1 .empresas_pe { flex-wrap: wrap; } .clientes--faixa { flex-basis: 100%; } .empresas_foto { max-width: 420px; } .voce_arco { max-width: 380px; } .livro_moldura { max-width: 440px; width: calc(100% - 28px); margin: 18px auto; --moldura-longe: 13px; } .livro_moldura::before { rotate: -0.7deg; } .livro_moldura::after { rotate: 1deg; } .metodo, .empresas, .voce, .historias { padding: 80px 0; } .desenho-2 .empresas { padding-top: calc(56px + var(--inclinacao) / 2); } .desenho-2 .livro { min-height: 0; background-position: 0 0, 0 0, 70% 40%, 0 0; } .historias_lista { gap: 28px; } } @media (max-width: 560px) { body { font-size: 16px; } .inicio h1 { font-size: 42px; } h2 { font-size: 36px; } .colagem { height: 380px; } .mao { font-size: 19px; } .desenho-2 .frente { grid-template-columns: minmax(0, 1fr); gap: 6px; } .desenho-2 .etapa { grid-template-columns: 32px minmax(0, 1fr) auto; } .livro { padding: 88px 0; } .fecho_rodape { flex-direction: column; align-items: flex-start; } /* Folga para o botão do WhatsApp do plugin (canto esquerdo) não cobrir o nome. */ .fecho { padding-bottom: 96px; } .topo .wordmark { font-size: 22px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* ========================================================================== TEXTURAS E COR DE FUNDO Nada inventado: tudo sai do manual. A "Arcada" (o símbolo repetido como padrão, Logo.pdf seção 02), a grade de planta baixa do Modo Estrutura, os pontilhados e o arco-janela do Modo Sentir (Design System, seção 03). Cada textura mora num ::before/::after solto, atrás do conteúdo, e some aos poucos por máscara para nunca disputar com o texto. ========================================================================== */ :root { --arcada-tinta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'%3E%3Cpath d='M15 62V35a20 20 0 0 1 40 0v27' fill='none' stroke='%23231B16' stroke-opacity='.045' stroke-width='1.6'/%3E%3C/svg%3E"); --arcada-papel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'%3E%3Cpath d='M15 62V35a20 20 0 0 1 40 0v27' fill='none' stroke='%23FBF6F0' stroke-opacity='.05' stroke-width='1.6'/%3E%3C/svg%3E"); } .inicio > .wrap, .metodo > .wrap, .empresas > .wrap, .voce > .wrap, .historias > .wrap, .livro > .wrap, .fecho > .wrap { position: relative; z-index: 1; } .inicio, .metodo, .empresas, .voce, .historias, .fecho { overflow-x: clip; } .inicio::before, .metodo::before, .empresas::after, .voce::before, .voce::after, .historias::before, .fecho::before, .desenho-1 .livro::before { content: ''; position: absolute; pointer-events: none; z-index: 0; } /* 01 · Início: a Arcada do lado das fotos, sumindo em direção ao texto. */ .inicio::before { inset: 0; background: var(--arcada-tinta) 0 0 / 70px 70px repeat; -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 65%); mask-image: linear-gradient(to left, #000 0%, transparent 65%); } /* No Desenho 1 os arcos do hero são um pouco mais escuros que a Arcada comum (.07 em vez de .045): ficam depois que a onda rosa passa. */ .desenho-1 .inicio::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'%3E%3Cpath d='M15 62V35a20 20 0 0 1 40 0v27' fill='none' stroke='%23231B16' stroke-opacity='.07' stroke-width='1.6'/%3E%3C/svg%3E"); -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 55%); mask-image: linear-gradient(to right, #000 0%, transparent 55%); } /* Um arco-janela em blush atrás da colagem: dá cor ao topo sem gradiente. */ .colagem--inicio::before { content: ''; position: absolute; left: 8%; top: 8%; width: 72%; height: 84%; /* termina atrás do círculo, sem corte aparente */ background: var(--blush); border-radius: 999px 999px 0 0; z-index: 0; } /* 03 · O método: a grade de planta baixa, forte no canto e sumindo. */ .metodo::before { inset: 0; background-image: linear-gradient(rgba(35, 27, 22, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(35, 27, 22, 0.07) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 70% 90% at 0% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse 70% 90% at 0% 0%, #000 0%, transparent 70%); } /* 04 · Empresas: a Arcada clara sobre a tinta, do lado direito. */ .empresas::after { inset: 0; /* --arcada-y: os arcos andam mais devagar que a página (main.js). */ background: var(--arcada-papel) 0 var(--arcada-y, 0) / 70px 70px repeat; -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 60%); mask-image: linear-gradient(to left, #000 0%, transparent 60%); } /* 05 · Para você: um arco-janela grande em traço rosa e os pontilhados. */ .voce::before { right: -6%; top: 48px; bottom: 0; width: min(560px, 48vw); border: 1px solid rgba(216, 38, 94, 0.22); border-bottom: 0; border-radius: 999px 999px 0 0; } .voce::after { left: 0; bottom: 0; width: 55%; height: 60%; background-image: radial-gradient(rgba(200, 96, 44, 0.22) 1.2px, transparent 1.4px); background-size: 18px 18px; -webkit-mask-image: radial-gradient(ellipse at 0% 100%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 0% 100%, #000 0%, transparent 70%); } .desenho-1 .voce::before { right: auto; left: -6%; } /* 06 · Histórias: gesso, e as aspas grandes da marca em rosa bem claro. */ .historias { background: var(--gesso); } .historias::before { content: '\201C'; right: 4%; top: -40px; font-family: var(--font-titulo); font-size: clamp(260px, 30vw, 420px); line-height: 1; color: rgba(216, 38, 94, 0.09); } .historia { border-top-color: rgba(35, 27, 22, 0.25); } /* 07 · O livro no Desenho 1: a Arcada clara atrás do texto, sobre a tinta. */ .desenho-1 .livro::before { inset: 0; background: var(--arcada-papel) 0 0 / 70px 70px repeat; -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 55%); mask-image: linear-gradient(to right, #000 0%, transparent 55%); } /* 08 · O fecho (Desenho 2 e páginas internas): blush com a Arcada. position: relative é o que prende a textura ao rodapé: o fecho é