/* Roosevelt Amazon Expedition · a camada escrita à mão
---------------------------------------------------------------------------
O `base.css` e o `theme.json` saem dos tokens e não se editam. Este arquivo
é a outra metade do gate: a home e as quatro páginas de serviço nascem em
template escrito à mão DENTRO do tema, porque o que faz WordPress parecer
barato é o construtor visual, não o WordPress.
Tudo aqui consome variável do `base.css`. Nenhum hex solto.
--------------------------------------------------------------------------- */
@layer kng-projeto {
/* ═══ Fundamento ═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0;
background: var(--fundo-base);
color: var(--texto-forte);
font-family: montserrat, "Helvetica Neue", Arial, sans-serif;
font-size: var(--texto-body-m);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img { max-inline-size: 100%; display: block; }
/* A largura é a mesma em toda a página. Duas réguas: leitura e conteúdo. */
.env { inline-size: min(100% - var(--margem) * 2, var(--larg-largo)); margin-inline: auto; }
.env--conteudo { inline-size: min(100% - var(--margem) * 2, var(--larg-conteudo)); }
.env--leitura { inline-size: min(100% - var(--margem) * 2, var(--larg-leitura)); }
section { padding-block: clamp(64px, 10vw, 128px); }
/* O FIO NO LUGAR DO CAMPO BRANCO.
Uma seção que termina numa faixa sangrada de fotografia deixava 128px de
papel liso antes da próxima. Isso não é respiro: as duas seção vizinhas já
trazem o próprio, e a soma vira buraco.
Um fio de 1px, o mesmo da faixa de conforto, resolve com um trigésimo do
espaço e diz a mesma coisa: acabou aqui, começa ali. */
section.fecha-em-fio { padding-block-end: 0; }
.fio-fim { margin-block-start: clamp(22px, 3vw, 40px);
border-block-start: 1px solid color-mix(in srgb, var(--borda) 34%, transparent); }
/* ═══ Tipografia ═══════════════════════════════════════════════════════════
A Warzone está bloqueada por licença, gratuita só para uso pessoal, e
servir webfont é redistribuição. Display sai em Montserrat ExtraBold caixa
alta, que é SIL OFL e já é a segunda família aprovada da marca.
`dna/MARCA.md` §5. Trocar depois é mudar `--fam-display` num lugar só. */
/* A FAMILIA APONTA PARA A woff2 SUBSETADA, e nao para a `.ttf` do kit.
`design/base.css` e gerado e escreve `montserrat` nas classes dele. Este
remapeamento e o que faz as sete classes geradas usarem a face leve: sem
ele o navegador baixava 366 KB de TTF alem dos 16 KB de woff2. */
:root { --fam-display: "montserrat-web", "Helvetica Neue", Arial, sans-serif; }
body, .display-xl, .display-l, .heading-m, .body-m, .ficha, .label {
font-family: "montserrat-web", "Helvetica Neue", Arial, sans-serif;
}
.rotulo {
/* A display pede mais ar: em .12em as hastes retas dela se encostam e o
rótulo vira bloco. Em .2em cada letra respira, que é como fonte de
estêncil de expedição se comporta. E um degrau maior de corpo, porque
a caixa alta dela desenha menor que a da Montserrat no mesmo tamanho. */
font-family: var(--fam-display);
font-size: calc(var(--texto-label) + 1px);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .2em;
line-height: 1.2;
color: var(--acento-sobre-claro);
margin: 0 0 var(--esp-md);
/* A CAIXA ABRACA O TEXTO. Um de rotulo ocupa a linha inteira por padrao,
e sobre foto isso importa duas vezes: o medidor de contraste passa a medir
area vazia sobre o ponto mais claro da imagem, e qualquer fundo que a
etiqueta venha a ganhar sairia esticado. */
inline-size: fit-content;
}
.rotulo--claro { color: var(--acento-sobre-escuro); }
/* O SELO É O RÓTULO COM CHÃO, e ele veio da cabanamountain.
Lá o "ESCAPE. BREATHE. BELONG." vem dentro de uma pílula de contorno sobre a
foto. Faz duas coisas de uma vez: resolve o contraste do texto pequeno sobre
imagem, que é o defeito que esta página já mediu quatro vezes, e dá ao topo
da composição um objeto em vez de uma linha solta. */
.selo {
display: inline-flex; align-items: center;
font-size: var(--texto-label); font-weight: 600;
text-transform: uppercase; letter-spacing: .16em;
color: var(--texto-sobre-inverso);
border: 1px solid color-mix(in srgb, var(--texto-sobre-inverso) 40%, transparent);
background: rgb(13 13 13 / .34);
border-radius: var(--raio-pill);
padding: 9px 18px; margin: 0 0 clamp(24px, 3.4vw, 44px);
}
/* SOBRE FOTO O TEAL SAI, e a razao e medida. `acento_sobre_escuro` #73B5B1 tem
4,53:1 contra o verde floresta SOLIDO, e e para isso que o token o declara.
Sobre fotografia nao existe fundo declarado: o mesmo rotulo cai sobre ceu
claro num scroll e sobre mata escura no outro. Aqui ele vira papel. */
.hero .rotulo--claro,
.chegar .rotulo--claro { color: var(--texto-sobre-inverso); opacity: .92; }
/* ─────────────────────────────────────────────────────────────────────────
O DISPLAY FOI REFEITO CONTRA MEDIÇÃO, e a primeira versão estava fraca em
três eixos ao mesmo tempo. Medido nas duas referências aprovadas e na
página, todos a 1440px:
| | tamanho | peso | tracking |
| cabana | 80px | 300 | −3,2px |
| bellavista | 120px | 500 | −7,2px |
| a primeira | 56px | 800 | +1,12px |
Metade do tamanho, o dobro do peso, e o tracking no sentido OPOSTO.
Tracking negativo em tamanho grande é o que separa manchete de etiqueta: as
letras se encostam e a palavra vira uma massa só. Positivo espaça, o que é
certo em rótulo de 12px e errado em título de 100px. Peso 800 fecha as
contraformas e lê como marca esportiva; 500 respira.
POR QUE O TOKEN DIZIA OUTRA COISA, e não está errado
A escala do token foi desenhada em volta da **Warzone**, que é geométrica e
larga: nela, +0,02em é o ajuste certo. A Montserrat entrou como reserva
depois, quando a licença da Warzone travou o uso em web, e herdou uma regra
que não é dela. O token registra a pendência: *"a substituta definitiva é
decisão de sistema visual e ainda não foi tomada"*.
Enquanto ela não é tomada, o site usa a Montserrat com a régua da
Montserrat. Quando a display definitiva chegar, a escala volta a sair do
token. `dna/MARCA.md` §5.
───────────────────────────────────────────────────────────────────────── */
.display-xl, .display-l {
font-family: var(--fam-display);
/* 400 e não 500: a pasta serve Regular, SemiBold e ExtraBold. Pedir 500 faria
o navegador sintetizar ou saltar para 600, e peso sintético em 116px
aparece. Melhor o desenho de verdade. */
font-weight: 400;
text-transform: uppercase;
margin: 0;
text-wrap: balance;
}
/* Um degrau abaixo: em 116px o titulo do hero ocupava tres linhas cheias e
empurrava a linha de apoio e os botoes para o pe da dobra. Em 100px ele
continua sendo manchete e devolve ar para o resto. */
.display-xl {
font-size: clamp(38px, 7.4vw, 100px);
line-height: .94;
letter-spacing: -.032em;
}
.display-l {
font-size: clamp(30px, 5.2vw, 72px);
line-height: .96;
letter-spacing: -.03em;
}
/* Em telefone o tracking negativo precisa aliviar: em corpo pequeno as letras
se tocam de verdade e a palavra fecha. */
@media (max-width: 620px) {
.display-xl { letter-spacing: -.022em; }
.display-l { letter-spacing: -.018em; }
}
/* Sobre foto o titulo tambem abraca o texto, pela mesma razao. Sobre fundo
solido nao precisa, e por isso a regra e so nas tres secoes de imagem. */
/* O HERO SAI DESTA LISTA em 30/09/2026, e e essa linha que segurava o titulo
na margem esquerda. `fit-content` encolhe o `h1` ao texto; encolhido, o
`text-align: center` do `.hero__conteudo` nao tem folga para centrar nada, e
a manchete ficava encostada a esquerda com a migalha e o apoio centrados em
volta dela. No `/journal` media 397px de texto numa caixa de 1392.
O fecho e o `chegar` continuam com `fit-content` porque la ele tem outro
papel: os dois centram o proprio bloco com `margin-inline: auto`, e para
isso a caixa PRECISA ser do tamanho do texto. */
.chegar .display-l, .fecho .display-l { inline-size: fit-content; }
.fecho .display-l { margin-inline: auto; }
.titulo-m {
font-size: var(--texto-heading-m);
font-weight: 600;
line-height: 1.3;
margin: 0;
text-wrap: balance;
}
/* max_caracteres_por_linha: 68, declarado no token */
.corpo { font-size: var(--texto-body-m); line-height: 1.6; max-inline-size: 62ch; margin: 0; }
.corpo + .corpo { margin-block-start: var(--esp-md); }
.ficha { font-size: var(--texto-ficha); line-height: 1.55; }
/* ═══ Ação ═════════════════════════════════════════════════════════════════ */
.acao {
display: inline-flex; align-items: center; gap: var(--esp-sm);
min-block-size: var(--alvo-toque);
padding: 0 clamp(20px, 3vw, 30px);
border: 1px solid transparent;
border-radius: var(--raio-pill);
font-size: var(--texto-ficha); font-weight: 600;
text-transform: uppercase; letter-spacing: .08em;
text-decoration: none; cursor: pointer;
transition: background var(--tempo-curta) var(--curva-entrada),
color var(--tempo-curta) var(--curva-entrada),
border-color var(--tempo-curta) var(--curva-entrada);
}
.acao--primaria { background: var(--fundo-inverso); color: var(--texto-sobre-inverso); }
.acao--primaria:hover { background: var(--acento-sobre-claro); }
.acao--secundaria { border-color: currentColor; color: var(--texto-forte); }
.acao--secundaria:hover { background: var(--texto-forte); color: var(--texto-sobre-inverso); }
/* Sobre foto e sobre o verde escuro, a secundária inverte.
E SOBRE FOTO ELA GANHA CHÃO. Medido: sem fundo próprio, o rótulo do botão
encosta direto na fotografia e mede 3,29:1 no hero, contra 4,5 de mínimo. O
contorno branco engana o olho, ele delimita o botão, mas não é o fundo do
texto, e é o fundo do texto que a norma mede. */
.sobre-escuro .acao--secundaria { color: var(--texto-sobre-inverso); }
/* O CHAO E OPACO O BASTANTE PARA NAO DEPENDER DA FOTO, e a razao e medida.
O hero respira: a foto escala de 1 a 1,07 em 26 segundos. Medindo o botao em
rodadas diferentes deu 2,61 · 3,39 · 3,43 · 3,84, o numero balancava com a
FASE DA ANIMACAO, porque o pedaco de foto atras dele muda o tempo todo.
Contraste que depende do instante nao e contraste.
E `backdrop-filter` saiu junto: em maquina sem GPU ele as vezes compoe e as
vezes nao, o que deixa o resultado imprevisivel na medicao e, pior, no
aparelho fraco do visitante. O que resolve e fundo proprio, opaco o bastante
para o que estiver atras nao importar. */
.hero .acao--secundaria, .chegar .acao--secundaria, .fecho .acao--secundaria {
background: rgb(13 13 13 / .62);
}
.hero .acao--secundaria:hover, .chegar .acao--secundaria:hover, .fecho .acao--secundaria:hover {
background: var(--texto-sobre-inverso);
}
.sobre-escuro .acao--secundaria:hover { background: var(--texto-sobre-inverso); color: var(--texto-forte); }
.sobre-escuro .acao--primaria { background: var(--fundo-base); color: var(--texto-forte); }
.sobre-escuro .acao--primaria:hover { background: var(--acento-sobre-escuro); }
.acoes { display: flex; flex-wrap: wrap; gap: var(--esp-md); }
/* ═══ Cabeçalho ════════════════════════════════════════════════════════════
Nav mínima com uma ação, como as duas referências. A `bellavista` leva
marca + BOOK NOW e nada mais. */
.topo {
position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 50;
display: flex; align-items: center; justify-content: space-between;
gap: var(--esp-lg);
padding: clamp(8px, 1vw, 12px) var(--margem);
color: var(--texto-sobre-inverso);
transition: background var(--tempo-curta) var(--curva-entrada),
padding var(--tempo-curta) var(--curva-entrada),
color var(--tempo-curta) var(--curva-entrada);
}
.topo__marca { display: flex; align-items: center; }
/* A ASSINATURA PRECISA DE ALTURA PARA A SEGUNDA LINHA EXISTIR.
Medido em 3x: em 58px de altura a linha `AMAZON EXPEDITION` sai com ~7px, e
no telefone, em 34px, com ~4px. O símbolo e o `ROOSEVELT` se leem; a segunda
linha vira textura. Isso é grave aqui porque `EXPEDITION` é o que separa
esta marca da operação brasileira: o DNA §1 registra que são duas marcas
diferentes de propósito, e a palavra que faz a diferença estava ilegível.
A proporção da horizontal é ~2,7:1, e a segunda linha ocupa cerca de um
quinto da altura. Para ela chegar aos ~10px que se leem em tela, a
assinatura precisa de ~76px. Conferido: cabe em 360, 390 e 1440.
O `padding` da barra encolhe na mesma medida em que o logo cresce, então a
altura do cabeçalho quase não muda: 90px antes, 98px agora. */
.topo__marca img { block-size: clamp(46px, 6.2vw, 76px); inline-size: auto; }
.topo__menu { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 32px); }
.topo__menu a {
color: inherit; text-decoration: none;
font-size: var(--texto-label); font-weight: 600;
text-transform: uppercase; letter-spacing: .12em;
padding-block: var(--esp-sm);
opacity: .88;
transition: opacity var(--tempo-micro) var(--curva-entrada);
}
/* OS CINCO ITENS TINHAM A MESMA CAIXA E LINHAS DE BASE DIFERENTES.
Medido em 1440: as cinco caixas vao de 28 a 72 px, todas com 44 de altura,
que e o alvo de toque da casa e esta certo. O texto dentro delas, nao:
Expeditions 42,4 dentro de `.menu-pai`, que e flex e centra
About 38,0 bloco, com `padding-block` e o texto no topo
Journal 38,0 idem
Contact 38,0 idem
Check dates 42,4 `.acao`, que e flex e centra
Ou seja, tres dos cinco flutuavam 4,4 px acima dos outros dois. Ninguem ve
4 px e sabe dizer o que e; ve que o menu esta torto.
A causa e que `padding` em caixa de bloco empurra o texto para o topo do
conteudo, enquanto `align-items: center` de flex o poe no meio. Os itens que
ja eram flex acertavam por acidente do proprio dispositivo, nao por regra.
Aqui os cinco viram flex e centram pela mesma regra. O `min-block-size`
guarda o alvo de 44 px, que antes vinha do `padding` e agora nao viria. */
.topo__menu > a {
display: inline-flex; align-items: center;
min-block-size: var(--alvo-toque);
padding-block: 0;
}
.topo__menu a:hover { opacity: 1; }
/* Depois do hero o cabeçalho encosta no papel e o texto vira verde. */
/* O CABEÇALHO TEM UM TAMANHO SÓ, e isso é correção de uma decisão minha.
Eu tinha feito a barra encolher depois do hero, com a assinatura caindo para
82%, "para devolver tela". Custava mais do que devolvia: a marca mudava de
tamanho no meio da leitura, e `AMAZON EXPEDITION`, que é justamente a
palavra que separa esta marca da brasileira, ficava menor exatamente onde a
página passa mais tempo.
Agora só o FUNDO muda. O tamanho é um, do topo ao rodapé. */
.topo.colado {
background: color-mix(in srgb, var(--fundo-base) 92%, transparent);
backdrop-filter: blur(14px);
color: var(--texto-forte);
box-shadow: 0 1px 0 color-mix(in srgb, var(--borda) 35%, transparent);
}
.topo__marca .marca--clara { display: block; }
.topo__marca .marca--escura { display: none; }
.topo.colado .marca--clara { display: none; }
.topo.colado .marca--escura { display: block; }
@media (max-width: 860px) { .topo__menu .so-largo { display: none; } }
/* NO TELEFONE A MARCA ENCOLHE, senão o botão sai da tela.
A assinatura horizontal tem proporção ~3,3:1. Aumentada para 58px de altura
ela passa de 190px de largura, e com o botão de 150px mais a margem não
sobra nada em 390px. Medido: "CHECK DATES" cortado na borda direita.
Não é caso de esconder o botão: ele é a única ação da barra. */
@media (max-width: 560px) {
.topo { gap: var(--esp-md); padding-inline: var(--esp-md); }
/* 46px e não 34px: a segunda linha sai de ~4px para ~9px. Conferido em 360,
390 e 430 com o botão inteiro na tela e o alvo de toque intacto. */
.topo__marca img { block-size: 46px; }
.topo .acao { padding: 0 14px; letter-spacing: .04em; font-size: 11px; }
}
/* ═══ 1 · Hero ═════════════════════════════════════════════════════════════ */
/* O HERO É CENTRADO, e a escolha é da bellavista, não de gosto.
Medido: o `h1` dela ocupa 1400 dos 1440px e é o objeto da página; o texto
não descansa sobre a foto, ele MANDA nela. A primeira versão desta página
punha o título num canto, com 575px de largura, e a foto continuava sendo o
assunto. Aí nenhum tamanho de letra salva. */
.hero {
position: relative; min-block-size: 100svh;
display: grid; place-items: center;
padding-block: clamp(96px, 14vh, 150px) clamp(120px, 17vh, 190px);
color: var(--texto-sobre-inverso);
overflow: hidden;
text-align: center;
}
.hero__fundo { position: absolute; inset: 0; }
/* ═ O RODÍZIO ═════════════════════════════════════════════════
A PRIMEIRA VERSÃO ERA KEYFRAME COM ATRASO, E TINHA UM BURACO DE 1,7s.
Três fotos, uma animação só, atraso positivo de 7s e 14s. A conta fecha a
partir da SEGUNDA volta, mas na primeira não: durante o atraso a animação
ainda não começou, então a foto 2 usa o estilo base, que é `opacity: 0`. Aos
5,3s a foto 1 começava a sumir e NÃO havia nada por baixo: 1,7 segundos de
fundo da seção no meio da dobra. É o cinza que apareceu na tela.
Com atraso negativo o buraco sai, mas aí a foto que abre a página é a
segunda, que ainda nem foi decodificada. Trocar seis de meia dúzia.
Agora quem manda é uma classe. Zero conta de fase, e a troca só começa
depois que a próxima foto TERMINOU DE DECODIFICAR: não existe quadro sem
imagem, nem na primeira volta nem em rede ruim. */
/* AS FOTOS DO HERO SE EMPILHAM NO MESMO LUGAR, e essa regra tinha sumido.
Ao reescrever o bloco do rodizio eu levei junto o `position: absolute` que
estava nele. Sem ele as tres fotos voltaram para o fluxo normal, uma
embaixo da outra: a segunda ficou em y=619 e a terceira em y=1312, e o hero
passou a mostrar o fundo da pagina por baixo do veu escuro. E o campo
CINZA que apareceu na capa. O video escondia o defeito enquanto tocava. */
.hero__fundo img, .hero__fundo video {
position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
object-fit: cover;
}
.hero__fundo img, .lugares__abre img { opacity: 0; }
.hero__fundo img:first-of-type, .lugares__abre img:first-of-type { opacity: 1; }
.js .roda img { opacity: 0; transition: opacity 1700ms linear; }
.js .roda img.ativa { opacity: 1; }
/* CADA FOTO RESPIRA ENQUANTO ESTÁ NA VEZ. Zoom de saída, de 1,075 para 1, na
mesma direção do parallax do hero: a imagem acompanha a leitura em vez de
disputar com ela. Sem conta de fase, porque a animação nasce junto com a
classe e roda uma vez só.
É `scale`, a propriedade independente, e não `transform`: o parallax já
escreve `transform` nessa mesma imagem por rolagem, e as duas se compoem
sem uma apagar a outra. */
.js .roda img.ativa { animation: respirar 8700ms linear forwards; }
@keyframes respirar { from { scale: 1.075; } to { scale: 1; } }
@media (prefers-reduced-motion: reduce) {
.js .roda img.ativa { animation: none; scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
.js .roda img { transition: none; }
}
/* O VEU GANHA UMA CAMADA SO QUANDO O FILME RODA, e isso foi medido.
O video das corredeiras e agua branca: o titulo branco sobre a espuma deu
1,00:1, invisivel. A fotografia parada nao tinha esse problema porque o
veu foi calibrado nela, e video e outro material.
A camada extra e radial e centrada no bloco de titulo, entao ela escurece
onde ha letra e deixa as bordas do quadro em paz. Custa zero enquanto o
filme nao roda. */
.hero__scrim::after { content: ""; position: absolute; inset: 0; opacity: 0;
background: radial-gradient(82% 56% at 50% 54%,
rgb(13 13 13 / .66) 0%, rgb(13 13 13 / .40) 54%, transparent 84%);
transition: opacity var(--tempo-curta) linear; }
.hero__filme.rodando ~ .hero__scrim::after { opacity: 1; }
.hero__scrim {
position: absolute; inset: 0;
background:
linear-gradient(to top, rgb(13 13 13 / .90) 0%,
rgb(13 13 13 / .78) 26%,
rgb(13 13 13 / .42) 52%,
rgb(13 13 13 / .10) 78%,
transparent 100%),
linear-gradient(to right, rgb(13 13 13 / .34) 0%,
rgb(13 13 13 / .12) 42%,
rgb(13 13 13 / .30) 100%),
/* O TOPO TAMBÉM ESCURECE. Numa composição centrada o título sobe para o
meio da tela, e o meio da tela é onde o céu está. O degradê de baixo,
herdado do hero alinhado embaixo, não cobria nada disso. */
linear-gradient(to bottom, rgb(13 13 13 / .62) 0%,
rgb(13 13 13 / .34) 26%,
rgb(13 13 13 / .12) 50%,
transparent 68%);
}
.hero__conteudo { position: relative; inline-size: min(100% - var(--margem) * 2, 1480px); }
.hero .display-xl { max-inline-size: none; }
/* O apoio é curto e estreito de propósito: medido na bellavista, ele tem três
linhas centradas e some diante do título. Com 56ch ele virava um parágrafo
de quatro linhas e disputava a atenção com a manchete. */
/* O TITULO DO HERO NAO CENTRAVA, E TUDO AO REDOR DELE CENTRAVA.
`.hero__conteudo` e `text-align: center`, e a migalha e o paragrafo de apoio
obedeciam. O `h1` nao: cada linha dele mora dentro de `.masc`, o invólucro
que faz a revelacao por mascara, e `.masc` e `display: block` encolhido ao
texto. Bloco nao se centra com `text-align` do pai, se centra com margem.
O resultado media assim no `/journal`: migalha centrada, apoio centrado, e
FIELD NOTES encostado na margem esquerda, 397 px de texto numa caixa de
1284. No `/about` aparecia pior ainda, porque as duas linhas tem larguras
diferentes e cada uma parava num lugar.
`fit-content` mais `margin-inline: auto` centra cada linha por si, que e o
que display centrado pede. E so no hero: titulo de secao continua alinhado
a esquerda como sempre foi. */
/* O `h1` PRECISA OCUPAR A LARGURA, senao nao ha o que centrar dentro dele.
Medido: em `/about` ele tinha 869px, exatamente a largura de "A family
operation", numa caixa de 1392. Encolhido ao texto, `margin: auto` no
invólucro da mascara nao tem folga nenhuma para trabalhar, e a linha
continua encostada na margem. Em `/expeditions` funcionava por acidente,
porque a segunda linha e mais larga que a primeira e sobrava folga.
Com o `h1` na largura toda, cada linha se centra por si. */
.hero h1 { inline-size: 100%; }
.hero .masc { inline-size: fit-content; margin-inline: auto; }
.hero .corpo { margin: clamp(24px, 3vw, 40px) auto clamp(32px, 4vw, 52px);
max-inline-size: 46ch; opacity: .9; font-size: var(--texto-ficha); }
.hero .acoes { justify-content: center; }
.hero .rotulo { margin-inline: auto; }
/* ═══ HERO DE DESTINO ══════════════════════════════════════════════════════
Mais baixo que o da home, de propósito. A home abre uma marca e pode gastar
a tela inteira; a página de serviço abre um PRODUTO, e quem chegou nela já
sabe onde está. Segurar a dobra em 100svh aqui só adiaria a informação que
a pessoa veio buscar. */
.hero--servico { min-block-size: min(84svh, 760px); }
.hero--servico .display-xl { font-size: clamp(34px, 6.4vw, 88px); }
/* A trilha de migalhas nasce como parte da composição, e não como enfeite de
canto: ela é a matriz de quatro dita em uma linha. */
.migalha { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--esp-sm);
font-size: var(--texto-label); letter-spacing: .14em; text-transform: uppercase;
color: var(--texto-sobre-inverso); opacity: .8; margin: 0 0 var(--esp-lg); }
.migalha a { color: inherit; text-decoration: none; border-block-end: 1px solid transparent;
padding-block-end: 2px; }
.migalha a:hover { border-block-end-color: currentColor; }
/* A seta que diz que a página continua. Sem ela o hero de 100svh parece o fim. */
.hero__desce {
position: absolute; inset-block-end: clamp(20px, 3vh, 34px);
inset-inline-start: 50%; translate: -50% 0;
display: grid; place-items: center; gap: var(--esp-sm);
/* O ALVO E O LINK, NAO O RISCO. O filho e uma linha de 1px, e sem isto o
retangulo clicavel media 1x46: impossivel de acertar com o dedo, e reprova
`componente.alvo_toque` do token, que declara 44. */
min-inline-size: var(--alvo-toque); min-block-size: var(--alvo-toque);
color: inherit; text-decoration: none; opacity: .78;
min-inline-size: var(--alvo-toque); padding-block-start: 8px;
}
.hero__desce em { font-style: normal; font-size: var(--texto-label);
letter-spacing: .16em; text-transform: uppercase; }
.hero__desce span { inline-size: 1px; block-size: 46px; background: currentColor;
transform-origin: top; animation: escorre 2.6s var(--curva-entrada) infinite; }
@keyframes escorre { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); } 100% { transform: scaleY(1) translateY(46px); opacity: 0; } }
/* ═══ 2 · Faixa de prova ═══════════════════════════════════════════════════ */
.prova { background: var(--fundo-inverso); color: var(--texto-sobre-inverso); padding-block: clamp(40px, 6vw, 72px); }
.prova__grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--esp-lg); }
.prova__num {
font-family: var(--fam-display); font-weight: 800;
font-size: clamp(30px, 4.4vw, 52px); line-height: 1; letter-spacing: .01em;
color: var(--acento-sobre-escuro); margin: 0 0 var(--esp-sm);
}
.prova__leg { font-size: var(--texto-ficha); line-height: 1.4; opacity: .82; margin: 0; }
@media (max-width: 760px) { .prova__grade { grid-template-columns: repeat(2, 1fr); gap: var(--esp-lg) var(--esp-md); } }
/* ═══ 3 · 1914 ═════════════════════════════════════════════════
A FOTO ENCOLHEU DE PROPÓSITO. Ela tem 770x434 e estava saindo com ~800px
de largura, ou seja em 1:1 e um pouco acima: cada artefato de um
escaneamento de 1914 aparecia em tamanho natural. Contida em 352px de
área de imagem a densidade vai a 2,2x, e o que era ruído vira grão.
O gesto é o de uma cópia em papel pousada sobre a mesa: moldura branca,
tarja larga em baixo com a legenda, 2,4 graus de inclinação e sombra
curta e longa somadas. Instantâneo não existia em 1914, então a moldura
não imita Polaroid: imita cópia de época, que é o que ela é.
NÃO HÁ CORTE. Recortar para o quadrado do instantâneo tiraria Roosevelt
da foto: ele está na borda esquerda do enquadramento. */
.origem { background: var(--apoio-creme); overflow: hidden; }
/* O VAO CRESCE PORQUE HA ONDE. A coluna da esquerda sobra por baixo das
copias, e elas estavam encostando no texto: com 56px de vao a de hoje
quase toca o paragrafo. O vao dobra e as copias recuam junto. */
.origem__grade { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
gap: clamp(32px, 6vw, 112px); align-items: center; }
@media (max-width: 900px) { .origem__grade { grid-template-columns: 1fr; } }
/* A cópia encosta à direita da coluna para o mapa aparecer inteiro à
esquerda dela. Centrada, ela cobria a tira e sobrava fragmento de rio
nos dois lados: lia como risco, não como carta. */
.origem__foto { position: relative; display: grid;
justify-items: center; align-items: center;
padding-block: clamp(20px, 4vw, 54px); }
@media (max-width: 900px) { .origem__foto { justify-items: start; } }
/* O mapa fica ATRÁS da cópia e maior que ela: a foto repousa sobre o rio de
que ela fala. Sangra para fora da coluna de propósito, porque mapa cortado
pela moldura é como mapa se comporta. */
/* A BACIA É UMA TIRA VERTICAL, e ela sangra pelo topo e pelo pé.
O Roosevelt corre quase norte-sul: 4,4 graus de latitude por 0,35 de
longitude, ou seja um mapa de 1 por 4,2. Forçar isso na horizontal seria
espremer o rio até virar risco. Na vertical ele é o que é, e a seção corta
o resto, que é como carta se comporta dentro de uma página.
A inclinação de 7 graus tira a tira do eixo do texto e evita que ela leia
como coluna de layout. */
/* O RECORTE DO MAPA FOI ESCOLHIDO PELA COMPOSIÇÃO, e não só pelo assunto.
No quadro anterior o Roosevelt caia no MEIO da largura, que é exatamente
onde as duas cópias pousam: sobrava fragmento de rio nas beiradas, e o rio
principal ficava escondido debaixo das fotos.
O quadro novo, de 9°37'S a 7°24'S por 60°52'W a 60°06'W, poe o Roosevelt no
TERÇO ESQUERDO (x de -7% a 36%) e o Guariba na metade direita (36% a 100%).
Assim o rio da marca corre inteiro na faixa livre, e o Guariba passa por
trás das cópias, que é o lugar certo para o segundo rio. */
.origem__mapa { position: absolute; inset-block: -34% -18%; inset-inline-start: 42%;
inline-size: min(150%, 560px); translate: -50% 0; rotate: 7deg; opacity: 1;
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 89%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 89%, transparent 100%); }
@media (max-width: 900px) {
.origem__mapa { inset-inline-start: 76%; inline-size: 300px; opacity: .6; }
}
/* A PILHA, EM FORMATO DE INSTANTÂNEO DE VERDADE.
A proporção é a da Polaroid 600: quadro de 88 por 107mm com imagem de 79
por 79. Em fração, moldura de 5,7% nos lados e no topo, e tarja de 26% da
largura embaixo. É a tarja larga que faz o objeto ser lido como instantâneo
e não como foto com borda.
A DE 1914 FOI RECORTADA, e essa era a dúvida. O original é 770x434 e eu
tinha recusado o corte para não perder Roosevelt. Medido nos três recortes
possíveis, o de 43% mantém ELE E O MARCO com o nome dele, que é o assunto
inteiro da fotografia; quem sai são dois oficiais da ponta. Em troca, tudo
o que fica dobra de tamanho na tela. Ler ganhou de conservar.
AS DUAS TÊM O MESMO TAMANHO. Antes a de hoje era 54% da outra, e o par lia
como foto e miniatura. Iguais, sobrepostas na diagonal e com giros
contrários, elas leem como duas fotos que alguém pousou na mesa. */
.origem__pilha { position: relative; inline-size: min(100%, 430px);
padding-block: clamp(12px, 2vw, 26px) 34%; }
.origem__copia { margin: 0; inline-size: 70%;
background: #FCFBF7; padding: 5.7% 5.7% 0; border-radius: 2px;
box-shadow: 0 1px 2px rgb(37 43 38 / .18), 0 26px 44px -20px rgb(37 43 38 / .52);
transition: rotate var(--tempo-media, 420ms) var(--curva-entrada, cubic-bezier(.22,1,.36,1)),
scale var(--tempo-media, 420ms) var(--curva-entrada, cubic-bezier(.22,1,.36,1)); }
.origem__copia img { display: block; inline-size: 100%; block-size: auto;
aspect-ratio: 1; object-fit: cover; border-radius: 0;
filter: saturate(.76) contrast(1.05); }
/* O recorte da histórica é escolhido, não centrado: em 43% da faixa
horizontal cabem Roosevelt e o marco por inteiro. */
.origem__copia--frente img { object-position: 43% center; }
.origem__copia--tras img { object-position: 50% 42%; }
.origem__copia figcaption { display: grid; place-items: center;
min-block-size: 22%; padding: 14px 6px 16px; text-align: center;
font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
color: var(--texto-medio); }
.origem__copia--frente { position: relative; rotate: -4deg; z-index: 2; }
/* A LEGENDA DA DE BAIXO VAI PARA A ESQUERDA, e não é capricho: a de hoje
pousa sobre o canto direito dela, e legenda centrada ficava cortada no
meio da palavra. Encostada à esquerda, ela vive na parte que fica à vista.
Escrever no canto da tarja também é o que se faz num instantâneo. */
.origem__copia--frente figcaption { place-items: center start; text-align: start;
padding-inline: 9% 42%; }
/* A de hoje desce e sai um pouco pela direita: assim ela não pousa em cima
da legenda da histórica, que é justamente o que dá sentido ao par. */
.origem__copia--tras { position: absolute; z-index: 3;
inset-block-end: 0; inset-inline-end: -6%; rotate: 5.5deg;
filter: saturate(.74) brightness(1.02); }
.origem__copia:hover { rotate: -.6deg; scale: 1.035; z-index: 4; }
.origem__copia--tras:hover { rotate: 1.6deg; }
@media (prefers-reduced-motion: reduce) { .origem__copia { transition: none; } }
.origem .display-l { margin-block-end: var(--esp-lg); }
@media (prefers-reduced-motion: reduce) { .origem__copia { transition: none; } }
/* ═══ 4 · A matriz ═════════════════════════════════════════════════════════
Dois rios x duas atividades. É o produto, não o menu, e por isso é grade,
não lista. Em mobile continua 2x2. */
/* GRADE, E NÃO FLEX, e a diferença apareceu quando o display cresceu.
Com `flex` mais `space-between`, o parágrafo só fica ao lado enquanto couber:
passando do espaço ele quebra para a linha de baixo, encostado à esquerda, e
abre um vão do tamanho da coluna direita. Com o título a 72px isso passou a
acontecer sempre.
Em grade a coluna existe declarada, e o parágrafo fica onde foi posto. */
.matriz__topo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
gap: clamp(24px, 4vw, 64px); align-items: end;
margin-block-end: clamp(40px, 6vw, 80px); }
.matriz__topo > :last-child { padding-block-end: .35em; }
@media (max-width: 900px) { .matriz__topo { grid-template-columns: 1fr; } }
.matriz__grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 1.6vw, 22px); }
.celula {
position: relative; display: block; text-decoration: none;
color: var(--texto-sobre-inverso);
border-radius: var(--raio-md); overflow: hidden;
aspect-ratio: 4 / 3;
isolation: isolate;
}
.celula img {
position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover;
z-index: -2;
transition: transform var(--tempo-longa) var(--curva-entrada);
}
/* A MESMA LICAO DO HERO, e ela custou duas medicoes.
Este gradiente estava desenhado para o cartao 4:3 do desktop. Em telefone o
cartao vira 1:1 e o bloco de texto sobe: o rotulo passou a cair fora da parte
escura do degrade e mediu 1,00:1 - literalmente invisivel sobre a mancha
clara do peixe. O titulo, 1,31:1.
Nada disso aparece olhando: as quatro fotos sao escuras na maior parte, e o
olho le a media. So o pixel medido denuncia. */
.celula::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(to top, rgb(19 32 22 / .94) 0%,
rgb(19 32 22 / .88) 34%,
rgb(19 32 22 / .58) 62%,
rgb(19 32 22 / .22) 84%,
transparent 100%);
transition: opacity var(--tempo-curta) var(--curva-entrada);
}
.celula:hover img { transform: scale(1.05); }
.celula__texto { position: absolute; inset-block-end: 0; inset-inline: 0; padding: clamp(20px, 3vw, 36px); }
.celula__rio {
font-size: var(--texto-label); font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
/* Papel, e nao o teal: sobre fotografia o teal nao tem fundo declarado contra
o qual o token o mediu. Mesma regra do rotulo do hero. */
color: var(--texto-sobre-inverso); opacity: .86; margin: 0 0 var(--esp-sm);
inline-size: fit-content;
}
.celula__nome { font-family: var(--fam-display); font-weight: 800; text-transform: uppercase;
font-size: clamp(19px, 2.3vw, 30px); line-height: 1.08; letter-spacing: .02em; margin: 0 0 var(--esp-md); }
/* A LINHA RESERVA TRES LINHAS, e isso e alinhamento e nao respiro.
O bloco de texto e ancorado embaixo (`inset-block-end: 0`), entao quem tem
descricao mais curta empurra o nome para BAIXO. Medido em 1440: tres
celulas com o nome a 378 px do topo e a quarta, com duas linhas em vez de
tres, a 397. Dezenove pixels de desalinhamento numa fileira de quatro, que
e onde o olho mais cobra. A reserva de 4,5em e exatamente tres linhas de
1,5, e some no telefone junto com a propria linha. */
.celula__linha { font-size: var(--texto-ficha); line-height: 1.5; opacity: .9; margin: 0;
max-inline-size: 42ch; min-block-size: 4.5em; }
.celula__seta { display: inline-block; margin-block-start: var(--esp-md); opacity: .95;
font-size: var(--texto-label); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
/* NO TELEFONE O CARTAO FICA EM PE, E ISSO E CORRECAO DE CONTRASTE.
A matriz continua 2x2 - ela e o produto, e ler quatro celulas de um golpe e o
que ensina a estrutura. Mas em 390px cada celula tem ~165px de largura, e no
quadrado 1:1 o bloco de texto ocupava mais da metade da altura: o rotulo
subia para onde o degrade ja e transparente e media 1,40:1.
De pe em 3:4 o cartao ganha altura, o texto volta para a parte escura, e o
degrade abaixo cobre mais. Medido depois: 5,9:1 no rotulo. */
@media (max-width: 620px) {
.celula { aspect-ratio: 3 / 4; }
.celula__linha { display: none; }
.celula::after {
background: linear-gradient(to top, rgb(19 32 22 / .95) 0%,
rgb(19 32 22 / .92) 46%,
rgb(19 32 22 / .62) 72%,
rgb(19 32 22 / .20) 92%,
transparent 100%);
}
.matriz__grade { gap: 10px; }
}
/* ═══ 5 · As aves ══════════════════════════════════════════════════════════ */
/* AS AVES VIRAM PAINEL DE TELA CHEIA.
Era grade 50/50, texto à esquerda e foto num quadro à direita: pela terceira
vez a mesma forma. Esta é a seção do território que nenhum concorrente
ocupa, e estava com o desenho da mais comum da página.
Agora a foto ocupa a seção inteira, de borda a borda, e o texto vive dentro
dela. É o gesto que a bellavista repete a página toda. */
.aves { background: var(--fundo-inverso); color: var(--texto-sobre-inverso);
position: relative; overflow: hidden; padding-block: 0; }
.aves__foto { position: absolute; inset: 0; margin: 0; }
.aves__foto img { inline-size: 100%; block-size: 100%; object-fit: cover;
border-radius: 0; aspect-ratio: auto; }
/* O scrim vem da esquerda, que é onde o texto está, e solta a direita para a
foto respirar. Sobre foto o número manda: medido depois de escrito. */
.aves::after { content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(to right, rgb(19 32 22 / .95) 0%, rgb(19 32 22 / .90) 34%,
rgb(19 32 22 / .58) 62%, rgb(19 32 22 / .26) 100%); }
.aves__grade { position: relative; z-index: 2; display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
padding-block: clamp(80px, 12vw, 150px); align-items: center; }
@media (max-width: 900px) {
.aves__grade { grid-template-columns: 1fr; }
.aves::after { background: linear-gradient(to top, rgb(19 32 22 / .96) 0%,
rgb(19 32 22 / .92) 55%, rgb(19 32 22 / .82) 100%); }
}
.aves .display-l { margin-block-end: var(--esp-lg); }
.aves__lista { display: flex; flex-wrap: wrap; gap: var(--esp-sm); margin-block: var(--esp-lg) var(--esp-xl); padding: 0; list-style: none; }
.aves__lista li {
font-size: var(--texto-ficha); padding: 6px 14px;
border: 1px solid color-mix(in srgb, var(--acento-sobre-escuro) 45%, transparent);
border-radius: var(--raio-pill);
}
@media (max-width: 900px) { .aves__grade { grid-template-columns: 1fr; } }
/* ═══ 6 · A pesca e o calendário ═══════════════════════════════════════════
O setor esconde preço mas publica calendário, e é o calendário que o
pescador usa para escolher a semana. Por isso ele é ficha, não copy. */
.pesca { position: relative; overflow: hidden; }
.pesca__topo { max-inline-size: 60ch; margin-block-end: clamp(32px, 5vw, 64px); }
/* O RIO PASSA POR TRÁS DA SEÇÃO. Mesma linha de margem do 1914, em escala
grande e cortada pela borda: a seção que fala de nível de água tem o
desenho da água ao fundo. Fica atrás de tudo e não recebe evento. */
/* O MAPA NÃO PASSA POR BAIXO DE PARÁGRAFO, E ISSO FOI MEDIDO.
Na primeira posição o traço do Roosevelt cruzava as duas linhas de corpo
da seção: 3,2px de verde escuro sobre 17px de texto dão **2,62:1**, que
reprova em qualquer critério. O título passava, porque 72px aguenta.
A saída não foi apagar o mapa, foi mudá-lo de lugar: ele desce para a
metade direita, onde não há texto corrido, e a própria borda esquerda se
dissolve. O rio continua inteiro; ele só deixou de disputar a coluna. */
.pesca__mapa, .mapa-fundo { position: absolute; z-index: -1; pointer-events: none;
inset-block-start: -23%; inset-inline-start: 33%;
inline-size: min(118vw, 1460px); aspect-ratio: 1100 / 721;
rotate: -3deg; opacity: .8;
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 15%),
linear-gradient(to bottom, #000 72%, transparent 96%);
mask-image: linear-gradient(to right, transparent 0, #000 15%),
linear-gradient(to bottom, #000 72%, transparent 96%);
-webkit-mask-composite: source-in; mask-composite: intersect; }
/* MAIS RIO, MENOS POCA. Nestes dois recortes o assunto e o encontro dos tres
rios, e sao as LINHAS que contam isso; os poligonos de superficie viram
manchas soltas no meio do papel, que foi o que apareceu na tela. Aqui a
linha engrossa e a mancha sai. */
.pesca__mapa .m-agua, .mapa-fundo .m-agua, .rodape__mapa .m-agua { display: none; }
.pesca__mapa .m-roosevelt path, .mapa-fundo .m-roosevelt path, .rodape__mapa .m-roosevelt path { stroke-width: 7; }
.pesca__mapa .m-fluxo path, .mapa-fundo .m-fluxo path, .rodape__mapa .m-fluxo path { stroke-width: 10; }
.pesca__mapa .m-guariba path, .mapa-fundo .m-guariba path, .rodape__mapa .m-guariba path { stroke-width: 5; }
.pesca__mapa .m-rede path, .mapa-fundo .m-rede path, .rodape__mapa .m-rede path { stroke-width: 2; stroke-opacity: .42; }
@media (max-width: 900px) { .pesca__mapa, .mapa-fundo { inset-inline-start: 4%; inline-size: 210vw; opacity: .5; } }
/* O RIO TAMBEM CORRE NAS INTERNAS, desde 30/09/2026.
A secao de temporada da home tem a geometria dos tres rios desenhada por
tras do texto, e as cinco secoes de temporada das paginas internas nao
tinham nada: titulo no canto esquerdo, regua de doze meses, tres colunas, e
uns setecentos pixels de papel liso a direita. Mesmo assunto, mesma regua de
agua, metade da pagina vazia.
`.mapa-fundo` e o mesmo dispositivo da home, e nao uma copia dele: as regras
de geometria e de peso de traco acima passaram a valer para os dois nomes.
A carta pesa 10,6 KB e e buscada so quando a secao se aproxima.
`overflow: clip` E NAO `hidden`, pela razao de sempre nesta casa: `hidden`
cria contexto de rolagem e mata `position: sticky` de qualquer descendente.
E `:has`, para a regra so valer onde ha mapa de verdade. */
/* `overflow: clip` NOS DOIS EIXOS, e um eixo so foi um defeito medido.
Escrito como `overflow-x: clip`, o outro eixo fica `visible`, e a regra de
cascata diz que `visible` ao lado de `clip` COMPUTA PARA `auto`. Ou seja, a
secao virava contêiner de rolagem no vertical sem ninguem pedir, e a carta,
que e maior que a secao de proposito, passou a contar como conteudo.
Medido no `/about`: 1.110 px de pagina DEPOIS do rodape, com a bacia
desenhada num campo creme vazio. Nada falha, nada avisa, e a pagina ganha
uma dobra em branco no fim.
`clip` nos dois nao cria contêiner de rolagem nenhum, e por isso continua
sendo ele, e nao `hidden`: `hidden` mataria o `position: sticky` de qualquer
descendente, que e o que segura a foto do bloco de especies. */
.mapeada:has(> .mapa-fundo) { overflow: clip; }
.temporada { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 22px); }
/* A CARTA ENCHE DE ÁGUA. `--n` é a altura do banho, e como a grade estica as
três à mesma altura os níveis se comparam de relance. Sem número na escala,
de propósito: alto, médio e seco estão documentados, centímetro não. */
.periodo {
position: relative; isolation: isolate; overflow: hidden;
background: var(--fundo-superficie);
border: 1px solid color-mix(in srgb, var(--acento) 26%, transparent);
border-radius: var(--raio-md);
padding: clamp(22px, 3vw, 32px);
display: flex; flex-direction: column; gap: var(--esp-md);
}
/* O NÍVEL NÃO RISCA O TEXTO. A primeira versão fechava o banho com um fio de
2px de ponta a ponta, e como a linha cai onde cai, ela atravessava o nome do
período em uma carta e a última linha da lista em outra: lia como texto
riscado, que é defeito, não desenho.
Agora a superfície é um degradê de 26px e a marca do nível é um tracínho
curto na margem esquerda, onde nunca há letra. */
.periodo__agua { position: absolute; z-index: -1; inset-inline: 0; inset-block-end: 0;
block-size: calc(var(--n, 0) * 1%);
background: linear-gradient(to bottom,
color-mix(in srgb, var(--acento) 0%, transparent) 0,
color-mix(in srgb, var(--acento) 19%, transparent) 30px,
color-mix(in srgb, var(--acento) 9%, transparent) 100%); }
/* A MARÉ, EM LAÇO, ATRÁS DE CADA CARTA.
Duas camadas de onda, com período e velocidade diferentes, correndo em
sentidos opostos. É o que dá a sensação de maré em vez de "um desenho de
onda balançando": duas frequências que nunca coincidem.
O laço é exato porque o ladrilho fecha: cada senoide tem período inteiro
dentro da largura do ladrilho, e a animação translada exatamente uma
largura. Sem isso, a volta do laço dá um salto visível a cada ciclo.
É `transform`, e não `background-position`: translação roda na thread de
composição e não repinta nada. Animação que fica em laço para sempre numa
página de 15.300px precisa custar zero. */
.periodo__agua > i, .periodo__agua > b {
position: absolute; inset-block-start: -1px; inset-inline-start: 0;
inline-size: 300%; block-size: 26px; display: block;
background-repeat: repeat-x; background-position: 0 0;
will-change: transform;
}
.periodo__agua > i { background-image: url(onda-a.svg); background-size: 260px 24px;
animation: mare-a 19s linear infinite; }
.periodo__agua > b { background-image: url(onda-b.svg); background-size: 180px 18px;
block-size: 20px; inset-block-start: 2px;
animation: mare-b 13s linear infinite reverse; }
@keyframes mare-a { to { transform: translate3d(-260px, 0, 0); } }
@keyframes mare-b { to { transform: translate3d(-180px, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
.periodo__agua > i, .periodo__agua > b { animation: none; }
}
/* A MARCA DO NIVEL BALANCA COM A MARE.
Ela marca a superficie, e superficie que ondula com uma marca parada em
cima entrega o truque. O periodo e o mesmo da onda da frente, 19s, e a
amplitude e a da propria senoide na largura do tracinho: ~4px. */
.periodo__agua::after { content: ""; position: absolute;
inset-block-start: 0; inset-inline-start: 0;
inline-size: clamp(16px, 1.9vw, 26px); block-size: 2px;
background: var(--acento);
animation: bordo 19s ease-in-out infinite; }
@keyframes bordo {
0%, 100% { translate: 0 0; }
25% { translate: 0 -4px; }
50% { translate: 0 0; }
75% { translate: 0 4px; }
}
@media (prefers-reduced-motion: reduce) { .periodo__agua::after { animation: none; } }
/* A RÉGUA DE DOZE MESES. É o que o pescador usa para escolher a semana, e por
isso vem antes do nome do período. Cada mês é um `abbr` com o nome inteiro
no título: a inicial sozinha não serve para quem lê por leitor de tela. */
.periodo__regua { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
/* O MÊS DE FORA NÃO CLAREIA ATÉ SUMIR. A primeira versão apagava a letra
para 44% de `texto.medio`, que dá ~2,4:1 e reprova em qualquer critério:
ela continua sendo LETRA, e letra fora do período informa tanto quanto a
de dentro. A diferença passa a ser peso e fio, não contraste. */
.periodo__mes { display: grid; place-items: center; padding-block: 0 6px;
font-size: 12px; font-weight: 400; letter-spacing: .02em; line-height: 1;
color: var(--texto-medio);
border-block-end: 2px solid color-mix(in srgb, var(--texto-medio) 22%, transparent); }
.periodo__mes--dentro { color: var(--acento-sobre-claro); font-weight: 700;
border-block-end: 3px solid var(--acento-sobre-claro); }
.periodo__mes abbr { text-decoration: none; border: 0; cursor: help; }
.periodo__nome { font-family: var(--fam-display); font-weight: 800; text-transform: uppercase;
font-size: clamp(19px, 2.2vw, 27px); letter-spacing: .02em; line-height: 1.05; margin: 0; }
.periodo__peixes { font-size: var(--texto-ficha); line-height: 1.55; color: var(--texto-medio); margin: 0; }
.pesca__nota { margin-block-start: var(--esp-xl); max-inline-size: 58ch; }
/* Empilhadas, as três deixariam de ter a mesma altura, e aí o nível de uma
não se compara com o da outra. A altura mínima devolve a comparação. */
@media (max-width: 820px) { .temporada { grid-template-columns: 1fr; }
.periodo { min-block-size: 250px; } }
/* ═══ 7 · O lodge ══════════════════════════════════════════════════════════
Galeria de rolagem horizontal, como o `about-slide` da cabanamountain. */
.lodge { background: var(--apoio-creme); }
.lodge__topo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
gap: clamp(28px, 4vw, 64px); align-items: end;
margin-block-end: clamp(40px, 6vw, 80px); }
.lodge__fatos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-md); }
/* O MARCADOR E `::before` POSICIONADO, e nao item de flex.
Com `display:flex` no `li`, cada no vira item: `Starlink` e o
texto ao lado dele viravam DOIS itens, e o `gap` abria um buraco no meio da
frase. Lia-se "Starlink - the internet works". */
.lodge__fatos li { position: relative; padding-inline-start: calc(var(--esp-md) + 7px);
font-size: var(--texto-ficha); }
.lodge__fatos li::before { content: ""; position: absolute; inset-inline-start: 0;
inset-block-start: .62em; inline-size: 7px; block-size: 7px; border-radius: 50%;
background: var(--acento); }
.trilho {
display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 420px);
gap: clamp(12px, 1.6vw, 20px);
overflow-x: auto; scroll-snap-type: x mandatory;
padding-block-end: var(--esp-md);
scrollbar-width: thin;
}
.trilho > figure { margin: 0; scroll-snap-align: start; }
.trilho img { inline-size: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--raio-md); }
.trilho figcaption { margin-block-start: var(--esp-sm); font-size: var(--texto-label);
text-transform: uppercase; letter-spacing: .1em; color: var(--texto-sutil); }
@media (max-width: 900px) { .lodge__topo { grid-template-columns: 1fr; } }
/* ═══ 8 · Como se chega ════════════════════════════════════════════════════ */
.chegar { position: relative; color: var(--texto-sobre-inverso); overflow: hidden; }
.chegar__fundo { position: absolute; inset: 0; z-index: -2; }
.chegar__fundo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.chegar::before { content: ""; position: absolute; inset: 0; z-index: -1;
/* Mesma historia do hero, e aqui a foto e ainda mais clara: areia e ceu
aberto. Medido em 1,93:1 no titulo e 2,54:1 na ficha antes deste ajuste. */
background: linear-gradient(to right, rgb(29 50 34 / .93) 0%,
rgb(29 50 34 / .86) 34%,
rgb(29 50 34 / .62) 68%,
rgb(29 50 34 / .42) 100%); }
.chegar__vias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px);
margin-block: clamp(32px, 5vw, 56px) var(--esp-lg); max-inline-size: 74ch; }
.via__modo { font-size: var(--texto-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
color: var(--acento-sobre-escuro); margin: 0 0 var(--esp-sm); }
.via__tempo { font-family: var(--fam-display); font-weight: 800; text-transform: uppercase;
font-size: clamp(20px, 2.4vw, 30px); letter-spacing: .02em; margin: 0 0 var(--esp-md); }
.via p { font-size: var(--texto-ficha); line-height: 1.55; opacity: .96; margin: 0; max-inline-size: 34ch; }
/* O teal do `via__modo` vive sobre foto, e nao sobre o verde solido para o qual
o token o mediu. Sobre foto ele vira papel, pela mesma razao do rotulo. */
.chegar .via__modo { color: var(--texto-sobre-inverso); opacity: .9; }
/* O BLOCO DAS VIAS PASSA A VALER FORA DA HOME, e sobre papel claro.
Na home ele vive sobre fotografia e por isso `.chegar .via__modo` troca o
teal por branco. No quem somos o chao e creme, entao o teal volta a ser o
token certo: `acento_sobre_claro` da 5,4:1 ali, e `acento_sobre_escuro`
daria 2,1:1. O sinal segue a mesma regra, que ja e o padrao de `.sinal`. */
.lodge .via__tempo { color: var(--texto-forte); }
.lodge .via__modo { color: var(--acento-sobre-claro); }
.lodge .via p { color: var(--texto-medio); opacity: 1; }
.lodge .via .sinal { margin-block-end: var(--esp-sm); }
@media (max-width: 700px) { .chegar__vias { grid-template-columns: 1fr; } }
/* ═══ 9 · Citação ══════════════════════════════════════════════════════════ */
/* A CITAÇÃO GANHA CHÃO E CONTEXTO.
Era a seção mais plana da página: texto centrado sobre fundo liso, em
ExtraBold caixa alta, com o nome do autor em 12px no fim. O depoimento mais
forte que a marca tem lia como nota de rodapé.
E havia uma ligação na mão que ninguém tinha usado: **as melhores fotos do
acervo são do ensaio do próprio Ian Provo**, os arquivos `iProvo-*`. Pôr a
fala dele ao lado do trabalho dele não é decoração, é a prova ficando
verificável. Ver `acervo.md`.
Agora é seção escura de borda a borda, com duas fotos dele escalonadas de um
lado e a fala do outro, no registro de display da página. */
.citacao { background: var(--fundo-inverso); color: var(--texto-sobre-inverso);
position: relative; overflow: hidden; }
/* A COLUNA DA FOTO GANHA A MAIOR PARTE, e a razão é de argumento.
Em 5fr as duas fotos do Ian Provo saíam com ~270px cada, tamanho de
miniatura. Elas não são ilustração da fala: elas SÃO a prova, porque quem
fala é quem fotografou. Prova em miniatura não prova nada. */
.citacao__grade { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: clamp(28px, 4vw, 64px); align-items: center; }
.citacao .par { gap: clamp(10px, 1.4vw, 20px); }
.citacao .par > :nth-child(2) { margin-block-start: clamp(40px, 8vw, 120px); }
@media (max-width: 900px) { .citacao__grade { grid-template-columns: 1fr; } }
.citacao blockquote {
margin: 0; max-inline-size: 24ch;
font-family: var(--fam-display); font-weight: 400; text-transform: uppercase;
font-size: clamp(25px, 3.4vw, 48px); line-height: 1; letter-spacing: -.03em;
}
.citacao__corpo { margin-block-start: clamp(20px, 2.6vw, 32px); max-inline-size: 46ch;
opacity: .86; font-size: var(--texto-ficha); }
/* O NOME PASSA A TER PESO. Ele é a prova: num setor onde o depoimento vale
pelo nome de quem assina, doze pixels em caixa alta jogam fora o argumento. */
.citacao__quem { margin-block-start: clamp(28px, 3.4vw, 44px);
display: flex; align-items: baseline; gap: var(--esp-md); flex-wrap: wrap; }
.citacao__quem b { font-family: var(--fam-display); font-weight: 400; text-transform: uppercase;
font-size: clamp(18px, 1.9vw, 26px); letter-spacing: -.02em; }
.citacao__quem span { font-size: var(--texto-label); letter-spacing: .12em;
text-transform: uppercase; color: var(--acento-sobre-escuro); }
.citacao__simb { inline-size: clamp(52px, 6vw, 76px); margin: 0 0 clamp(24px, 3vw, 40px);
opacity: .7; }
/* ═══ 10 · Fechamento ══════════════════════════════════════════════════════ */
.fecho { position: relative; color: var(--texto-sobre-inverso); text-align: center; overflow: hidden;
padding-block: clamp(96px, 14vw, 180px); }
.fecho__fundo { position: absolute; inset: 0; z-index: -2; }
.fecho__fundo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.fecho::before { content: ""; position: absolute; inset: 0; z-index: -1;
background: rgb(29 50 34 / .78); }
.fecho .display-l { margin-inline: auto; max-inline-size: 18ch; }
.fecho .corpo { margin: var(--esp-lg) auto var(--esp-xl); }
.fecho .acoes { justify-content: center; }
/* ═══ Rodapé ═══════════════════════════════════════════════════════════════ */
.rodape { position: relative; isolation: isolate; overflow: hidden;
background: var(--fundo-inverso-superficie); color: var(--texto-sobre-inverso);
padding-block: clamp(56px, 8vw, 88px); }
/* O mapa fecha a página do mesmo jeito que abre a seção de 1914, e some antes
de chegar na coluna de links: carta por baixo de lista de navegação é
ruído, e aqui o texto é pequeno e já vive sobre fundo escuro. */
/* O RIO DEITA PARA FECHAR A PÁGINA.
O recorte da foz tem seis linhas e o rodapé ficou vazio; a bacia tem 24, e
é essa densidade que faz o fundo parecer carta e não risco. Só que a bacia
é um mapa de 1 por 3, e rodapé é faixa: girado 74 graus, o mesmo desenho
passa a atravessar a página no sentido dela.
Girar NÃO falseia geografia nenhuma aqui, porque o mapa não leva rosa dos
ventos nem escala: ele é grafismo tirado de geometria real, e o mapa que
afirma orientação é o do 1914, que fica de pé. */
.rodape__mapa { position: absolute; z-index: -1; pointer-events: none;
inset-block-start: 50%; inset-inline-start: 52%;
inline-size: min(40vw, 500px); aspect-ratio: 520 / 1536;
translate: -50% -50%; rotate: -74deg; opacity: .62;
/* A MASCARA TIRA O MAPA DE BAIXO DOS LINKS. Medido: o traco do Guariba
cruzava "Guariba . birding" e o link caiu para 3,42:1. O veu passa a
nascer depois da coluna de navegacao e ficar forte so na metade direita
e no rodape do rodape, onde nao ha texto. */
-webkit-mask-image: radial-gradient(84% 130% at 88% 78%, #000 8%, transparent 76%);
mask-image: radial-gradient(84% 130% at 88% 78%, #000 8%, transparent 76%); }
@media (max-width: 900px) { .rodape__mapa { inline-size: 92vw; opacity: .5; } }
.rodape__grade { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 64px); }
/* A MARCA CRESCE E O ENDEREÇO VAI PARA O LADO.
Ela estava com 52px de altura no lugar onde a página se despede, menor do
que no cabeçalho. Rodapé é assinatura: aqui a vertical pode respirar, e
`AMAZON EXPEDITION` volta a se ler.
O endereço sai de baixo dela e vira coluna ao lado, alinhado pela base:
empilhado, ele fazia a marca parecer legenda do próprio endereço. */
.rodape__marca { display: flex; align-items: flex-end; gap: clamp(20px, 2.6vw, 36px);
flex-wrap: wrap; }
/* O LOCKUP VERTICAL, REMONTADO PECA A PECA.
O simbolo em cima e a palavra embaixo, que e o logo de verdade da marca, sem
baixar o arquivo do lockup: o porque esta no comentario do `index.html`.
OS DOIS NUMEROS SAO MEDIDOS, e nao escolhidos. As tres pecas do kit foram
renderizadas na mesma largura de 600px e a tinta contada no canal alfa:
vertical tinta y 33..579, com vaos em 411..418 e 520..541
simbolo tinta 536 de 600 de caixa, quadrada
wordmark tinta y 34..192, vao interno de 22px em 134..155
O vao interno de 22px aparece IGUAL nos dois arquivos, e e ele que prova
que a palavra, no lockup, esta desenhada na largura cheia. Dai sai o resto:
a caixa do simbolo mede 423 contra 600 da palavra, ou 70,5%, e as duas
caixas se sobrepoem em 47,6, ou 7,93% da largura. A margem negativa nao e
ajuste de olho: e a distancia que o kit ja tinha.
Margem em porcentagem resolve pela LARGURA do contêiner, inclusive a
vertical, e e por isso que a sobreposicao acompanha o `clamp` sozinha. */
.rodape__lockup { flex: 0 0 auto; inline-size: clamp(186px, 20vw, 272px); }
.rodape__lockup .rodape__selo,
.rodape__lockup .rodape__palavra { min-block-size: 0; margin: 0;
display: grid; place-items: center; }
.rodape__lockup .rodape__selo { inline-size: 70.5%; margin-inline: auto; }
.rodape__lockup .rodape__palavra { inline-size: 100%; margin-block-start: -7.93%; }
/* TRES CLASSES, E NAO DUAS, DE PROPOSITO. `.assinatura .assina` do
`movimento.css` tambem vale 0,2,0 e a folha dele carrega DEPOIS desta:
empatado no peso, quem vem por ultimo ganha. Medido antes do conserto, a
palavra desenhava com 190px dentro de uma caixa de 269, porque herdava o
`clamp(120px, 15vw, 190px)` da assinatura solta, e o lockup nascia com o
simbolo colado no texto. O selo escapou por coincidencia: 70,5% de 269 da
189,6, que e o mesmo 190 do clamp. */
.rodape__lockup .assinatura .assina,
.rodape__lockup .assinatura > img { inline-size: 100%; block-size: auto; }
/* O LOCKUP DO RODAPE E BRANCO, e isso sai do token, nao do gosto: em
`dna.tokens.json`, `logo.sobre_escuro` aponta para o arquivo BRANCO, e o
selo estatico que segura o lugar ate o vetor chegar ja e o branco.
Sem esta linha a peca TROCAVA DE COR no instante em que a animacao
entrava, do branco para o teal de `acento_sobre_escuro`, que e cor de
rotulo e de link, nao de marca. `texto.sobre_inverso`, 9,48:1 sobre o
verde do rodape, contra os 4,53:1 do teal.
Tres classes de novo, e pela mesma razao de cima: `.sobre-escuro .assina`
do `movimento.css` empata em 0,2,0 e carrega depois. */
.rodape__lockup .assinatura .assina { color: var(--texto-sobre-inverso); }
@media (max-width: 560px) { .rodape__lockup { inline-size: 190px; } }
/* O ENDEREÇO DO RODAPÉ TEM DUAS PARTES, e a caixa cresceu para caber as duas.
Eram 24ch quando a linha era só a margem do rio. O endereço da Flórida tem
30 caracteres na rua sozinha, e em 24ch ele quebrava em três linhas antes de
chegar na cidade. A linha da pousada vem depois, separada por um respiro e
com o texto dizendo que é a pousada: é um `span` em bloco, e não um segundo
`
`, porque `.rodape__marca` é flex e parágrafo novo vira item novo da
linha, plantado AO LADO do endereço. Isso já mordeu uma vez, em 14/10. */
.rodape__onde { opacity: .8; max-inline-size: 32ch; margin: 0 0 6px; flex: 1 1 20ch; }
.rodape__lodge { display: block; margin-block-start: .75em; }
.rodape__kng { opacity: .9; }
.rodape__kng b { font-weight: 600; letter-spacing: .12em; }
.rodape .rodape__col { font-size: var(--texto-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
color: var(--acento-sobre-escuro); margin: 0 0 var(--esp-md); }
/* O ESPACO SAI DO GAP E VAI PARA DENTRO DO LINK.
Medido: o do rodape tinha 19px de altura, contra os 44 que o token
declara em `componente.alvo_toque`. Empurrar a altura para dentro do proprio
link, e zerar o `gap`, mantem o ritmo visual da lista e devolve o alvo. */
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rodape a { color: inherit; text-decoration: none; font-size: var(--texto-ficha); opacity: .84;
display: inline-flex; align-items: center; min-block-size: var(--alvo-toque); }
.rodape a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.rodape__fim { margin-block-start: clamp(40px, 6vw, 64px); padding-block-start: var(--esp-lg);
border-block-start: 1px solid color-mix(in srgb, var(--texto-sobre-inverso) 18%, transparent);
display: flex; flex-wrap: wrap; gap: var(--esp-md); justify-content: space-between;
font-size: var(--texto-label); letter-spacing: .06em; opacity: .6; }
@media (max-width: 800px) { .rodape__grade { grid-template-columns: 1fr 1fr; } .rodape img { grid-column: 1 / -1; } }
/* ═══ Entrada por rolagem ══════════════════════════════════════════════════
`entrada_padrao` do token: fade, slide, mascara. Aqui fade + slide.
`movimento.reduzido.estrategia` é `so_fade`, e a consulta abaixo honra. */
/* O SELETOR COMECA EM `.js`, E ISSO NAO E DETALHE.
Se a regra fosse `.entra { opacity: 0 }` solta, qualquer coisa que impeca o
observador de rodar - JS desligado, erro em outro script, rolagem rapida
demais entre dois quadros - deixaria a secao invisivel PARA SEMPRE. Medido
nesta pagina: uma rolagem programatica de uma tela a cada 120ms acordou
12 dos 33 elementos. Nenhum usuario rola assim, mas a falha e silenciosa e
o custo dela e a pagina em branco.
Com a guarda, sem JS a pagina nasce visivel e a animacao e o bonus. */
.js .entra { opacity: 0; transform: translateY(26px);
transition: opacity var(--tempo-media) var(--curva-entrada),
transform var(--tempo-media) var(--curva-entrada); }
.js .entra.dentro { opacity: 1; transform: none; }
.js .entra[data-atraso="1"] { transition-delay: 90ms; }
.js .entra[data-atraso="2"] { transition-delay: 180ms; }
.js .entra[data-atraso="3"] { transition-delay: 270ms; }
@media (prefers-reduced-motion: reduce) {
.js .entra { transform: none; transition: opacity var(--tempo-curta) linear; }
.hero__fundo img, .hero__fundo video { animation: none; }
.hero__desce span { animation: none; }
.celula:hover img { transform: none; }
}
/* Foco visível, sempre. Site nos EUA: WCAG AA é o alvo prático, e sob a ADA
isso é matéria de processo, não preferência. `dna/MARCA.md` §4. */
:where(a, button, input, select, textarea):focus-visible {
outline: 3px solid var(--acento-sobre-claro);
outline-offset: 3px; border-radius: var(--raio-sm);
}
.sobre-escuro :where(a, button):focus-visible { outline-color: var(--acento-sobre-escuro); }
/* ═══ O TELEFONE PRECISA DE OUTRO SCRIM ═══════════════════════════════════
Degradê `to right` é desenho de tela larga: ele existe para escurecer a
coluna de texto e deixar a foto respirar do outro lado. Em 390px não existe
"outro lado", o texto ocupa a largura inteira, e o degradê passa a
clarear justamente onde a última palavra da linha cai.
Medido antes deste bloco, em 390px:
chegar · título 2,62:1 contra 3,0 de mínimo
chegar · modo 2,38:1 contra 4,5
chegar · corpo 2,38:1 contra 4,5
hero · rótulo 4,40:1 contra 4,5
hero · corpo 3,87:1 contra 4,5
Nenhum deles reprovava no desktop, e nenhum aparece num print. É o caso que
a casa já anotou: telefone se mede, não se olha. */
@media (max-width: 620px) {
/* MAIS ESCURO QUE NO DESKTOP, e a razão é o recorte.
A foto do hero é 1920x1080. Num quadro de 390x844 o `object-fit: cover`
amplia muito e o que sobra na tela é a metade clara, com muito céu e muita
água. Medido com o scrim do desktop: rótulo 3,55:1 e botão 2,58:1, contra
4,5 de mínimo. Não é a mesma foto que o desktop mostra, então não pode ser
o mesmo scrim. */
.hero__scrim {
background:
linear-gradient(to top, rgb(13 13 13 / .96) 0%,
rgb(13 13 13 / .93) 48%,
rgb(13 13 13 / .72) 72%,
rgb(13 13 13 / .30) 90%,
transparent 100%);
}
/* No telefone o recorte da foto é mais claro ainda, então o chão é mais
fundo. Ver a nota acima: o número tem de valer em qualquer fase do
respiro do hero. */
.hero .acao--secundaria, .chegar .acao--secundaria, .fecho .acao--secundaria {
background: rgb(13 13 13 / .72);
}
.chegar::before {
background: linear-gradient(to top, rgb(29 50 34 / .95) 0%,
rgb(29 50 34 / .92) 55%,
rgb(29 50 34 / .82) 100%);
}
.chegar__vias { gap: var(--esp-lg); }
}
/* ═══ FITA DE ESPÉCIES ═════════════════════════════════════════════════════
Logo abaixo do hero, no lugar onde a bellavista põe a dela. Faz duas coisas
ao mesmo tempo: prova variedade sem virar lista, e dá movimento contínuo à
página parada. */
/* A FAIXA VIRA GRAFISMO, e não legenda correndo.
Dois defeitos, e o primeiro é meu: ela ficou no registro tipográfico ANTIGO,
ExtraBold em caixa alta com tracking POSITIVO, que é exatamente o que a
página inteira abandonou quando o display foi refeito. Um pedaço de 19px
com a regra velha, entre um hero de 116px e uma faixa de prova de 96px.
O segundo é de cor: ela usava `fundo.inverso`, o mesmo verde da faixa de
prova logo abaixo. Duas faixas coladas na mesma cor lêem como uma só, e a
página perde uma batida de ritmo onde devia ganhar.
Agora ela é grande, no peso 400 com tracking negativo como todo display, e
sobre `fundo.inverso_superficie`, que é o verde mais fundo. Deixa de ser
rodapé do hero e vira a régua que separa a dobra da prova. */
.especies { background: var(--fundo-inverso-superficie); color: var(--texto-sobre-inverso);
padding-block: clamp(26px, 3.4vw, 44px); }
.especies .fita__trilho > span {
display: inline-flex; align-items: center; gap: clamp(26px, 3.4vw, 52px);
padding-inline-end: clamp(26px, 3.4vw, 52px);
font-family: var(--fam-display); font-weight: 400; text-transform: uppercase;
/* A fita e prova de variedade, nao manchete: em 56px cada nome virava
titulo e cabiam tres na tela. Em 42px passam seis, e a leitura de
"sao muitas especies" e justamente o argumento dela. */
font-size: clamp(21px, 3.1vw, 42px); letter-spacing: -.02em; line-height: 1;
white-space: nowrap;
}
/* O separador é o símbolo da marca em miniatura, e não um ponto médio. É o
mesmo gesto que o token descreve em `composicao.recursos`: o selo circular
como carimbo, nunca como marca d'água grande. */
.especies i { font-style: normal; color: var(--acento-sobre-escuro);
font-size: .42em; translate: 0 -.12em; }
/* A fita anda mais devagar quando o tipo é maior: a mesma duração com letra
três vezes maior vira borrão. */
.especies .fita__trilho { animation-duration: 78s; }
/* ═══ A JORNADA · sete dias em fita ════════════════════════════════════════
O efeito-assinatura da cabanamountain, com o conteúdo que este cliente tem:
o que se vive lá, dia a dia. É a resposta ao "mostrar os lugares e o que o
hóspede vai vivenciar". */
.jornada { background: var(--fundo-inverso); color: var(--texto-sobre-inverso);
padding-block: 0; }
/* O CARTÃO CRESCE PARA A ALTURA DO PALCO.
Era 560px de altura dentro de uma seção de 100svh, com o cabeçalho comendo o
resto: sobrava moldura verde em cima e embaixo de cada dia. Com o título na
coluna ao lado, o dia passa a ocupar a altura útil inteira, e a fotografia
volta a ser o assunto. */
.dia {
inline-size: min(74vw, 430px); position: relative;
border-radius: var(--raio-md); overflow: hidden;
display: flex; flex-direction: column; justify-content: flex-end;
/* SEM TETO DE 780px. Em monitor alto o palco tem 100svh e a carta parava
em 780: sobrava faixa de verde em cima e embaixo, e quanto maior a tela
pior ficava. Em 86svh ela acompanha o palco em qualquer altura. */
block-size: 86svh; isolation: isolate;
}
/* Na coluna do palco o display desce um degrau: 72px numa coluna de 32% vira
quatro linhas de duas palavras, e título picado não lê como manchete. */
.jornada__cabeca .display-l { font-size: clamp(28px, 3.6vw, 52px); }
.dia > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
object-fit: cover; z-index: -2; }
.dia::after { content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(to top, rgb(13 13 13 / .93) 0%,
rgb(13 13 13 / .86) 34%,
rgb(13 13 13 / .48) 62%,
rgb(13 13 13 / .12) 86%,
transparent 100%); }
.dia__texto { padding: clamp(22px, 3vw, 34px); }
.dia__n { font-size: var(--texto-label); font-weight: 600; letter-spacing: .18em;
text-transform: uppercase; color: var(--acento-sobre-escuro); margin: 0 0 var(--esp-sm);
inline-size: fit-content; }
.dia__t { font-family: var(--fam-display); font-weight: 800; text-transform: uppercase;
font-size: clamp(19px, 2.1vw, 27px); line-height: 1.1; letter-spacing: .02em;
margin: 0 0 var(--esp-md); inline-size: fit-content; }
.dia__l { font-size: var(--texto-ficha); line-height: 1.5; margin: 0; max-inline-size: 34ch; opacity: .96; }
/* O trilho de progresso do pino. Sem ele o visitante não sabe que a fita tem
fim, e rolagem sequestrada sem fim à vista vira ansiedade. */
.jornada__regua { position: absolute; inset-block-end: clamp(22px, 4vh, 44px);
inset-inline: var(--margem); block-size: 2px;
background: color-mix(in srgb, var(--texto-sobre-inverso) 22%, transparent); }
.jornada__regua i { display: block; block-size: 100%; background: var(--acento-sobre-escuro);
inline-size: calc(100% * var(--q, 0)); }
@media (max-width: 900px) { .jornada__regua { display: none; } }
/* ═══ FILME · o acervo de vídeo do cliente ═════════════════════════════════
Um destaque em 16:9 e uma fileira em 9:16. A divisão não é estética: o canal
do cliente TEM as duas coisas, e a maioria do que ele publicou em 2026 é
vertical. Forçar um 9:16 dentro de moldura 16:9 devolve aquela barra borrada
dos lados, que é a marca de quem não olhou o material. */
.filme { background: var(--apoio-creme); }
.filme__destaque { position: relative; border-radius: var(--raio-md); overflow: hidden;
aspect-ratio: 16 / 9; cursor: pointer; isolation: isolate; display: block;
inline-size: 100%; border: 0; padding: 0; background: none; }
.filme__destaque img, .curta img { position: absolute; inset: 0; inline-size: 100%;
block-size: 100%; object-fit: cover; z-index: -2;
transition: transform var(--tempo-longa) var(--curva-entrada); }
.filme__destaque:hover img, .curta:hover img { transform: scale(1.04); }
.filme__destaque::after, .curta::after { content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(to top, rgb(13 13 13 / .82) 0%, rgb(13 13 13 / .26) 46%, transparent 74%); }
.filme__destaque iframe, .curta iframe { position: absolute; inset: 0; inline-size: 100%;
block-size: 100%; border: 0; z-index: 2; }
.play { position: absolute; inset-block-end: clamp(18px, 3vw, 32px); inset-inline-start: clamp(18px, 3vw, 32px);
display: inline-flex; align-items: center; gap: var(--esp-md);
color: var(--texto-sobre-inverso); text-align: start; }
.play__bolha { inline-size: clamp(48px, 5.4vw, 64px); aspect-ratio: 1; border-radius: 50%;
display: grid; place-items: center; flex: none;
background: color-mix(in srgb, var(--texto-sobre-inverso) 94%, transparent);
color: var(--fundo-inverso);
transition: transform var(--tempo-curta) var(--curva-entrada),
background var(--tempo-curta) var(--curva-entrada); }
.filme__destaque:hover .play__bolha, .curta:hover .play__bolha,
.filme__destaque:focus-visible .play__bolha, .curta:focus-visible .play__bolha {
transform: scale(1.08); background: var(--acento-sobre-escuro); }
.play__bolha svg { inline-size: 34%; translate: 8% 0; }
.play__t { font-size: var(--texto-ficha); font-weight: 600; text-transform: uppercase;
letter-spacing: .1em; max-inline-size: 24ch; }
.tocando .play { display: none; }
.curtas { display: grid; grid-auto-flow: column; grid-auto-columns: min(44vw, 226px);
gap: clamp(12px, 1.4vw, 18px); overflow-x: auto; scroll-snap-type: x mandatory;
margin-block-start: clamp(14px, 1.8vw, 22px); padding-block-end: var(--esp-md); }
.curta { position: relative; aspect-ratio: 9 / 16; border-radius: var(--raio-md);
overflow: hidden; cursor: pointer; scroll-snap-align: start; isolation: isolate;
border: 0; padding: 0; background: none; display: block; }
.curta .play { inset-block-end: var(--esp-md); inset-inline-start: var(--esp-md); gap: var(--esp-sm); }
.curta .play__bolha { inline-size: 38px; }
.curta .play__t { font-size: var(--texto-label); letter-spacing: .08em; max-inline-size: 15ch; }
/* ═══ O ESPAÇO DO CALENDÁRIO ═══════════════════════════════════════════════
O cliente vai plugar aqui uma ferramenta de terceiro, a We Travel já está
no contrato. Este bloco é a MOLDURA dela, desenhada e medida agora, para que
o dia da integração seja trocar o miolo e não redesenhar a seção.
Ele nasce com aparência de coisa pronta, e não de buraco: a seção existe, tem
título, contexto e altura reservada. O que falta é declarado dentro dela, em
vez de fingido com um calendário falso que ninguém pode clicar. */
.calendario { background: var(--fundo-base); }
.calendario__grade { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
gap: clamp(28px, 4vw, 64px); align-items: start; }
.encaixe {
position: relative; border-radius: var(--raio-lg);
background: var(--fundo-superficie);
border: 1px dashed color-mix(in srgb, var(--borda) 62%, transparent);
min-block-size: clamp(400px, 50vh, 540px);
display: grid; place-items: center; padding: clamp(28px, 4vw, 56px);
text-align: center; overflow: hidden;
}
/* A marca em contorno atrás, no gesto que o DNA já usa: ocupa a folha sem
competir com o texto. */
.encaixe__simb { position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
translate: -50% -50%; inline-size: min(62%, 320px); opacity: .06; pointer-events: none; }
.encaixe__miolo { position: relative; max-inline-size: 44ch; }
.encaixe__selo { display: inline-block; font-size: var(--texto-label); font-weight: 600;
letter-spacing: .14em; text-transform: uppercase; color: var(--acento-sobre-claro);
border: 1px solid color-mix(in srgb, var(--acento-sobre-claro) 45%, transparent);
border-radius: var(--raio-pill); padding: 6px 14px; margin-block-end: var(--esp-lg); }
.encaixe h3 { font-family: var(--fam-display); font-weight: 800; text-transform: uppercase;
font-size: clamp(18px, 2vw, 24px); letter-spacing: .02em; margin: 0 0 var(--esp-md); }
.encaixe p { font-size: var(--texto-ficha); line-height: 1.6; color: var(--texto-medio); margin: 0; }
.encaixe__ficha { list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0;
display: grid; gap: var(--esp-sm); text-align: start; font-size: var(--texto-label);
letter-spacing: .04em; color: var(--texto-sutil); }
.encaixe__ficha b { color: var(--texto-forte); font-weight: 600; }
@media (max-width: 900px) { .calendario__grade { grid-template-columns: 1fr; } }
/* ═══ LUGARES · a grade editorial ══════════════════════════════════════════
Mostrar os LUGARES e o que o hóspede vai viver, não o troféu na mão. O DNA
já dizia o mesmo em `imagem.em_vez_de`: a marca vende a experiência, não o
troféu. */
/* O LODGE ABRE NA IMAGEM, e não numa faixa de título.
Mesma doença da semana: título à esquerda, lista de fatos à direita, e o
mosaico só começando depois. Meia tela de fundo claro antes da primeira
foto, e a lista de seis itens lida como ficha técnica.
Agora a seção abre com a foto aérea do lodge ocupando a largura inteira,
com o título dentro dela, e os fatos viram uma FAIXA horizontal logo abaixo,
no mesmo registro de cartaz da faixa de prova. O mosaico entra em seguida,
já aquecido. */
.lugares { padding-block: 0; }
/* A COR TEM DE SER DITA. `sobre-escuro` inverte botão e rótulo, mas não pinta
o texto da seção: o título herdava `texto.forte`, que é verde escuro, e some
sobre a foto. Foi assim que ele saiu invisível no primeiro print. */
/* A ABERTURA CRESCE. Em 78svh com teto de 720 ela virava faixa; a
fotografia aerea do lodge e o argumento inteiro da secao. */
.lugares__abre { position: relative; isolation: isolate; min-block-size: 88svh;
display: flex; align-items: flex-end; overflow: hidden;
color: var(--texto-sobre-inverso); }
/* O ROTULO SOBRE FOTOGRAFIA GANHA CHAO, e nao so tinta.
Em acento sobre o aereo ele mediu 1,00:1 numa das tres fotos e 1,65:1 na
outra: 13px em caixa alta e o pior caso de leitura que existe, e o acento
tem justamente a luminancia de barranca ao sol. Nenhum scrim de secao
inteira resolve isso sem apagar a fotografia.
A placa e o mesmo gesto do selo do hero, que ja passa medido: tinta branca
sobre 66% de preto da 5,9:1 mesmo com a foto estourada por baixo. */
.lugares__abre .rotulo {
color: var(--texto-sobre-inverso);
inline-size: fit-content;
padding: 6px 13px 7px;
border-radius: 999px;
background: rgb(13 13 13 / .66);
border: 1px solid color-mix(in srgb, var(--texto-sobre-inverso) 20%, transparent);
margin-block-end: var(--esp-md);
}
@supports (backdrop-filter: blur(1px)) {
/* .5 dava 4,17:1 na foto do meio: o desfoque nao escurece, so borra. */
.lugares__abre .rotulo { background: rgb(13 13 13 / .64); backdrop-filter: blur(10px); }
}
.lugares__abre .display-l { inline-size: fit-content; }
.lugares__abre img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
object-fit: cover; z-index: -2; opacity: 0; }
.lugares__abre img:first-of-type { opacity: 1; }
.lugares__abre::after { content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(to top, rgb(13 13 13 / .92) 0%, rgb(13 13 13 / .80) 26%,
rgb(13 13 13 / .56) 48%, rgb(13 13 13 / .24) 74%,
transparent 100%); }
/* O TEXTO SOBE O TANTO QUE O VIDRO DESCEU. Medido: com a faixa puxada 104px
para cima, a linha "You are a long way from a paved road" caia DENTRO do
vidro claro, e texto branco sobre vidro claro deu 1,38:1. Invisivel.
O respiro de baixo passa a cobrir a sobreposicao mais o proprio ar. */
/* SEGUNDO VEU, SO ONDE O TEXTO VIVE. O gradiente de baixo para cima cobre a
secao inteira e por isso nao pode ser muito escuro, senao apaga o aereo.
Este e radial, ancorado no canto de baixo a esquerda, que e exatamente onde
ficam rotulo, titulo e linha. O ceu e a barranca do outro lado continuam
como estao. Medido: o rotulo em acento sobre a areia clara dava 1,66:1. */
.lugares__abre::before { content: ""; position: absolute; inset: 0; z-index: -1;
background: radial-gradient(125% 82% at 6% 104%,
rgb(13 13 13 / .80) 0%, rgb(13 13 13 / .52) 38%, transparent 68%); }
.lugares__abre > .env { padding-block-end: clamp(132px, 14vw, 196px); position: relative; }
/* A FICHA VIRA FAIXA, e não lista com marcador.
Seis itens em bullet lêem como especificação de produto. Em faixa, com
número de item e regra vertical entre eles, lêem como o que são: as seis
coisas que fazem "remoto com conforto" ser fato e não adjetivo. */
.fatos-faixa { display: grid; grid-template-columns: repeat(6, 1fr);
border-block: 1px solid color-mix(in srgb, var(--borda) 34%, transparent); }
/* == A FAIXA EM VIDRO ====================================================
Sobe por cima da fotografia em vez de comecar depois dela, e continua
alinhada onde estava na leitura. O `margin-block-start` negativo faz a
sobreposicao; o `position: relative` poe ela acima do aereo.
O VIDRO TEM CHAO SOLIDO POR BAIXO, e isso nao e preciosismo: `backdrop-
filter` nao existe em navegador antigo nem em modo de economia, e sem cor
de base o texto cairia direto sobre a foto, onde ele mede qualquer coisa.
Com 92% de papel por baixo o contraste e o mesmo com ou sem desfoque. */
.fatos-faixa--vidro {
position: relative; z-index: 2;
margin-block-start: clamp(-104px, -9vw, -56px);
margin-inline: var(--margem);
border: 1px solid color-mix(in srgb, var(--texto-sobre-inverso) 22%, transparent);
border-radius: var(--raio-md);
background: color-mix(in srgb, var(--fundo-base) 92%, transparent);
box-shadow: 0 30px 60px -28px rgb(13 13 13 / .55);
overflow: hidden;
}
@supports (backdrop-filter: blur(1px)) {
.fatos-faixa--vidro { background: color-mix(in srgb, var(--fundo-base) 82%, transparent);
backdrop-filter: blur(18px) saturate(1.1); }
}
@media (max-width: 980px) { .fatos-faixa--vidro { margin-block-start: clamp(-72px, -7vw, -40px); } }
.fatos-faixa li { list-style: none; padding: clamp(24px, 3vw, 40px) clamp(14px, 1.6vw, 24px);
border-inline-start: 1px solid color-mix(in srgb, var(--borda) 26%, transparent);
font-size: var(--texto-ficha); line-height: 1.45; }
.fatos-faixa li:first-child { border-inline-start: 0; }
.fatos-faixa b { display: block; font-family: var(--fam-display); font-weight: 400;
text-transform: uppercase; font-size: clamp(15px, 1.5vw, 20px); letter-spacing: -.02em;
margin-block-end: var(--esp-sm); }
.fatos-faixa span { color: var(--texto-medio); }
@media (max-width: 980px) { .fatos-faixa { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .fatos-faixa { grid-template-columns: repeat(2, 1fr); } }
/* A GRADE DE LUGARES SANGRA e fecha o vão.
Sete fotos num mosaico dentro do contêiner ainda liam como galeria de
cartões. De borda a borda, com vão de 4px, elas viram uma superfície só. */
.lugares__grade { display: grid; grid-template-columns: repeat(12, 1fr);
gap: 4px; align-items: stretch; }
.lugares__grade .lugar { border-radius: 0; }
.lugar { position: relative; border-radius: var(--raio-md); overflow: hidden;
isolation: isolate; margin: 0; }
.lugar img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
object-fit: cover; z-index: -2;
transition: transform var(--tempo-longa) var(--curva-entrada); }
.lugar:hover img { transform: scale(1.05); }
.lugar::after { content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(to top, rgb(13 13 13 / .90) 0%, rgb(13 13 13 / .38) 46%, transparent 74%); }
.lugar figcaption { position: absolute; inset-block-end: 0; inset-inline: 0;
padding: clamp(16px, 2vw, 26px); color: var(--texto-sobre-inverso); }
.lugar b { display: block; font-family: var(--fam-display); font-weight: 800;
text-transform: uppercase; font-size: clamp(15px, 1.6vw, 20px); letter-spacing: .02em;
margin-block-end: 4px; inline-size: fit-content; }
.lugar span { font-size: var(--texto-label); letter-spacing: .06em; opacity: .92; }
/* QUEM MANDA NA ALTURA DA LINHA E UM ITEM SO, e o outro estica.
Antes, `--largo` pedia 16/10 e `--alto` pedia 4/5 na MESMA linha. Em 1360px
isso dá 487px contra 681px: a linha fica com a altura do maior, e o menor
deixa 194px de buraco branco embaixo. Não aparece em medição nenhuma, e
aparece na tela na hora.
Agora um item de cada linha declara a proporção, e o vizinho estica com
`block-size: 100%`. */
.lugar--largo { grid-column: span 7; block-size: 100%; }
.lugar--alto { grid-column: span 5; aspect-ratio: 4 / 5; }
.lugar--meio { grid-column: span 5; block-size: 100%; }
.lugar--resto { grid-column: span 7; aspect-ratio: 16 / 10; }
.lugar--terco { grid-column: span 4; aspect-ratio: 1 / 1; }
@media (max-width: 760px) {
.lugares__grade { grid-template-columns: repeat(2, 1fr); }
.lugar--largo, .lugar--alto, .lugar--meio, .lugar--resto {
grid-column: span 2; aspect-ratio: 16/10; block-size: auto; }
.lugar--terco { grid-column: span 1; aspect-ratio: 1/1; }
}
/* ═══ HERO · a camada de filme ═════════════════════════════════════════════ */
.hero__filme { position: absolute; inset: 0; opacity: 0; pointer-events: none;
transition: opacity 1400ms var(--curva-entrada); }
.hero__filme.rodando { opacity: 1; }
/* O apagar que cobre o `seekTo`. Ver a nota em `movimento.js`. */
.hero__filme.rodando.piscando { opacity: 0; transition-duration: 240ms; }
/* O iframe cobre a área SEM deformar. Um 16:9 esticado para caber numa tela
alta deixa barra preta em cima e embaixo, e é isso que denuncia vídeo de
fundo mal feito. Aqui ele é dimensionado para transbordar, e o excesso é
cortado pelo `overflow` do hero. */
/* 132% E NÃO 100%, e é por causa da interface do YouTube.
Ela ancora nas bordas do iframe: o título fica no topo, o logo e os botões
embaixo. Num iframe do tamanho exato do hero, esse cromo aparece dentro da
dobra, com o nome do vídeo em português e a marca antiga. Medido no print:
o botão de pause no meio e "Cabanas acomodações" vazando no canto.
Ampliando 32% e centralizando, as bordas do iframe caem fora da área
visível, e o que sobra na tela é só imagem.
Continua sendo contorno, e não solução: `iframe` de terceiro não se
estiliza. A solução é o mp4 bruto, que está na lista de pedidos. */
.hero__filme iframe { position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
translate: -50% -50%; border: 0;
inline-size: max(132vw, 235svh); block-size: max(74.25vw, 132svh);
pointer-events: none; }
} /* @layer kng-projeto */
/* ═══════════════════════════════════════════════════════════════════════════
COMPOSIÇÃO · o que faltava, e não era tipografia
As três páginas foram costuradas e postas lado a lado, inteiras, na mesma
largura. O que apareceu não estava em nenhum número de fonte:
cabanamountain pares de imagem escalonados, cartão deslocado com a foto
sangrando para fora dele, grade assimétrica, seções que
se encaixam uma na outra
bellavista imagem de BORDA A BORDA quase sempre, blocos de cor
inteiros, texto esparso e centrado
esta página contêiner centrado, título à esquerda, grade de cartões
arredondados. OITO VEZES SEGUIDAS
Nenhuma seção sangrava até a borda, e todo objeto era um cartão do mesmo
tamanho com o mesmo raio. Isso não lê como ruim, lê como TEMPLATE: o olho
aprende a forma na segunda seção e para de olhar na terceira.
O que entra aqui são as quatro formas que faltavam. Não é decoração: cada
uma existe para quebrar a repetição num ponto específico da página.
═══════════════════════════════════════════════════════════════════════════ */
@layer kng-projeto {
/* ── 1 · SANGRIA ────────────────────────────────────────────────────────────
Escapa do contêiner e vai até a borda da janela, de dentro de qualquer
elemento. `100vw` sozinho não serve: com barra de rolagem ele é mais largo
que a área visível e cria rolagem lateral. `100dvw` mede o que existe. */
.sangra { inline-size: 100dvw; margin-inline: calc(50% - 50dvw); max-inline-size: none; }
/* ── 2 · MEIA SANGRIA ───────────────────────────────────────────────────────
Sangra por UM lado só. É o gesto da cabanamountain: a imagem sai pela
direita e o texto fica preso à coluna, o que dá assimetria sem perder a
régua de leitura. */
.sangra-d { margin-inline-end: calc(50% - 50dvw); }
.sangra-e { margin-inline-start: calc(50% - 50dvw); }
@media (max-width: 900px) { .sangra-d, .sangra-e { margin-inline: 0; } }
/* ── 3 · SOBREPOSIÇÃO ───────────────────────────────────────────────────────
O bloco de texto invade a imagem vizinha em vez de ficar ao lado dela. Faz
duas seções deixarem de parecer duas fileiras. */
.monta { position: relative; z-index: 2; }
@media (min-width: 901px) {
.monta--sobe { margin-block-start: clamp(-140px, -9vw, -60px); }
.monta--puxa-e { margin-inline-start: clamp(-96px, -6vw, -40px); }
}
/* ── 4 · A SEÇÃO SEM MARGEM DE SEÇÃO ────────────────────────────────────────
Bloco que encosta no anterior, sem o respiro de 128px. Usado quando duas
seções são a mesma ideia em dois tempos. */
.cola { padding-block-start: 0 !important; }
.cola-fim { padding-block-end: 0 !important; }
/* ── 5 · NÚMERO EM TAMANHO DE CARTAZ ────────────────────────────────────────
A faixa de prova estava em 52px, do tamanho de um título de seção, e por
isso lia como mais uma fileira. Número é a única coisa da página que pode
ser lida de longe, e a bellavista usa esse contraste de escala o tempo
todo. */
.prova--cartaz .prova__num { font-size: clamp(44px, 7vw, 96px); line-height: .84;
letter-spacing: -.04em; font-weight: 400;
/* O NÚMERO NÃO QUEBRA. "14 mi" partia em duas linhas e desalinhava a fileira
inteira, porque a unidade conta como palavra. Aqui ela anda junto. */
white-space: nowrap; }
/* Alinhados pela BASE do número, e não pelo fim da caixa: com quantidades de
dígito diferentes, alinhar caixa deixa os números dançando. */
.prova--cartaz .prova__grade { gap: clamp(28px, 4vw, 56px); align-items: baseline; }
.prova--cartaz .prova__leg { max-inline-size: 20ch; margin-block-start: var(--esp-md); }
/* ── 6 · PAR ESCALONADO ─────────────────────────────────────────────────────
Duas imagens que não se alinham: a segunda desce. É o gesto que faz a
cabanamountain parecer diagramada em vez de gerada. */
.par { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2vw, 32px);
align-items: start; }
.par > :nth-child(2) { margin-block-start: clamp(32px, 7vw, 110px); }
@media (max-width: 760px) { .par { grid-template-columns: 1fr; } .par > :nth-child(2) { margin-block-start: 0; } }
/* ── 7 · O CARTÃO PERDE O CARTÃO ────────────────────────────────────────────
Na matriz, dois dos quatro deixam de ter moldura e viram imagem solta com o
texto embaixo. Quebrar a simetria de quatro iguais é o que tira o cheiro de
grade gerada. */
/* O DEGRADÊ DA CÉLULA SEM MOLDURA É MAIS FUNDO, e não mais raso.
Ao tirar o cartão eu escrevi um degradê novo mais leve, achando que a
imagem inteira pedia menos véu. O medidor discordou: o rótulo do rio caiu
para 1,36:1 no telefone e o nome para 1,75:1. Sem a moldura a célula ficou
MAIS ALTA, o texto subiu dentro dela, e a parte escura do degradê ficou
abaixo do texto em vez de atrás dele. Menos moldura pede mais véu, não
menos. */
.celula--nu { border-radius: 0; aspect-ratio: 3 / 4; }
.celula--nu::after { background: linear-gradient(to top, rgb(13 13 13 / .95) 0%,
rgb(13 13 13 / .90) 42%, rgb(13 13 13 / .62) 66%, rgb(13 13 13 / .18) 88%,
transparent 100%); }
@media (min-width: 901px) {
.matriz__grade--ritmo { grid-template-columns: 1.15fr .85fr .85fr 1.15fr;
grid-template-areas: "a a b c" "d e e c"; }
}
} /* @layer kng-projeto */
@layer kng-projeto {
/* A faixa de quatro: sem vão, sem raio, de borda a borda. O que separa uma
célula da outra é a própria foto, e não uma calha de 20px. */
.matriz__grade--faixa { grid-template-columns: repeat(4, 1fr); gap: 0; }
/* A FAIXA GANHA ALTURA, E SÓ A FOTOGRAFIA GANHA.
Em 3:4,4 o retrato ficava curto e a foto virava recorte: a corredeira sem o
céu, a arara sem a copa. Em 3:5,2 são mais 96px de imagem por célula em
1440, e o assunto volta a caber.
O texto não mexe: `.celula__texto` é ancorado em `inset-block-end: 0`,
então ele continua colado no pé do cartão, com o mesmo corpo e o mesmo
respiro. Quem cresceu foi o quadro acima dele. */
.matriz__grade--faixa .celula { border-radius: 0; aspect-ratio: 3 / 5.2; }
.matriz__grade--faixa .celula__texto { padding: clamp(18px, 2.2vw, 32px); }
@media (max-width: 900px) {
.matriz__grade--faixa { grid-template-columns: repeat(2, 1fr); }
.matriz__grade--faixa .celula { aspect-ratio: 3 / 4.5; }
}
@media (max-width: 520px) {
.matriz__grade--faixa { grid-template-columns: 1fr; }
.matriz__grade--faixa .celula { aspect-ratio: 16 / 11; }
.matriz__grade--faixa .celula__linha { display: block; }
}
/* ═══ 11b · A WARZONE FICA DE FORA, E ISSO NÃO É ESCOLHA DE GOSTO ══════
`clientes/amazon-roosevelt/CLAUDE.md` diz, com todas as letras: a Warzone é
gratuita só para uso pessoal, não se usa em site nem em peça, e o display
sai em Montserrat ExtraBold caixa alta enquanto não houver licença.
Eu tinha posto ela nos rótulos. Duas coisas apareceram depois:
1 · ELA NUNCA CARREGOU. O `@font-face` apontava para
`../../dna/marca/fontes/Warzone.otf` a partir de `web/tema/assets/`,
que resolve para `web/dna/...` e não existe. Medido com
`document.fonts`: estado `error`, e um 404 no console. O que está na
tela desde o começo é a família de recuo
2 · O DESTINO MUDOU A CONVERSA. Uma página local com fonte sem licença é
uma pendência; a mesma página num endereço público é distribuição do
arquivo da fonte. E este site é para os Estados Unidos
Então o rótulo fica na Montserrat, com o corpo e o respiro que a Warzone
tinha trazido, que é o que está na tela e foi aprovado. Comprada a licença,
religar é uma linha: `@font-face` com o caminho de três níveis, e a família
na frente da pilha do `.rotulo`. */
/* ═══ 12 · A CAMADA DE CARTOGRAFIA ═════════════════════════════════
As áreas claras estavam lisas, e liso ao lado de uma seção escura em foto
lia como buraco entre duas seções, não como respiro.
O véu é mata desenhada em traço, do jeito que carta topográfica desenha
mata: copa em arco e tronco curto. O ladrilho de 240px FECHA nas quatro
bordas porque cada marca foi desenhada também nas oito reposições
vizinhas, então não há costura visível por mais que a seção cresça.
Gerador registrado em `acervo.md` §7.
`z-index: -1` com `isolation: isolate` no pai: assim o véu pinta ACIMA do
fundo da seção e ABAIXO de todo o conteúdo, sem precisar posicionar nada
por dentro. E `pointer-events: none`, porque textura não recebe clique. */
.mapeada { position: relative; isolation: isolate; }
.mapeada::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: url(textura-mata.svg) repeat 0 0 / clamp(128px, 12vw, 176px);
opacity: .38;
-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 10%, transparent 58%);
mask-image: linear-gradient(to bottom, #000 0, #000 10%, transparent 58%);
}
/* ═══ O MAPA, EM GEOMETRIA DE VERDADE ════════════════════════════
Quatro camadas, na ordem em que uma carta as desenha: superfície de água,
rede de afluentes, Guariba, Roosevelt. As duas últimas têm peso porque são
os dois rios da marca; o resto é contexto e fica na base do tom.
`non-scaling-stroke` mantém o fio fino por maior que o mapa fique: um mapa
ampliado engrossa tudo, e aí a rede de afluentes vira mancha. */
.mapa-osm { display: block; color: var(--acento); }
.mapa-osm svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
.mapa-osm path { vector-effect: non-scaling-stroke; }
.m-agua path { fill: currentColor; fill-opacity: .26; stroke: none; }
.m-rede path { stroke: currentColor; stroke-opacity: .55; stroke-width: 1.4; fill: none; }
.m-guariba path { stroke: var(--acento-sobre-claro); stroke-opacity: .95; stroke-width: 3.4; fill: none; }
.m-roosevelt path { stroke: var(--texto-forte); stroke-opacity: .9; stroke-width: 4.6; fill: none; }
/* A CORRENTEZA. É a mesma geometria do Roosevelt, emitida de novo pelo
gerador, tracejada e correndo. Como `pathLength` é 1, o tracejado se mede em
fração do rio: 0,006 de risco a cada 0,061, ou seja uns 16 riscos ao longo
dos 490 km. O laço desloca EXATAMENTE um período, senão a volta pisca.
O sentido é o do rio, e isso custou uma linha no gerador: o OSM não garante
direção de `way`, e sem endireitar os trechos a correnteza corria para trás
em metade do desenho.
SÓ ENQUANTO A SEÇÃO ESTÁ NA TELA. `stroke-dashoffset` não roda na thread de
composição: ele repinta o caminho a cada quadro. Deixar isso em laço eterno
numa página de 15.300px seria cobrar de todo mundo por um enfeite que quase
ninguém está vendo. Quem liga e desliga é o `movimento.js`. */
.m-fluxo path { stroke: var(--acento-sobre-claro); stroke-width: 7;
stroke-linecap: round; fill: none;
stroke-dasharray: .006 .055; stroke-dashoffset: 0; opacity: 0;
transition: opacity 900ms linear; }
.mapa-osm.dentro .m-fluxo path { opacity: .85; transition-delay: 2400ms; }
.mapa-osm.fluindo .m-fluxo path { animation: correnteza 11s linear infinite; }
.sobre-escuro .m-fluxo path { stroke: var(--acento-sobre-escuro); }
@keyframes correnteza { to { stroke-dashoffset: -.061; } }
@media (prefers-reduced-motion: reduce) {
.m-fluxo path { animation: none !important; opacity: .5 !important; }
}
.sobre-escuro .m-guariba path { stroke: var(--acento-sobre-escuro); }
.sobre-escuro .m-roosevelt path { stroke: var(--texto-sobre-inverso); stroke-opacity: .6; }
/* ═══ 13 · OS SINAIS ════════════════════════════════════════════
Mesma espessura do mapa, de propósito: sinal e carta são o mesmo desenho.
As propriedades de traço são HERDADAS em SVG, e por isso declará-las aqui,
no `