/* Página "Patrimônio". Referência de estrutura: coffee-tech.com/efficiency. O que veio de lá é a progressão numerada — 01, 02, 03 — em que cada bloco emparelha um título técnico com a imagem correspondente, em linhas que alternam o lado. A paleta, a tipografia e a régua de espaçamento seguem o sistema da CALONE. Os três ícones já existiam em assets/images e estavam sem uso: especialista.svg, personagem.svg e personalidade.svg — um para cada bloco. Estado base = sem JavaScript: nada nasce escondido. É `.is-animado` no , posta por script antes da primeira pintura, que autoriza esconder. */ .patrimonio { position: relative; z-index: 1; color: var(--calone-white); background: var(--calone-black); overflow: hidden; } /* ---------- o fundo em vídeo ---------- Preso por `position: sticky` e com margem negativa da própria altura: ele fica parado enquanto a página rola por cima e não ocupa espaço nenhum no fluxo. É a mesma técnica de pin do resto do site — não há `position: fixed` aqui, que escaparia da seção e apareceria nas outras. */ .patrimonio__fundo { position: sticky; top: 0; z-index: 0; height: 100svh; margin-bottom: -100svh; pointer-events: none; overflow: hidden; } .patrimonio__video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--calone-black); } /* O véu é o que torna o vídeo utilizável como fundo: o disco de acreção é claro e o texto da página é branco. Sem ele, o título simplesmente some por cima do brilho. Fecha mais no topo e na base, onde ficam a abertura e o fecho, e abre no meio, onde os blocos já têm cartão próprio. */ .patrimonio__veu { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, var(--calone-black) 0%, rgba(0, 0, 0, .88) 14%, rgba(0, 0, 0, .62) 42%, rgba(0, 0, 0, .62) 58%, rgba(0, 0, 0, .9) 88%, var(--calone-black) 100%), linear-gradient(90deg, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .3) 52%, rgba(0, 0, 0, .58) 100%); } /* O conteúdo sobe para cima do fundo. */ .patrimonio__quadro, .patrimonio__fotos, .patrimonio__blocos { position: relative; z-index: 2; } .patrimonio__quadro { width: min(1280px, 100%); margin-inline: auto; padding-inline: clamp(22px, 6vw, 80px); } .patrimonio__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 ---------- */ .patrimonio__abertura { padding-block: clamp(150px, 22vh, 250px) clamp(80px, 12vh, 140px); } /* A frase vem em caixa alta da copy; a caixa fica no CSS para o conteúdo chegar em caixa normal ao leitor de tela. */ .patrimonio__marco { margin: 0; max-width: 16ch; font-size: clamp(2.4rem, 7vw, 6rem); font-weight: 500; line-height: .98; /* caixa alta em corpo grande: entreletra levemente positiva, não a negativa que o display em caixa normal pede */ letter-spacing: .005em; text-transform: uppercase; } .patrimonio__marco .font-display { font-weight: 400; letter-spacing: .01em; text-transform: none; /* o itálico da Playfair perde a graça em caixa alta */ } .patrimonio__definicao { margin: clamp(30px, 4.4vh, 52px) 0 0; max-width: 52ch; color: var(--calone-on-dark-muted); font-size: clamp(1.05rem, 1.55vw, 1.5rem); font-weight: 300; line-height: 1.5; letter-spacing: 0; /* corpo médio: nunca a entreletra do display */ } /* ---------- os três blocos ---------- */ .patrimonio__blocos { margin: 0; padding: 0 0 clamp(90px, 13vh, 150px); list-style: none; } .patrimonio__bloco { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding-block: clamp(48px, 8vh, 96px); border-top: 1px solid var(--calone-on-dark-border); } /* O ícone fica sempre à direita nos três blocos. O `order` empurra a figura para a segunda coluna sem mexer na ordem do HTML, que segue a leitura. */ .patrimonio__figura { order: 2; position: relative; display: grid; place-items: center; /* 16:9 é a proporção dos vídeos que entraram no lugar das imagens (eram 4:3). Com `cover`, manter 4:3 cortaria as laterais da cena. */ aspect-ratio: 16 / 9; border: 1px solid var(--calone-on-dark-border); border-radius: 4px; background: var(--calone-graphite); overflow: hidden; } /* O numeral fica atrás do ícone, grande e apagado — é a marcação 01/02/03 da referência, virada elemento gráfico em vez de rótulo. */ .patrimonio__numero { position: absolute; top: clamp(14px, 2vw, 26px); left: clamp(16px, 2.2vw, 30px); color: rgba(255, 255, 255, .14); font-size: clamp(2.6rem, 5.4vw, 4.6rem); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.04em; pointer-events: none; } /* Os SVGs têm preenchimento preto fixo. Carregados como não herdam `currentColor`, então a inversão do filtro é o caminho mais curto — e mantém os arquivos separados e cacheáveis, em vez de inflar o HTML. */ /* ---------- a matéria de cada bloco ---------- Os três blocos usavam glifos genéricos de pessoa — os únicos elementos não tipográficos da página, e os mais baratos do site. No lugar deles, macro de materiais que guardam valor: pedra estratificada (conhecimento em camadas), bordas de um maço de papel de arquivo (a obra guardada) e metal escovado com marca gravada (a trajetória que deixa registro). São imagens de valor baixo, feitas para esta página: a penumbra delas encontra o preto do fundo sem borda visível. Por isso, ao contrário das da Governança, o branco NÃO foi levado ao papel na conversão. */ .patrimonio__materia { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; /* Dessaturado como todo vídeo do site — os tokens descrevem essa regra e a paleta é monocromática. */ filter: saturate(.32) contrast(1.08) brightness(.86); /* Recuam um degrau para o numeral e o texto continuarem mandando. */ opacity: .85; transition: opacity var(--motion-reveal) var(--ease-calone), transform var(--motion-reveal) var(--ease-calone); } /* O bloco apontado acende a própria matéria. */ .patrimonio__bloco:hover .patrimonio__materia { opacity: 1; transform: scale(1.02); } .patrimonio__texto { display: flex; flex-direction: column; gap: 12px; } .patrimonio__titulo { margin: 0; font-size: clamp(1.5rem, 3.2vw, 2.7rem); font-weight: 500; line-height: 1.06; letter-spacing: .01em; text-transform: uppercase; } .patrimonio__subtitulo { color: var(--calone-on-dark-muted); font-size: clamp(10px, 1.05vw, 13px); font-weight: 600; letter-spacing: .24em; text-transform: uppercase; } .patrimonio__desc { margin: 0; max-width: 46ch; color: var(--calone-on-dark-muted); font-size: clamp(.98rem, 1.2vw, 1.18rem); font-weight: 300; line-height: 1.55; letter-spacing: 0; } /* ---------- fecho ---------- */ .patrimonio__fecho { padding-block: clamp(100px, 15vh, 180px); border-top: 1px solid var(--calone-on-dark-border); } .patrimonio__fecho p { margin: 0; max-width: 18ch; font-size: clamp(2rem, 5.6vw, 4.6rem); font-weight: 500; line-height: 1.02; letter-spacing: .005em; text-transform: uppercase; } .patrimonio__fecho .font-display { font-weight: 400; text-transform: none; } /* ---------- estado inicial da animação ---------- */ .is-animado .patrimonio__eyebrow, .is-animado .patrimonio__marco, .is-animado .patrimonio__definicao, .is-animado .patrimonio__figura, .is-animado .patrimonio__texto, .is-animado .patrimonio__fecho p { opacity: 0; } @media (max-width: 900px) { /* Uma coluna: não há lado direito, e a figura vai primeiro, que é a ordem do HTML. */ .patrimonio__bloco { grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 4vh, 34px); } .patrimonio__figura { order: 0; } .patrimonio__figura { aspect-ratio: 16 / 9; } } @media (prefers-reduced-motion: reduce) { .is-animado .patrimonio__eyebrow, .is-animado .patrimonio__marco, .is-animado .patrimonio__definicao, .is-animado .patrimonio__figura, .is-animado .patrimonio__texto, .is-animado .patrimonio__fecho p { opacity: 1; transform: none; } }