/* ========================================================================== HERO EM LETREIRO DE MARCA — prefixo ltr- O nome da casa ocupando a largura da coluna, com uma capa de vídeo pousada sobre as últimas letras e a promessa embaixo. Tokens usados: --display --sans o letreiro e a promessa --fg --fg-2 --fg-muted tinta do escopo de tom --accent-ink o filete do link --rule o filete que separa o pé --nav-h o respiro do menu fixo no alto --ease a curva das entradas O CORPO DO LETREIRO NÃO É UM NÚMERO, É UMA DIVISÃO: font-size = 100cqi / --ltr-largura 100cqi é a largura do palco (unidade de contêiner); --ltr-largura é a largura da palavra medida em "em". O resultado é a palavra exatamente da largura da coluna, em qualquer tela, sem media query e sem script reescrevendo font-size a cada redimensionamento. O script só MEDE --ltr-largura uma vez, depois que a fonte carrega — a palavra e a fonte não mudam com a janela, só a coluna muda, e a coluna o CSS já sabe. CAIXA ALTA AQUI É DECISÃO, NÃO DESCUIDO. O .display-xl do core diz que título vai em caixa baixa e que a caixa alta fica para o texto que é EFEITO, acima de 130px — a faixa de marca do rodapé cortina é o precedente. Um letreiro de 250px é exatamente esse caso. PARAFUSOS (custom properties do próprio componente, §3): --ltr-largura largura da palavra em em (o script mede) --ltr-midia-w largura da capa sobre o letreiro --ltr-midia-x distância da capa à borda direita do palco --ltr-midia-desce fração da ALTURA DA CAPA que passa para baixo do letreiro (.3 = um terço dela pendurado embaixo) --ltr-passo intervalo entre uma letra e a seguinte na entrada ========================================================================== */ .ltr{ /* Largura de "LIBERTA" em Manrope 800 com tracking de -.045em, medida no Chrome com JavaScript desligado: 3.375em. É o valor SEM script — com script, o medido substitui, e ele é outro (3.465em): partir o nome em letras desfaz o kerning entre elas, e a palavra partida é 2,7% mais larga. Outra palavra ou outra fonte sem script: meça a palavra inteira e troque aqui. */ --ltr-largura:3.375; --ltr-midia-w:min(30%,380px); --ltr-midia-x:6%; --ltr-midia-desce:.3; --ltr-passo:55ms; display:flex; flex-direction:column; /* svh e não vh: no celular a barra do navegador recolhe e a dobra não pode dar um pulo de 80px quando isso acontece. A primeira linha é o fallback de quem não entende svh. */ min-block-size:100vh; min-block-size:100svh; padding-block:calc(var(--nav-h) + clamp(8px,2vh,24px)) clamp(22px,4vh,40px); } .ltr-wrap{ flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:clamp(36px,7vh,72px); } /* ------------------------------------------------------------- o palco */ /* Contêiner de consulta: é a largura DELE que o 100cqi do letreiro lê. */ .ltr-palco{ position:relative; container-type:inline-size; /* A capa passa --ltr-midia-desce da própria altura para baixo do letreiro, por translate — que não ocupa espaço no fluxo. Este margin é a reserva desse pedaço, para a capa não pousar sobre a promessa. Altura da capa = largura × 9/16; percentual de margem lê a LARGURA do bloco, que é a mesma base do --ltr-midia-w. */ margin-block-end:calc(var(--ltr-midia-w) * 9 / 16 * var(--ltr-midia-desce)); } .ltr-marca{ font-family:var(--display); font-weight:800; /* Fallback de quem não entende unidade de contêiner (Chrome < 105, Safari < 16): perto, não exato. A segunda linha manda em todo o resto. */ font-size:clamp(64px,22vw,300px); font-size:calc(100cqi / var(--ltr-largura)); /* Caixa alta não tem descendente: .8 fecha a caixa no desenho das letras sem cortar acento de maiúscula, que .74 cortava no "É". */ line-height:.8; letter-spacing:-.045em; text-transform:uppercase; color:var(--fg); white-space:nowrap; } /* inline-block e não block: é a largura DO TEXTO que o script mede, e um bloco mediria a coluna. O PADDING DEVOLVE O TRACKING DA ÚLTIMA LETRA. letter-spacing é aplicado depois de CADA letra, inclusive a última, e a medida descontava esses -.045em de uma área onde há tinta: a conta enchia a coluna com a caixa e o "A" passava 7px da borda da coluna a 1440px (medido). Com o padding igual ao tracking, a caixa volta a ter a largura do desenho. Mexeu no letter-spacing do .ltr-marca, mexa aqui junto. */ .ltr-letras{display:inline-block;padding-inline-end:.045em} /* ------------------------------------------------- a entrada letra a letra */ /* O script parte o nome em .ltr-letra, cada uma com --i, e põe .is-pronto na raiz. Nada entra seco (§5): cada letra sobe, acende e entra em foco. POR QUE NÃO O data-split DO CORE: ele parte em PALAVRAS e gera a classe .w, que é do core e que componente não estiliza — o mesmo motivo pelo qual o hero/centrado-prova-social escalona a própria headline. */ .ltr-letra{display:inline-block} .ltr.is-pronto .ltr-letra{ animation:ltrLetra .95s var(--ease) both; animation-delay:calc(var(--i) * var(--ltr-passo)); } @keyframes ltrLetra{ from{opacity:0;filter:blur(16px);transform:translateY(.22em)} to{opacity:1;filter:blur(0);transform:none} } /* ANTES DO SCRIPT, O NOME ESPERA ESCONDIDO — mas só quando há script para mostrá-lo. Sem esta regra o nome aparecia inteiro no primeiro quadro e sumia no seguinte, quando a entrada começava do zero: um pisca na dobra mais vista do site. `scripting: enabled` é a consulta que o core já usa (motion.css), ao contrário: lá ela devolve a página sem script. E UMA REDE: se o script do componente não carregar (motion.js presente, este script.js esquecido no consumidor), a animação ltrRede devolve o nome em 2s. O .is-pronto desliga a rede — a entrada de verdade assume. */ @media (scripting: enabled){ .ltr-letras{opacity:0;animation:ltrRede .01s 2s forwards} .ltr.is-pronto .ltr-letras{opacity:1;animation:none} } @keyframes ltrRede{to{opacity:1}} /* Movimento reduzido: o nome aparece parado, inteiro, no primeiro quadro. O script também não parte as letras — mas a regra de CSS vale sozinha, para o caso de a preferência mudar com a página aberta. */ @media (prefers-reduced-motion:reduce){ .ltr .ltr-letras{opacity:1;animation:none} .ltr.is-pronto .ltr-letra{animation:none} } /* ------------------------------------------------------------- a capa */ /* Pousada sobre as últimas letras e passando um pouco para baixo delas: ancorada na base do letreiro e empurrada para baixo por translate, cujo percentual lê a altura da PRÓPRIA capa — é o que faz --ltr-midia-desce valer a mesma fração em qualquer tamanho. O DESLOCAMENTO É `translate`, NÃO `transform`, e é isso que deixa o data-rv da entrada morar neste mesmo nó. O core termina o reveal com [data-rv].in{transform:none}, que vale (0,2,0) e apagaria em silêncio um transform daqui (contrato §5) — mas `translate` é outra propriedade, e o reset não a toca. Medido: [data-rv].in com translate computa transform:none e translate intacto. Quem "simplificar" para transform:translateY(30%) perde o deslocamento assim que a dobra entra. */ .ltr-midia{ position:absolute; inset-inline-end:var(--ltr-midia-x); inset-block-end:0; inline-size:var(--ltr-midia-w); translate:0 calc(var(--ltr-midia-desce) * 100%); z-index:2; } /* A sombra separa a capa das letras que ela cobre: sem ela, uma foto escura sobre letra escura vira uma mancha só. Mora no invólucro, e não na capa: a capa é do midia/showreel-expansivel, e este arquivo só escreve classe do próprio prefixo (§6.1). O raio acompanha o da capa. A ESCALA da capa — disco menor, legenda de etiqueta — também não é daqui: é a variação .reel-capa--compacta do showreel, que nasceu desta composição. */ .ltr-midia{ border-radius:var(--radius-media); box-shadow:0 18px 50px -18px color-mix(in srgb,var(--fg) 45%,transparent); } /* ------------------------------------------------------------- o pé */ .ltr-pe{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:24px 48px; padding-block-start:clamp(18px,3vh,28px); border-block-start:1px solid var(--rule); } .ltr-promessa{display:grid;gap:18px;justify-items:start} .ltr-h1{ font-family:var(--display); font-weight:600; font-size:clamp(17px,1.5vw,22px); line-height:1.35; letter-spacing:-.01em; color:var(--fg); max-width:34ch; } /* Link de texto, não botão: a capa já é o gesto forte da dobra, e duas pílulas no mesmo enquadramento brigariam. O retorno de hover é o filete que cresce por ::after — a exceção nomeada do §6, que é tipografia. */ .ltr-cta{ position:relative; display:inline-flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg); padding-block:6px; } .ltr-cta::after{ content:""; position:absolute; inset-inline:0; inset-block-end:0; block-size:1px; background:var(--accent-ink,var(--accent)); transform:scaleX(.24); transform-origin:left center; transition:transform .45s var(--ease); } .ltr-cta:hover::after, .ltr-cta:focus-visible::after{transform:scaleX(1)} @media (prefers-reduced-motion:reduce){.ltr-cta::after{transition:none}} .ltr-lugar{ display:grid; gap:6px; justify-items:end; text-align:end; } .ltr-local, .ltr-dica{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; line-height:1.4; } .ltr-local{color:var(--fg-2)} .ltr-dica{color:var(--fg-muted)} /* O