/* ============================================================
FONTES, SERVIDAS AQUI E NAO PELO GOOGLE
------------------------------------------------------------
π¨ A pagina quebrava sem a Londrina: com o fallback do sistema os titulos
cresciam ate 219px e invadiam tres elementos vizinhos (medido: .cr-titulo
+114,6px, .oi-nome +116px). Isso acontecia durante o FOUT e ficava
PERMANENTE para quem tem fonts.googleapis.com bloqueado β rede corporativa,
bloqueador de rastreio, ou simplesmente um pais onde o dominio nao responde.
Servir do mesmo lugar que a pagina tira a dependencia de terceiro, e de
quebra tira um pedido a um dominio que rastreia quem visita.
Instrument Serif saiu: ela estava no e nao e' usada em lugar nenhum
desta pagina.
============================================================ */
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;
src:url("assets/fontes/dm-sans-e8eef8.woff2") format("woff2");
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;
src:url("assets/fontes/dm-sans-8ca1b7.woff2") format("woff2");
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:swap;
src:url("assets/fontes/dm-sans-e8eef8.woff2") format("woff2");
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:swap;
src:url("assets/fontes/dm-sans-8ca1b7.woff2") format("woff2");
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:600;font-display:swap;
src:url("assets/fontes/dm-sans-e8eef8.woff2") format("woff2");
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:600;font-display:swap;
src:url("assets/fontes/dm-sans-8ca1b7.woff2") format("woff2");
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:700;font-display:swap;
src:url("assets/fontes/dm-sans-e8eef8.woff2") format("woff2");
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:700;font-display:swap;
src:url("assets/fontes/dm-sans-8ca1b7.woff2") format("woff2");
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{font-family:"Inter";font-style:italic;font-weight:400;font-display:swap;
src:url("assets/fontes/inter-7cf859.woff2") format("woff2");
unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{font-family:"Inter";font-style:italic;font-weight:400;font-display:swap;
src:url("assets/fontes/inter-99cbe2.woff2") format("woff2");
unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{font-family:"Inter";font-style:italic;font-weight:400;font-display:swap;
src:url("assets/fontes/inter-bbe39e.woff2") format("woff2");
unicode-range:U+1F00-1FFF;
}
@font-face{font-family:"Inter";font-style:italic;font-weight:400;font-display:swap;
src:url("assets/fontes/inter-59f672.woff2") format("woff2");
unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face{font-family:"Inter";font-style:italic;font-weight:400;font-display:swap;
src:url("assets/fontes/inter-3c7620.woff2") format("woff2");
unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face{font-family:"Inter";font-style:italic;font-weight:400;font-display:swap;
src:url("assets/fontes/inter-67c3c7.woff2") format("woff2");
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{font-family:"Inter";font-style:italic;font-weight:400;font-display:swap;
src:url("assets/fontes/inter-79979c.woff2") format("woff2");
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{font-family:"Londrina Solid";font-style:normal;font-weight:400;font-display:swap;
src:url("assets/fontes/londrina-solid-3160aa.woff2") format("woff2");
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{font-family:"Londrina Solid";font-style:normal;font-weight:900;font-display:swap;
src:url("assets/fontes/londrina-solid-bf4514.woff2") format("woff2");
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* π¨ e um cinto de seguranca para o caso de ate o arquivo local falhar: uma
familia de reserva com a METRICA corrigida. Medido bloqueando so a Londrina,
o fallback do sistema devolve 493px onde ela da 312, 406 onde da 291 e 361
onde da 245 β razao media 0,68. Com size-adjust:68% a reserva ocupa a mesma
largura, e como toda a pagina declara line-height explicito a altura ja esta
presa de qualquer jeito. As letras saem menores e mais leves, mas o layout
nao desmonta, que e' o que importa num estado que ninguem deveria ver. */
@font-face{font-family:"Londrina reserva";
src:local("Arial Bold"),local("Arial"),local("Helvetica Neue"),local("Liberation Sans"),local("DejaVu Sans");
size-adjust:68%;font-weight:400 900}
/* ============================================================
home v2 β reproducao do frame Figma "Home Β· 1440 Β· PROPOSTA"
Arquivo separado de proposito: a home que funciona nao sai do ar
enquanto esta aqui nao chegar no 1:1 conferido por diferenca de pixel.
============================================================ */
:root{
--ink:#0c0e0d; --paper:#f3f1e9; --white:#fff; --acid:#c7ff45;
--on-ink:#c6cbc6; --on-ink-dim:#a0a8a1;
--tijolo:#c33307;
--sans:"DM Sans",sans-serif;
--italica:"Inter",serif;
--display:"Londrina Solid","Londrina reserva",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{overflow-x:clip}
body{margin:0;overflow-x:clip;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit;text-decoration:none}
/* a faixa ink do hero: o retangulo no Figma vai de y=-19 a y=665 */
/* π¨ o grao do fundo e' o grao REAL, recortado do proprio export do Figma, e nao
ruido sintetico. A primeira tentativa usava feTurbulence com mix-blend-mode
overlay: overlay opera em torno do cinza medio e sobre o ink #0c0e0d nao faz
quase nada. Medido, o fundo ficou com amplitude 0.33 contra 2.62 do Figma, e
grao fino 0.00 contra 1.59 β ou seja, liso. O erro MEDIO de pixel nao pegou
isso (2.5, otimo), porque media nao enxerga textura.
O ladrilho vem do render 1x e e' exibido 1:1. Tirado do export 2x e reduzido
para 256 ele perdia justamente o grao fino (0.87 contra 1.59): reduzir uma
textura pela metade e' a mesma coisa que borra-la. */
.v2-hero{position:relative;display:flex;justify-content:center;color:var(--white);
background:var(--ink);overflow:hidden}
/* o grao vive numa camada propria para poder se mexer. Ela anda por transform,
que o compositor resolve; animar background-position repintaria a faixa
inteira a cada quadro. O inset negativo e' maior que o maior salto, entao a
borda do ladrilho nunca entra em cena. */
.v2-hero::before,.v2-lab::before,.v2-contato::before{content:"";position:absolute;inset:-60px;z-index:0;pointer-events:none;
background:url("assets/v2/grao.webp") repeat;
animation:estatica .6s steps(1,end) infinite;will-change:transform}
.tela-hero{z-index:1}
/* saltos, nao deslize: estatica e' o grao TROCANDO, e um deslocamento continuo
leria como textura escorregando por tras do conteudo. 8 quadros em .6s da' 13
trocas por segundo, que e' onde o olho para de ver quadros e ve chiado. */
@keyframes estatica{
0% {transform:translate3d(0,0,0)}
12.5%{transform:translate3d(-13px,7px,0)}
25% {transform:translate3d(9px,-17px,0)}
37.5%{transform:translate3d(-21px,-4px,0)}
50% {transform:translate3d(17px,12px,0)}
62.5%{transform:translate3d(-7px,19px,0)}
75% {transform:translate3d(23px,-11px,0)}
87.5%{transform:translate3d(-15px,-21px,0)}
}
/* grao nao e' movimento vestibular: e' textura de +-3 niveis sobre quase preto,
longe de qualquer limiar de flash. Sob reduced-motion ele desacelera de 13
para 3 trocas por segundo em vez de sumir β esconder o efeito de quem tem
animacao desligada no sistema ja aconteceu duas vezes nesta pagina. */
@media(prefers-reduced-motion:reduce){
.v2-hero::before,.v2-lab::before,.v2-contato::before{animation-duration:2.4s}
}
/* a tela e' a prancheta de 1440 do Figma. Tudo dentro e' posicao absoluta com
as coordenadas do arquivo, para a conferencia por pixel ser possivel. */
/* a prancheta mantem os 1440 do arquivo e encolhe inteira para caber. Origem no
topo-centro para ela continuar centrada e encostada no topo da faixa. */
.tela{position:relative;width:1440px;flex:0 0 1440px;transform-origin:50% 0;scale:var(--escala-tela,1)}
.tela-hero{height:665px}
/* a faixa acompanha a altura JA escalada, senao sobra vazio embaixo */
.v2-hero{height:calc(665px * var(--escala-tela,1))}
.v2-oi{height:calc(835px * var(--escala-tela,1));overflow:hidden}
/* ---- o bloco foge do ponteiro ----
--mx/--my vem do home-v2.js em -1..1 a partir do centro. O sinal e' negativo
porque ele FOGE: o mouse vai para a direita, a composicao vai para a esquerda.
Duas profundidades, e nao uma: com todo mundo andando igual os 8px leem como a
pagina inteira escorregando, e nao como um bloco reagindo.
A transicao longa e' o que faz parecer fuga em vez de grude β o bloco chega
atrasado no destino o tempo todo. O grao NAO anda junto: ele e' irmao da tela,
e fundo que segue o mouse deixaria de ser fundo. */
.tela-hero{translate:calc(var(--mx,0) * -8px) calc(var(--my,0) * -8px);
transition:translate .9s cubic-bezier(.22,.61,.36,1)}
.he-anel,.he-retrato,.he-orbita,.he-halo{
translate:calc(var(--mx,0) * -5px) calc(var(--my,0) * -5px);
transition:translate 1.1s cubic-bezier(.22,.61,.36,1)}
/* amplitude cortada, nao removida: sao 13px no total e a preferencia existe
contra movimento de grande escala. */
@media(prefers-reduced-motion:reduce){
.tela-hero{translate:calc(var(--mx,0) * -3px) calc(var(--my,0) * -3px)}
.he-anel,.he-retrato,.he-orbita,.he-halo{translate:calc(var(--mx,0) * -2px) calc(var(--my,0) * -2px)}
}
/* ---- retrato: circulo de 422 em (632,105), com a foto girada -6.92deg ---- */
/* π¨ o retrato precisa ser RECORTE com alfa de verdade, nao um pedaco do render.
Enquanto ele levava o fundo do Figma assado junto, o disco inteiro ficava com
grao PARADO enquanto tudo em volta chiava, e lia como se a foto tivesse fundo
proprio.
O alfa saiu de um calculo, nao de um limiar: a mesma composicao renderizada
sobre DOIS fundos (o ink do frame e o claro do canvas) resolve a transparencia
exatamente. Onde e' pessoa os dois renders coincidem; onde e' fundo eles
diferem pelo contraste entre os fundos. DaΓ L-D = (1-a)*(Lbg-Dbg), e a cor
propria de cada pixel se recupera desfazendo a composicao. Limiar por brilho
nao serviria: o sueter preto tem quase a mesma luminancia do ink.
Deu 28,5% de pixels opacos, que e' a silhueta.
O anel volta para o CSS porque no recorte ele viraria fundo e sumiria. Ele NAO
e' concentrico com a mascara: mascara em (632,105), anel em (635,120). */
.he-retrato{position:absolute;left:632px;top:105px;width:422px;height:422px;margin:0;z-index:2}
.he-retrato img{width:100%;height:100%;display:block}
.he-anel{position:absolute;left:635px;top:120px;width:422px;height:422px;z-index:1;
border-radius:50%;border:2px solid rgba(199,255,69,.2)}
/* ---- tipografia display ---- */
/* gira em torno do CENTRO da propria caixa: com origem no canto ele saltava
para fora da tela, 150px a esquerda e acima do lugar */
/* π¨ +8px em relacao ao y do arquivo. O Figma posiciona texto pela caixa dele;
o navegador posiciona pela metrica da fonte, e Londrina Solid nao assenta no
mesmo lugar nas duas. A primeira varredura que fiz foi de -14 a 0 e "achou" o
minimo em 0, que era so a borda da faixa que eu mesmo escolhi: para baixo ela
nunca olhou. Com +8 o erro na regiao da tipografia cai de 36.5 para 8.0. */
.he-lead{position:absolute;left:417px;top:171px;width:149px;height:95px;margin:0;rotate:180deg;
font:400 80px/95px var(--display);color:rgba(255,255,255,.2);text-transform:uppercase;white-space:nowrap}
.he-titulo{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;font-weight:400}
.he-titulo .l1,.he-titulo .l2{position:absolute;display:block;font:400 80px/1 var(--display);color:var(--white);text-transform:uppercase;white-space:nowrap}
.he-titulo .l1{left:417px;top:241px}
.he-titulo .l2{left:363px;top:310px;font-size:88px}
/* ---- nome na vertical, lido de baixo para cima ---- */
.he-nome{position:absolute;left:0;top:0;margin:0}
/* o Figma monta estas duas palavras em Inter, e o resto do arquivo em DM Sans:
parece descuido do arquivo, nao decisao. Em vez de carregar uma terceira
familia por duas palavras de 12px, o tracking cobre os 3px de diferenca de
comprimento que a medicao acusou (41px no Figma contra 38 em DM Sans). */
.he-nome span{position:absolute;display:block;font:400 12px/1 var(--sans);color:var(--white);text-transform:uppercase;
letter-spacing:.5px;writing-mode:vertical-rl;rotate:180deg}
.he-nome .n1{left:375px;top:258px;height:51px}
.he-nome .n2{left:390px;top:258px;height:40px}
.he-ponto{position:absolute;left:394px;top:302px;width:4px;height:4px;border-radius:50%;background:var(--acid)}
/* ---- selo: estrela acid com a seta preta ---- */
.he-selo{position:absolute;left:429px;top:383px;width:45px;height:45px;
background:url("assets/v2/selo.svg") center/contain no-repeat}
.he-local{position:absolute;right:752px;top:398px;width:300px;margin:0;text-align:right;
font:500 11px/16px var(--sans);letter-spacing:1.4px;color:var(--on-ink-dim);text-transform:uppercase}
/* ---- lua com o halo acid atras ---- */
/* ---- a lua percorre o anel ----
O anel E' a orbita e a lua estava pousada nele: medido, o centro dela fica a
211.5px do centro do anel, a -30.88 graus. Entao ela anda por ali.
A caixa da orbita e' a MESMA do anel, e gira. A lua vai dentro, num ponto
colocado no angulo inicial, e leva uma contra-rotacao de igual duracao para
nao rodar junto β orbita nao e' piΓ£o.
Ela fica SEMPRE na frente. Cheguei a faze-la mergulhar atras do retrato na
metade de tras, o que le como orbita de verdade, mas por tras de uma silhueta
opaca ela simplesmente sumia por metade da volta. Ficar visivel ganhou. Isso
inclui passar por cima do fim de PRODUCT e DESIGNER, porque o circulo comeca
em x=635 e o texto vai ate 690. */
/* a bola acid fica PARADA na posicao do Figma. Ela estava dentro do grupo que
gira e viajava junto com a lua; agora que a lua sai de la, ela e' um ponto
fixo no anel. Fora da orbita, por isso, e nao dentro. */
.he-halo{position:absolute;left:1012px;top:203px;width:53px;height:53px;border-radius:50%;
background:var(--acid);z-index:2}
.he-orbita{position:absolute;left:635px;top:120px;width:422px;height:422px;z-index:3;
pointer-events:none;animation:orbitar 42s linear infinite}
.he-lua-ponto{position:absolute;left:50%;top:50%;width:0;height:0;
transform:rotate(-30.88deg) translateX(211.5px)}
.he-lua-fixa{position:absolute;left:0;top:0;width:0;height:0;
animation:contra 42s linear infinite}
/* max-width:none e' obrigatorio: a regra global img{max-width:100%} resolve
contra o pai, que aqui tem largura ZERO por ser so um ponto de ancoragem, e a
lua colapsava para 0px de largura. */
.he-lua{position:absolute;left:-27.5px;top:-27.5px;width:55px;height:55px;max-width:none;border-radius:50%;object-fit:cover;
filter:drop-shadow(8px 4px 1.5px rgba(0,0,0,.32))}
@keyframes orbitar{from{rotate:0deg}to{rotate:360deg}}
@keyframes contra{from{rotate:30.88deg}to{rotate:-329.12deg}}
/* 42s e' uma volta calma. Sob reduced-motion ela desacelera 3x em vez de parar:
movimento continuo na periferia e' o caso classico de distracao, entao aqui o
corte e' maior que nos outros efeitos desta pagina. */
@media(prefers-reduced-motion:reduce){
.he-orbita,.he-lua-fixa{animation-duration:126s}
}
/* ============================================================
OI, EU SOU O
Coordenadas do arquivo menos 665, que e' onde a faixa ink do hero acaba.
O paper e' chapado (medido: grao 0,00), entao nao leva ladrilho nenhum.
============================================================ */
.v2-oi{display:flex;justify-content:center;background:var(--paper);color:var(--ink)}
.tela-oi{height:835px}
.tela-oi{perspective:1200px}
.oi-aparelho{position:absolute;left:178px;top:164px;width:512px;height:618px}
.oi-telefone{position:absolute;inset:0;width:100%;height:100%;max-width:none}
/* ---- 1 Β· brilho de vidro ----
π¨ Era para a tela ROLAR. Nao da': as tres imagens que o arquivo guarda sao a
MESMA captura do app, sem conteudo alem da tela, entao rolar arrastaria a
barra de status e a de abas junto. Isto e' a versao honesta do mesmo objetivo.
A mascara e' a tela do aparelho: retangulo arredondado de 234x484, raio 74,
girado 9.3deg, nas coordenadas do arquivo menos a origem do aparelho. */
/* a mascara e' o CORPO do aparelho, nao a tela: a tela do app e' branca e um
reflexo branco sobre branco nao aparece. Na borda preta ele le. 346x524 girado
9.94deg, nas coordenadas do arquivo menos a origem do aparelho. */
.oi-vidro{position:absolute;left:76.82px;top:56.39px;width:346px;height:524px;
border-radius:54px;overflow:hidden;rotate:9.94deg;pointer-events:none}
/* fraco e estreito de proposito. Em .72 e 42% de largura virava um bloco branco
com borda dura, e como a mascara e' um pouco maior que a silhueta do aparelho
ele vazava para o paper. Em .26 o vazamento sobre paper claro some sozinho e
sobra o lampejo na borda preta, que e' onde reflexo de vidro se ve. */
.oi-vidro::before{content:"";position:absolute;top:-40%;left:0;width:17%;height:180%;
background:linear-gradient(100deg,transparent 4%,rgba(255,255,255,.26) 50%,transparent 96%)}
@keyframes brilho{0%,72%{translate:-130% 0}100%{translate:320% 0}}
/* ---- 2 Β· o aparelho se inclina NA DIRECAO do ponteiro ----
O hero foge do mouse; aqui e' o contrario, e e' de proposito: mesma entrada,
resposta oposta, entao a pagina rima sem se repetir. */
.oi-aparelho{transform:rotateY(calc(var(--mx,0) * -7deg)) rotateX(calc(var(--my,0) * 5deg));
transition:transform 1s cubic-bezier(.22,.61,.36,1)}
/* Inter monta esta frase 10px mais estreita que o Figma (191 contra 201): o
tracking cobre, do mesmo jeito que no nome vertical do hero. */
.oi-saudacao{position:absolute;left:719px;top:262px;margin:0;
font:400 32px/69px var(--italica);font-style:italic;letter-spacing:.9px;
color:#131514;text-transform:uppercase;white-space:nowrap}
/* Londrina Black, e nao a Regular do hero */
.oi-nome{position:absolute;left:719px;top:349px;margin:0;
font:900 80px/69px var(--display);color:var(--tijolo);text-transform:uppercase}
.oi-nome span{display:block}
.oi-corpo{position:absolute;left:719px;top:505px;width:543px;margin:0;
font:400 18px/28px var(--sans);color:#0f1110}
.oi-corpo b{font-weight:700}
/* texto e seta posicionados um a um, e nao por flex: centralizar o texto contra
a seta, que e' mais alta, empurrava ele 7px para baixo. */
/* π¨ flex, e nao dois absolutos em coordenada fixa. O `left:126px` da seta
foi medido em "MEUS TRABALHOS"; em "MY WORK" o texto encolhe 54px e a seta
ficava boiando longe da palavra. Com flex ela segue sozinha, e o gap de 11px
e' exatamente o vao que havia (texto terminava em 115, seta comecava em 126).
align-items:flex-start mais o margin-top guardam o top:6 do texto e o top:0
da seta; center deixaria o texto 1px abaixo. */
.oi-cta{position:absolute;left:719px;top:673px;height:30px;
display:flex;align-items:flex-start;gap:11px;color:#000}
.oi-cta span{margin-top:6px;font:500 11px/16px var(--sans);
letter-spacing:1.4px;text-transform:uppercase;white-space:nowrap}
.oi-cta b{font:500 24px/30px var(--sans);letter-spacing:-.2px;color:var(--tijolo)}
/* ---- 3 e 4 Β· entrada na rolagem, e a seta que cutuca ---------------------- */
/* Sob reduced-motion sobra so a opacidade: esmaecer nao e' movimento. */
.v2-oi[data-entrada] .oi-saudacao,
.v2-oi[data-entrada] .oi-nome span,
.v2-oi[data-entrada] .oi-corpo,
.v2-oi[data-entrada] .oi-cta,
.v2-oi[data-entrada] .oi-aparelho{opacity:0;transition:opacity .8s ease var(--d,0s)}
.v2-oi.visivel .oi-saudacao,
.v2-oi.visivel .oi-nome span,
.v2-oi.visivel .oi-corpo,
.v2-oi.visivel .oi-cta,
.v2-oi.visivel .oi-aparelho{opacity:1}
.oi-saudacao{--d:.05s}
.oi-nome span:first-child{--d:.16s}
.oi-nome span:last-child{--d:.26s}
.oi-corpo{--d:.40s}
.oi-cta{--d:.52s}
.oi-aparelho{--d:0s}
@media(prefers-reduced-motion:no-preference){
.oi-vidro::before{animation:brilho 8s linear infinite}
.v2-oi[data-entrada] .oi-saudacao,
.v2-oi[data-entrada] .oi-nome span,
.v2-oi[data-entrada] .oi-corpo,
.v2-oi[data-entrada] .oi-cta{translate:0 26px;
transition:opacity .8s ease var(--d,0s),translate .9s cubic-bezier(.19,.85,.23,1) var(--d,0s)}
/* o aparelho nao sobe: ele ASSENTA, vindo de um pouco mais deitado */
.v2-oi[data-entrada] .oi-aparelho{translate:0 44px;
transition:opacity .9s ease,translate 1.1s cubic-bezier(.19,.85,.23,1),transform 1s cubic-bezier(.22,.61,.36,1)}
.v2-oi.visivel .oi-saudacao,
.v2-oi.visivel .oi-nome span,
.v2-oi.visivel .oi-corpo,
.v2-oi.visivel .oi-cta,
.v2-oi.visivel .oi-aparelho{translate:0}
/* a seta cutuca para baixo, porque e' para baixo que ela aponta */
.oi-cta b{animation:cutucar 4.2s ease-in-out infinite}
@keyframes cutucar{0%,70%,100%{translate:0 0}80%{translate:0 5px}90%{translate:0 0}}
}
@media(prefers-reduced-motion:reduce){
.oi-vidro::before{animation:brilho 20s linear infinite}
.oi-aparelho{transform:rotateY(calc(var(--mx,0) * -3deg)) rotateX(calc(var(--my,0) * 2deg))}
}
/* ============================================================
CASES Β· coordenadas do arquivo menos 1500
============================================================ */
.v2-cases{display:flex;justify-content:center;background:var(--paper);color:var(--ink);
height:calc(1869px * var(--escala-tela,1));overflow:hidden}
.tela-cases{height:1869px}
/* ---- o trilho ----
No arquivo ele aparece uma vez, ao lado do case 01, e os tres rotulos tem a
mesma cor. Aqui ele vira caixa propria para poder GRUDAR e o ponto correr.
π¨ O grude e' por calculo, nao por position:sticky: a prancheta inteira esta
sob transform (--escala-tela), e sticky dentro de ancestral transformado
resolve offset no espaco transformado. O home-v2.js escreve --grude em
unidades da prancheta. */
.ca-trilho{position:absolute;left:0;top:336px;width:100%;height:133px;
translate:0 var(--grude,0px);will-change:translate}
.ca-trilho a{position:absolute;left:141px;font:500 11px/16px var(--sans);
letter-spacing:1.4px;text-transform:uppercase;color:#5f5e5b;transition:color .3s}
.ca-trilho a:nth-of-type(1){top:21px}
.ca-trilho a:nth-of-type(2){top:62px}
.ca-trilho a:nth-of-type(3){top:103px}
.ca-trilho a[aria-current]{color:var(--ink)}
.ca-trilho a:hover,.ca-trilho a:focus-visible{color:var(--ink)}
.ca-linha{position:absolute;left:230px;top:0;width:1px;height:133px;background:#000}
/* o ponto desliza entre as tres linhas: 25 + 41 por case */
/* π¨ translate, e NAO top. `top` nao e' compositavel: cada quadro da transicao
forca layout na thread principal, e ela roda justamente durante a rolagem,
quando o orcamento e' mais apertado. Medido no checkup: as transicoes destes
dois pontos respondiam por 96% de todo o layout de uma rolagem da pagina. */
.ca-ponto{position:absolute;left:226px;top:25px;
translate:0 calc(var(--ativo,0) * 41px);
width:9px;height:9px;border-radius:50%;background:#131313;
transition:translate .45s cubic-bezier(.22,.61,.36,1)}
@media(prefers-reduced-motion:reduce){.ca-ponto{transition-duration:.15s}}
/* ---- um case ---- */
/* π¨ a coluna de texto e' FLUXO, e nao quatro caixas com top fixo. Com top fixo
o que vem depois do paragrafo nao se move quando ele cresce, e crescer e'
exatamente o que o WCAG 1.4.12 manda poder acontecer: com o espacamento de
texto do criterio o .ca-texto ia de 168 para 250px e o EXPLORAR sumia embaixo
dele. As margens abaixo reproduzem as coordenadas do arquivo ao pixel, e
agora o bloco inteiro desce junto em vez de se sobrepor. */
.ca-coluna{position:absolute;left:324px;top:0;width:413px}
.ca-titulo{position:static;margin:0;font:900 80px/69px var(--display);
text-transform:uppercase;white-space:nowrap}
.ca-olho{position:static;margin:0;font:500 11px/16px var(--sans);
letter-spacing:1.4px;text-transform:uppercase;color:#63675f}
.ca-texto{position:static;margin:0;font:400 18px/28px var(--sans);color:#0f1110}
.ca-capa{position:absolute;max-width:none}
/* EXPLORAR: rotulo em (324, y+10) e a seta numa caixa de 36 em (388, y).
A seta e' um β girado -135deg, como no arquivo, e nao um glifo diferente. */
.ca-explorar{position:relative;display:inline-block;
font:500 11px/16px var(--sans);letter-spacing:1.4px;text-transform:uppercase;color:#000}
/* left:100% e' a largura da caixa inline-block, que e' a do texto: 65px em
"EXPLORAR". O -1 devolve exatamente os 64px que estavam fixos aqui.
π¨ nao compense pela caixa de getBoundingClientRect desta seta: ela tem
rotate(-135deg), entao o retangulo que ela devolve nao e' o left do layout. */
.ca-explorar b{position:absolute;left:100%;margin-left:-1px;top:-10px;width:36.06px;height:36.06px;
display:flex;align-items:center;justify-content:center;
font:500 24px/30px var(--sans);letter-spacing:-.2px;rotate:-135deg;
transition:translate .4s cubic-bezier(.22,.61,.36,1)}
.ca-explorar:hover b,.ca-explorar:focus-visible b{translate:4px -4px}
/* ---- as tres marcas ----
π¨ cada passou a ser CAIXA de verdade, com top e altura. Antes ele
era estatico e sem altura, porque todo filho e' absoluto β e elemento de area
zero nao tem razao de intersecao, entao entrada por case era impossivel de
disparar no limiar certo. Com o artigo posicionado, as coordenadas dos filhos
passam a ser as do arquivo MENOS o topo do proprio case.
As capas seguem recortadas pela TINTA e nao pela caixa do no: a arte
transborda o retangulo que o arquivo declara. */
.ca{position:absolute;left:0;width:100%}
.ca-matcha{top:216px;height:410px}
.ca-reports{top:722px;height:390px}
.ca-skynet{top:1279px;height:378px}
.ca-matcha .ca-coluna{top:16px}
.ca-matcha .ca-titulo{color:#1a422b}
.ca-matcha .ca-olho{margin-top:18px}
.ca-matcha .ca-texto{margin-top:18px;width:373px}
.ca-matcha .ca-explorar{margin-top:28px}
.ca-cta-matcha b{color:#1a422b}
.ca-capa-matcha{left:793px;top:0;width:456px;height:410px}
.ca-reports .ca-coluna{top:30px}
.ca-reports .ca-titulo{color:#0d4bb3}
.ca-reports .ca-olho{margin-top:18px}
.ca-reports .ca-texto{margin-top:18px;width:413px}
.ca-reports .ca-explorar{margin-top:28px}
.ca-cta-reports b{color:#0d4bb3}
.ca-capa-reports{left:789px;top:0;width:456px;height:390px}
.ca-skynet .ca-coluna{top:12px}
.ca-skynet .ca-titulo{color:#f9181c}
.ca-skynet .ca-olho{margin-top:27px}
.ca-skynet .ca-texto{margin-top:27px;width:413px}
.ca-skynet .ca-explorar{margin-top:37px}
.ca-cta-skynet b{color:#f9181c}
.ca-capa-skynet{left:784px;top:0;width:465px;height:378px}
/* ---- entrada POR CASE ----
O observer vive em cada artigo, nao na secao: ligado na secao ele dispararia
quando o PRIMEIRO case entrasse, e o 2 e o 3 tocariam a entrada deles ainda
fora da tela β voce chegaria no Reports e ele ja estaria montado. */
.ca[data-entrada] .ca-titulo,
.ca[data-entrada] .ca-olho,
.ca[data-entrada] .ca-texto,
.ca[data-entrada] .ca-explorar,
.ca[data-entrada] .ca-capa{opacity:0;transition:opacity .75s ease var(--d,0s)}
.ca.visivel .ca-titulo,
.ca.visivel .ca-olho,
.ca.visivel .ca-texto,
.ca.visivel .ca-explorar,
.ca.visivel .ca-capa{opacity:1}
.ca-capa{--d:0s}
.ca-titulo{--d:.06s}
.ca-olho{--d:.18s}
.ca-texto{--d:.28s}
.ca-explorar{--d:.40s}
@media(prefers-reduced-motion:no-preference){
.ca[data-entrada] .ca-titulo,
.ca[data-entrada] .ca-olho,
.ca[data-entrada] .ca-texto,
.ca[data-entrada] .ca-explorar{translate:0 24px;
transition:opacity .75s ease var(--d,0s),translate .85s cubic-bezier(.19,.85,.23,1) var(--d,0s)}
/* a capa nao sobe, ela ASSENTA: vem de um pouco maior e pousa */
.ca[data-entrada] .ca-capa{scale:1.035;
transition:opacity .9s ease,scale 1.1s cubic-bezier(.19,.85,.23,1)}
.ca.visivel .ca-titulo,
.ca.visivel .ca-olho,
.ca.visivel .ca-texto,
.ca.visivel .ca-explorar{translate:0}
.ca.visivel .ca-capa{scale:1}
}
/* ============================================================
LABORATORIO + PROJETOS VISUAIS
coordenadas do arquivo menos 3369 (topo do retangulo 320:2589)
============================================================ */
.v2-lab{position:relative;display:flex;justify-content:center;background:var(--ink);
color:var(--paper);overflow:hidden;height:calc(1591px * var(--escala-tela,1))}
.tela-lab{height:1591px;z-index:1}
/* as duas rubricas da faixa e as duas linhas embaixo delas */
.lab-rubrica{position:absolute;left:60px;top:var(--y);margin:0;
font:500 11px/16px var(--sans);letter-spacing:1.4px;text-transform:uppercase;
color:var(--on-ink-dim)}
.lab-regra{position:absolute;left:60px;top:var(--y);width:1320px;height:1px;
background:rgba(255,255,255,.18)}
/* ---- Vida Caninna ----
O artigo e' caixa de verdade (top + altura) pelo mesmo motivo dos cases:
area zero nao tem razao de intersecao, e a entrada nunca dispararia. */
.lab-estudo{position:absolute;left:0;top:300px;width:100%;height:316px}
.lab-marca{position:absolute;left:200px;top:20px;margin:0;
font:900 97px/79px var(--display);text-transform:uppercase;color:#f7e34e}
/* o mascote fica POR CIMA da marca, como no arquivo: ele entra no vao entre as
duas linhas e encosta no A de VIDA */
/* π¨ os numeros abaixo NAO vem do x/y que o get_metadata devolve. Esse
grupo esta girado no arquivo, e para um no girado o metadata reporta a
caixa NAO transformada: dizia x=391.51 enquanto a arte desenha em 360.
Quem da a coordenada certa e' o proprio SVG do no, que chega com
`translate(-360 -3674)`. E o tamanho vem do export 4x (363x400 -> 90.75 x
100), nao do viewBox, que arredonda para 91x100 β desenhar no viewBox
custa 6.79 de 255 contra o export, e no tamanho real custa 5.11. */
.lab-mascote{position:absolute;left:360px;top:5px;width:90.75px;height:100px;
max-width:none;z-index:1}
.lab-estado{position:absolute;left:203px;top:194px;margin:0;
font:500 11px/16px var(--sans);letter-spacing:1.4px;text-transform:uppercase;
color:var(--on-ink-dim)}
.lab-texto{position:absolute;left:626px;top:69px;width:413px;margin:0;
font:400 18px/28px var(--sans);color:var(--paper)}
/* os dois elos do arquivo estao 1px fora de prumo um do outro (1133 e 1134);
reproduzido, nao corrigido β e' posicionamento a mao dele */
.lab-elo{position:absolute;left:var(--x,1133px);top:var(--y);
font:500 11px/16px var(--sans);letter-spacing:1.4px;text-transform:uppercase;color:#fff}
.lab-elo b{position:absolute;left:var(--ax);top:-10px;width:36.06px;height:36.06px;
display:flex;align-items:center;justify-content:center;
font:500 24px/30px var(--sans);letter-spacing:-.2px;rotate:-135deg;color:#f9b233;
transition:translate .4s cubic-bezier(.22,.61,.36,1)}
.lab-elo:hover b,.lab-elo:focus-visible b{translate:4px -4px}
/* ---- linha do tempo do estudo (332:7493..7506) ----
Cinco estagios sobre um trilho de 1041px. O trecho percorrido e o marcador
HOJE param no Prototipo, que e' onde o arquivo os coloca.
Os pontos sao irmaos dos rotulos, e nao filhos: no arquivo o ponto e o rotulo
nao compartilham eixo (rotulo da Ideacao em 208, ponto em 204), entao
pendurar um no outro custaria tres variaveis por estagio para nada. */
.lab-hoje{position:absolute;left:633px;top:245px;width:173px;margin:0;text-align:center;
font:500 11px/16px var(--sans);letter-spacing:1.4px;text-transform:uppercase;color:#f9b233}
.lab-trilho{position:absolute;left:208px;top:276px;width:1041px;height:1px;
background:rgba(255,255,255,.16)}
.lab-trilho-feito{position:absolute;left:208px;top:276px;width:520px;height:1px;
background:#f9b233}
.fp{position:absolute;top:273px;width:8px;height:8px;border-radius:50%;background:#f9b233}
.fp-ideacao{left:204px;width:7px}
.fp-pesquisa{left:464px}
/* o marcador de hoje e' ANEL, nao disco: no arquivo e' r=4.5 com traco de 4,
ou seja 13px por fora e um miolo de 5px com a cor da faixa. O trilho passa
por cima dele, como no arquivo, e por isso e' desenhado depois. */
.fp-proto{left:714px;top:270px;width:13px;height:13px;
border:4px solid #f9b233;background:var(--ink)}
.fp-uso{left:985px;background:#5a625b}
.fp-medicao{left:1246px;width:7px;background:#5a625b}
.lab-fases{position:absolute;left:0;top:300px;width:100%;height:15px;margin:0;padding:0;
list-style:none}
.fa{position:absolute;top:0;font:500 11px/16px var(--sans);letter-spacing:1.4px;
text-transform:uppercase;color:#fff}
.fa.adiante{color:#5a625b}
/* o primeiro rotulo alinha pela esquerda e o ultimo pela direita, para as
pontas nao passarem do trilho; os tres do meio centram no proprio ponto */
.fa-ideacao{left:208px;width:173px}
.fa-pesquisa{left:381px;width:174px;text-align:center}
.fa-proto{left:633px;width:173px;text-align:center}
.fa-uso{left:902px;width:174px;text-align:center}
.fa-medicao{left:1076px;width:173px;text-align:right}
/* o estado "ja percorrido" existe so na cor. Para quem ouve a pagina, os dois
estagios que faltam dizem isso em texto. */
.so-leitor{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* π¨ os atrasos dos pontos NAO sao espacados a olho: cada ponto acende no
instante em que o trilho desenhado chega nele. Como a curva e' ease-out, a
posicao nao anda junto com o tempo (o trilho cobre metade do caminho em 20%
da duracao), entao os numeros abaixo vem de inverter a
cubic-bezier(.22,.61,.36,1) na fracao de cada ponto. Mudou a curva ou a
duracao do trilho? estes tres numeros mudam junto. */
.lab-trilho{--d:.40s}
.fp-uso,.fp-medicao{--d:.44s}
.lab-fases{--d:.46s}
.lab-trilho-feito{--d:.52s}
/* π¨ cada um sai ANTES do instante em que o trilho chega, e por quantidades
diferentes. O --d marca o comeco do fade, nao o momento em que o ponto se ve,
e a curva e' ease-out: no comeco o trilho cobre 100px no tempo de um fade de
160ms, e no fim cobre 4. Entao o adiantamento acompanha a velocidade local.
Medido antes: 151px, 84px e 4px de atraso. */
.fp-ideacao{--d:.44s} /* 0% do trilho */
.fp-pesquisa{--d:.62s} /* 50% do trilho, aos 20% da duracao */
.fp-proto{--d:1.16s} /* 98.6% do trilho, aos 80% da duracao */
.lab-hoje{--d:1.36s}
/* ---- projetos visuais ----
decoracao solta na faixa. O anel tem de vir ANTES da capa do Colab no DOM:
no arquivo o retangulo cobre um pedaco dele. */
.vi-planeta{position:absolute;left:1077px;top:975px;width:113px;height:113px;max-width:none}
.vi-anel{position:absolute;left:245px;top:1072px;width:239px;height:246px;max-width:none}
.vi{position:absolute;left:0;width:100%}
.vi-colab{top:980px;height:182px}
.vi-goh{top:1209px;height:182px}
/* no arquivo as capas sao dois retangulos #d9d9d9 vazios, que e' o lugar
reservado para a arte. Aqui entram as capas que a home v1 ja usa. */
.vi-capa{position:absolute;top:0;width:254px;height:182px;border-radius:16px;
object-fit:cover;max-width:none;display:block}
.vi-colab .vi-capa{left:186px}
.vi-goh .vi-capa{left:986px}
.vi-titulo{position:absolute;margin:0;width:552px;
font:400 49px/49px var(--display);letter-spacing:-1.7px;color:var(--paper)}
.vi-titulo a{transition:color .3s}
.vi-titulo a:hover,.vi-titulo a:focus-visible{color:var(--acid)}
/* a seta e' decoracao e fica FORA do elo: o que se clica e' o titulo. Um link
contendo so uma seta de 36px seria o unico alvo do bloco. */
.vi-titulo b{position:absolute;left:var(--ax);top:7px;width:36.06px;height:36.06px;
display:flex;align-items:center;justify-content:center;
font:500 24px/30px var(--sans);letter-spacing:-.2px;rotate:-135deg;color:var(--acid);
transition:translate .4s cubic-bezier(.22,.61,.36,1)}
.vi-titulo a:hover + b,.vi-titulo a:focus-visible + b{translate:4px -4px}
.vi-ano{position:absolute;margin:0;width:179px;
font:400 12.5px/18px var(--sans);letter-spacing:1.2px;color:var(--paper)}
.vi-frase{position:absolute;margin:0;font:400 18px/28px var(--sans);color:var(--paper)}
.vi-colab .vi-titulo{left:520px;top:50px}
.vi-colab .vi-ano{left:520px;top:108px}
.vi-colab .vi-frase{left:520px;top:135px;width:572px}
/* o bloco do Game of Homes e' alinhado a DIREITA no arquivo, na borda x=904 */
/* -2px no x: alinhado a direita, a tinta do Londrina termina 3px alem da
caixa no navegador e 2px aquem dela no Figma. Mesma compensacao de
metrica que o display do hero precisou na vertical. */
.vi-goh .vi-titulo{left:350px;top:37px;text-align:right}
.vi-goh .vi-ano{left:725px;top:98px;text-align:right}
.vi-goh .vi-frase{left:350px;top:128px;width:554px;text-align:right}
/* ---- entrada por bloco, como nos cases ---- */
.lab-estudo[data-entrada] > *,
.vi[data-entrada] > *{opacity:0;transition:opacity .75s ease var(--d,0s)}
.lab-estudo.visivel > *,
.vi.visivel > *{opacity:1}
.lab-marca{--d:.06s}
.lab-texto{--d:.28s}
.lab-estado{--d:.34s}
.lab-mascote{--d:.22s}
.lab-elo{--d:.40s}
.vi-capa{--d:0s}
.vi-titulo{--d:.06s}
.vi-ano{--d:.18s}
.vi-frase{--d:.28s}
@media(prefers-reduced-motion:no-preference){
.lab-estudo[data-entrada] > :not(.lab-mascote),
.vi[data-entrada] > :not(.vi-capa){translate:0 24px;
transition:opacity .75s ease var(--d,0s),translate .85s cubic-bezier(.19,.85,.23,1) var(--d,0s)}
/* capa e mascote nao sobem, ASSENTAM: vem de um pouco maiores e pousam */
.lab-estudo[data-entrada] .lab-mascote,
.vi[data-entrada] .vi-capa{scale:1.035;
transition:opacity .9s ease var(--d,0s),scale 1.1s cubic-bezier(.19,.85,.23,1) var(--d,0s),
transform .5s cubic-bezier(.22,.61,.36,1)}
.lab-estudo.visivel > :not(.lab-mascote),
.vi.visivel > :not(.vi-capa){translate:0}
.lab-estudo.visivel .lab-mascote,
.vi.visivel .vi-capa{scale:1}
}
/* ============================================================
MOTION DA FAIXA
Vem no fim do arquivo de proposito: varias destas regras tem a mesma
especificidade das regras de entrada la' de cima e precisam ganhar por
ordem de origem.
============================================================ */
/* ---- 1. o trilho se desenha, e cada ponto acende quando ele chega ----
Nos DOIS modos. Uma linha de 1px crescendo na horizontal nao e' movimento de
grande escala, e' mais perto de uma barra de progresso. Esconder o efeito de
quem tem animacao desligada no sistema ja aconteceu duas vezes nesta pagina, e
aqui o desenho do trilho E' a leitura da linha do tempo.
π¨ A duracao e a curva sao as MESMAS nos dois modos, e isso e' proposital.
Encurtar so o trilho sob reduced-motion dessincroniza os pontos, porque os
--d deles foram calculados invertendo ESTA curva nesta duracao: medido, o
ponto do Prototipo acendia 320ms depois de o trilho ja ter chegado no fim. */
.lab-estudo[data-entrada] .lab-trilho-feito{translate:0;scale:0 1;transform-origin:0 50%;
transition:opacity .5s ease var(--d,0s),scale .9s cubic-bezier(.22,.61,.36,1) var(--d,0s)}
.lab-estudo.visivel .lab-trilho-feito{scale:1}
/* os pontos nao sobem junto com o resto: eles PISCAM no lugar, rapido, para o
olho ler "a linha chegou aqui" e nao "mais uma coisa entrando" */
.lab-estudo[data-entrada] .fp{transition:opacity 0s linear var(--d,0s)}
@media(prefers-reduced-motion:no-preference){
/* π¨ o ponto ACENDE DE VEZ, sem esmaecer. Com fade a pergunta "quando ele se
ve" passa a ter resposta diferente de "quando ele comeca", e nesta curva a
diferenca e' cara: nos primeiros 75ms o trilho cobre 150px, entao 280ms de
fade punham o ponto visivel 151px depois de a linha ja ter passado. Encurtar
nao resolveu: entre duas medidas do mesmo teste a chegada variou 50ms, e
qualquer margem menor que isso ora passa ora nao.
Sem fade nao ha faixa cinzenta β o ponto esta aceso ou apagado β e o pulo
de escala continua tirando a dureza. Os --d saem 80ms antes da chegada, que
e' mais que a variacao medida. */
.lab-estudo[data-entrada] .fp{translate:0;scale:0;
transition:opacity 0s linear var(--d,0s),scale .38s cubic-bezier(.34,1.56,.64,1) var(--d,0s)}
.lab-estudo.visivel .fp{translate:0;scale:1}
}
/* ---- 2. "voce esta aqui" ----
O anel do ProtΓ³tipo emite um pulso lento. Ele marca a posicao viva da linha,
entao nao e' enfeite solto: e' a unica coisa na faixa que diz "agora".
Preso a .visivel, e nao ao carregamento: com delay fixo o pulso aconteceria
enquanto a secao ainda esta tres telas abaixo. */
.fp-proto::after{content:"";position:absolute;inset:-4px;border-radius:50%;
border:1px solid #f9b233;pointer-events:none;opacity:0}
.lab-estudo.visivel .fp-proto::after{animation:pulso-hoje 2.8s ease-out 1.9s infinite}
@keyframes pulso-hoje{
0% {scale:.85;opacity:0}
15% {opacity:.45}
100%{scale:2.6;opacity:0}
}
@media(prefers-reduced-motion:reduce){
/* uma vez, nao em laco: repeticao infinita e' justamente o que a preferencia
pede para nao acontecer. Ele ainda ve o pulso, uma vez. */
.lab-estudo.visivel .fp-proto::after{animation-iteration-count:1}
}
/* ---- 3. o mascote pula para dentro da marca ----
Ele nao assenta como as capas: gira um pouco e passa do ponto, porque e' um
desenho de cachorro dentro de uma marca amarela e nao uma fotografia. */
@media(prefers-reduced-motion:no-preference){
.lab-estudo[data-entrada] .lab-mascote{scale:.82;rotate:-9deg;
transition:opacity .5s ease var(--d,0s),
scale .7s cubic-bezier(.34,1.42,.64,1) var(--d,0s),
rotate .7s cubic-bezier(.34,1.42,.64,1) var(--d,0s)}
.lab-estudo.visivel .lab-mascote{scale:1;rotate:0deg}
}
/* ---- 4. o titulo acende a propria capa ----
No arquivo o titulo e a capa dele ficam a 300px de distancia, com a capa do
outro projeto no meio do caminho. Nada na tela diz qual e' de qual ate voce
passar o mouse.
A capa NAO reage ao proprio hover, de proposito: ela nao e' clicavel, e
destacar no hover o que nao se clica promete um clique que nao existe. */
.vi:has(.vi-titulo a:hover) .vi-capa,
.vi:has(.vi-titulo a:focus-visible) .vi-capa{transform:scale(1.035)}
@media(prefers-reduced-motion:reduce){
.vi[data-entrada] .vi-capa{transition:opacity .75s ease var(--d,0s),transform .35s ease}
}
/* ---- 5. a decoracao segue o ponteiro, o texto nao ----
Texto que escorrega enquanto se le atrapalha, e o gesto de bloco inteiro ja
e' do hero. Aqui andam so o planeta e o anel, em profundidades e tempos
diferentes para nao lerem como uma camada so. */
.vi-planeta{translate:calc(var(--mx,0) * -12px) calc(var(--my,0) * -12px);
transition:translate 1.4s cubic-bezier(.22,.61,.36,1);
animation:flutua 9s ease-in-out infinite}
.vi-anel{translate:calc(var(--mx,0) * 7px) calc(var(--my,0) * 7px);
transition:translate 1.9s cubic-bezier(.22,.61,.36,1)}
/* π¨ o planeta da carreira flutua com o MESMO gesto, em 11s e nao 9s: tempo
diferente para os dois nao baterem juntos e lerem como uma camada so. E fica
AQUI, fora do bloco no-preference, porque nesta pagina a preferencia REDUZ o
movimento (ver o @media reduce logo abaixo) e nao o apaga. */
.cr-planeta{animation:flutua 11s ease-in-out infinite;--flutua:7px}
/* π¨ a flutuacao usa transform e NAO translate de proposito: --mx/--my ja ocupam
translate, e animacao sobre uma propriedade apaga o valor declarado nela β o
planeta pararia de seguir o ponteiro. As duas se somam porque o navegador
aplica translate antes de transform. */
@keyframes flutua{
0%,100%{transform:translateY(0)}
50% {transform:translateY(calc(var(--flutua,9px) * -1))}
}
@media(prefers-reduced-motion:reduce){
.cr-planeta{--flutua:3px;animation-duration:22s}
.vi-planeta{--flutua:4px;animation-duration:18s;
translate:calc(var(--mx,0) * -5px) calc(var(--my,0) * -5px)}
.vi-anel{translate:calc(var(--mx,0) * 3px) calc(var(--my,0) * 3px)}
}
/* ============================================================
CARREIRA Β· coordenadas do arquivo menos 4960
============================================================ */
/* π¨ esta faixa NAO recorta, ao contrario das outras, e sobe um degrau na
pilha: o trilho tem de ATRAVESSAR a fronteira e continuar dentro da faixa do
contato, em vez de parar em cima dela. E' seguro porque o unico conteudo que
passa dos 1040 da prancheta e' o proprio trilho β o resto acaba em 983. */
.v2-carreira{position:relative;display:flex;justify-content:center;background:var(--paper);
color:var(--ink);height:calc(1040px * var(--escala-tela,1));z-index:1}
.tela-carreira{height:1040px}
/* dois blocos de entrada e nao um: sao 825px de conteudo, e um gatilho so
tocaria a lista de trajetoria com ela ainda tres telas abaixo. */
.cr-topo{position:absolute;left:0;top:158px;width:100%;height:351px}
.cr-lista{position:absolute;left:0;top:556px;width:100%;height:427px}
/* π¨ os numeros vem do SVG do no 334:7508, que chega com
`translate(-860.103 -5066)` β e NAO do x/y do metadata, que diz 950.1 porque
o grupo esta girado 15 graus e o metadata reporta a caixa nao transformada.
Errar isso poe o retrato 90px a direita. A caixa aqui e a da TINTA dentro
daquele grupo, medida no alfa: (935.10, 5120.75) de 285.25 x 338. */
.cr-figura{position:absolute;left:935.1px;top:2.75px;width:285.25px;height:338px}
.cr-retrato{position:relative;z-index:1;display:block;width:100%;height:100%;max-width:none}
/* o planeta e' no 334:7511, em (923, 5151) de 113x113. Em porcentagem da caixa
do retrato: (923-935.1)/285.25 e (5151-5120.75)/338. */
.cr-planeta{position:absolute;left:-4.242%;top:8.949%;width:39.615%;height:auto;
max-width:none;z-index:0}
/* mesma conversao dos cases: com o espacamento do WCAG 1.4.12 o paragrafo
crescia por cima do TRAJETORIA */
.cr-coluna{position:absolute;left:408px;top:35px;width:443px}
.cr-titulo{position:static;margin:0 0 0 1px;
font:900 80px/69px var(--display);text-transform:uppercase;color:#f23f07;white-space:nowrap}
.cr-texto{position:static;width:443px;margin:42px 0 0;
font:400 18px/28px var(--sans);color:#4e534e}
/* o trilho lateral repete o dos cases, com as duas ultimas secoes. Os rotulos
alinham pela DIREITA em x=267: no arquivo um comeca em 205 e o outro em 180,
e o que eles tem em comum e' onde terminam. */
/* π¨ fora da regra de translate da entrada: este translate e' o grude, e a
regra generica de entrada o sobrescreveria e o trilho nunca sairia do
lugar. Ele ainda entra, so que por opacidade. */
.cr-trilho{position:absolute;left:0;top:162px;width:100%;height:102px;
translate:0 var(--grude,0px);will-change:translate}
/* π¨ a linha tem 102px e fica METADE de cada lado durante a travessia, entao
ela nao troca de cor inteira: um gradiente de parada dura em --corte, que o
JS escreve, faz a fronteira cortar a linha ao vivo. As outras pecas sao
baixas e trocam de cor de uma vez, cada uma quando o proprio centro passa. */
.cr-linha{position:absolute;left:302px;top:0;width:1px;height:102px;
background:linear-gradient(to bottom,
#000 0 var(--corte,102px), rgba(255,255,255,.45) var(--corte,102px))}
/* o ponto desliza entre os dois rotulos: 25 + 46 (21 e 67 no arquivo) */
.cr-ponto{position:absolute;left:298px;top:25px;
translate:0 calc(var(--ativo,0) * 46px);
width:9px;height:9px;border-radius:50%;background:#000;
transition:translate .45s cubic-bezier(.22,.61,.36,1),background-color .3s ease}
.cr-ponto.escuro{background:#fff}
@media(prefers-reduced-motion:reduce){.cr-ponto{transition-duration:.15s}}
/* posicionados pela ESQUERDA, como no arquivo. Alinhar os dois pela direita
em 267 parecia mais robusto e punha a tinta 2px fora: as duas caixas do
arquivo (62 e 87 de largura) sao a largura medida do proprio texto, e a
minha renderiza com a mesma largura, entao a esquerda ja resolve. */
.cr-trilho a{position:absolute;white-space:nowrap;
font:500 11px/16px var(--sans);letter-spacing:1.4px;text-transform:uppercase;
color:#5f5e5b;transition:color .3s}
.cr-trilho a:nth-of-type(1){left:205px;top:21px}
.cr-trilho a:nth-of-type(2){left:180px;top:67px}
.cr-trilho a[aria-current],.cr-trilho a:hover,.cr-trilho a:focus-visible{color:#000}
/* depois da regra de cima de proposito: mesma especificidade, e no escuro
quem manda e' esta. */
/* #797d75 e nao o #63675f do papel: sobre o ink aquele da 3,35:1 e reprova
AA. Aqui o arquivo nao manda, porque ele nao tem estado escuro para este
trilho β a cor e minha, entao tem de passar. Esta da 4,61:1. */
.cr-trilho a.escuro{color:#797d75}
.cr-trilho a.escuro[aria-current],.cr-trilho a.escuro:hover,
.cr-trilho a.escuro:focus-visible{color:#fff}
/* π¨ esta seta NAO e' girada, ao contrario das outras da pagina: o arquivo a
traz como β de pe', numa caixa de 21x30, igual a do "MEUS TRABALHOS". */
.cr-traj{position:relative;display:inline-block;margin:49px 0 0;
font:500 11px/16px var(--sans);letter-spacing:1.4px;text-transform:uppercase;color:#000}
/* mesma conversao: o span do rotulo mede 77.8 em "TRAJETORIA" e o +8.2 devolve
os 86px fixos. Em "TRACK RECORD" o texto passa de 86 e a seta o acompanha em
vez de cair em cima dele. */
.cr-traj b{position:absolute;left:100%;margin-left:8.2px;top:-7px;
font:500 24px/30px var(--sans);letter-spacing:-.2px;color:#c33307}
/* ---- a lista de trajetoria ----
Linhas de 60 com um fio de 1 embaixo, que e' o passo de 61 do arquivo.
Fluxo normal e nao posicao absoluta: aqui e' uma lista de verdade, com sete
linhas iguais, e o arquivo tambem a monta com auto-layout. */
.cr-linhas{position:absolute;left:404px;top:0;width:850px;margin:0;padding:0;list-style:none}
/* 61 e nao 60: com o box-sizing:border-box global o fio de 1px come a
altura em vez de somar, e as sete linhas fechavam 420 no lugar de 427.
Com 61 o conteudo volta a ter os 60 do arquivo e o fio fica embaixo. */
.cr-linhas li{position:relative;height:61px;border-bottom:1px solid #d6d6cf}
.cr-traco{position:absolute;left:0;top:28px;width:8px;height:4px;border-radius:90px;
background:#bcbcbc}
.cr-linhas li:first-child .cr-traco{background:#f23f07}
.cr-org{position:absolute;left:16px;top:18px;width:330px;
font:500 18px/24px var(--sans);color:#0c0e0d}
.cr-cargo{position:absolute;left:370px;top:18px;width:320px;
font:400 14px/20px var(--sans);color:#63675f}
.cr-periodo{position:absolute;left:714px;top:18px;width:176px;
font:400 14px/20px var(--sans);color:#63675f}
/* ---- entrada ---- */
/* π¨ a entrada destes dois passa a atravessar a coluna nova. Com `> *` ela
pegava o WRAPPER e o bloco inteiro entrava de uma vez, perdendo o
escalonamento interno. Os cases nao sofreram porque as regras deles ja
eram por descendente. */
.cr-topo[data-entrada] > :not(.cr-coluna),
.cr-topo[data-entrada] .cr-coluna > *,
.cr-lista[data-entrada] .cr-linhas li{opacity:0;transition:opacity .75s ease var(--d,0s)}
.cr-topo.visivel > :not(.cr-coluna),
.cr-topo.visivel .cr-coluna > *,
.cr-lista.visivel .cr-linhas li{opacity:1}
.cr-titulo{--d:.06s}
.cr-texto{--d:.18s}
.cr-trilho{--d:.30s}
.cr-traj{--d:.38s}
.cr-retrato{--d:.10s}
/* as sete linhas entram em cascata, de cima para baixo, como uma lista que se
preenche. 60ms por linha da' 420ms do topo ate a base. */
.cr-linhas li:nth-child(1){--d:0s}
.cr-linhas li:nth-child(2){--d:.06s}
.cr-linhas li:nth-child(3){--d:.12s}
.cr-linhas li:nth-child(4){--d:.18s}
.cr-linhas li:nth-child(5){--d:.24s}
.cr-linhas li:nth-child(6){--d:.30s}
.cr-linhas li:nth-child(7){--d:.36s}
@media(prefers-reduced-motion:no-preference){
.cr-topo[data-entrada] .cr-coluna > *,
.cr-lista[data-entrada] .cr-linhas li{translate:0 20px;
transition:opacity .75s ease var(--d,0s),translate .85s cubic-bezier(.19,.85,.23,1) var(--d,0s)}
/* o retrato assenta, como as capas: vem de um pouco maior e pousa. Quem
recebe a escala e' a FIGURA, para o planeta assentar junto com ele. */
.cr-topo[data-entrada] .cr-figura{scale:1.04;
transition:opacity .9s ease var(--d,0s),scale 1.1s cubic-bezier(.19,.85,.23,1) var(--d,0s)}
.cr-topo.visivel .cr-coluna > *,
.cr-lista.visivel .cr-linhas li{translate:0}
.cr-topo.visivel .cr-figura{scale:1}
}
/* ============================================================
RECOMENDAΓΓES Β· coordenadas do arquivo menos 6000
============================================================ */
.v2-recom{position:relative;display:flex;justify-content:center;background:var(--paper);
color:var(--ink);height:calc(562px * var(--escala-tela,1));overflow:hidden}
.tela-recom{height:562px}
.re-topo{position:absolute;left:0;top:47px;width:100%;height:108px}
.re-titulo{position:absolute;left:409px;top:0;margin:0;
font:900 80px/69px var(--display);text-transform:uppercase;color:#f23f07;white-space:nowrap}
.re-fonte{position:absolute;left:409px;top:92px;width:508px;margin:0;
font:500 11px/16px var(--sans);letter-spacing:1.4px;text-transform:uppercase;color:#63675f}
.re-itens{position:absolute;left:0;top:216px;width:100%;height:199px}
.re-item{position:absolute;top:0;margin:0}
.re-a{left:0}
.re-b{left:440px} /* a segunda coluna e' a primeira mais 440, exato */
.re-avatar{position:absolute;left:398px;top:0;width:37px;height:37px;max-width:none}
/* π¨ 449 e nao 435: no arquivo o nome mora dentro do mesmo texto da fala, e os
tres espacos que o empurram para longe do avatar sao o que o desloca. Medido
na tinta do render, ele comeca em 449. */
.re-nome{position:absolute;left:449px;top:3px;margin:0;
font:700 18px/28px var(--sans);color:#4e534e;white-space:nowrap}
.re-barra{position:absolute;left:409px;top:67px;width:8px;height:128px;
border-radius:9px;background:#d9d9d9}
.re-fala{position:absolute;left:435px;top:59px;margin:0}
.re-fala p{margin:0;font:400 18px/28px var(--sans);color:#4e534e}
.re-a .re-fala{width:361px}
.re-b .re-fala{width:388px}
/* ---- entrada ---- */
.re-topo[data-entrada] > *,
.re-itens[data-entrada] .re-item > *{opacity:0;transition:opacity .75s ease var(--d,0s)}
.re-topo.visivel > *,
.re-itens.visivel .re-item > *{opacity:1}
.re-titulo{--d:.06s}
.re-fonte{--d:.18s}
.re-a .re-avatar{--d:.06s}
.re-a .re-nome{--d:.12s}
.re-a .re-barra{--d:.18s}
.re-a .re-fala{--d:.24s}
/* a segunda recomendacao entra logo atras da primeira: elas sao um par, e
escalonar demais faria uma parecer mais importante que a outra */
.re-b .re-avatar{--d:.18s}
.re-b .re-nome{--d:.24s}
.re-b .re-barra{--d:.30s}
.re-b .re-fala{--d:.36s}
@media(prefers-reduced-motion:no-preference){
.re-topo[data-entrada] > *,
.re-itens[data-entrada] .re-item > :not(.re-barra){translate:0 20px;
transition:opacity .75s ease var(--d,0s),translate .85s cubic-bezier(.19,.85,.23,1) var(--d,0s)}
/* a barra CRESCE de cima para baixo, como a regra do contato e o trilho da
linha do tempo: ela e' uma marca de citacao, nao um bloco que sobe */
.re-itens[data-entrada] .re-barra{scale:1 0;transform-origin:50% 0;
transition:opacity .5s ease var(--d,0s),scale .8s cubic-bezier(.22,.61,.36,1) var(--d,0s)}
.re-topo.visivel > *,
.re-itens.visivel .re-item > :not(.re-barra){translate:0}
.re-itens.visivel .re-barra{scale:1}
}
/* ============================================================
FALE COMIGO Β· coordenadas do arquivo menos 6562
============================================================ */
.v2-contato{position:relative;display:flex;justify-content:center;background:var(--ink);
color:var(--paper);overflow:hidden;height:calc(479px * var(--escala-tela,1))}
.tela-contato{height:479px;z-index:1}
/* tudo cabe num bloco de 189px, entao a entrada e' uma so.
π¨ top 145 e nao os 119 do arquivo: la' o bloco fica 26px acima do centro da
faixa, com 119 de folga em cima e 171 embaixo, e a sobra de baixo pesa. 145 e'
(479 - 189) / 2. O trilho tambem ancora no mesmo centro. Unico lugar da
pagina onde eu saio da coordenada do arquivo de proposito, e a pedido. */
.co-bloco{position:absolute;left:0;top:145px;width:100%;height:189px}
/* mesma conversao do case, pelo mesmo motivo: com o espacamento do criterio o
e-mail sumia embaixo do "FALE COMIGO" */
.co-coluna{position:absolute;left:409px;top:0;width:846px}
.co-texto{position:static;width:846px;margin:0;
font:400 18px/28px var(--sans);color:var(--paper)}
.co-titulo{position:static;margin:34px 0 0;
font:900 80px/69px var(--display);text-transform:uppercase;color:var(--acid);
white-space:nowrap}
.co-elos{position:absolute;left:0;top:113px;width:100%;height:16px;margin:0;padding:0;
list-style:none}
/* 3a vez que este par rotulo+seta aparece (.ca-explorar, .lab-elo, .co-elo) e a
regra de tres diria para extrair. Nao extraio agora porque .ca-explorar tem o
x da seta CRAVADO no CSS enquanto os outros dois usam --ax: unificar pede
mexer na marcacao dos cases, que ja esta conferida. Fica anotado para quando
a pagina fechar. */
.co-elo{position:absolute;left:var(--x);top:0;
font:500 11px/16px var(--sans);letter-spacing:1.4px;text-transform:uppercase;color:#fff}
.co-elo b{position:absolute;left:var(--ax);top:-10px;width:36.06px;height:36.06px;
display:flex;align-items:center;justify-content:center;
font:500 24px/30px var(--sans);letter-spacing:-.2px;rotate:-135deg;color:#fff;
transition:translate .4s cubic-bezier(.22,.61,.36,1)}
.co-elo:hover b,.co-elo:focus-visible b{translate:4px -4px}
.co-regra{position:absolute;left:854px;top:145px;width:390px;height:2px;
background:rgba(217,217,217,.1)}
.co-email,.co-cv{margin:0;
font:500 11px/16px var(--sans);letter-spacing:1.4px;text-transform:uppercase;
color:#63675f}
.co-cv{position:absolute;top:173px}
.co-email{position:static;margin:14px 0 0 4px;width:508px}
.co-cv{left:751px;width:493px;text-align:right}
/* o curriculo usa o MESMO estado do e-mail logo acima: os dois sao rotulos
#63675f nesta faixa, e clarear para paper e' o afeto que a faixa ja tem. */
.co-email a,.co-cv a{transition:color .3s}
.co-email a:hover,.co-email a:focus-visible,
.co-cv a:hover,.co-cv a:focus-visible{color:var(--paper)}
/* ---- entrada ---- */
.co-bloco[data-entrada] > :not(.co-coluna),
.co-bloco[data-entrada] .co-coluna > *{opacity:0;transition:opacity .75s ease var(--d,0s)}
.co-bloco.visivel > :not(.co-coluna),
.co-bloco.visivel .co-coluna > *{opacity:1}
.co-texto{--d:.06s}
.co-titulo{--d:.16s}
.co-elos{--d:.30s}
.co-regra{--d:.40s}
.co-email{--d:.48s}
.co-cv{--d:.52s}
@media(prefers-reduced-motion:no-preference){
.co-bloco[data-entrada] > :not(.co-coluna),
.co-bloco[data-entrada] .co-coluna > *{translate:0 20px;
transition:opacity .75s ease var(--d,0s),translate .85s cubic-bezier(.19,.85,.23,1) var(--d,0s)}
.co-bloco.visivel > :not(.co-coluna),
.co-bloco.visivel .co-coluna > *{translate:0}
}
/* a regra sob os elos se desenha, como o trilho da linha do tempo: ela E' um
sublinhado, entao crescer da esquerda e' o gesto dela. Nos dois modos, pelo
mesmo motivo do trilho. */
.co-bloco[data-entrada] .co-regra{translate:0;scale:0 1;transform-origin:0 50%;
transition:opacity .4s ease var(--d,0s),scale .7s cubic-bezier(.22,.61,.36,1) var(--d,0s)}
.co-bloco.visivel .co-regra{scale:1}
/* ============================================================
CONSERTOS DA REVISAO
============================================================ */
/* π¨ opacity apaga o ANEL DE FOCO junto com o elemento. Quem navega por Tab
chega no elo ANTES de ter rolado ate' ele: medido, o pico de luminancia no
recorte do link focado ficava em 1,13:1 contra o fundo aos 150ms e so
cruzava 3:1 perto dos 550ms. Meia tela sem indicador nenhum, e o
prefers-reduced-motion nao socorria porque a transicao de opacity esta fora
do @media. Nao e' so da linha do tempo: pegava .oi-cta e os tres
.ca-explorar tambem. :focus-within e nao :focus porque em varios blocos quem
carrega o opacity:0 e' o ANCESTRAL do link, e opacity compoe. */
.v2-oi[data-entrada] *:focus-within,
.ca[data-entrada] *:focus-within,
.lab-estudo[data-entrada] *:focus-within,
.vi[data-entrada] *:focus-within,
.co-bloco[data-entrada] *:focus-within{opacity:1;translate:none;scale:none;transition:none}
/* a linha do tempo se monta NO LUGAR. O trilho cinza era o unico pedaco dela
que ainda subia os 24px da regra generica, entao durante a entrada ele
flutuava 24px abaixo dos proprios pontos, que ja tinham sido dispensados. */
.lab-estudo[data-entrada] .lab-trilho,
.lab-estudo[data-entrada] .lab-fases,
.lab-estudo[data-entrada] .lab-hoje{translate:0}
/* imprimir nao rola a pagina, entao o observer nunca escreve .visivel e sai
tudo em branco. Vale para salvar em PDF tambem.
π¨ !important aqui nao e' preguica, e' o que nao depende de especificidade.
A primeira tentativa repetiu os seletores das regras de entrada, e
`.lab-estudo[data-entrada] > *` vale (0,2,0) enquanto
`.lab-estudo[data-entrada] > :not(.lab-mascote)`, la' na secao de motion,
vale (0,3,0): a regra de impressao PERDIA para ela, e o bloco do laboratorio
saia desbotado enquanto os cases saiam certos. O teste pegou os dois estados
diferentes na mesma pagina, que foi a pista.
E transition/animation tambem precisam morrer: so subir a opacidade DISPARA
a transicao, com o atraso escalonado e tudo, e o instantaneo da impressora
pode pegar a pagina no meio do caminho β medido, 0.777 aos 300ms. */
@media print{
[data-entrada],[data-entrada] *{opacity:1 !important;translate:none !important;
scale:none !important;transition:none !important;animation:none !important}
}
/* ============================================================
PONTEIRO: quem intercepta o que
------------------------------------------------------------
A pagina e' feita de caixas absolutas de 1440 de largura que quase sempre
sao transparentes. Elas se cobrem, e o teste de clique segue a ordem de
PINTURA: quem vem depois no DOM ganha, mesmo sendo invisivel.
============================================================ */
/* π¨ os tres sao caixas de 1440 e vem DEPOIS do trilho:
cobriam os tres elos dele inteiros. Medido: ZERO de 144 pontos alcancaveis
em cada elo, o clique em "Case 02" nao mudava o hash nem a rolagem, e o
hover prometido nunca acendia. O trilho sobe na pilha e deixa o ponteiro
atravessar; so os elos dele e' que pegam. */
.ca-trilho,.cr-trilho{z-index:4;pointer-events:none}
.ca-trilho a,.cr-trilho a{pointer-events:auto}
/* e a faixa da carreira precisa de dois degraus, nao um: com z-index:1 ela
EMPATA com .tela-contato (tambem 1, e no mesmo contexto raiz, porque
.v2-contato e' z-index auto) e perde por vir antes no DOM. Ancorado dentro
do escuro, que e' justamente o objetivo do trilho, os elos dele paravam de
receber clique. */
.v2-carreira{z-index:2}
/* paragrafo nao intercepta clique. .he-local tem 300px de caixa com a tinta
alinhada a direita: sobram 119px de caixa VAZIA atravessando o meio do selo,
que fica logo atras dela no DOM. Medido: 67% do selo alcancavel. */
/* ---- controle de idioma ----
π¨ o frame novo tem o no "idioma" (317:2520) OCULTO; a posicao vem do
frame anterior, (1330, 24) de 50x16, que e' o mesmo x que o resto do arquivo
usa para encostar na margem de 60 (1440 - 60 = 1380 = 1330 + 50).
A marcacao do ativo e' a do v1: body[data-lang] decide qual dos dois clareia,
entao nao precisa de classe nem de JS mexendo em estilo. */
.he-idioma{position:absolute;left:1330px;top:24px;width:50px;height:16px;z-index:4;
padding:0;border:0;background:none;cursor:pointer;
font:500 11px/16px var(--sans);letter-spacing:1.4px;text-transform:uppercase;
color:var(--on-ink-dim);transition:color .3s}
.he-idioma i{padding:0 5px;font-style:normal}
body[data-lang=pt] .he-idioma span:first-child,
body[data-lang=en] .he-idioma span:last-child{color:var(--white)}
.he-idioma:hover,.he-idioma:focus-visible{color:var(--paper)}
.he-local{pointer-events:none}
/* a seta dos projetos visuais e' IRMA do elo, e nao filha como nas outras oito
da pagina: era um alvo de 51x51 que nao levava a lugar nenhum */
.vi-titulo b{pointer-events:none}
/* π¨ .cr-topo faltava na lista de resgate do foco. Ele e' [data-entrada], leva
opacity 0 com .30s de atraso e contem os dois elos do trilho da carreira:
quem chegava neles por Tab ficava ~250ms sem anel de foco na tela. As outras
tres entraram junto, pelo mesmo motivo. */
.cr-topo[data-entrada] *:focus-within,
.cr-lista[data-entrada] *:focus-within,
.re-topo[data-entrada] *:focus-within,
.re-itens[data-entrada] *:focus-within{opacity:1;translate:none;scale:none;transition:none}
/* ============================================================
MOBILE Β· abaixo de 1024 a prancheta deixa de ser prancheta
------------------------------------------------------------
O resto do arquivo desenha uma prancheta de 1440 com posicao absoluta e a
encolhe inteira. Isso e' 1:1 com o Figma e funciona ate' onde o texto ainda
se le: a 1024 a escala e' 0.71 e o corpo de 18px vira 12.8. Abaixo disso
vira miniatura β a 390 o corpo renderiza a 4.9px.
Entao aqui a prancheta e' desfeita: tudo volta ao fluxo, numa coluna so, com
tamanho de tipo proprio. Nao e' o Figma reduzido, e' outro layout.
π¨ O RESET abaixo vale (0,2,0) de proposito, para vencer as regras de duas
classes do desktop (.ca-matcha .ca-titulo, .vi-colab .vi-capa, .he-titulo .l1).
Por isso TODA regra daqui para baixo tambem comeca com .tela: no empate de
especificidade quem vem depois ganha, e a ordem e' esta.
============================================================ */
@media (max-width:1023px){
/* ---- estrutura ---- */
/* π¨ a altura tem de ser listada por CLASSE: `body > section` vale (0,0,2) e
perde para `.v2-hero{height:calc(665px * var(--escala-tela))}`, que vale
(0,1,0). Com a regra fraca as faixas ficavam com a altura do desktop
encolhida e o conteudo vazava por cima da faixa seguinte. */
main > section{display:block;overflow:visible;padding:56px 0 64px}
.v2-hero,.v2-oi,.v2-cases,.v2-lab,.v2-carreira,.v2-recom,.v2-contato{height:auto}
.tela{position:static;width:auto;flex:1 1 auto;scale:none;height:auto;
max-width:560px;margin:0 auto;padding:0 24px;translate:none;transform:none}
.tela{text-align:center}
.tela [class]{position:static;left:auto;right:auto;top:auto;bottom:auto;
width:auto;height:auto;translate:none;scale:none;rotate:none;
white-space:normal;text-align:center}
.tela img{max-width:100%;height:auto;display:block}
/* o idioma volta ao fluxo no topo da coluna. O reset acima zera left/top e
position, entao aqui so sobra centrar e dar o alvo de 44px que todo elo
desta pagina tem no celular. */
.tela .he-idioma{display:flex;align-items:center;justify-content:center;
min-height:44px;width:auto;margin:0 auto 6px}
/* π¨ o reset nao pode soltar o texto so-para-leitor no fluxo. Em static e
inline ele volta a ocupar linha, clipado mas presente: "Produto em uso"
ficava com 32px de altura no lugar de 16 e abria um vao de 48px antes de
"Medicao" β era esse o espacamento torto da linha do tempo. */
.tela .so-leitor{position:absolute;width:1px;height:1px}
/* ---- hero ---- */
.v2-hero{padding:48px 0 56px}
.tela-hero{--foto:min(258px,66vw)}
.tela .he-anel,.tela .he-halo,.tela .he-ponto{display:none}
.tela .he-retrato{width:var(--foto);aspect-ratio:1;margin:0 auto 30px;
border-radius:50%;overflow:hidden;border:2px solid rgba(199,255,69,.25)}
.tela .he-retrato img{width:100%;height:100%}
/* o bloco inteiro do hero centraliza no celular, como o retrato */
.tela-hero{text-align:center}
.tela .he-lead,.tela .he-titulo .l1,.tela .he-titulo .l2,
.tela .he-nome,.tela .he-local{text-align:center}
/* π¨ o LEAD FICA de cabeca para baixo, como no desktop. Eu tinha endireitado
por achar que girado nao se leria empilhado; e' decisao de desenho dele, e
nao descuido do arquivo. */
.tela .he-lead{rotate:180deg;font:400 40px/.9 var(--display);
color:rgba(255,255,255,.22);margin:0}
.tela .he-titulo{font-weight:400}
.tela .he-titulo .l1,.tela .he-titulo .l2{position:static;display:block;
font:400 44px/.9 var(--display);color:var(--white);text-transform:uppercase}
.tela .he-nome{margin:16px 0 0}
/* o nome sai da vertical: writing-mode de pe' num celular e' ilegivel */
.tela .he-nome span{position:static;display:inline;writing-mode:horizontal-tb;
rotate:none;font:500 11px/16px var(--sans);letter-spacing:1.4px}
.tela .he-nome .n2::before{content:" "}
.tela .he-selo{display:block;width:38px;height:38px;margin:22px auto 0}
.tela .he-local{margin:12px 0 0}
/* a lua continua dando a volta, num anel do tamanho do retrato. O retrato e' o
primeiro filho em fluxo, entao o centro dele e' previsivel: o padding da
faixa mais metade do diametro. */
.tela .he-orbita{position:absolute;left:50%;top:48px;
width:var(--foto);height:var(--foto);margin-left:calc(var(--foto) / -2)}
.tela .he-lua-ponto{position:absolute;left:50%;top:50%;width:0;height:0;
transform:rotate(-30.88deg) translateX(calc(var(--foto) / 2))}
.tela .he-lua-fixa{position:absolute;left:0;top:0;width:0;height:0}
/* π¨ max-width:none de novo, pelo mesmo motivo do desktop: o pai da lua e'
um ponto de ancoragem de largura ZERO, e o img{max-width:100%} do reset
daqui de cima resolve contra ele. Medido: largura 0. */
.tela .he-lua{position:absolute;left:-19px;top:-19px;width:38px;height:38px;
max-width:none}
/* ---- oi, eu sou o ---- */
.tela .oi-aparelho{position:relative;width:min(280px,74vw);aspect-ratio:512/618;
margin:0 auto 34px}
.tela .oi-telefone{position:absolute;inset:0;width:100%;height:100%}
/* o vidro em porcentagem do aparelho, e nao em px da prancheta: assim o
brilho continua caindo em cima da tela do telefone em qualquer tamanho */
.tela .oi-vidro{position:absolute;left:15%;top:9.12%;width:67.6%;height:84.8%}
.tela .oi-saudacao{font:400 22px/1.2 var(--italica);font-style:italic;margin:0}
.tela .oi-nome{font:900 44px/.92 var(--display);margin:10px 0 0}
.tela .oi-nome span{display:block}
.tela .oi-corpo{font:400 17px/27px var(--sans);margin:18px 0 0}
.tela .oi-cta{display:inline-block;margin:24px 0 0}
.tela .oi-cta span{position:static;font:500 11px/16px var(--sans)}
.tela .oi-cta b{position:static;display:inline-block;margin-left:10px;
vertical-align:-6px;font:500 22px/1 var(--sans)}
/* ---- cases ---- */
/* o trilho sai: um marcador que gruda na rolagem e' gesto de tela grande, e
numa coluna de 340px ele roubaria a largura do proprio conteudo */
.tela .ca-trilho{display:none}
.tela .ca{display:flex;flex-direction:column;align-items:center;margin:0 0 56px}
.tela .ca:last-child{margin-bottom:0}
/* π¨ a coluna de texto virou um elemento so (.ca-coluna), entao a ordem passa
a ser dela, e nao de cada filho. Sem isto a capa ficava DEPOIS do texto:
order 1 contra o 0 padrao da coluna. E largura 100%, senao align-items:
center encolheria a coluna ate o max-content do paragrafo. */
.tela .ca-capa{order:1;width:100%;margin:0 0 20px;border-radius:12px}
.tela .ca-coluna{order:2;width:100%}
.tela .ca-titulo{font:900 44px/.92 var(--display);margin:0}
.tela .ca-olho{margin:10px 0 0}
.tela .ca-texto{font:400 17px/27px var(--sans);margin:14px 0 0;width:auto}
.tela .ca-explorar{margin:20px 0 0}
/* ---- laboratorio + projetos visuais ---- */
.tela .lab-rubrica{margin:0}
.tela .lab-regra{display:block;width:100%;height:1px;margin:14px 0 34px;
background:rgba(255,255,255,.18)}
/* o cachorro sobe para ANTES da marca: no arquivo ele entra por cima dela e
faz parte do conjunto; empilhado depois, vira um carimbo solto */
/* π¨ bloco, e nao flex. Era flex so para subir o mascote com order:-1, e isso
custava caro: filho de flex-column ocupa a linha inteira, entao PROTOTIPO e
SITE ficavam empilhados mesmo cabendo lado a lado (120 + 70 em 342). O
mascote subiu no proprio HTML, que resolve de graca β na prancheta ele e'
absoluto com z-index, entao a ordem do DOM nao muda nada la'. */
.tela .lab-estudo{display:block;margin:0 0 48px}
/* 62 era 0,792 da caixa do desktop; o logo novo tem caixa maior, entao o
mesmo fator da 72 e o conjunto guarda a proporcao que tinha. */
.tela .lab-mascote{width:72px;margin:0 auto 12px}
.tela .lab-marca{font:900 52px/.86 var(--display);margin:0}
.tela .lab-estado{margin:14px 0 0}
.tela .lab-texto{font:400 17px/27px var(--sans);margin:18px 0 0}
.tela .lab-elo{margin:14px 11px 0}
/* a linha do tempo VIRA VERTICAL. Cinco estagios num trilho de 1041px nao
cabem em 340: reduzidos, os rotulos de 11px ficariam com 3px.
O trilho horizontal, os cinco pontos soltos e o marcador HOJE saem, e a
propria lista passa a ser a linha, com o ponto de cada estagio na margem.
O estagio de agora vira anel, que e' o mesmo sinal do desktop. */
.tela .lab-hoje,.tela .fp,.tela .lab-trilho,.tela .lab-trilho-feito{display:none}
/* π¨ o trilho vira um ::before em vez de border-left, para poder SER DESENHADO.
Borda nao se anima de cima para baixo; uma caixa com transform-origin no
topo, sim. E' o mesmo gesto do desktop, girado 90 graus. */
/* o modulo inteiro centraliza, mas os rotulos seguem alinhados a esquerda:
cinco linhas centradas cada uma na propria largura deixariam o trilho
sem a que se prender. align-items:center ja encolhe o ate o rotulo
mais largo, entao ele se centra sozinho. */
/* width:fit-content + margin auto: antes quem centrava o modulo era o
align-items:center do .lab-estudo, que saiu junto com o flex. O voltou
a ser bloco de largura cheia e o trilho colou na margem esquerda. */
.tela .lab-fases{position:relative;width:fit-content;margin:30px auto 0;
padding:2px 0 2px 0;border-left:0;text-align:left}
.tela .lab-fases li{text-align:left}
.tela .lab-fases::before{content:"";position:absolute;left:0;top:0;width:1px;height:100%;
background:rgba(255,255,255,.16);transform-origin:50% 0}
/* a lista aparece rapido e cedo, para o desenho do trilho e os pontos
acontecerem DEPOIS dela, e nao por baixo do proprio fade */
.tela .lab-fases{--d:.18s}
.lab-estudo[data-entrada] .lab-fases{transition:opacity .26s ease var(--d,0s)}
.lab-estudo[data-entrada] .lab-fases::before{scale:1 0;
transition:scale .7s linear .34s}
.lab-estudo.visivel .lab-fases::before{scale:1}
/* e cada ponto acende quando o trilho desce ate ele. Aqui a curva e' LINEAR,
entao os atrasos sao a propria fracao da altura: os cinco pontos ficam em
6%, 28%, 50%, 72% e 94% dela. Sem fade, como no desktop. */
.lab-estudo[data-entrada] .lab-fases li::before{opacity:0;
transition:opacity 0s linear var(--dm,0s)}
.lab-estudo.visivel .lab-fases li::before{opacity:1}
.tela .lab-fases li:nth-child(1){--dm:.36s}
.tela .lab-fases li:nth-child(2){--dm:.51s}
.tela .lab-fases li:nth-child(3){--dm:.67s}
.tela .lab-fases li:nth-child(4){--dm:.83s}
.tela .lab-fases li:nth-child(5){--dm:.98s}
/* "voce esta aqui" tambem no celular: o anel do estagio de agora pulsa */
.tela .lab-fases li[aria-current]::after{content:"";position:absolute;
left:-6px;top:1.5px;width:13px;height:13px;border-radius:50%;
border:1px solid #f9b233;opacity:0;pointer-events:none}
.lab-estudo.visivel .lab-fases li[aria-current]::after{
animation:pulso-hoje 2.8s ease-out 2.2s infinite}
.tela .lab-fases li{position:relative;padding:0 0 0 24px;margin:0 0 16px;
font:500 11px/16px var(--sans);letter-spacing:1.4px;text-transform:uppercase;
color:#fff}
.tela .lab-fases li:last-child{margin-bottom:0}
/* π¨ o eixo tem de ser o MESMO da linha. A linha e' 1px em left:0, entao o
centro dela esta em 0,5 β e nao em 0. Com left:-4.5 o ponto de 8px centrava
em -0,5 e ficava 1px a esquerda dela; com left:-3.5 centra em 0,5 tambem.
Mesma conta no anel: 13px em -6 da 0,5. */
/* π¨ e o box-sizing aqui e' obrigatorio: o reset da linha 108 e' `*`, e `*`
NAO casa com pseudo-elemento. Por isso o anel abaixo, que tem width:13 e
border:4, media 21px de caixa: centrava em 4,5 β 4px a direita da linha e
4px abaixo dos outros pontos. Com border-box os 13px passam a ser o total
e o centro volta para 0,5, igual ao ponto simples. */
.tela .lab-fases li::before,
.tela .lab-fases li[aria-current]::after{box-sizing:border-box}
.tela .lab-fases li::before{content:"";position:absolute;left:-3.5px;top:4px;
width:8px;height:8px;border-radius:50%;background:#f9b233}
.tela .lab-fases li.adiante{color:#797d75}
.tela .lab-fases li.adiante::before{background:#5a625b}
.tela .lab-fases li[aria-current]{color:#f9b233}
.tela .lab-fases li[aria-current]::before{left:-6px;top:1.5px;width:13px;height:13px;
border:4px solid #f9b233;background:var(--ink)}
/* a decoracao do desktop esta ancorada em coordenada de prancheta */
.tela .vi-planeta,.tela .vi-anel{display:none}
.tela .vi{display:block;margin:0 0 44px}
.tela .vi:last-child{margin-bottom:0}
.tela .vi-capa{width:100%;margin:0 0 18px;border-radius:12px}
.tela .vi-titulo{font:400 32px/1 var(--display);letter-spacing:-1px;margin:0}
.tela .vi-ano{margin:10px 0 0}
.tela .vi-frase{font:400 17px/27px var(--sans);margin:10px 0 0}
/* ---- carreira ---- */
.tela .cr-trilho{display:none}
.tela .cr-topo{display:block}
.tela .cr-coluna,.tela .co-coluna{width:auto}
/* a figura leva a largura, nao o retrato: as porcentagens do planeta sao
dela, entao ele acompanha sozinho. aspect-ratio guarda a altura, que o
reset la de cima zera com height:auto. */
.tela .cr-figura{position:relative;width:min(220px,58vw);aspect-ratio:285.25/338;
height:auto;margin:0 auto 26px}
/* position e z-index tambem se repetem: o reset poe position:static, e um
irmao absoluto pinta por cima de conteudo nao posicionado β o planeta
passava para a frente do retrato so no celular. */
.tela .cr-retrato{position:relative;z-index:1;width:100%;height:100%;margin:0}
/* π¨ repete left/top: o reset la de cima e' `.tela [class]`, mesma
especificidade desta regra, e ele poe left:auto/top:auto. Sem repetir, o
planeta cola no canto da figura. */
.tela .cr-planeta{position:absolute;left:-4.242%;top:8.949%;
width:39.615%;height:auto;margin:0}
.tela .cr-titulo{font:900 44px/.92 var(--display);margin:0}
.tela .cr-texto{font:400 17px/27px var(--sans);margin:18px 0 0;width:auto}
.tela .cr-traj{display:inline-block;margin:24px 0 0}
.tela .cr-lista{margin:26px 0 0}
/* tres colunas em 850px viram duas linhas: empresa em cima, cargo e periodo
embaixo, separados por um ponto */
.tela .cr-linhas{margin:0}
/* π¨ height:auto EXPLICITO. O reset la' de cima e' `.tela [class]`, e o
desta lista nao tem classe: ele escapava e ficava com os 61px do desktop,
que com box-sizing:border-box espremem 42px de conteudo em 32 β a tinta
saia com 15px de folga em cima e 3 embaixo. */
.tela .cr-linhas li{position:relative;height:auto;padding:14px 0;
border-bottom:1px solid #d6d6cf}
/* π¨ o traco sai da margem e vira ::before do proprio nome. Preso em
position:absolute ele ficaria na borda esquerda enquanto o texto se
centraliza, e a linha leria torta. */
.tela .cr-traco{display:none}
.tela .cr-org::before{content:"";display:inline-block;width:8px;height:4px;
border-radius:90px;background:#bcbcbc;margin:0 9px 4px 0;vertical-align:middle}
.tela .cr-linhas li:first-child .cr-org::before{background:#f23f07}
.tela .cr-org{display:block;font:500 17px/24px var(--sans);color:#0c0e0d}
.tela .cr-cargo,.tela .cr-periodo{display:inline;font:400 14px/20px var(--sans);
color:#63675f}
.tela .cr-periodo::before{content:" Β· "}
/* ---- recomendacoes ---- */
.tela .re-topo{margin:0 0 30px}
.tela .re-titulo{font:900 40px/.92 var(--display);margin:0}
.tela .re-fonte{margin:14px 0 0}
.tela .re-itens{display:block}
.tela .re-item{display:block;margin:0 0 34px}
.tela .re-item:last-child{margin-bottom:0}
.tela .re-avatar{display:inline-block;width:37px;height:37px;vertical-align:middle;
margin:0 12px 0 0}
.tela .re-item{text-align:center}
.tela .re-nome{display:inline;font:700 17px/24px var(--sans);color:#4e534e}
/* a barra de 8x128 do arquivo vira a borda da propria citacao: em coluna
unica ela nao tem onde ficar ao lado */
/* a barra de 8x128 do arquivo vira ::before da propria citacao, e nao
border-left: borda nao cresce de cima para baixo, caixa cresce. Assim ela
mantem o mesmo gesto que tem no desktop. */
.tela .re-barra{display:none}
/* π¨ com tudo centralizado a barra nao pode ficar na lateral: ela marcaria uma
margem esquerda que o texto nao tem mais. Vira um traco curto acima da
citacao, e o gesto dela gira junto β em vez de descer, ela ABRE do centro. */
.tela .re-fala{position:relative;margin:16px 0 0;padding:0;border-left:0}
.tela .re-fala::before{content:"";position:static;display:block;width:56px;height:8px;
margin:0 auto 16px;border-radius:9px;background:#d9d9d9;transform-origin:50% 50%}
.re-itens[data-entrada] .re-fala::before{scale:0 1;
transition:scale .8s cubic-bezier(.22,.61,.36,1) var(--d,0s)}
.re-itens.visivel .re-fala::before{scale:1}
.tela .re-fala p{font:400 17px/27px var(--sans)}
/* ---- fale comigo ---- */
.tela .co-bloco{display:block}
.tela .co-texto{font:400 17px/27px var(--sans);margin:0;width:auto}
.tela .co-titulo{font:900 44px/.92 var(--display);margin:24px 0 0}
/* os tres cabem numa linha so: 87 + 88 + 97 = 272 numa coluna de 342 */
.tela .co-elos{display:flex;flex-wrap:wrap;justify-content:center;
column-gap:22px;margin:22px 0 0}
.tela .co-elos li{margin:0}
.tela .co-regra{display:block;width:100%;height:2px;margin:18px 0 0;
background:rgba(217,217,217,.1)}
.tela .co-email{margin:20px 0 0;width:auto}
/* -6 e nao 8: o alvo de 44px centra o texto, entao ele desceu 14px. A
margem devolve os 14, igual ao que .ca-explorar e .lab-elo ja fazem
logo acima. Medido: tinta em 7629.7 antes e depois. */
.tela .co-cv{margin:-6px 0 0}
/* ---- alvo de toque ----
π¨ os elos da pagina sao rotulos de 11px com entrelinha de 16: a caixa
clicavel deles mede 22px de altura, abaixo dos 24 que a WCAG 2.5.8 pede e
MUITO abaixo dos 44 que dedo confortavelmente acerta. No desktop isso nao
aparece porque ponteiro e' preciso. Medido: 11 elos em 22px e o email em 14.
Nada de pixel muda: so a area cresce em volta do texto. */
.tela .ca-explorar,.tela .lab-elo,.tela .co-elo,.tela .oi-cta,
.tela .co-email a,.tela .co-cv a,.tela .vi-titulo a{display:inline-flex;
align-items:center;min-height:44px}
.tela .cr-traj{display:inline-flex;align-items:center;min-height:44px}
/* as margens de cima encolhem no mesmo tanto que a area cresceu, para o
espacamento visual continuar o mesmo */
.tela .ca-explorar{margin-top:9px}
.tela .lab-elo{margin-top:7px}
.tela .oi-cta{margin-top:13px}
.tela .cr-traj{margin-top:13px}
.tela .co-elos li{margin-bottom:3px}
.tela .co-email{margin-top:9px}
/* ---- as setas dos elos voltam a ser glifo no fim da frase ---- */
.tela .ca-explorar b,.tela .lab-elo b,.tela .co-elo b,.tela .vi-titulo b,
.tela .cr-traj b{position:static;display:inline-block;width:auto;height:auto;
margin-left:9px;vertical-align:middle;font:500 22px/1 var(--sans)}
.tela .ca-explorar b,.tela .lab-elo b,.tela .co-elo b,.tela .vi-titulo b{
rotate:-135deg}
}
/* ============================================================
MOTION QUE O MOBILE PERDIA POR ESPECIFICIDADE
------------------------------------------------------------
π¨ Medido, nao suposto: comparando quadro a quadro o que MUDA de valor na
entrada de cada bloco, .re-topo e .co-bloco subiam no desktop e so apareciam
no celular. A regra de subida deles e' `.re-topo[data-entrada] > *`, que vale
(0,2,0) β o mesmo do reset do mobile, que vem depois e vence. Os outros
blocos escapam porque a regra deles tem um :not() e chega a (0,3,0).
Aqui elas voltam, ja com o .tela na frente para ganhar por ordem.
============================================================ */
@media (max-width:1023px) and (prefers-reduced-motion:no-preference){
.tela .re-topo > *,
.tela .co-bloco > :not(.co-coluna),
.tela .co-coluna > *{translate:0 18px;
transition:opacity .75s ease var(--d,0s),translate .85s cubic-bezier(.19,.85,.23,1) var(--d,0s)}
.tela .re-topo.visivel > *,
.tela .co-bloco.visivel > :not(.co-coluna),
.tela .co-bloco.visivel .co-coluna > *{translate:0}
/* a regra do contato desenha, e ela nao pode levar translate junto */
.tela .co-bloco > .co-regra{translate:0}
/* os pontos da linha do tempo vertical dao o mesmo pulo do desktop */
.lab-estudo[data-entrada] .lab-fases li::before{scale:0;
transition:opacity 0s linear var(--dm,0s),scale .24s cubic-bezier(.34,1.56,.64,1) var(--dm,0s)}
.lab-estudo.visivel .lab-fases li::before{scale:1}
}
@media (max-width:1023px) and (prefers-reduced-motion:reduce){
/* uma vez, nao em laco β como no desktop */
.lab-estudo.visivel .lab-fases li[aria-current]::after{animation-iteration-count:1}
}