/* Página "Executivo". O vídeo é fundo fixo da seção inteira e o texto passa por cima: quem se move é a lista, não a imagem. Sem `ScrollTrigger.pin` — aqui nem sticky é preciso, porque o vídeo é `position: fixed` dentro de um contêiner que o recorta. Assim a leitura das dez atribuições é contínua, sem cada item ter de brigar por uma tela inteira. Estado base = sem JavaScript: os itens já estão visíveis e no lugar. O JS só acrescenta `.is-animado` ao , que é o que autoriza o GSAP a escondê-los antes de entrar. */ .executivo { position: relative; z-index: 1; color: var(--calone-white); background: var(--calone-black); isolation: isolate; } /* ---------- fundo ---------- */ .executivo__fundo { position: absolute; inset: 0; z-index: 0; overflow: hidden; /* recorta o vídeo fixo dentro da seção; sem isto ele vazaria para o rodapé */ clip-path: inset(0); } .executivo__video, .executivo__veu { position: fixed; top: 0; left: 0; width: 100vw; height: 100svh; } .executivo__video { z-index: 0; display: block; object-fit: cover; opacity: 0; /* mesma direção de arte P&B das outras mídias de fundo do sistema */ filter: saturate(.4) contrast(1.06) brightness(.82); transition: opacity var(--motion-cinematic) var(--ease-calone); } .executivo.is-video-pronto .executivo__video { opacity: 1; } /* Escuro no miolo, onde o texto assenta; mais leve nas bordas, para o vídeo não virar um retângulo cinza uniforme. */ .executivo__veu { z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .62) 26%, rgba(0, 0, 0, .68) 100%), radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0, 0, 0, .34), transparent 78%); } /* ---------- conteúdo ---------- */ .executivo__quadro { position: relative; z-index: 2; width: min(1180px, 100%); margin-inline: auto; padding: clamp(140px, 20vh, 240px) clamp(22px, 6vw, 80px) clamp(110px, 16vh, 200px); } .executivo__eyebrow { margin: 0 0 clamp(20px, 3vh, 34px); color: var(--calone-on-dark-muted); font-size: clamp(10px, 1.1vw, 13px); font-weight: 600; /* caixa alta pequena: entreletra positiva, ao contrário do display */ letter-spacing: .26em; text-transform: uppercase; } /* As duas manchetes — abertura e fecho — são a mesma frase. Corpo grande com entreletra negativa, na régua de display do sistema. */ .executivo__marco { margin: 0; font-size: clamp(2rem, 5.6vw, 4.6rem); font-weight: 400; line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; } .executivo__marco .font-display { font-weight: 400; letter-spacing: -.02em; } .executivo__marco--fecho { margin-top: clamp(90px, 14vh, 160px); } /* ---------- lista de atribuições ---------- */ .executivo__lista { margin: clamp(70px, 11vh, 130px) 0 0; padding: 0; list-style: none; display: grid; gap: clamp(30px, 4.6vh, 58px); } .executivo__item { position: relative; padding-left: clamp(26px, 3.4vw, 52px); max-width: 62ch; } /* Filete no lugar do marcador. Pseudo-elemento não é alcançável pelo GSAP, então quem o anima é esta transição — o JS só põe `.is-dentro`. */ .executivo__item::before { content: ""; position: absolute; top: .62em; left: 0; width: clamp(14px, 2vw, 28px); height: 1px; background: currentColor; opacity: .55; transform-origin: left center; transition: transform var(--motion-reveal) var(--ease-calone); } .is-animado .executivo__item.is-dentro::before { transform: scaleX(1); } .executivo__termo { display: block; font-size: clamp(1.15rem, 2vw, 1.9rem); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; } .executivo__desc { display: block; margin-top: .38em; max-width: 54ch; color: var(--calone-on-dark-muted); font-size: clamp(.95rem, 1.15vw, 1.15rem); font-weight: 300; line-height: 1.55; /* corpo pequeno: entreletra neutra, nunca a negativa do display */ letter-spacing: 0; } /* ---------- estado inicial da animação ---------- Só existe com JS: `.is-animado` entra no antes da primeira pintura, então quem não tem JS nunca vê o conteúdo escondido. */ .is-animado .executivo__marco, .is-animado .executivo__item, .is-animado .executivo__eyebrow { opacity: 0; } .is-animado .executivo__item::before { transform: scaleX(0); } @media (max-width: 767px) { .executivo__quadro { padding-top: clamp(120px, 17vh, 180px); } .executivo__item { padding-left: 20px; } } /* Movimento reduzido: nada de deslizar de lado. O conteúdo já está no lugar e o JS não chega a criar as linhas do tempo. */ @media (prefers-reduced-motion: reduce) { .is-animado .executivo__marco, .is-animado .executivo__item, .is-animado .executivo__eyebrow { opacity: 1; } .is-animado .executivo__item::before { transform: none; } .executivo__video { display: none; } }