/* Página "Governança". Referência de movimento: madewithgsap.com. O que foi traduzido de lá são duas assinaturas — texto que entra caractere a caractere, e uma faixa horizontal de "arraste para explorar". O resto (paleta, tipografia, régua de espaçamento) segue o sistema da CALONE, não a referência. Página clara, ao contrário da Executivo: no ritmo do site as duas se alternam, e governança lê como clareza e estrutura. Estado base = sem JavaScript. Nada nasce escondido; é `.is-animado` no , posta por script antes da primeira pintura, que autoriza esconder. */ .governanca { position: relative; z-index: 1; color: var(--calone-black); background: var(--calone-paper); overflow: hidden; } .governanca__quadro { width: min(1280px, 100%); margin-inline: auto; padding-inline: clamp(22px, 6vw, 80px); } .governanca__eyebrow { margin: 0 0 clamp(18px, 2.6vh, 30px); color: var(--calone-on-light-muted); font-size: clamp(10px, 1.1vw, 13px); font-weight: 600; letter-spacing: .26em; /* caixa alta pequena pede entreletra positiva */ text-transform: uppercase; } /* ---------- abertura ---------- */ .governanca__abertura { position: relative; padding-block: clamp(150px, 22vh, 250px) clamp(90px, 13vh, 150px); } /* Âncora visual da abertura: uma estrutura de aletas verticais, entrando só pela direita. Era a única página do site sem imagem nenhuma — todas as outras têm um elemento material (o anel da equipe, o monograma da Inteligência, a Terra do Legado, os retratos dos Embaixadores). A imagem é monocromática e de alta chave, e o texto ocupa o vazio dela: a composição já foi gerada com dois terços livres à esquerda. A borda não encosta no fundo da página — o off-white dela tem gradiente próprio e casar tom a tom não fecha. Quem resolve é a máscara, que dissolve a imagem no papel em vez de cortá-la. */ .governanca__estrutura { position: absolute; right: 0; bottom: 0; z-index: 0; width: min(62%, 780px); height: auto; pointer-events: none; user-select: none; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%), linear-gradient(to bottom, transparent 0%, #000 30%, #000 76%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0%, #000 42%), linear-gradient(to bottom, transparent 0%, #000 30%, #000 76%, transparent 100%); mask-composite: intersect; } /* O texto por cima. Sem isto a imagem, sendo o primeiro filho, ficaria embaixo de qualquer jeito — mas o z-index explícito evita surpresa se algum dia o título ganhar transform e criar contexto próprio. */ .governanca__abertura > .governanca__eyebrow, .governanca__abertura > .governanca__definicao { position: relative; z-index: 1; } /* Em coluna estreita a imagem passaria por trás do texto e sujaria a leitura; o título já ocupa a largura toda. */ @media (max-width: 899px) { .governanca__estrutura { display: none; } } .governanca__definicao { margin: 0; max-width: 20ch; font-size: clamp(2.1rem, 5.4vw, 4.4rem); font-weight: 400; line-height: 1.06; letter-spacing: -.038em; /* display grande: entreletra negativa */ } .governanca__definicao .font-display { font-weight: 400; letter-spacing: -.02em; } /* O corte por caractere é feito pelo JS. Cada letra vira um inline-block para poder receber transform; a máscara vem do bloco de linha, que recorta. */ .governanca__linha { display: block; overflow: hidden; } /* Invólucro de palavra: a quebra de linha só pode acontecer entre palavras, nunca entre duas letras. Sem ele a frase partia no meio ("organiz / a"). */ .governanca__palavra { display: inline-block; white-space: nowrap; } .governanca__letra { display: inline-block; white-space: pre; /* preserva o espaço entre palavras */ will-change: transform, opacity; } /* ---------- os cinco movimentos ---------- */ .governanca__movimentos { margin: 0; padding: 0 0 clamp(90px, 13vh, 150px); list-style: none; counter-reset: gov; } .governanca__movimento { counter-increment: gov; display: grid; grid-template-columns: clamp(52px, 7vw, 96px) minmax(0, 1fr); gap: clamp(14px, 2.4vw, 34px); align-items: start; padding-block: clamp(26px, 3.6vh, 42px); border-top: 1px solid var(--calone-on-light-border); } /* ---------- a cena de cada movimento ---------- Uma imagem por linha, na coluna da direita. A primeira nasce à mostra; ao passar o cursor pela lista, ela se apaga e só a linha sob o ponteiro aparece. É `:hover` puro no CSS — a lista inteira sabe que alguém está sendo apontado por `.governanca__movimentos:hover`, e cada linha sabe se é ela. Nenhum JavaScript envolvido. */ @media (min-width: 900px) and (hover: hover) and (pointer: fine) { .governanca__movimento { grid-template-columns: clamp(52px, 7vw, 96px) minmax(0, 1fr) minmax(0, .78fr); /* Linhas explícitas. Sem elas a figura se auto-posiciona depois da descrição e a linha estica: título em cima, descrição lá embaixo e um vão no meio. A segunda é `1fr` e o vão vertical é zero: a figura atravessa as duas e é a mais alta, então qualquer sobra tem de cair na linha de baixo, e não entre o título e a descrição. O respiro entre eles vem do `margin-top` da própria descrição. */ grid-template-rows: auto 1fr; row-gap: 0; align-items: start; } .governanca__movimento::before { grid-row: 1; } .governanca__termo { grid-column: 2; grid-row: 1; } .governanca__desc { grid-row: 2; } .governanca__cena { grid-column: 3; grid-row: 1 / span 2; margin: 0; /* Formato largo, como no esboço: a 3:2 a imagem ficava mais alta que o bloco de texto e abria um buraco na linha. */ aspect-ratio: 3 / 1; overflow: hidden; opacity: 0; /* Sem escala nenhuma no repouso a troca fica seca; um respiro de 1,5% dá o movimento sem chamar atenção para si. */ transform: scale(.985); transition: opacity var(--motion-standard) var(--ease-calone), transform var(--motion-standard) var(--ease-calone); } /* Três regras, nesta ordem — a cascata é o mecanismo inteiro: 1. em repouso, a primeira mostra a dela; 2. com o cursor em qualquer lugar da lista, todas se apagam; 3. a linha sob o cursor reacende. A ordem importa porque 1 e 2 têm a mesma especificidade. E 3 precisa ser mais específica que 2, senão a apontada nunca reacende — foi o erro da primeira versão, em que esconder a primeira pesava mais que mostrar a escolhida e nada aparecia. */ .governanca__movimento:first-child .governanca__cena { opacity: 1; transform: none; } .governanca__movimentos:hover .governanca__cena { opacity: 0; transform: scale(.985); } .governanca__movimentos:hover .governanca__movimento:hover .governanca__cena, .governanca__movimentos .governanca__movimento:focus-within .governanca__cena { opacity: 1; transform: none; } /* O texto da linha apontada ganha contraste; as outras recuam. */ .governanca__movimentos:hover .governanca__movimento:not(:hover) .governanca__termo { opacity: .38; } .governanca__termo { transition: opacity var(--motion-standard) var(--ease-calone); } } /* Abaixo de 900px, e em qualquer tela sem ponteiro fino, as cinco ficam fixas: no toque não existe hover, e uma imagem que só aparece ao apontar simplesmente nunca apareceria. */ @media (max-width: 899px), (hover: none), (pointer: coarse) { .governanca__cena { grid-column: 2; margin: clamp(16px, 2.4vh, 24px) 0 0; aspect-ratio: 3 / 2; overflow: hidden; } } .governanca__cena img { display: block; width: 100%; height: 100%; object-fit: cover; } .governanca__movimento::before { content: counter(gov, decimal-leading-zero); color: var(--calone-on-light-muted); font-size: clamp(11px, 1.1vw, 14px); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .12em; padding-top: .5em; } /* Termo e descrição na mesma coluna. Sem isto o auto-placement do grid jogava a descrição para a linha de baixo, na coluna estreita do número — o texto saía espremido em ~140px. */ .governanca__termo, .governanca__desc { grid-column: 2; } .governanca__termo { display: block; font-size: clamp(1.3rem, 2.6vw, 2.3rem); font-weight: 500; line-height: 1.14; letter-spacing: -.028em; } .governanca__desc { display: block; margin-top: .4em; max-width: 56ch; color: var(--calone-on-light-muted); font-size: clamp(.95rem, 1.15vw, 1.15rem); font-weight: 300; line-height: 1.55; letter-spacing: 0; /* corpo pequeno: nunca a entreletra do display */ } /* ---------- a frase ---------- */ .governanca__frase { padding-block: clamp(100px, 15vh, 180px); border-top: 1px solid var(--calone-on-light-border); } .governanca__frase p { margin: 0; max-width: 24ch; font-size: clamp(1.7rem, 4.2vw, 3.4rem); font-weight: 400; line-height: 1.1; letter-spacing: -.034em; } .governanca__frase .font-display { font-weight: 400; letter-spacing: -.02em; } /* ---------- três pilares: faixa arrastável ---------- */ .governanca__pilares { padding-bottom: clamp(110px, 16vh, 190px); } .governanca__pilares-topo { display: flex; flex-wrap: wrap; gap: 16px; align-items: baseline; justify-content: space-between; padding-bottom: clamp(26px, 4vh, 46px); } .governanca__dica { margin: 0; color: var(--calone-on-light-muted); font-size: clamp(10px, 1vw, 12px); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; } /* Sangra até a borda da tela: a faixa continua para fora do quadro, que é o que anuncia "tem mais coisa deste lado". */ .governanca__trilho { position: relative; margin-inline: calc(50% - 50vw); padding-inline: max(clamp(22px, 6vw, 80px), calc(50vw - 640px + clamp(22px, 6vw, 80px))); overflow: hidden; cursor: grab; touch-action: pan-y; /* o gesto horizontal é nosso; o vertical é da página */ } .governanca__trilho.is-arrastando { cursor: grabbing; } .governanca__carro { display: flex; gap: clamp(16px, 2.4vw, 32px); will-change: transform; } /* Largos de propósito. Com três cartões de 460px eles cabiam inteiros numa tela de 1440 (1444 contra 1440 de janela): sobrava 4px de arrasto e o "arraste para explorar" virava promessa vazia. Nesta largura sempre sobra percurso de verdade, e o cartão lê como painel em vez de cartãozinho. */ .governanca__pilar { flex: none; width: min(80vw, 560px); min-height: clamp(340px, 52vh, 520px); display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: clamp(26px, 3vw, 40px); border: 1px solid var(--calone-on-light-border); border-radius: 4px; background: var(--calone-white); /* o conteúdo não é arrastável: senão o navegador rouba o gesto */ user-select: none; -webkit-user-select: none; } /* ---------- a marca de cada pilar ---------- Os cartões nasceram com a metade de cima vazia (`justify-content: flex-end` empurra o texto para a base). Em vez de uma foto, um desenho de linha por pilar: é o registro da página, que é tipográfica e sem imagem nenhuma, e não depende de asset externo. Cada motivo diz o que o pilar faz: 01 feixe saindo de um ponto e abrindo num arco — princípios que orientam; 02 camadas concêntricas em volta de um núcleo — controles em torno do ativo; 03 circunferências encadeadas que seguem para fora do quadro — a série que não termina na borda. */ .governanca__pilar-marca { flex: 1; display: grid; place-items: center; margin: 0 0 clamp(18px, 2.4vh, 34px); min-height: 0; /* Um degrau acima da borda do cartão (--calone-on-light-border): no mesmo tom o desenho sumia junto com a moldura em vez de se ler como marca. */ color: var(--calone-gray-300); } .governanca__marca { width: min(100%, 260px); height: auto; overflow: visible; stroke-linecap: round; vector-effect: non-scaling-stroke; } /* O traço escolhido em cada motivo: preto, para haver hierarquia dentro do desenho em vez de uma teia uniforme. */ .governanca__marca .is-eixo { stroke: var(--calone-gray-500); } .governanca__marca .is-perimetro { stroke-dasharray: 2 7; opacity: .8; } .governanca__marca circle[style*="--op"] { opacity: var(--op, 1); } /* O desenho se faz sozinho quando o cartão entra em cena. `pathLength="1"` no SVG normaliza todos os traços, então um único par dasharray/dashoffset serve para linhas e circunferências de tamanhos diferentes. */ .calone-motion-ready .governanca__pilar-marca [data-traco] { stroke-dasharray: 1; stroke-dashoffset: 1; } .calone-motion-ready .governanca__pilar-marca.is-calone-revealed [data-traco] { stroke-dashoffset: 0; transition: stroke-dashoffset 1.15s var(--ease-calone); } /* Escalonado: o desenho aparece traço a traço, não de uma vez. */ .governanca__pilar-marca [data-traco]:nth-child(2) { transition-delay: .06s; } .governanca__pilar-marca [data-traco]:nth-child(3) { transition-delay: .12s; } .governanca__pilar-marca [data-traco]:nth-child(4) { transition-delay: .18s; } .governanca__pilar-marca [data-traco]:nth-child(5) { transition-delay: .24s; } .governanca__pilar-marca [data-traco]:nth-child(6) { transition-delay: .30s; } .governanca__pilar-marca [data-traco]:nth-child(7) { transition-delay: .36s; } .governanca__pilar-marca [data-traco]:nth-child(8) { transition-delay: .42s; } .governanca__pilar-marca [data-traco]:nth-child(9) { transition-delay: .48s; } .governanca__pilar-marca [data-traco]:nth-child(n+10) { transition-delay: .54s; } /* Uma volta muito lenta, só para o desenho não ficar morto. Transform, que é o que o projeto permite animar. */ .governanca__marca-gira { transform-box: fill-box; transform-origin: center; animation: governanca-gira 90s linear infinite; } @keyframes governanca-gira { to { transform: rotate(360deg); } } /* O cartão em foco acende a própria marca. */ .governanca__pilar:hover .governanca__marca, .governanca__pilar:focus-within .governanca__marca { color: var(--calone-gray-500); } .governanca__marca { transition: color var(--motion-standard) var(--ease-calone); } @media (prefers-reduced-motion: reduce) { .governanca__marca-gira { animation: none; } .calone-motion-ready .governanca__pilar-marca [data-traco] { stroke-dasharray: none; stroke-dashoffset: 0; } } .governanca__pilar-num { color: var(--calone-on-light-muted); font-size: clamp(10px, 1vw, 12px); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .2em; } .governanca__pilar h3 { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.6rem); font-weight: 500; line-height: 1.04; /* caixa alta: entreletra positiva, ao contrário do display em caixa normal */ letter-spacing: .015em; text-transform: uppercase; } .governanca__pilar p { margin: 0; max-width: 40ch; color: var(--calone-on-light-muted); font-size: clamp(.92rem, 1.1vw, 1.08rem); font-weight: 300; line-height: 1.55; letter-spacing: 0; } /* ---------- estado inicial da animação ---------- */ .is-animado .governanca__letra { opacity: 0; transform: translate3d(0, 108%, 0); } .is-animado .governanca__eyebrow, .is-animado .governanca__movimento, .is-animado .governanca__pilares-topo, .is-animado .governanca__pilar { opacity: 0; } @media (max-width: 767px) { .governanca__movimento { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; } .governanca__pilar { width: min(82vw, 400px); } } /* Movimento reduzido: sem deslizar, sem cortar em letras — o JS nem chega a dividir o texto, então o parágrafo continua inteiro e legível. */ @media (prefers-reduced-motion: reduce) { .is-animado .governanca__letra, .is-animado .governanca__eyebrow, .is-animado .governanca__movimento, .is-animado .governanca__pilares-topo, .is-animado .governanca__pilar { opacity: 1; transform: none; } .governanca__trilho { overflow-x: auto; /* sem arrasto por script, o scroll nativo resolve */ cursor: auto; } }