/* ============================================================ NAVBAR FLUTUANTE (18/09/2026) — a nav do pinewoodgroup.com no DS da casa Um arquivo para as ONZE páginas que têm a barra: index.html, servicos.html e as nove páginas de galeria (imagens, filmes, mapas-3d, tour-360, aplicativos e os quatro filmes do baralho). O comportamento mora em navbar.js; o markup fica em cada página (os links de âncora viram index.html#… fora do index); os tokens vêm do tokens.css, que é carregado antes deste. O QUE VEIO DA REFERÊNCIA (pinewoodgroup.com, medido no Chromium a 1440×900; a cópia está em "referencia navbar/" na raiz do repositório): · barra FLUTUANTE, fixa, afastada 32px das três bordas (24 abaixo de 1024, 16 no celular), 60px de altura (56 no celular) -- desde 18/09 o tamanho e o vidro escuro sao os do flyingstudio.com.br (ver abaixo); · fundo translúcido com desfoque num ::before (lá, no hover, com o dropdown ou o menu abertos, um ::after vira fundo sólido e o halo cresce 8px para fora; com o dropdown aberto o halo desce até envolver os cards — isso aqui saiu em 18/09, ver "O VIDRO"); · links do centro: quando um está em hover, TODOS apagam e só o apontado volta à cor cheia; · dropdown em grade de 4 cards de 180px, revelado por clip-path de baixo para cima em 300ms na curva (.5,.01,.5,1), em cascata de 50ms; · hambúrguer abre um menu de tela cheia: véu desfocado sobre a página, painel de links à esquerda (metade da largura a partir de 769px) com o CTA embaixo, e os subitens de Produtos na metade direita; os itens entram deslizando de -20px, 50ms um depois do outro; a barra some ao descer e volta ao subir. O QUE É DA CASA e não veio de lá: cantos vivos (--radius: 0 — só o baralho de vídeos era exceção; desde 18/09 a barra e os cards do dropdown também são, 16px, a pedido do cliente), Cinzel nos rótulos em caixa alta, Garamond nos nomes de card, terracota como único acento, o botão de tema no lugar da lupa de busca. A regra de rolagem é da casa, não da referência, e fica no navbar.js: desde 18/09/2026 a barra fica FIXA depois das duas primeiras imagens do index (antes sumia ao descer e voltava com meia tela de subida). ============================================================ */ /* O TAMANHO E O VIDRO ESCURO SAO DO flyingstudio.com.br -- 18/09/2026, pedidos do cliente com print de la ("deixa a cor e opacidade apenas igual a essa"; "deixa o tamanho igual da navbar da referencia tambem"). A copia salva esta em "flying studio/" ao lado do site; os valores sao os do CSS deles (assets/1a2857297c2ebf2f_ff5e6cd1a49ea6a7.css, minificado numa linha so) e batem com o getComputedStyle do html salvo a 1920, 1440 e 390: barra a 14px do topo e 12px dos lados, no maximo 1280 de largura e centrada, 58 de altura (o logo de 40 + 9 + 9), padding lateral 22/10 (16/8 abaixo de 640). Iguais em qualquer largura; antes eram 32/24/16 de afastamento e 60/56 de altura. O raio de la e pilula; aqui fica o de 16px (--nav-raio), pedido antes "sem virar pilula". Fonte, links, botoes e layout interno continuam os da casa. */ :root { --nav-afast: 14px; /* distância do topo (e do pé do menu de tela cheia) */ --nav-lado: 12px; /* distância das laterais */ --nav-max: 1280px; /* largura máxima da barra, centrada */ --nav-alt: 58px; /* altura da barra */ --nav-card: 180px; /* altura dos cards do dropdown */ --nav-vao: 8px; /* vão entre a barra e os cards, e entre os cards */ --nav-curva: cubic-bezier(.5, .01, .5, 1); /* a curva do dropdown, medida lá */ /* --nav-barra-rolagem é escrita pelo navbar.js quando o menu trava a rolagem: a barra de rolagem some e a janela alarga 15px no Windows; sem compensar, a barra e o X pulariam para a direita no clique. */ --nav-barra-rolagem: 0px; /* Opacidade do vidro da barra. Não é a mesma nos dois temas porque o pior caso de leitura não é: medido no pixel renderizado (1440×900), o link de 11px no pior ponto da página. No creme, o pior é a barra sobre as fotos escuras do baralho: 52% dá 14,2:1. Na tinta, o pior é a barra sobre o mapa, com o "Impacto Global." claro passando atrás dos links: 52% dava 3,5:1, 60% 4,5 (no limite), 66% dá 5,5:1. */ --nav-vidro: .52; /* O VIDRO COMO UM SO VALOR (barra e cards do dropdown, o mesmo material): --nav-vidro-fundo e --nav-vidro-filtro. No creme e o fundo da pagina a 52% + blur 20 e saturacao 1,4, como sempre. NA TINTA ele mudou tres vezes em 18/09/2026, a pedido do cliente: 1) "deixa a navbar um pouco mais clara, ela esta sumindo no fundo" -- era a tinta a 66%, e sobre as dobras escuras a barra dava o MESMO pixel do fundo (30,23,19 sobre 29,24,20 no #mapa a 1440x900); virou a --tinta-2 a 72% (51,44,38, 20 niveis acima); 2) "nao era pra deixar marrom, so preto mais claro" -- virou um carvao neutro, rgb(46,46,48) a 72% (43,41,41 sobre a tinta, 16 acima); 3) o vidro do flyingstudio, abaixo. NA TINTA, DESDE A NOITE DE 18/09: O VIDRO DO flyingstudio. O fundo e o filtro sao os deles, copiados exatos: --theme-header-glass #1c1a2440 = rgba(28,26,36,.25) e backdrop-filter blur(9px) saturate(1.25) (as classes backdrop-blur-[9px] e backdrop-saturate-[1.25] do span que faz o vidro deles). O BRILHO DELES TAMBEM VEIO, depois, a pedido do cliente ("na navbar da referencia nao tem um pequeno brilho que da destaque? copia exatamente igual"). No mesmo span: borda de 1px rgba(255,255,255,.08) (--theme-border-soft #ffffff14) e box-shadow inset 0 1px 0 rgba(255,255,255,.22) + 0 18px 50px -24px rgba(0,0,0,.45) (a classe shadow-[inset_0_1px_0_...]). Lido no html salvo sobre fundo liso #202020: a borda da 48,48,50, a linha logo abaixo dela no alto 80,80,82 -- e esse o brilho --, o miolo 31,31,33 e a sombra escurece o fundo embaixo de 32 para 30. Sem pseudo-elemento, gradiente, mascara ou blend. O painel do dropdown deles tem a mesma borda e o mesmo brilho, com a sombra 0 20px 50px -20px rgba(0,0,0,.35): foi para os cards. So na tinta; o creme nao mudou (la o vidro deles e branco a 26%, #ffffff42, com borda rgba(32,28,44,.08) e a mesma sombra). MEDIDO AQUI (pixel renderizado, 1440x900): sobre a tinta lisa do #mapa o miolo da barra fica 1 nivel acima do fundo (29,25,24 sobre 29,24,21) -- o que a separa da tinta sao a borda (47,42,42) e o brilho (78,74,74), como la; sobre a foto do #mercado, 49 contra 58. Leitura, com o index varrido de ponta a ponta: links no pior ponto 4,7:1 (AA no limite); a descricao dos cards (13px) cai para 3,0:1 com o titulo creme do #mercado passando atras -- ABAIXO do AA, porque 25% de vidro e 9px de blur deixam o fundo quase inteiro. */ --nav-vidro-fundo: hsl(var(--background) / var(--nav-vidro)); /* o mesmo vidro sem desfoque, para onde o desfoque sai de cena (ver a regra html.processo-ativo): a densidade sobe de .52 para .9 porque e o desfoque que estava segurando a leitura do que passa atras */ --nav-vidro-denso: hsl(var(--background) / .9); --nav-vidro-filtro: blur(20px) saturate(1.4); --nav-vidro-borda: 0 none; --nav-vidro-sombra: none; --nav-card-sombra: none; /* Cantos da barra e dos cards: 16px -- 18/09/2026, pedido do cliente ("deixa a borda arredondada"). Ver O VIDRO. */ --nav-raio: 16px; } [data-tema="dark"] { --nav-vidro-fundo: #1c1a2440; /* na tinta o vidro e bem mais transparente (25%), entao o denso tambem sobe menos: 85% mantem a barra escura sem virar uma tarja preta */ --nav-vidro-denso: #1c1a24d9; --nav-vidro-filtro: blur(9px) saturate(1.25); --nav-vidro-borda: 1px solid rgba(255, 255, 255, .08); --nav-vidro-sombra: inset 0 1px 0 rgba(255, 255, 255, .22), 0 18px 50px -24px rgba(0, 0, 0, .45); --nav-card-sombra: inset 0 1px 0 rgba(255, 255, 255, .22), 0 20px 50px -20px rgba(0, 0, 0, .35); } /* ============================================================ A BARRA ============================================================ */ .navbar { position: fixed; top: var(--nav-afast); left: var(--nav-lado); right: calc(var(--nav-lado) + var(--nav-barra-rolagem)); /* Centrada com teto de largura, como a de la: fixed com left e right e margem auto dos dois lados divide a sobra ao meio (a 1920, 320 de cada lado). */ max-width: var(--nav-max); margin-inline: auto; z-index: 50; display: flex; align-items: center; height: var(--nav-alt); padding: 0 10px 0 22px; color: hsl(var(--foreground)); /* Escondida: -180% (o número da referência, que usa gsap yPercent). -100% não bastaria: a barra fica a 14px do topo, e 100% dela são 58 — sobrariam 14px de barra à mostra. A 180% ela sai inteira (58×1,8 = 104 > 14 + 58). */ transform: translateY(-180%); opacity: 0; pointer-events: none; /* ENTRADA E SAÍDA TÊM CURVAS DIFERENTES — 17/09/2026, pedido do cliente ("uma animação mais satisfatória"). SAÍDA (esta regra): curta e ACELERANDO, 320ms; a opacidade sai antes do movimento (220ms) para a barra dissolver em vez de deslizar para fora por inteiro. */ transition: transform .32s cubic-bezier(.55, 0, 1, .45), opacity .22s ease-in; } .navbar[data-visivel="true"] { transform: none; opacity: 1; pointer-events: auto; /* ENTRADA: longa e ASSENTANDO. (.16,1,.3,1) é a família do --ease da casa, mais extrema: quase toda a distância no primeiro terço e o resto é o assentamento. 720ms de transform contra 400ms de opacidade: a barra já está visível enquanto ainda desce. */ transition: transform .72s cubic-bezier(.16, 1, .3, 1), opacity .4s ease-out; } /* O VIDRO (::before). A barra É o vidro: fundo translúcido com desfoque, sem contorno. 18/09/2026, pedido do cliente ("dá um pouco de translucidade pra navbar"; "você colocou uma borda na navbar, tira ela, era pra deixar a navbar em si translúcida"): era creme a 72% + blur 16, com fio de 1px em volta e, no hover, um halo que crescia 8px para fora e um fundo quase sólido por cima (o gesto da referência). Saíram o fio, o halo e o fundo sólido; ficou 52% no creme e 66% na tinta (ver --nav-vidro) + blur 20 com saturação 1,4, igual em repouso e no hover. (Na tinta, desde a noite de 18/09, e o vidro do flyingstudio, com a borda e o brilho de la: ver --nav-vidro-fundo.) Fica em z-index -1 dentro do contexto da barra (fixed com z-index cria um), então pinta atrás do conteúdo. CANTOS DE 16px (--nav-raio) no proprio vidro, sem overflow na barra: o dropdown sai de dentro dela (top: 100%) e seria cortado. O raio recorta o fundo e o backdrop-filter juntos -- com branco liso atras, o pixel do canto e branco puro, sem blur vazando -- e nada mais pinta perto dos cantos (o sublinhado do item ativo fica embaixo do link, no meio). */ .navbar::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border: var(--nav-vidro-borda); border-radius: var(--nav-raio); background: var(--nav-vidro-fundo); box-shadow: var(--nav-vidro-sombra); -webkit-backdrop-filter: var(--nav-vidro-filtro); backdrop-filter: var(--nav-vidro-filtro); transition: background-color .3s ease, -webkit-backdrop-filter .24s ease, backdrop-filter .24s ease; } /* DENTRO DA DOBRA DO PROCESSO (20/09/2026). Ali a tela inteira muda a cada quadro -- a maquete, a camera de grua, as palavras -- e o desfoque de fundo desta barra e recalculado junto. Medido a 1536x730@1.25, oito gestos, cinco rodadas de cada: com o desfoque o quadro mediano era 20,7 ms (tres vsyncs de 144 Hz, ~48 fps) e sem ele 13,9 ms (dois vsyncs, ~72 fps). Era o maior fator isolado do travamento que o cliente reclamou. Dentro da dobra, entao, o vidro troca de material: sai o desfoque e entra um fundo denso, que e o que impede a cena de aparecer nitida atras da barra. A troca leva 240 ms nos dois sentidos, para nao piscar na entrada nem na saida. Quem liga a classe e o snapSet do script "O PROCESSO", no mesmo instante em que a dobra assume a rolagem. */ html.processo-ativo .navbar::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--nav-vidro-denso); } /* O conteúdo entra depois da barra, em cascata — é o que separa uma barra que aparece de uma barra que se APRESENTA. Anima o , não o
  • : o
  • de Produtos segura o dropdown, e um transform nele viraria caixa de referência do dropdown durante a animação. */ @media (min-width: 1024px) { .navbar[data-visivel="false"] .navbar__marca, .navbar[data-visivel="false"] .navbar__menu > li > a, .navbar[data-visivel="false"] .navbar__acoes { opacity: 0; transform: translateY(-10px); transition: opacity .18s ease, transform .18s ease; } .navbar[data-visivel="true"] .navbar__marca, .navbar[data-visivel="true"] .navbar__menu > li > a, .navbar[data-visivel="true"] .navbar__acoes { opacity: 1; transform: none; transition: opacity .42s ease-out .10s, transform .58s cubic-bezier(.16, 1, .3, 1) .10s; } .navbar[data-visivel="true"] .navbar__menu > li:nth-child(1) > a { transition-delay: .14s; } .navbar[data-visivel="true"] .navbar__menu > li:nth-child(2) > a { transition-delay: .20s; } .navbar[data-visivel="true"] .navbar__menu > li:nth-child(3) > a { transition-delay: .26s; } .navbar[data-visivel="true"] .navbar__menu > li:nth-child(4) > a { transition-delay: .32s; } .navbar[data-visivel="true"] .navbar__acoes { transition-delay: .38s; } } /* ---- marca: o símbolo (as duas colunas) e a palavra ---- */ .navbar__marca { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; font-family: var(--font-accent); font-size: 12px; letter-spacing: 6px; text-transform: uppercase; text-decoration: none; /* LOGO EM TERRACOTA -- 18/09/2026, pedido do cliente ("deixa laranja na navbar"). Era a cor do texto (creme na tinta, tinta no creme). O simbolo e mascara sobre currentColor, entao a cor da palavra leva o simbolo junto. --terracota-texto e o terracota PURO na tinta (o token aponta para ele no tema escuro) e o escurecido #B54D1C no creme: o puro sobre o vidro creme em fundo creme da 3,0:1, no limite, e sobre o vidro creme em cima das dobras escuras do index (o vidro vira um cinza medio, 141,135,127) da 1,0:1 -- some. O escurecido da 4,6:1 no primeiro caso e 1,5:1 no segundo: melhor que o puro nos dois, mas o segundo continua baixo -- varrendo o index claro a 1440x900, o logo fica abaixo de 3:1 em 19 de 25 posicoes (76%; com o puro, 84%). Na tinta, o puro sobre o vidro do flyingstudio da 5,1:1 (pior ponto do index a 1440, 4,4; no celular sobre a foto do #mercado, 3,1). Hover e foco nao mudam a cor; o foco e o contorno terracota de 2px de todos os links da barra. */ color: hsl(var(--terracota-texto)); white-space: nowrap; } /* O símbolo é o mesmo path do rodapé do index (viewBox 64), aqui como máscara sobre currentColor: uma cópia só, para as onze páginas, e muda de cor com o tema sem SVG inline em cada uma. */ .navbar__simbolo { flex: none; width: 24px; height: 24px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M17.41 10.57L30.82 10.67L31.15 10.93L31.21 11.36L31.18 13.95L30.98 14.21L28.95 14.31L11.64 14.34L9.25 14.51L8.89 14.64L8.2 15.3L7.84 15.98L7.84 17.1L8 17.52L8.39 17.95L9.21 18.28L9.7 18.25L10.16 18.02L10.79 17.23L10.92 16.21L11.15 15.95L11.41 15.92L11.67 16.05L11.84 16.54L11.74 17.52L11.34 18.38L10.49 19.07L9.8 19.23L8.49 19.16L7.74 18.8L7.02 17.95L6.75 17.07L6.75 15.98L7.18 14.9L7.8 14.18L8.79 13.56L9.67 13.39L11.48 13.3L30.13 13.26L30.2 11.66L12.13 11.62L9.44 11.72L8.49 11.92L7.44 12.41L6.52 13.1L5.77 13.98L5.34 14.77L5.11 15.56L5.08 17.33L5.25 18.11L5.77 19.07L6.56 19.92L7.38 20.48L8.52 20.87L9.74 20.9L10.56 20.74L11.61 20.21L12.2 19.72L13.02 18.64L13.28 17.89L13.48 16.61L13.74 16.15L14.26 16.02L16.36 16.05L16.36 35.69L16.49 46.67L18 46.84L18.72 46.84L18.92 46.7L19.02 40.15L19.02 16.18L19.11 16.08L23.57 16.15L23.61 47.72L23.51 47.82L15.44 47.75L15.38 18.74L15.18 17.16L14.72 17.03L14.46 17.13L14.36 17.89L13.97 19.03L13.28 20.08L12.23 21.07L10.98 21.69L10.49 21.82L8.79 21.95L7.87 21.79L6.69 21.3L5.9 20.74L5.08 19.89L4.62 19.2L4.26 18.38L4 17.03L4 16.34L4.26 14.8L5.08 13.2L6.46 11.82L7.8 11.07L8.75 10.77L9.8 10.67ZM34.13 10.64L52 10.67L55.11 10.8L56.69 11.3L57.97 12.08L58.95 13.1L59.7 14.54L60 15.56L60 17.66L59.7 18.64L59.08 19.75L58.43 20.51L57.41 21.3L56.23 21.82L55.15 21.98L54.13 21.95L53.05 21.69L52.2 21.3L51.34 20.67L50.43 19.59L49.9 18.57L49.54 17.23L49.31 17.1L48.98 17.1L48.89 17.2L48.72 19.69L48.62 47.69L48.52 47.79L41.31 47.82L40.69 47.72L40.49 47.49L40.39 25.92L40.46 16.28L41.11 16.11L44.1 16.11L45.15 16.21L45.11 46.67L45.21 46.8L46.43 46.87L47.05 46.87L47.38 46.74L47.51 46.38L47.61 44.87L47.64 20.08L47.77 16.25L47.97 16.05L48.39 16.02L49.97 16.05L50.33 16.18L50.56 16.57L50.69 17.52L50.98 18.44L51.38 19.16L52.1 19.95L52.79 20.48L53.41 20.74L54.2 20.87L55.64 20.87L56.23 20.74L57.21 20.21L57.87 19.66L58.52 18.77L59.05 17.2L59.05 16.08L58.79 15L58.13 13.75L57.21 12.8L56.07 12.15L54.75 11.75L52.03 11.66L33.9 11.72L33.87 13.2L33.97 13.26L50.36 13.33L54.13 13.39L55.25 13.56L56.46 14.38L57.11 15.33L57.31 16.21L57.25 17.39L56.72 18.38L55.61 19.2L53.97 19.23L53.08 18.77L52.52 18.11L52.23 17.33L52.23 16.31L52.56 16.02L53.15 16.05L53.34 17.46L53.77 17.98L54.13 18.21L54.75 18.31L55.54 18.08L56.16 17.36L56.3 16.97L56.3 16.15L55.87 15.3L55.05 14.64L54.2 14.48L50.95 14.38L33.02 14.28L32.92 13.85L32.92 10.9L33.15 10.67ZM20.13 17.03L20.03 17.1L20.03 40.64L20.13 46.41L20.26 46.8L22.43 46.7L22.62 46.64L22.62 17.26L22.52 17.1L22.1 17.03ZM41.54 17.07L41.41 17.2L41.51 46.44L41.64 46.8L43.9 46.77L44.07 43.89L44.1 17.2L44.03 17.07ZM14.72 49.66L27.7 49.72L27.77 52.7L27.67 53.3L27.38 53.43L24.23 53.43L11.25 53.43L11.25 49.89L11.54 49.72ZM50.39 49.66L52.52 49.66L52.79 49.82L52.89 50.51L52.89 53.43L38.72 53.43L36.33 53.43L36.36 49.75ZM26.33 50.61L12.2 50.64L12.26 52.44L12.56 52.48L26.66 52.48L26.75 50.7ZM37.44 50.67L37.34 50.77L37.41 52.57L51.67 52.48L51.8 52.34L51.77 50.67Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M17.41 10.57L30.82 10.67L31.15 10.93L31.21 11.36L31.18 13.95L30.98 14.21L28.95 14.31L11.64 14.34L9.25 14.51L8.89 14.64L8.2 15.3L7.84 15.98L7.84 17.1L8 17.52L8.39 17.95L9.21 18.28L9.7 18.25L10.16 18.02L10.79 17.23L10.92 16.21L11.15 15.95L11.41 15.92L11.67 16.05L11.84 16.54L11.74 17.52L11.34 18.38L10.49 19.07L9.8 19.23L8.49 19.16L7.74 18.8L7.02 17.95L6.75 17.07L6.75 15.98L7.18 14.9L7.8 14.18L8.79 13.56L9.67 13.39L11.48 13.3L30.13 13.26L30.2 11.66L12.13 11.62L9.44 11.72L8.49 11.92L7.44 12.41L6.52 13.1L5.77 13.98L5.34 14.77L5.11 15.56L5.08 17.33L5.25 18.11L5.77 19.07L6.56 19.92L7.38 20.48L8.52 20.87L9.74 20.9L10.56 20.74L11.61 20.21L12.2 19.72L13.02 18.64L13.28 17.89L13.48 16.61L13.74 16.15L14.26 16.02L16.36 16.05L16.36 35.69L16.49 46.67L18 46.84L18.72 46.84L18.92 46.7L19.02 40.15L19.02 16.18L19.11 16.08L23.57 16.15L23.61 47.72L23.51 47.82L15.44 47.75L15.38 18.74L15.18 17.16L14.72 17.03L14.46 17.13L14.36 17.89L13.97 19.03L13.28 20.08L12.23 21.07L10.98 21.69L10.49 21.82L8.79 21.95L7.87 21.79L6.69 21.3L5.9 20.74L5.08 19.89L4.62 19.2L4.26 18.38L4 17.03L4 16.34L4.26 14.8L5.08 13.2L6.46 11.82L7.8 11.07L8.75 10.77L9.8 10.67ZM34.13 10.64L52 10.67L55.11 10.8L56.69 11.3L57.97 12.08L58.95 13.1L59.7 14.54L60 15.56L60 17.66L59.7 18.64L59.08 19.75L58.43 20.51L57.41 21.3L56.23 21.82L55.15 21.98L54.13 21.95L53.05 21.69L52.2 21.3L51.34 20.67L50.43 19.59L49.9 18.57L49.54 17.23L49.31 17.1L48.98 17.1L48.89 17.2L48.72 19.69L48.62 47.69L48.52 47.79L41.31 47.82L40.69 47.72L40.49 47.49L40.39 25.92L40.46 16.28L41.11 16.11L44.1 16.11L45.15 16.21L45.11 46.67L45.21 46.8L46.43 46.87L47.05 46.87L47.38 46.74L47.51 46.38L47.61 44.87L47.64 20.08L47.77 16.25L47.97 16.05L48.39 16.02L49.97 16.05L50.33 16.18L50.56 16.57L50.69 17.52L50.98 18.44L51.38 19.16L52.1 19.95L52.79 20.48L53.41 20.74L54.2 20.87L55.64 20.87L56.23 20.74L57.21 20.21L57.87 19.66L58.52 18.77L59.05 17.2L59.05 16.08L58.79 15L58.13 13.75L57.21 12.8L56.07 12.15L54.75 11.75L52.03 11.66L33.9 11.72L33.87 13.2L33.97 13.26L50.36 13.33L54.13 13.39L55.25 13.56L56.46 14.38L57.11 15.33L57.31 16.21L57.25 17.39L56.72 18.38L55.61 19.2L53.97 19.23L53.08 18.77L52.52 18.11L52.23 17.33L52.23 16.31L52.56 16.02L53.15 16.05L53.34 17.46L53.77 17.98L54.13 18.21L54.75 18.31L55.54 18.08L56.16 17.36L56.3 16.97L56.3 16.15L55.87 15.3L55.05 14.64L54.2 14.48L50.95 14.38L33.02 14.28L32.92 13.85L32.92 10.9L33.15 10.67ZM20.13 17.03L20.03 17.1L20.03 40.64L20.13 46.41L20.26 46.8L22.43 46.7L22.62 46.64L22.62 17.26L22.52 17.1L22.1 17.03ZM41.54 17.07L41.41 17.2L41.51 46.44L41.64 46.8L43.9 46.77L44.07 43.89L44.1 17.2L44.03 17.07ZM14.72 49.66L27.7 49.72L27.77 52.7L27.67 53.3L27.38 53.43L24.23 53.43L11.25 53.43L11.25 49.89L11.54 49.72ZM50.39 49.66L52.52 49.66L52.79 49.82L52.89 50.51L52.89 53.43L38.72 53.43L36.33 53.43L36.36 49.75ZM26.33 50.61L12.2 50.64L12.26 52.44L12.56 52.48L26.66 52.48L26.75 50.7ZM37.44 50.67L37.34 50.77L37.41 52.57L51.67 52.48L51.8 52.34L51.77 50.67Z'/%3E%3C/svg%3E") center / contain no-repeat; } /* ---- links do centro ---- O
  • ocupa a altura inteira da barra (align-self: stretch na lista): é ele que segura o hover do dropdown, e assim o mouse desce do link até os cards sem passar por nenhuma faixa "de ninguém" — antes, com o padding no , sobravam 3px entre o item e a borda da barra em que o dropdown começava a fechar. */ .navbar__menu { list-style: none; display: flex; align-self: stretch; align-items: stretch; gap: 24px; margin: 0; padding: 0; transition: opacity .25s ease; } .navbar__menu > li { display: flex; align-items: center; } .navbar__menu > li > a { position: relative; display: inline-block; padding: 2px 0; font-family: var(--font-accent); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; text-decoration: none; white-space: nowrap; /* Cor cheia, não mais 74%: com a barra translúcida (--nav-vidro) o fundo atrás do link muda com a página, e a 74% o link caía para 3,6:1 no creme sobre as fotos do baralho. Cheio: 14,2:1 ali, 5,5:1 no pior ponto da tinta. O item ativo continua marcado pelo sublinhado. */ color: hsl(var(--foreground)); transition: color .25s ease; } .navbar__menu > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: hsl(var(--terracota)); transform: scaleX(0); transform-origin: left center; transition: transform .4s var(--ease, cubic-bezier(.22, 1, .36, 1)); } .navbar__menu > li > a:hover, .navbar__menu > li > a:focus-visible, .navbar__menu > li > a[aria-current] { color: hsl(var(--foreground)); } .navbar__menu > li > a:hover::after, .navbar__menu > li > a:focus-visible::after, .navbar__menu > li > a[aria-current]::after { transform: scaleX(1); } /* O truque da referência: um item em hover apaga os OUTROS (o ativo também), e o apontado é o único em cor cheia. O apagado é --grey, não opacidade: 4,77:1 sobre o creme e 5,7:1 sobre o card da tinta, os dois medidos — opacidade cairia abaixo de 4,5 no creme. */ .navbar__menu:has(> li:hover) > li:not(:hover) > a { color: hsl(var(--grey)); } /* Com o menu de tela cheia aberto os links da barra somem, como lá. */ .navbar.aberta .navbar__menu { opacity: 0; pointer-events: none; } /* ---- à direita: fio de cabelo, tema e hambúrguer ---- */ .navbar__acoes { display: flex; align-items: center; gap: 4px; margin-left: 24px; padding-left: 20px; border-left: 1px solid hsl(var(--border)); } .navbar__tema, .navbar__botao { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border: 0; padding: 0; background: none; color: inherit; cursor: pointer; transition: color .3s ease; } .navbar__tema:hover, .navbar__botao:hover { color: hsl(var(--terracota-texto)); } /* ALVO DE TOQUE NO CELULAR (20/09/2026). Os dois botoes desenham 36x36, e no dedo isso e pequeno (o guia da Apple pede 44). O desenho NAO muda: a area entra por um ::before invisivel que sangra 4px em cima e embaixo e 2px de cada lado -- 40x44. Os 2px de lado sao exatamente a metade do gap de 4px entre eles, entao as duas areas encostam sem se sobrepor, e um toque no meio nunca cai no botao errado. So onde o ponteiro e grosso. */ @media (hover: none) { .navbar__tema::before, .navbar__botao::before { content: ""; position: absolute; inset: -4px -2px; } /* a marca (o link para a home) tem 24px de altura pelo mesmo motivo; cresce so para cima e para baixo, que e onde ha barra sobrando */ .navbar__marca { position: relative; } .navbar__marca::before { content: ""; position: absolute; inset: -10px 0; } } .navbar__tema svg { display: block; } .navbar__tema .lua { display: none; } [data-tema="dark"] .navbar__tema .sol { display: none; } [data-tema="dark"] .navbar__tema .lua { display: block; } /* Hambúrguer: três linhas de 24px, 8px entre elas (o svg de 24×18 de lá). Aberto, a do meio some e as outras duas vão ao centro e viram X. */ .navbar__botao span { position: absolute; left: 6px; right: 6px; height: 1px; background: currentColor; transition: transform .4s var(--ease, cubic-bezier(.22, 1, .36, 1)), opacity .25s ease; } .navbar__botao span:nth-child(1) { top: 9px; } .navbar__botao span:nth-child(2) { top: 17px; } .navbar__botao span:nth-child(3) { top: 25px; } .navbar.aberta .navbar__botao span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .navbar.aberta .navbar__botao span:nth-child(2) { opacity: 0; transform: scaleX(0); } .navbar.aberta .navbar__botao span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* SEM HAMBURGUER NO DESKTOP -- 18/09/2026, pedido do cliente ("tira as 3 barrinhas que ficam na navbar, nao precisa no desktop"). De 1024 para cima os links estao na propria barra (abaixo disso o .navbar__menu some, ver CELULAR) e o botao sobrava; abaixo de 1024 ele fica, porque la e o unico caminho para os links. display: none tira o botao da ordem de tabulacao junto. Sem ele o tema fica sozinho depois do fio: a caixa do simbolo da marca comeca a 22px da borda esquerda e a do sol/lua termina a 19px da direita (o padding 22/10 do flyingstudio; com o de antes, 24/16, eram 24 e 25), e o fio continua a 24px do ultimo link e a 20px do botao. O navbar.js fecha o menu de tela cheia se a janela crescer para 1024 com ele aberto (sem o X, ele ficaria de pe). Os itens que so o menu tinha -- Processo e Clientes -- ficam sem atalho na barra do desktop. */ @media (min-width: 1024px) { .navbar__botao { display: none; } } /* ============================================================ DROPDOWN DE PRODUTOS — 4 cards com o conteúdo real da servicos.html Absoluto a partir da BARRA (o
  • não é posicionado de propósito), de borda a borda dela, logo abaixo (era -1px dos lados para alinhar com o fio de 1px da barra; sem o fio, 0 alinha com a beira do vidro). O estado é a classe .aberto no
  • , escrita pelo navbar.js (hover do mouse, foco do teclado; Esc fecha) — o script sincroniza aria-expanded, e assim CSS e ARIA nunca discordam. CENTRADO NA BARRA — 18/09/2026, pedido do cliente (print a 1920): numa grade de colunas fixas, coluna sobrando deixava o grupo encostado à esquerda — seis colunas com quatro cards punham os cards de 32 a 1266 e um vão de 620px à direita. Agora é uma fileira flex centrada: cada card mede 1/N da barra (N = --nav-colunas, a mesma conta da grade de N colunas), e com menos cards que N o que sobra se divide pelos dois lados; com mais, quebra em fileiras centradas. Com N igual ao número de cards fica idêntico à grade de antes. ============================================================ */ .navbar__sub { --nav-colunas: 4; position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--nav-vao); padding: var(--nav-vao) 0; visibility: hidden; transition: visibility 0s .35s; } .navbar__item--pai.aberto .navbar__sub { visibility: visible; transition-delay: 0s; } /* O VIDRO DOS CARDS — 18/09/2026, pedido do cliente: os retângulos do dropdown com a MESMA translucidez da barra. Eram opacos (--card) com fio de 1px; agora são o material do .navbar::before (--nav-vidro, blur 20, saturação 1,4) e sem fio, como a barra: o vão de 8px já separa. O backdrop-filter fica no próprio card, sem pseudo-elemento: o clip-path da revelação recorta o vidro junto, e congelada a 80, 160 e 240ms a faixa já revelada é igual ao estado final pixel a pixel (0/255) — não pisca opaco no meio. Com o fundo mudando com a página, o texto teve de mudar junto. Medido no pixel renderizado (texto escondido, fundo lido embaixo), o index inteiro varrido com o dropdown aberto, a 1440×900 e 1920×1080. Pior ponto no creme: o vidro sobre o mapa escuro; na tinta: o "Impacto Global." claro passando atrás dos cards. · descrição: --grey caía para 1,4:1 no creme e 2,1 na tinta; a foreground a 80% dava 3,7 e a 90%, 4,2 no creme. Só a cor cheia passa: 4,76 no creme, 5,09 na tinta. A hierarquia fica no corpo e na letra (Garamond 22 contra 13). · seta: o terracota sumia (1,0 a 1,7:1); em foreground, 4,92 e 5,15. · nome: 4,98 e 5,12. O piso é o dos links da barra (mesma cor, mesmo vidro): sobre branco chapado a tinta ainda dá 4,95; sobre preto chapado o creme daria 4,37, e o site não tem preto chapado atrás da barra depois que ela aparece. Por isso nome, descrição e seta herdam a MESMA cor do card. O terracota fica no hover, SÓLIDO: tinta sobre ele dá 5,2:1 em qualquer fundo; a 85% cairia para 4,05:1 sobre o mapa. MESMA OPACIDADE (conferido em 18/09, o cliente viu cards "mais transparentes" que outros e que a barra): o material é um só — fundo computado e backdrop-filter iguais nos cards e no ::before da barra, nada pintado atrás do grupo (.navbar__sub sem fundo), nenhum ancestral com opacity/filter/clip-path que corte o fundo do blur, nada por cima. Com um fundo liso atrás, barra e cards dão o mesmo pixel (±1/255); com listras de 3px, os dois borram igual. O que muda de card para card é a foto que passa atrás: mais clara ou mais escura, e o vidro a 52% (66% na tinta) deixa ver isso. Menos fundo à mostra é subir o --nav-vidro, que vale para a barra e os cards juntos. Desde a noite de 18/09 o vidro inteiro e um valor so (--nav-vidro-fundo e --nav-vidro-filtro: na tinta, o do flyingstudio), e o canto tambem (--nav-raio, 16px como a barra). A borda e o brilho de cima sao os do painel do dropdown de la (--nav-vidro-borda, --nav-card-sombra); a sombra de fora desse valor nao aparece aqui, porque o clip-path da revelacao corta tudo o que passa da caixa do card. */ .navbar__card { --atraso: 0s; display: flex; flex-direction: column; /* 1/N da barra (ver CENTRADO NA BARRA). A base sai 1px menor e cresce até o teto: N frações somadas podem passar da barra por arredondamento de subpixel e jogar o último card para outra fileira (no Chrome não passou, de 1024 a 1920 de px em px; a folga cobre os outros motores, e o crescimento até o teto devolve a largura exata). min-width 0 é o minmax(0, …) da grade de antes. */ flex: 1 1 calc((100% - (var(--nav-colunas) - 1) * var(--nav-vao)) / var(--nav-colunas) - 1px); max-width: calc((100% - (var(--nav-colunas) - 1) * var(--nav-vao)) / var(--nav-colunas)); min-width: 0; height: var(--nav-card); padding: 24px; border: var(--nav-vidro-borda); border-radius: var(--nav-raio); background: var(--nav-vidro-fundo); box-shadow: var(--nav-card-sombra); -webkit-backdrop-filter: var(--nav-vidro-filtro); backdrop-filter: var(--nav-vidro-filtro); color: hsl(var(--foreground)); text-decoration: none; /* Revelação de cima para baixo: o card já está no lugar, só o recorte abre. 300ms na curva de lá; o atraso é por card (--atraso), e só vale abrindo — fechando, o atraso volta a 0 e os quatro somem juntos. */ clip-path: inset(0 0 100% 0); transition: clip-path .3s var(--nav-curva) var(--atraso), background-color .3s ease, color .3s ease; } .navbar__item--pai.aberto .navbar__card { clip-path: inset(0); } .navbar__item--pai.aberto .navbar__card:nth-child(2) { --atraso: .05s; } .navbar__item--pai.aberto .navbar__card:nth-child(3) { --atraso: .10s; } .navbar__item--pai.aberto .navbar__card:nth-child(4) { --atraso: .15s; } .navbar__card-nome { font-family: var(--font-display); font-size: 22px; line-height: 1.1; letter-spacing: 1px; } .navbar__card-pe { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: auto; } .navbar__card-desc { max-width: 32ch; font-family: var(--font-body); font-size: 13px; line-height: 1.45; } .navbar__card-seta { flex: none; width: 20px; height: 20px; transition: transform .3s var(--ease, cubic-bezier(.22, 1, .36, 1)); } /* Hover: o card inteiro vira terracota com texto tinta (5,24:1), como o CTA da casa — nome, descrição e seta herdam a cor. O foco do teclado é o mesmo estado, com o contorno por DENTRO (offset negativo): por fora ele seria cortado pelo clip-path. */ .navbar__card:hover, .navbar__card:focus-visible { background: hsl(var(--terracota)); color: hsl(var(--tinta)); outline: none; } .navbar__card:focus-visible { outline: 2px solid hsl(var(--tinta)); outline-offset: -5px; } .navbar__card:hover .navbar__card-seta, .navbar__card:focus-visible .navbar__card-seta { transform: translateX(3px); } /* ============================================================ MENU DE TELA CHEIA — irmão da