/* C&S v5 · Modelo D · ATELIER Casca escura de ponta a ponta. Serifa de caráter (Spectral) contra grotesca sóbria (Schibsted Grotesk). Foto grande, tratada como peça de galeria, nunca escurecida além do teto do lei.json. Só tokens novos aqui; o reset e o reveal vêm do core. */ :root{ --d-bg:#0b0c0d; --d-bg-2:#101214; --d-bg-3:#15181a; --d-ink:#ece7df; /* bone, não branco puro */ --d-ink-2:#a7a49e; --d-ink-3:#7c8085; --d-rule:rgba(236,231,223,.14); --d-rule-2:rgba(236,231,223,.07); --d-accent:#6fa9e6; --serif:'Spectral',Georgia,'Times New Roman',serif; --grot:'Schibsted Grotesk',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif; --steel-soft:contrast(1.09) saturate(.98) brightness(.94); --g:26px; } html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ background:var(--d-bg); color:var(--d-ink); font-family:var(--grot); font-size:16px; line-height:1.6; overflow-x:hidden; } .wrap{width:min(100% - 48px,1240px);margin-inline:auto} @media (max-width:760px){ .wrap{width:min(100% - 36px,1240px)} } .skip{ position:absolute;left:-9999px;top:0;z-index:50; display:inline-flex;align-items:center;min-height:44px; background:var(--d-ink);color:var(--d-bg); padding:0 18px;font:500 13px/1 var(--grot); } .skip:focus{left:16px;top:16px} /* ---------- vocabulário tipográfico ---------- */ .lbl{ font:500 11px/1.5 var(--grot); letter-spacing:.22em;text-transform:uppercase; color:var(--d-ink-3); display:flex;align-items:flex-start;gap:14px; } .lbl::before{content:"";width:26px;height:1px;margin-top:8px;background:var(--d-rule);flex:none} h1,h2{font-family:var(--serif);font-weight:300;letter-spacing:-.015em;line-height:1.05;text-wrap:balance} h1 i,h2 i{font-style:italic;color:#cbd6dd} h1{font-size:clamp(2.7rem,6.4vw,5rem)} h2{font-size:clamp(2rem,4.1vw,3.3rem)} .lead{ font-family:var(--serif);font-weight:300; font-size:clamp(1.06rem,1.5vw,1.32rem); line-height:1.66;color:#cbc7c0;max-width:56ch; } /* 44px de altura no toque: o link mede 20px de texto, e o resto do alvo vem de padding transparente. O sublinhado continua colado no texto porque quem desenha a linha e o ::after, nao a borda do elemento. */ .lnk{ position:relative;display:inline-block; font:500 12px/1 var(--grot);letter-spacing:.14em;text-transform:uppercase; padding:16px 0 16px; transition:color var(--mov-1) var(--mov-estado); } .lnk::after{ content:"";position:absolute;left:0;right:0;bottom:16px;height:1px; background:var(--d-rule);transition:background var(--mov-1) var(--mov-estado); } .lnk:hover{color:#fff} .lnk:hover::after{background:var(--d-accent)} /* ficha de galeria */ .pl-n,.pl-l{font:500 10px/1.4 var(--grot);letter-spacing:.24em;text-transform:uppercase;color:var(--d-ink-3)} .pl-l::before{content:"";display:inline-block;width:1px;height:9px;margin-right:13px;background:var(--d-rule);vertical-align:-1px} .pl-t{font-family:var(--serif);font-weight:400;font-size:1.12rem;line-height:1.35;color:var(--d-ink)} .pl-s{font-size:.9rem;line-height:1.62;color:var(--d-ink-2);max-width:52ch} figcaption{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:13px;row-gap:9px;align-items:baseline} .pl-n{grid-row:1;grid-column:1} .pl-l{grid-row:1;grid-column:2;justify-self:start} .pl-t,.pl-s{grid-column:1/-1} .shot{display:block;position:relative;overflow:hidden;background:var(--d-bg-3)} .shot img,.shot video{width:100%;height:100%;object-fit:cover;filter:var(--steel-soft)} /* ---------- cabeçalho ---------- */ .hdr{padding:30px 0 0} .hdr .wrap{display:flex;align-items:center;gap:32px} .brand img{width:118px;height:auto} .nav{margin-left:auto;display:flex;gap:34px} /* 44px de alvo, do HIG, sem tocar na fonte nem no desenho do cabeçalho: o texto continua em 12px e o resto da caixa vem de respiro vertical transparente. No desktop o link media 77x13, que é alvo menor do que o dedo e menor do que o cursor grosso. A altura do cabeçalho não muda: .hdr .wrap já tem min-height de 104px e a logo, de 52 a 74px, é quem manda na linha. */ .nav a{font:500 12px/1 var(--grot);letter-spacing:.14em;text-transform:uppercase;color:var(--d-ink-2);transition:color var(--mov-1) var(--mov-estado); display:inline-flex;align-items:center;min-height:44px} .nav a:hover{color:var(--d-ink)} .tel{display:inline-flex;align-items:center;min-height:44px;font:500 12px/1 var(--grot);letter-spacing:.1em;padding:0 18px;border:1px solid var(--d-rule);transition:border-color var(--mov-1) var(--mov-estado)} .tel:hover{border-color:var(--d-accent)} /* Abaixo de 860px o .nav não cabe na mesma linha do logo e do telefone. Ele não sai da página por isso: desce para uma segunda linha do próprio cabeçalho, com o mesmo filete que separa as outras faixas. Sem gaveta, sem hambúrguer e sem marcação nova, porque o menu já existe no HTML de todas as páginas e o que faltava era lugar para ele. WCAG 2.4.5 Multiple Ways, nível AA: sem esta linha, /the-shop e /speed só eram alcançáveis pelo rodapé, a mais de 19.000px de rolagem na home. O único acréscimo é o respiro vertical do link, que leva o alvo de toque de 12px para 44px de altura. O gap vertical de 8px existe porque os quatro itens quebram em duas linhas em 393px: com row-gap zero as duas linhas se encostavam e a folga entre alvos vizinhos caía para 2px, o que faz errar "The shop" e cair em "Services". */ @media (max-width:860px){ .hdr .wrap{flex-wrap:wrap;gap:14px 24px} .tel{margin-left:auto} .nav{order:3;flex:0 0 100%;margin-left:0;flex-wrap:wrap;gap:8px 24px; padding-top:10px;border-top:1px solid var(--d-rule-2)} } @media (max-width:400px){ .nav{gap:8px 18px} .nav a{font-size:11px;letter-spacing:.1em} } /* ---------- barra de prova ---------- Fica logo abaixo do herói porque prova depois da terceira rolagem nao existe. Sao quatro fatos verificaveis, nao adjetivos: nota do Google, endereco, ano de operacao e perfil publico. Texto de depoimento so entra quando eu tiver as reviews escritas; numero sem texto ja vale, texto inventado nao vale nada. */ .creds{border-top:1px solid var(--d-rule-2);border-bottom:1px solid var(--d-rule-2)} .creds .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;padding:26px 0} .cred{display:flex;flex-direction:column;gap:6px} .cred b{font:500 10px/1.4 var(--grot);letter-spacing:.24em;text-transform:uppercase;color:var(--d-ink-3);font-weight:500} .cred span,.cred a{font-family:var(--serif);font-weight:400;font-size:1.02rem;line-height:1.35;color:var(--d-ink)} .cred a{display:inline-flex;align-items:center;min-height:44px;border-bottom:1px solid var(--d-rule)} .cred a:hover{border-color:var(--d-accent)} /* a nota e o unico numero da barra, entao ela e a unica coisa que pode brilhar */ .cred--rate a{gap:10px;flex-wrap:wrap;border-bottom:0} .cred--rate .stars{color:var(--d-accent);font-size:.92rem;letter-spacing:.06em;line-height:1} .cred--rate .rate{font-family:var(--serif);font-size:1.3rem;line-height:1;color:var(--d-ink)} .cred--rate .rate-n{font:500 10px/1.4 var(--grot);letter-spacing:.18em;text-transform:uppercase;color:var(--d-ink-3);border-bottom:1px solid var(--d-rule);padding-bottom:2px} .cred--rate a:hover .rate-n{border-color:var(--d-accent);color:var(--d-ink-2)} @media (max-width:860px){ .creds .wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px} } /* WCAG 1.4.10 Reflow. A 320px de largura a coluna dupla dá 130px por celula e o handle do Instagram mede 161px, o que empurrava 13px de rolagem horizontal na home inteira. Abaixo de 380px a barra vira coluna unica. O desenho de 393px para cima nao muda: la a celula ja tem folga. */ @media (max-width:380px){ .creds .wrap{grid-template-columns:minmax(0,1fr);gap:18px} .cred{min-width:0} .cred a,.cred span{overflow-wrap:anywhere} } /* ---------- depoimento ---------- Texto de review real, cortado por frase inteira, nunca reescrito. A aspa grande e serifa porque e voz de gente; o nome e a origem vao em grotesca pequena porque sao dado, nao fala. */ .says{padding:clamp(64px,8vw,110px) 0;border-top:1px solid var(--d-rule-2)} .says-head{ display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); column-gap:clamp(40px,6vw,92px);align-items:end; } .says-head .lbl{grid-column:1/-1;margin-bottom:26px} .says-head h2{margin:0;max-width:16ch} .says-rate{margin:0;justify-self:start} .says-rate a{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:44px} .says-rate .stars{color:var(--d-accent);font-size:1.02rem;letter-spacing:.06em;line-height:1} .says-rate .rate{font-family:var(--serif);font-size:1.7rem;line-height:1;color:var(--d-ink)} .says-rate .rate-n{font:500 10px/1.4 var(--grot);letter-spacing:.18em;text-transform:uppercase;color:var(--d-ink-3);border-bottom:1px solid var(--d-rule);padding-bottom:2px} .says-rate a:hover .rate-n{border-color:var(--d-accent);color:var(--d-ink-2)} .says-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px);margin-top:clamp(40px,5vw,64px)} .say{margin:0;padding-top:22px;border-top:1px solid var(--d-rule)} .say p{ font-family:var(--serif);font-weight:300;font-size:clamp(1.04rem,1.35vw,1.2rem); line-height:1.6;color:#cbc7c0;margin:0; } .say p::before{content:"\201C"} .say p::after{content:"\201D"} .say cite{ display:block;margin-top:20px;font-style:normal; font:500 11px/1.5 var(--grot);letter-spacing:.14em;text-transform:uppercase;color:var(--d-ink-2); } .say cite span{display:block;margin-top:5px;letter-spacing:.18em;color:var(--d-ink-3)} @media (max-width:900px){ .says-head{grid-template-columns:1fr;gap:24px} .says-head .lbl{margin-bottom:0} .says-grid{grid-template-columns:1fr;gap:28px} } /* ---------- chamada do meio ---------- O formulario fica no fim da pagina, a 94% da altura. Quem decide na metade precisa de um caminho ali, senao volta para a busca. */ .midcta{border-top:1px solid var(--d-rule-2)} .midcta .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:clamp(30px,4vw,46px) 0} .midcta p{font-family:var(--serif);font-weight:300;font-size:clamp(1.24rem,2.1vw,1.72rem);line-height:1.34;color:var(--d-ink);max-width:36ch} .midcta .acts{display:flex;align-items:center;gap:22px;flex-shrink:0} @media (max-width:860px){ .midcta .wrap{flex-direction:column;align-items:flex-start;gap:6px} } /* ---------- herói assimétrico ---------- */ .hero .wrap{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(36px,5.4vw,88px); align-items:start; padding:clamp(34px,4.6vw,68px) 0 clamp(72px,9vw,116px); } .hero h1{margin:26px 0 0} .hero h1 i{display:block} .hero .lead{margin-top:30px} /* A acao primaria vem primeiro e o secundario nao compete com ela. Em 15/08/2026 dois julgamentos cegos disseram, separados, que a acao de enviar desenho competia com "See the work" e que a hierarquia nao decidia por ninguem. */ .hero-links{display:flex;align-items:center;gap:26px;margin-top:36px;flex-wrap:wrap} .hero-links .lnk{font-size:12px} .hero-creed{ margin-top:18px;font-family:var(--serif);font-weight:300;font-style:italic; font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.4;color:var(--d-ink-2); } .hero-how{ margin-top:14px;font:400 12px/1.6 var(--grot);letter-spacing:.02em;color:var(--d-ink-3); } /* O h1 do heroi tem 71 caracteres desde que passou a declarar a oferta, contra 38 da frase anterior. No mesmo corpo de antes ele quebrava em seis linhas e o primeiro visor do desktop virava parede de serifada. Degrau proprio, no mesmo padrao que `.phero h1` ja usa nesta casa: corpo menor e medida em ch. So no desktop, porque abaixo de 900px o heroi ja e coluna unica e a medida de la foi verificada a 390px. `:root:root` porque base.css crava `--t-hero` com essa especificidade e empate resolveria pela ordem do arquivo. */ @media (min-width:901px){ :root:root .hero h1{font-size:clamp(2.4rem,3.6vw,3.4rem);max-width:18ch} } /* A faixa do meio nao tinha dono. A 1440 o titulo cabia em quatro linhas e a 844 tambem, entao os dois gates diziam verde, mas numa janela de 1312px, que e a de um MacBook, ele abria em cinco linhas e empurrava o botao para fora da primeira tela. Aqui ele encolhe um degrau e ganha linha mais larga, o que troca cinco linhas por quatro sem mudar nada a 1440. */ @media (min-width:901px) and (max-width:1360px){ :root:root .hero h1{font-size:clamp(2.1rem,3.05vw,3rem);max-width:23ch} } /* No celular a ordem da fonte deixaria o botao abaixo da primeira tela. Nada e escondido: o que muda e a ordem de leitura. O portao de runtime reprova se o botao sair dos primeiros 844px em 390x844. */ /* `display:contents` dissolve a caixa de texto para que a foto possa entrar no meio dela. Sem isso a foto e irma do bloco inteiro e so cabe antes de tudo ou depois de tudo, e ela caia depois de uns 950px de texto: a peca, que e a melhor prova que a pagina tem, so aparecia na terceira tela do celular. O botao continua onde estava, na primeira tela, porque o portao de runtime reprova se ele sair dos primeiros 844px em 390x844. A foto agora e a proxima coisa depois dele, e nao a ultima. */ @media (max-width:560px){ .hero .wrap{display:flex;flex-direction:column} .hero-say{display:contents} .hero .wrap .lbl{order:1} .hero .wrap h1{order:2} .hero .wrap .hero-links{order:3;flex-direction:column;align-items:stretch;gap:14px;margin-top:26px} .hero .wrap .hero-links .send{width:100%} .hero .wrap .hero-links .lnk{align-self:flex-start} .hero .wrap .hero-plate{order:4;margin-top:34px} .hero .wrap .hero-how{order:5} .hero .wrap .hero-creed{order:6} .hero .wrap .lead{order:7} .hero .wrap .hero-foot{order:8} } .hero-foot{ margin-top:clamp(44px,6vw,86px);padding-top:18px;border-top:1px solid var(--d-rule-2); font:500 10px/1.9 var(--grot);letter-spacing:.24em;text-transform:uppercase;color:var(--d-ink-3); } .hero-plate .shot{aspect-ratio:3/4} /* A caixa tinha proporcao 0,886 e a foto tem 0,75, entao o `cover` comia 15% da altura no desktop. A caixa passa a respeitar a foto, com teto de altura para o heroi nao crescer sem limite. No celular ja era 3/4 e nunca cortou. */ @media (min-width:901px){ .hero-plate .shot{aspect-ratio:3/4;height:auto;max-height:min(80vh,830px)} } .hero-plate figcaption{margin-top:20px;padding-top:16px;border-top:1px solid var(--d-rule)} @media (max-width:900px){ .hero .wrap{grid-template-columns:1fr;gap:52px;padding:52px 0 64px} .hero-plate{max-width:460px} } /* ---------- a assinatura: a mesma prateleira, lida por quem chega ---------- */ .work{padding:clamp(72px,9vw,128px) 0;border-top:1px solid var(--d-rule-2)} .work-head{ display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); column-gap:clamp(40px,6vw,92px);align-items:end; } .work-head .lbl{grid-column:1/-1;margin-bottom:26px} .work-head h2{margin:0;max-width:15ch} .work-head .lead{margin:0} @media (max-width:900px){ .work-head{grid-template-columns:1fr;gap:26px} .work-head .lbl{margin-bottom:0} } .lens-bar{display:flex;flex-wrap:wrap;gap:10px;margin:48px 0 40px} .lens-btn{ font:500 12px/1 var(--grot);letter-spacing:.12em;text-transform:uppercase; padding:15px 22px;border:1px solid var(--d-rule);color:var(--d-ink-2); transition:color var(--mov-1) var(--mov-estado),border-color var(--mov-1) var(--mov-estado),background-color var(--mov-1) var(--mov-estado); } .lens-btn:hover{color:var(--d-ink);border-color:var(--d-ink-3)} .lens-btn[aria-pressed="true"]{background:var(--d-ink);border-color:var(--d-ink);color:#0b0c0d} .hang{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-flow:row dense; align-items:start; gap:44px var(--g); transition:opacity var(--mov-1) var(--mov-estado); } .hang.is-shifting{opacity:.45} .plate figcaption{margin-top:18px} /* ordem por lente */ .hang[data-view="architect"] .plate{order:var(--oa,0)} .hang[data-view="contractor"] .plate{order:var(--oc,0)} .hang[data-view="kitchen"] .plate{order:var(--ok,0)} @media (min-width:1081px){ .hang .shot{height:min(37.5vw - 41px,460px)} .plate--h{grid-column:span 2} /* a peça de abertura da lente: largura inteira, sem corte */ .hang[data-view="architect"] .plate[data-feat~="architect"], .hang[data-view="contractor"] .plate[data-feat~="contractor"], .hang[data-view="kitchen"] .plate[data-feat~="kitchen"]{grid-column:span 3} .hang[data-view="architect"] .plate[data-feat~="architect"] .shot, .hang[data-view="contractor"] .plate[data-feat~="contractor"] .shot, .hang[data-view="kitchen"] .plate[data-feat~="kitchen"] .shot{height:auto;aspect-ratio:16/9} .hang[data-view="architect"] .plate[data-feat~="architect"] .pl-n, .hang[data-view="contractor"] .plate[data-feat~="contractor"] .pl-n, .hang[data-view="kitchen"] .plate[data-feat~="kitchen"] .pl-n{color:var(--d-accent)} .hang[data-view="architect"] .plate[data-feat~="architect"] .pl-t, .hang[data-view="contractor"] .plate[data-feat~="contractor"] .pl-t, .hang[data-view="kitchen"] .plate[data-feat~="kitchen"] .pl-t{font-size:1.5rem} } @media (max-width:1080px){ .hang{grid-template-columns:repeat(2,minmax(0,1fr))} .hang .shot{aspect-ratio:3/4} .plate--h{grid-column:span 2} .plate--h .shot{aspect-ratio:16/9} } @media (max-width:760px){ .hang{grid-template-columns:minmax(0,1fr);gap:40px} .plate--h{grid-column:span 1} .lens-btn{flex:1 1 100%;text-align:center} } /* ---------- faixa de vídeo ---------- */ .band{margin:0;padding:0} .band figure{position:relative} .band video{ width:100%;height:clamp(240px,33vw,440px);object-fit:cover;object-position:50% 42%; filter:var(--steel-filter); } .band figcaption{ position:absolute;bottom:0;left:max(24px,(100% - 1240px)/2); background:var(--d-bg); padding:20px 26px 18px; gap:8px; } @media (max-width:760px){ .band figcaption{left:18px;padding:14px 18px 13px} } /* ---------- a oficina ---------- */ .shop{padding:clamp(72px,9vw,128px) 0} .shop-say{position:relative;overflow:hidden;border:1px solid var(--d-rule-2);background:var(--d-bg-2)} /* HANDOFF.md:114 e lei escrita deste projeto: "Foto de aco nunca escurece. grayscale mata a reflexao especular. Legibilidade se resolve com bloco de cor solido atras do texto, nunca fade de quadro inteiro." A regra antiga fazia as tres coisas proibidas de uma vez (opacity .34, grayscale .35 e mask de quadro inteiro) e o resultado medido era um cinza chapado de #242729: 231 KB baixados para nao mostrar aco nenhum. Agora a foto fica visivel no tratamento padrao da casa e quem garante a leitura e o bloco solido de .shop-text, nao o apagamento da imagem. */ .shop-say .tex{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:70% 50%; opacity:.72;filter:var(--steel-soft); } .shop-text{ position:relative; padding:clamp(38px,5.4vw,76px); max-width:74ch; display:flex;flex-direction:column;gap:22px; /* o bloco solido que a lei do projeto manda usar no lugar do fade. Borda dura a direita, nao gradiente: e o mesmo recurso de placa do resto da peca. */ background:var(--d-bg-2); } .shop-text h2{margin:8px 0 6px;max-width:23ch} .shop-text p{color:#c3bfb8;max-width:62ch} .shop-pair{ display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:clamp(24px,3vw,40px); align-items:start; margin-top:clamp(28px,3.4vw,44px); } .shop-pair .shot{aspect-ratio:1600/1381} .shop-pair .shot img{filter:var(--steel-filter)} .shop-pair .shot--v{aspect-ratio:4/5} .shop-pair figcaption{margin-top:16px;padding-top:14px;border-top:1px solid var(--d-rule)} @media (max-width:860px){ .shop-pair{grid-template-columns:1fr;gap:34px} .shop-pair figure:last-child{max-width:420px} } /* ---------- cobertura ---------- */ .cover{padding:clamp(72px,9vw,128px) 0;border-top:1px solid var(--d-rule-2)} .cover .wrap{ display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); column-gap:clamp(40px,6vw,92px); } .cover .lbl{grid-row:1;grid-column:1/-1} .cover h2{grid-row:2;grid-column:1;margin:24px 0 0;max-width:15ch} .cover .note{ grid-row:2;grid-column:2;align-self:end;padding-bottom:6px; margin:0;color:var(--d-ink-2);font-size:.95rem;max-width:46ch; } /* mapa à esquerda, condados à direita */ .cover-grid{ grid-row:3;grid-column:1/-1; display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(40px,5vw,80px); margin-top:clamp(38px,4.6vw,64px); } .map-hold{position:sticky;top:clamp(24px,5vh,48px);align-self:start} .map{ aspect-ratio:1/1;width:100%; background:var(--d-bg-2); border:1px solid var(--d-rule); filter:saturate(.9); } .cover-list{display:flex;flex-direction:column;gap:clamp(26px,3vw,40px)} .county h3{ font:500 11px/1.5 var(--grot);letter-spacing:.22em;text-transform:uppercase; color:var(--d-accent); display:flex;align-items:center;gap:9px; } .county h3::before{ content:"";flex:none;width:7px;height:7px;border-radius:50%; border:1px solid var(--d-accent); } .towns{ list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 var(--g);margin-top:14px; } .towns li{ font-family:var(--serif);font-weight:300; font-size:clamp(1rem,1.35vw,1.2rem); color:var(--d-ink-2); border-top:1px solid var(--d-rule-2); padding:11px 0 13px; transition:color var(--mov-1) var(--mov-estado); } .towns li.k{color:var(--d-ink);border-top-color:var(--d-rule)} .towns li{display:flex;align-items:center;min-height:44px} .towns li.k a{display:block;width:100%} /* O li media 44px e o link dentro dele media 30: quem o dedo acerta e o link, nao o li. O respiro sai do li e entra no proprio link, entao a altura da linha continua a mesma e o alvo passa a ser a linha inteira. Medido pelo gate-runtime a 390x844, que foi onde os 24 alvos curtos apareceram. */ .towns li:has(> a){padding:0} .towns li a{display:flex;align-items:center;width:100%;min-height:44px;padding:11px 0 13px} .crumb a,.crumb [aria-current]{display:inline-flex;align-items:center;min-height:44px} .towns li[data-ll]{cursor:default} .towns li.is-lit{color:var(--d-accent)} /* marcadores */ .leaflet-container{background:var(--d-bg-2);font-family:var(--grot)} .leaflet-container a{color:var(--d-ink-3)} .leaflet-control-attribution{ background:rgba(11,12,13,.72)!important;color:var(--d-ink-3)!important; font-size:10px!important; } .leaflet-control-zoom a{ background:var(--d-bg-2)!important;color:var(--d-ink)!important; border-color:var(--d-rule)!important; /* o Leaflet entrega 30px; no celular isso e toque errado garantido */ width:44px!important;height:44px!important;line-height:44px!important; } .leaflet-control-zoom a:hover{background:var(--d-bg-3)!important} /* O Leaflet e o unico componente de terceiro da peca e chegava trazendo o que o sistema nao tem: Lucida Console 22px peso 700 (terceira familia da pagina), raio de 4px e 2px num desenho de raio zero, e filete de 2px preto contra o filete proprio de 1px. Alem disso o Leaflet 1.9 injeta uma bandeira da Ucrania na atribuicao, que era a unica ocorrencia de amarelo do site. */ .leaflet-bar,.leaflet-bar a,.leaflet-control-zoom,.leaflet-control-zoom a{ border-radius:0!important; font:500 18px/1 var(--grot)!important; } .leaflet-bar{border:1px solid var(--d-rule)!important;box-shadow:none!important} .leaflet-bar a{border-bottom-color:var(--d-rule)!important} .leaflet-attribution-flag{display:none!important} .leaflet-tooltip.pin-say{ background:var(--d-bg);border:1px solid var(--d-rule);border-radius:0; color:var(--d-ink);font:500 11px/1 var(--grot);letter-spacing:.06em; padding:6px 9px;box-shadow:none; } .leaflet-tooltip.pin-say::before{display:none} .cover-tail{ grid-row:4;grid-column:1/-1; margin-top:clamp(34px,4vw,56px);padding-top:26px; border-top:1px solid var(--d-rule-2); font-family:var(--serif);font-weight:300; font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.5; color:var(--d-ink-2);max-width:62ch; } .cover-tail .lnk{margin-left:6px} @media (max-width:980px){ .cover .wrap{grid-template-columns:minmax(0,1fr)} .cover h2{grid-row:2;grid-column:1} .cover .note{grid-row:3;grid-column:1;margin-top:26px;padding-bottom:0} .cover-grid{grid-row:4;grid-template-columns:minmax(0,1fr);row-gap:clamp(32px,5vw,48px)} .map-hold{position:static} .map{aspect-ratio:4/3} .cover-tail{grid-row:5} } @media (max-width:520px){ .towns{grid-template-columns:minmax(0,1fr)} .map{aspect-ratio:1/1} } /* ---------- contato ---------- */ .contact{padding:clamp(72px,9vw,128px) 0;border-top:1px solid var(--d-rule-2)} .contact .wrap{ display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(40px,6vw,96px);align-items:start; } .contact h2{margin:24px 0 0} .contact .lead{margin-top:24px} .direct{margin-top:32px;font:500 15px/1.9 var(--grot);letter-spacing:.01em} .direct a{border-bottom:1px solid var(--d-rule);transition:border-color var(--mov-1) var(--mov-estado)} .direct a:hover{border-color:var(--d-accent)} form{display:grid;grid-template-columns:1fr 1fr;gap:26px 24px} .f-full{grid-column:1/-1} form label{display:flex;flex-direction:column;gap:9px} .f-lbl{font:500 10px/1 var(--grot);letter-spacing:.22em;text-transform:uppercase;color:var(--d-ink-3)} form input,form textarea{ font:400 16px/1.5 var(--grot);color:var(--d-ink); background:transparent;border:0;border-bottom:1px solid var(--d-rule); padding:10px 2px 12px;width:100%; transition:border-color var(--mov-1) var(--mov-estado); } form textarea{resize:vertical;min-height:96px} form input:focus,form textarea:focus{outline:0;border-bottom-color:var(--d-accent)} form input:focus-visible,form textarea:focus-visible{outline:2px solid var(--d-accent);outline-offset:3px} .f-file input[type=file]{border:1px dashed var(--d-rule);padding:16px;font-size:13px;color:var(--d-ink-2)} .f-file input[type=file]::file-selector-button{ font:500 11px/1 var(--grot);letter-spacing:.14em;text-transform:uppercase; background:transparent;color:var(--d-ink);border:1px solid var(--d-rule); padding:9px 14px;margin-right:14px;cursor:pointer; } .send{ background:var(--d-ink);color:#0b0c0d; font:500 12px/1 var(--grot);letter-spacing:.16em;text-transform:uppercase; padding:18px 34px;transition:background-color var(--mov-1) var(--mov-estado); } .send:hover{background:#fff} /* o mesmo botao preenchido do envio, servindo tambem de acao primaria em link. Nenhum estilo novo: so o que um precisa para ocupar caixa como um