/* =========================================================================== Arena Acauhan — folha da marca sobre o piso do scrollcraft. Tokens medidos em identidade/design-guide.md (pixel a pixel no logo.png). Contraste conferido contra o fundo real, não estimado: creme #EFE2C7 sobre #241C18 ....... 13,1:1 tan #A8977E sobre #241C18 ........ 5,9:1 terracota #D2552A sobre #241C18 ..... 4,1:1 (só display grande e traços) creme sobre #8F3616 (botão) ......... 6,0:1 Por isso o botão é o terracota escuro, e o claro nunca carrega texto de corpo. =========================================================================== */ :root { --sc-canvas: #241c18; --sc-surface: #2a201b; --sc-ink: #efe2c7; --sc-ink-soft: #a8977e; --sc-accent: #d2552a; --sc-accent-ink: #efe2c7; --deep: #1b1512; --burnt: #8f3616; --sun-core: #ffd966; --sun-edge: #f5a623; --sc-font-display: "Anton", "Archivo", system-ui, sans-serif; --sc-font-text: "Archivo", system-ui, sans-serif; --sc-font-mono: "Archivo", ui-monospace, monospace; --sc-maxw: 84rem; --sc-r-sm: 2px; --sc-r-md: 2px; --sc-r-lg: 2px; --sc-shadow-color: 20 32% 4%; /* O Sol da Acauhan. O dial escreve estes quatro; nada mais os toca. */ --hour: 0.42; --sun-x: 42%; --sun-y: 30%; --light: rgba(255, 217, 102, 0.1); --grade: saturate(1) brightness(1); /* Em :root, e não em .topo: o brasão e o painel do menu também leem esta altura, e custom property não passa de um irmão para o outro. */ --topo-h: 4.25rem; } html { background: var(--deep); /* O `color` também, e não só no body: sem ele o próprio fica com o preto inicial do agente do usuário sobre um fundo quase preto. Nada renderiza ali fora do , mas é o par que uma auditoria estática lê, e é o que vale em modo de cores forçadas. */ color: var(--sc-ink); } /* O cromo fixo (brasão, barra, menu) vem antes do conteúdo na ordem de foco. Sem este atalho, quem navega por teclado atravessa seis itens de menu antes de chegar ao texto. Ele só aparece quando recebe foco. */ .pular { position: fixed; top: 0.5rem; left: 0.5rem; z-index: 999; padding: 0.75rem 1.25rem; background: var(--burnt); color: #efe2c7; font-weight: 600; font-size: 0.9rem; text-decoration: none; border-radius: var(--sc-r-sm); transform: translateY(-160%); transition: transform 180ms var(--sc-ease-out); } .pular:focus-visible { transform: none; outline: 2px solid var(--sc-ink); outline-offset: 3px; } /* A barra do topo é fixa, então todo alvo de âncora precisa reservar a altura dela: senão cada item do menu leva o visitante para um título escondido. */ :target, section[id] { scroll-margin-top: calc(var(--topo-h) + 0.75rem); } /* Anton é tudo em caixa alta por desenho; forçar minúsculas nele é desperdício de uma fonte que só tem um andar. */ .d { font-family: var(--sc-font-display); font-weight: 400; text-transform: uppercase; /* 0,92 é a entrelinha que o Anton pede em inglês e é errada em português: em caixa alta acentuada o circunflexo de VOCÊ e o til de NÃO sobem acima da altura de caixa e batem na linha de cima. 1,02 é o menor valor em que Á, Ã, Ê, Ô e Õ passam limpos, medido no render e não no papel. */ line-height: 1.02; letter-spacing: 0.002em; text-wrap: balance; margin: 0; } .d--xl { /* Teto em 6,6rem e não 7,4rem: a 1440px a manchete do hero batia em 115px e sozinha tomava 61% da altura da tela, empurrando os dois botões para a borda. O limite do craft floor para display é 6rem; 6,6rem é o ponto em que a frase continua imperativa e os CTAs voltam a respirar. */ font-size: clamp(2.9rem, 1.4rem + 6.4vw, 6.6rem); line-height: 1.02; } .d--lg { font-size: clamp(2.3rem, 1.3rem + 4.2vw, 5rem); } .d--md { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 3rem); } .d--sm { font-size: clamp(1.15rem, 1rem + 0.9vw, 1.6rem); } .lede { font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.35rem); line-height: 1.45; letter-spacing: -0.012em; max-width: 34ch; text-wrap: pretty; margin: 0; } .body { max-width: 60ch; color: var(--sc-ink-soft); text-wrap: pretty; margin: 0; } .tag { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-ink-soft); margin: 0; } .wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); } /* --------------------------------------------------------------- atmosfera -- A luz da hora escolhida vem em DUAS camadas, e a separação não é capricho. Uma só, fixa e `screen` por cima de tudo, clareava também o scrim que protege o texto: o palco cria contexto de empilhamento, então uma camada fixa em z-index 2 passa por cima da cópia inteira dele, e o título do hero caía para 1,7:1 sem que nada no CSS do texto estivesse errado. Então: a forte mora DENTRO do palco, logo acima da mídia e logo abaixo do scrim, onde faz todo o trabalho de regradar a fotografia. A fraca é a fixa, e só dá o ar da hora ao resto da página. */ .luz-palco { position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: screen; background: radial-gradient( 80vw 80vw at var(--sun-x) var(--sun-y), var(--light), transparent 64% ); transition: background 520ms var(--sc-ease-out); } .light { position: fixed; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen; opacity: 0.4; background: radial-gradient( 70vw 70vw at var(--sun-x) var(--sun-y), var(--light), transparent 62% ); transition: background 520ms var(--sc-ease-out); } @media (prefers-reduced-motion: reduce) { .light, .luz-palco { transition: none; } } /* ------------------------------------------------- barra de progresso ----- Um elemento, um dono. O scrollcraft.js tem uma barra própria que procura [data-sc-progress]; a marcação usa [data-scroll-progress], então a dele fica dormente e não há dois runtimes escrevendo no mesmo nó. Só `transform` muda: ele roda no compositor, sem layout e sem repaint a cada quadro de scroll. Animar `width` forçaria reflow da página inteira. */ .scroll-progress { position: fixed; top: 0; left: 0; z-index: calc(var(--sc-z-chrome) + 10); width: 100%; height: 3px; background: var(--sc-accent); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; pointer-events: none; } /* ------------------------------------------------------------------ chrome -- A barra nasce transparente sobre o filme e ganha corpo quando a página desce. O brasão nasce grande no meio do hero e aterrissa no canto dela. */ .topo { position: fixed; inset: 0 0 auto 0; z-index: calc(var(--sc-z-chrome) + 3); display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 2.25rem); height: var(--topo-h); /* Espaço reservado à esquerda para o brasão pousar sem empurrar o menu. */ padding-right: clamp(0.75rem, 3vw, 2.25rem); padding-left: calc(var(--seal-x) + var(--seal-w) + clamp(0.9rem, 2vw, 1.75rem)); } /* O fundo é um elemento próprio, e não o background da barra, porque ele precisa aparecer e sumir por baixo do conteúdo sem arrastar o backdrop-filter junto quando está invisível. */ .topo-fundo { position: absolute; inset: 0; z-index: 0; /* Ornamento não intercepta ponteiro. A vinheta abaixo se estende 6rem para fora da barra, e como o cabeçalho fica acima do painel do menu, esse rabo cobria o primeiro item da lista: no celular, tocar em "A arena" não fazia nada. Invisível e clicável é a pior combinação possível. */ pointer-events: none; border-bottom: 1px solid transparent; transition: background 340ms var(--sc-ease-out), border-color 340ms var(--sc-ease-out), backdrop-filter 340ms var(--sc-ease-out), opacity 340ms var(--sc-ease-out); } /* Transparente não pode significar ilegível: no topo o menu está sobre o céu estourado do filme. Um degradê curto vindo da borda segura o texto sem fechar a barra, e ele desaparece quando o fundo sólido assume. */ .topo-fundo::after { content: ""; position: absolute; /* Desce bem abaixo da barra de propósito. Um degradê curto termina numa borda e lê como barra; um degradê longo lê como vinheta de topo, que é o que os heros de vídeo bons fazem. E é a queda longa que permite a densidade alta em cima: medido, o menu sobre o céu do filme dava 3,67:1 em 1920 com o degradê curto. */ inset: 0 0 -6rem 0; background: linear-gradient( to bottom, color-mix(in oklab, var(--deep) 88%, transparent) 0%, color-mix(in oklab, var(--deep) 78%, transparent) 30%, color-mix(in oklab, var(--deep) 44%, transparent) 58%, color-mix(in oklab, var(--deep) 14%, transparent) 80%, transparent 100% ); transition: opacity 340ms var(--sc-ease-out); } .topo--solido .topo-fundo { background: color-mix(in oklab, var(--deep) 94%, transparent); backdrop-filter: blur(16px) saturate(1.2); border-bottom-color: var(--sc-hairline); } .topo--solido .topo-fundo::after { opacity: 0; } .menu, .topo-cta, .hamburguer { position: relative; z-index: 1; } /* ---------------------------------------------------------------- brasão --- Fixo por conta própria. O CSS o deixa no destino final; quem o leva ao hero é uma transformação que o JS interpola do scroll. Assim o pouso é exato por construção, em vez de ser um valor calibrado à mão que erra em cada largura. */ :root { --seal-x: clamp(0.75rem, 3vw, 2.25rem); /* Dimensionado para caber INTEIRO na barra, com folga igual em cima e embaixo. Antes ele transbordava por baixo de propósito, para a sobreposição dar profundidade, mas a barra precisa ficar por cima do painel do menu e o brasão acabava cortado pela borda dela. Contido resolve os dois. */ --seal-w: clamp(2.5rem, 3.6vw, 3.1rem); } .seal { position: fixed; /* Centrado na altura da barra: a folga é a mesma em cima e embaixo, em qualquer viewport, porque as duas medidas vêm do mesmo par de tokens. */ top: calc((var(--topo-h) - var(--seal-w)) / 2); left: var(--seal-x); width: var(--seal-w); aspect-ratio: 1; /* Acima da barra, senão o fundo dela corta o brasão ao meio. A ordem do cromo é: painel < barra < brasão. */ z-index: calc(var(--sc-z-chrome) + 4); display: block; transform-origin: 50% 50%; /* Sem `will-change: transform` de propósito. A caixa do brasão mede 50px e o voo do hero o amplia quase 8x por transform. Promovido a camada, o Chrome rasteriza uma vez no tamanho da caixa e a GPU estica esse bitmap de 50px: o brasão chegava mole no topo da página. Sem a promoção ele re-rasteriza a cada mudança de escala e sai limpo, e o custo é irrisório perto do scrub. */ } .seal img { width: 100%; height: auto; border-radius: 50%; background: #efe2c7; box-shadow: var(--sc-e2); } @media (hover: hover) and (pointer: fine) { .seal:hover img { box-shadow: var(--sc-e3); } } @media (prefers-reduced-motion: reduce) { /* Sem o voo: o brasão já nasce no lugar dele. A marca continua presente e a página continua contando a mesma coisa. */ .seal { transform: none !important; } } .menu { flex: 1 1 auto; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%); } .menu::-webkit-scrollbar { display: none; } .menu ul { display: flex; align-items: center; gap: clamp(0.9rem, 2.2vw, 2rem); margin: 0; padding: 0 0.75rem; list-style: none; width: max-content; } .menu a { display: block; position: relative; padding: 0.3rem 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; white-space: nowrap; color: var(--sc-ink-soft); text-decoration: none; transition: color 180ms var(--sc-ease-out); } /* Com a barra transparente o tan secundário cai para menos de 3:1 sobre o céu do filme. Enquanto ela não fecha, todo item é creme. */ .topo:not(.topo--solido) .menu a { color: var(--sc-ink); } .menu a::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--sc-accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 260ms var(--sc-ease-out); } .menu a:hover, .menu a:focus-visible { color: var(--sc-ink); } .menu [aria-current="true"] { color: var(--sc-ink); } .menu [aria-current="true"]::after { transform: scaleX(1); } .topo-cta { flex: none; padding: 0.6rem 1.1rem; font-size: 0.82rem; } /* ------------------------------------------------------------ hambúrguer -- */ .hamburguer { display: none; flex: none; align-items: center; gap: 0.55rem; margin-left: auto; padding: 0.55rem 0.7rem; background: none; border: 0; border-radius: var(--sc-r-sm); color: var(--sc-ink); cursor: pointer; /* Alvo de toque de 44px sem inflar a caixa visual. */ min-height: 2.75rem; } .hamburguer-rotulo { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; } .hamburguer-barras { display: grid; gap: 4px; width: 1.15rem; } .hamburguer-barras i { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform 260ms var(--sc-ease-out), opacity 180ms var(--sc-ease-out); } /* As três barras viram X. Só transform e opacity, nada de width nem margin. */ [aria-expanded="true"] .hamburguer-barras i:nth-child(1) { transform: translateY(6px) rotate(45deg); } [aria-expanded="true"] .hamburguer-barras i:nth-child(2) { opacity: 0; } [aria-expanded="true"] .hamburguer-barras i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .painel { position: fixed; inset: var(--topo-h) 0 0 0; z-index: calc(var(--sc-z-chrome) + 2); display: flex; flex-direction: column; gap: 1.5rem; padding: 1.75rem clamp(1.25rem, 6vw, 2rem) calc(2rem + env(safe-area-inset-bottom)); background: color-mix(in oklab, var(--deep) 97%, transparent); backdrop-filter: blur(18px); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translate3d(0, -0.75rem, 0); transition: opacity 260ms var(--sc-ease-out), transform 260ms var(--sc-ease-out), visibility 0s linear 260ms; } .seal--anima { transition: transform 300ms var(--sc-ease-out); } .painel--aberto { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } @media (prefers-reduced-motion: reduce) { .painel { transform: none; } } .painel ul { list-style: none; margin: 0; padding: 0; display: grid; } .painel li + li { border-top: 1px solid var(--sc-hairline); } .painel nav a { display: block; padding: 0.95rem 0; font-family: var(--sc-font-display); font-size: 1.6rem; line-height: 1.02; text-transform: uppercase; color: var(--sc-ink); text-decoration: none; } .painel nav a[aria-current="true"] { color: var(--sc-accent); } .painel-acoes { display: grid; gap: 0.6rem; } .painel-acoes .cta { justify-content: center; } .painel-nap { margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--sc-ink-soft); } .painel-nap a { color: var(--sc-ink); display: inline-block; padding-block: 0.35rem; margin-block: -0.35rem; } /* ------------------------------------------------------------------ botões -- */ .cta { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.5rem; background: var(--burnt); color: #efe2c7; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em; text-decoration: none; border: 0; border-radius: var(--sc-r-sm); box-shadow: var(--sc-e1), var(--sc-edge); white-space: nowrap; transition: background 150ms var(--sc-ease-out), transform 120ms var(--sc-ease-out); } .cta:hover { background: #a33f1a; } .cta:active { transform: translateY(1px); } .cta svg { width: 1.05em; height: 1.05em; flex: none; } .cta--ghost { background: transparent; color: var(--sc-ink); box-shadow: inset 0 0 0 1px var(--sc-hairline-strong); } .cta--ghost:hover { background: rgba(239, 226, 199, 0.07); } /* Barra de ação no rodapé do celular. É a única chrome fixa lá embaixo, e carrega exatamente o mesmo rótulo que todos os outros CTAs da página. */ .dock { position: fixed; inset: auto 0 0 0; z-index: var(--sc-z-chrome); display: flex; gap: 0.6rem; padding: 0.65rem clamp(0.75rem, 4vw, 1.25rem) calc(0.65rem + env(safe-area-inset-bottom)); background: color-mix(in oklab, var(--deep) 95%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--sc-hairline); } .dock .cta { flex: 1; justify-content: center; padding-inline: 0.5rem; font-size: 0.82rem; } /* O rótulo é o mesmo da página inteira, então ele não pode quebrar em duas linhas dentro da barra: o tipo é que cede, não o texto. */ @media (max-width: 400px) { .dock .cta { font-size: 0.75rem; } } @media (min-width: 861px) { .dock { display: none; } } @media (max-width: 860px) { body { padding-bottom: 4.5rem; } } /* ================================================================== ATO 1 == O salto. O clipe é um plano só em câmera lenta, então o percurso cinematográfico vem de três planos que se separam, não do corte. */ #salto .sc-stage { background: #0d1d33; } #salto video[data-sc-scrub], #salto .sc-stage__poster { transform: scale(calc(1 + var(--sc-p, 0) * 0.16)); transform-origin: 52% 42%; } .duna { position: absolute; inset: auto 0 -1px 0; height: 34vh; z-index: 3; pointer-events: none; background: linear-gradient( to top, var(--sc-canvas) 6%, color-mix(in oklab, var(--sc-canvas) 72%, transparent) 46%, transparent 100% ); } /* O poster virou