/* Página "Universo". Sem referência externa. O desenho sai de duas leituras do conteúdo: 1. A "arquitetura intelectual" lista exatamente as páginas do site — Executivo, Governança, Patrimônio, Inteligência, Universo. Então ela não é ilustração: é o índice do site, e cada linha é um link de verdade. A página vira o eixo por onde as outras se alcançam. 2. Os quatro passos do processo (Felizes Para Sempre, Biografia, Legado, Show de Encontro) são os quatro projetos que já têm banner em assets/images. Usar as imagens que existem ancora a página no que o site já é, em vez de inventar caixa abstrata. Estado base = sem JavaScript: nada nasce escondido. É `.is-animado` no , posta antes da primeira pintura, que autoriza esconder. */ .universo { position: relative; z-index: 1; color: var(--calone-white); background: var(--calone-black); overflow: hidden; } /* ---------- fundo em vídeo ---------- O material é um vórtice — a espiral que não fecha, que é o assunto da página. Fica em cor por decisão do cliente: é a única mídia do site fora da paleta P&B que os tokens descrevem, e é intencional. As miniaturas do processo, mais abaixo, seguem em P&B. O `contrast` abaixo de 1 é deliberado e não é engano. Medida a luminância ao longo dos 15 s do arquivo, ela oscila de 10,7 a 99,4 de média — é um big bang, escuro no começo, estouro no meio, escuro no fim. Com contraste neutro a página piscava de preto a cinza a cada volta do laço. Abaixando o contraste a faixa se comprime em torno do meio-tom: o vórtice fica visível o tempo todo e a pulsação vira respiro, não blecaute. `position: fixed` recortado pela seção, como na página Executivo: o texto desliza sobre imagem parada, e o recorte impede que o vídeo vaze no rodapé. `preload="none"` no markup — quem promove é o video-adiado.js. */ .universo__fundo { position: absolute; inset: 0; z-index: 0; overflow: hidden; clip-path: inset(0); } .universo__video, .universo__veu { position: fixed; top: 0; left: 0; width: 100vw; height: 100svh; } .universo__video { z-index: 0; display: block; object-fit: cover; opacity: 0; filter: contrast(.75) brightness(.9); transition: opacity var(--motion-cinematic) var(--ease-calone); } .universo.is-video-pronto .universo__video { opacity: 1; } .universo__veu { z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .4) 30%, rgba(0, 0, 0, .5) 100%), radial-gradient(ellipse 92% 74% at 50% 50%, rgba(0, 0, 0, .16), rgba(0, 0, 0, .44) 84%); } /* Grão sobre o véu. O arquivo de vídeo é comprimido e os dois degradês acima são lisos: no escuro o resultado bandeia em faixas visíveis. O grão quebra a faixa e dá matéria à imagem — mesma razão pela qual filme granulado não bandeia. Estático, sem custo de animação; `overlay` mantém o preto preto e só age no meio-tom, onde a faixa aparece. */ .universo__veu::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .055; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 160px 160px; } .universo__quadro { /* relative + z-index: o conteúdo precisa subir acima do fundo fixo */ position: relative; z-index: 2; width: min(1280px, 100%); margin-inline: auto; padding-inline: clamp(22px, 6vw, 80px); } .universo__eyebrow { margin: 0 0 clamp(18px, 2.6vh, 30px); color: var(--calone-on-dark-muted); font-size: clamp(10px, 1.1vw, 13px); font-weight: 600; letter-spacing: .26em; /* caixa alta pequena pede entreletra positiva */ text-transform: uppercase; } /* ---------- abertura ---------- */ .universo__abertura { padding-block: clamp(150px, 22vh, 250px) clamp(70px, 10vh, 120px); } .universo__marco { margin: 0; max-width: 17ch; font-size: clamp(2.3rem, 6vw, 5rem); font-weight: 400; line-height: 1.02; letter-spacing: -.038em; /* display grande: entreletra negativa */ text-wrap: balance; } .universo__marco .font-display { font-weight: 400; letter-spacing: -.02em; } /* ---------- arquitetura: o índice do site ---------- */ .universo__arquitetura { margin: 0; padding: 0 0 clamp(90px, 13vh, 150px); list-style: none; } .universo__linha a, .universo__linha > .universo__atual { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(14px, 3vw, 44px); align-items: baseline; padding-block: clamp(20px, 3vh, 34px); border-top: 1px solid var(--calone-on-dark-border); color: inherit; text-decoration: none; } .universo__linha:last-child a, .universo__linha:last-child > .universo__atual { border-bottom: 1px solid var(--calone-on-dark-border); } .universo__nome { font-size: clamp(1.5rem, 3.4vw, 2.8rem); font-weight: 400; line-height: 1.06; letter-spacing: -.03em; transition: transform var(--motion-standard) var(--ease-calone); } .universo__verbo { color: var(--calone-on-dark-muted); font-size: clamp(11px, 1.2vw, 15px); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; transition: color var(--motion-standard) var(--ease-calone); } /* Só onde há cursor de verdade: no toque o hover fica preso depois do tap. */ @media (hover: hover) and (pointer: fine) { .universo__linha a:hover .universo__nome { transform: translateX(clamp(8px, 1.2vw, 18px)); } .universo__linha a:hover .universo__verbo { color: var(--calone-white); } } /* Sem cursor não há hover, e a linha não dava sinal de que respondia ao dedo. O recuo é curto de propósito: confirma o toque, não anima. */ .universo__linha a:active .universo__nome { transform: translateX(4px); transition-duration: var(--motion-micro); } /* A página atual não é link: fica marcada, sem prometer navegação. */ .universo__atual .universo__nome, .universo__atual .universo__verbo { color: var(--calone-white); } .universo__desc { grid-column: 1 / -1; margin: .5em 0 0; max-width: 52ch; color: var(--calone-on-dark-muted); font-size: clamp(.95rem, 1.15vw, 1.12rem); font-weight: 300; line-height: 1.5; letter-spacing: 0; /* corpo pequeno: nunca a entreletra do display */ text-wrap: pretty; } /* ---------- citação ---------- */ .universo__citacao { padding-block: clamp(80px, 12vh, 140px); border-top: 1px solid var(--calone-on-dark-border); } .universo__citacao blockquote { margin: 0; max-width: 22ch; font-size: clamp(1.6rem, 4vw, 3.2rem); font-weight: 400; line-height: 1.12; letter-spacing: -.03em; text-wrap: balance; } .universo__citacao .font-display { font-weight: 400; letter-spacing: -.02em; } /* ---------- processo: a corrente dos quatro projetos ---------- */ .universo__processo { padding-bottom: clamp(90px, 13vh, 150px); } .universo__passos { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 26px); counter-reset: passo; } .universo__passo { counter-increment: passo; position: relative; display: flex; flex-direction: column; gap: 12px; } /* O elo entre um passo e o seguinte — a seta do "→" da copy, virada elemento. O último não tem para onde apontar. */ .universo__passo:not(:last-child)::after { content: ""; position: absolute; top: calc(clamp(120px, 15vw, 220px) / 2); right: calc(clamp(12px, 1.8vw, 26px) / -2 - 4px); width: 8px; height: 8px; border-top: 1px solid var(--calone-on-dark-border); border-right: 1px solid var(--calone-on-dark-border); transform: rotate(45deg); } .universo__miniatura { aspect-ratio: 1284 / 912; overflow: hidden; border-radius: 3px; background: var(--calone-graphite); } .universo__miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; /* direção de arte P&B do sistema */ filter: grayscale(1) contrast(1.08) brightness(.86); transition: transform var(--motion-standard) var(--ease-calone); } @media (hover: hover) and (pointer: fine) { .universo__passo:hover .universo__miniatura img { transform: scale(1.04); } } .universo__passo-num { color: var(--calone-on-dark-muted); font-size: clamp(10px, .95vw, 12px); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .2em; } .universo__passo-nome { font-size: clamp(.98rem, 1.35vw, 1.3rem); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; } /* ---------- continuidade ---------- */ .universo__continuidade { padding-block: clamp(90px, 13vh, 150px); border-top: 1px solid var(--calone-on-dark-border); } .universo__mecanismo { margin: 0 0 clamp(40px, 6vh, 70px); max-width: 22ch; font-size: clamp(1.6rem, 4vw, 3.2rem); font-weight: 400; line-height: 1.08; letter-spacing: -.032em; text-wrap: balance; } .universo__ciclo { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(10px, 1.6vh, 18px); } .universo__ciclo li { font-size: clamp(1.05rem, 2vw, 1.7rem); font-weight: 300; line-height: 1.3; letter-spacing: -.02em; } /* A segunda metade de cada frase é o que se repete — "outra", "outra", "outra", "uma nova geração". Marcá-la em itálico faz o eco aparecer. */ .universo__ciclo .font-display { font-weight: 400; } /* ---------- fecho ---------- */ .universo__fecho { padding-block: clamp(100px, 15vh, 190px); border-top: 1px solid var(--calone-on-dark-border); } .universo__lockup { margin: 0; font-size: clamp(2rem, 6.4vw, 5.4rem); font-weight: 500; line-height: .98; /* caixa alta em corpo grande: entreletra levemente positiva */ letter-spacing: .01em; text-transform: uppercase; } .universo__assinatura { margin: clamp(14px, 2vh, 24px) 0 clamp(34px, 5vh, 56px); font-size: clamp(1.2rem, 2.6vw, 2.2rem); font-weight: 400; line-height: 1.1; letter-spacing: -.028em; text-wrap: balance; } .universo__fecho-desc { margin: 0; max-width: 48ch; color: var(--calone-on-dark-muted); font-size: clamp(1rem, 1.3vw, 1.25rem); font-weight: 300; line-height: 1.55; letter-spacing: 0; text-wrap: pretty; } /* ---------- estado inicial da animação ---------- */ .is-animado .universo__eyebrow, .is-animado .universo__marco, .is-animado .universo__linha, .is-animado .universo__citacao blockquote, .is-animado .universo__passo, .is-animado .universo__mecanismo, .is-animado .universo__ciclo li, .is-animado .universo__lockup, .is-animado .universo__assinatura, .is-animado .universo__fecho-desc { opacity: 0; } @media (max-width: 900px) { /* Duas colunas: quatro miniaturas lado a lado ficam ilegíveis no telefone, e a seta deixa de fazer sentido fora da fileira única. */ .universo__passos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 4vw, 28px); } .universo__passo:not(:last-child)::after { display: none; } .universo__linha a, .universo__linha > .universo__atual { grid-template-columns: minmax(0, 1fr); gap: 4px; } .universo__verbo { justify-self: start; } } @media (prefers-reduced-motion: reduce) { .universo__video { display: none; } .is-animado .universo__eyebrow, .is-animado .universo__marco, .is-animado .universo__linha, .is-animado .universo__citacao blockquote, .is-animado .universo__passo, .is-animado .universo__mecanismo, .is-animado .universo__ciclo li, .is-animado .universo__lockup, .is-animado .universo__assinatura, .is-animado .universo__fecho-desc { opacity: 1; transform: none; } }