, o topo dos megas e todo elemento que gruda abaixo do cabecalho saem deles por calculo. Mexer aqui move o resto junto, e e de proposito. ══════════════════════════════════════════════════════════════════════ */ /* 09/09/2026: mais respiro vertical, a pedido. O cartao de visita media 46 + 94 e o objeto mais alto dentro da barra (logo de 58px) deixava 18px de folga em cima e embaixo; o botao de acao, 21px. Com 50 + 108 a folga passa a 25px em volta da logo e 28px em volta do botao. */ @media(min-width:961px){ :root{--agc-top:50px; --agc-bar:108px} /* 12/09/2026: o hero das paginas internas comecava ESCONDIDO atras do cabecalho. `clr-site.css` fixa `padding-top:var(--header-h,116px) !important` no

, herdado do layout antigo, e vencia o calculo por token de gt-chrome.css. Com o cabecalho em 158px, 42px do topo de cada pagina ficavam por baixo da barra. A altura volta a sair dos mesmos dois tokens; `html` na frente vence a regra antiga. */ html body.is-internal main.site-main{padding-top:calc(var(--agc-top) + var(--agc-bar))!important} } @media(min-width:961px) and (max-width:1200px){ :root{--agc-bar:98px} } /* ══════════════════════════════════════════════════════════════════════ 2 · FAIXA DO TOPO O degrau mais escuro da composicao. E ele que faz o cabecalho "flutuar" sem precisar de filete separando os dois: a diferenca de valor e a separacao. Na home em repouso ela continua transparente sobre o hero, que e regra antiga e continua valendo (a especificidade de `body.is-home:not(.agc-scrolled) .agc-topbar` e maior que a daqui). ══════════════════════════════════════════════════════════════════════ */ .agc-topbar{ background:linear-gradient(90deg,var(--jh-verde-0) 0%,#0E241D 50%,var(--jh-verde-0) 100%); border-bottom:0; } .agc-topbar .agc-tb-item{color:var(--jh-tinta-2)} .agc-topbar .agc-tb-item i{color:var(--jh-areia)} .agc-topbar a.agc-tb-item:hover{color:#fff} .agc-topbar a.agc-tb-item:hover i{color:var(--jh-areia-cl)} /* O telefone e o unico dado da faixa que alguem copia com a mao. Ele ganha peso; o resto da faixa fica em texto normal. */ .agc-topbar .agc-topbar__l .agc-tb-item:first-child{color:#EEF4EF;font-weight:600} /* Calculadoras: e o caminho que converte, entao e o unico objeto cheio da faixa. Os vizinhos (Pesquisar, Trabalhe Conosco) ficam em texto puro. */ @media(min-width:961px){ /* 44px de altura, nao 32. Ele e um botao, e o alvo de toque minimo do projeto e 44px: com 32 o auditor reprovava em 16 paginas. */ .agc-topbar .agc-tb-tools{ padding:0 15px;min-height:44px;border-radius:var(--jh-r); background:rgba(217,190,154,.14);border:1px solid rgba(217,190,154,.42); color:#F4EADC;font-weight:600; transition:background-color .18s,border-color .18s,color .18s; } .agc-topbar .agc-tb-tools:hover{background:var(--jh-areia);border-color:var(--jh-areia);color:#12261F} /* O icone da calculadora herda `.agc-topbar .agc-tb-item i{color:var(--jh-areia)}`, a MESMA areia que o hover pinta no fundo: sumia. Ele acompanha a seta. */ .agc-topbar .agc-tb-tools:hover .agc-tools__cv, .agc-topbar .agc-tb-tools:hover i:not(.agc-tools__cv), .agc-topbar .agc-tb-tools:focus-visible i{color:#12261F} /* 15px, nao 11,5. E o piso de corpo do projeto, e ele vale para o numero de calculadoras como vale para qualquer outro texto: publico 50+. A pastilha cresce junto para o numero nao encostar na borda. */ .agc-topbar .agc-tools__pill{ background:#102620;color:#F3F0EC;border:0; min-width:25px;height:25px;line-height:25px;border-radius:7px; font-size:15px;font-weight:700;text-align:center; } .agc-topbar .agc-tb-tools:hover .agc-tools__pill{background:#102620;color:#F3F0EC} } /* ── redes ──────────────────────────────────────────────────────────── Duas correcoes numa so, na ordem em que apareceram: 1. Elas estavam invisiveis. A recoloracao geral do site tinha levado o Instagram para um verde-salvia claro e o WhatsApp para um caqui, com o glifo em areia por cima: dois retangulos apagados com um desenho de 2,1:1 dentro. Ninguem via que ali havia redes. 2. As cores de marca (rosa do Instagram, verde do WhatsApp) resolviam a visibilidade e brigavam com o resto da barra: sao os dois unicos tons saturados de um cabecalho que so tem verde profundo e areia. Fica a areia CHEIA com o glifo na tinta verde, que e a mesma dupla do botao de acao da home. Pastilha contra a faixa: 8,9:1. Glifo dentro dela: 7,4:1. Visivel sem ser cor de fora da casa. ══════════════════════════════════════════════════════════════════════ */ /* 16/09/2026: raio quadrado (var(--jh-r), 10px) e so 10px de vao faziam as duas pastilhas lerem como uma peca so grudada, ainda mais coladas no celular onde encostam na borda da tela. Redondas, como o resto dos botoes do site desde 14/09, e com mais ar entre elas: agora cada uma respira e lê como icone proprio, nao como metade de um bloco. */ .agc-topbar__soc{gap:14px} .agc-topbar__soc a, .agc-topbar__soc a:has(i){ width:34px;height:34px;min-width:34px;min-height:34px; border:0;border-radius:50%; background:var(--jh-areia);color:#0E241D;font-size:15px; box-shadow:0 1px 2px rgba(5,14,11,.45); transition:background-color .18s,color .18s,transform .18s,box-shadow .18s; } /* uma rede por vez nao precisa de cor propria: o glifo ja diz qual e. As regras de marca de gt-chrome.css sao desligadas aqui de proposito. */ .agc-topbar__soc a:has(.fa-instagram), .agc-topbar__soc a:has(.fa-whatsapp), .agc-topbar__soc a:has(.fa-facebook), .agc-topbar__soc a:has(.fa-facebook-f), .agc-topbar__soc a:has(.fa-linkedin), .agc-topbar__soc a:has(.fa-linkedin-in), .agc-topbar__soc a:has(.fa-youtube), .agc-topbar__soc a:has(.fa-google), .agc-topbar__soc a:has(.fa-x-twitter), .agc-topbar__soc a:has(.fa-twitter), .agc-topbar__soc a:has(.fa-tiktok){background:var(--jh-areia);border:0;color:#0E241D} .agc-topbar__soc a:hover, .agc-topbar__soc a:has(i):hover{ background:var(--jh-areia-cl);color:#0E241D;transform:translateY(-1px); box-shadow:0 6px 14px -6px rgba(5,14,11,.9); } /* ══════════════════════════════════════════════════════════════════════ 3 · O CABECALHO Sem borda e sem filete, nos dois estados. A profundidade vem de uma sombra difusa (sombra, nao risco) e do degrau de valor contra a faixa. O `!important` aqui nao e preguica: `gt-chrome.css` declara o fundo deste elemento com `!important` em tres blocos diferentes (home, rolado e celular). Para desligar um `!important` so existe outro. ══════════════════════════════════════════════════════════════════════ */ @media(min-width:961px){ .agc-header, body.is-home .agc-header, body.is-home:not(.agc-scrolled) .agc-header, body.is-home.agc-scrolled .agc-header, body.agc-scrolled .agc-header{ background: radial-gradient(128% 190% at 91% 48%, rgba(191,172,155,.18) 0%, rgba(191,172,155,0) 58%), radial-gradient(118% 200% at 9% 52%, rgba(122,180,152,.15) 0%, rgba(122,180,152,0) 62%), linear-gradient(104deg,var(--jh-verde-1) 0%,var(--jh-verde-2) 32%,var(--jh-verde-3) 54%,var(--jh-verde-2) 78%,var(--jh-verde-1) 100%) !important; border-bottom:0 !important; box-shadow:0 22px 46px -30px rgba(5,14,11,.95) !important; } body.agc-scrolled .agc-header, body.is-home.agc-scrolled .agc-header{ box-shadow:0 26px 54px -30px rgba(5,14,11,1) !important; } /* Condensa ao rolar, mas SEM esmagar: em 74px a logo de 46px e o botao de 52px encostavam nas bordas (11px de folga no botao, e o miolo do cabecalho fixo parecia sem padding nenhum). Em 90px sobram 22px em volta da logo e 19px em volta do botao, que e o mesmo respiro da barra em repouso, so um degrau menor. O padding do

nao muda junto (ele sai do token, nao da altura corrente), entao nada salta quando a barra encolhe. */ body.agc-scrolled .agc-bar{height:90px} } /* ══════════════════════════════════════════════════════════════════════ 4 · SIMETRIA DA BARRA Era `auto 1fr auto`: o menu ficava centrado no espaco que sobrava, e como a logo e estreita e o par microfone + botao e largo, esse "centro" caia sempre a esquerda do centro real. Com dois flancos de largura minima igual, o menu passa a ser centrado no eixo da barra e os dois lados pesam o mesmo. ══════════════════════════════════════════════════════════════════════ */ @media(min-width:961px){ .agc-bar{ grid-template-columns:auto minmax(0,1fr) auto; column-gap:clamp(20px,2.4vw,44px); transition:height .3s var(--agc-ease); } } /* O eixo so fecha quando ha folga para os dois flancos. Abaixo de 1240px a regra acima e que vale (ver o degrau de 961-1200 mais abaixo). */ @media(min-width:1240px){ .agc-bar{grid-template-columns:minmax(232px,1fr) auto minmax(232px,1fr)} } @media(min-width:961px){ .agc-logo{justify-self:start} .agc-nav{justify-self:center} .agc-act{justify-self:end} } /* ── logo ───────────────────────────────────────────────────────────── A troca para a versao positiva ao rolar existia porque o cabecalho ficava creme. Ele nao fica mais: a negativa vale nos dois estados. */ @media(min-width:961px){ /* 64 em repouso e 52 ao rolar (era 58 e 46), a pedido. A barra tem 108px em repouso e 90px depois de rolar: 64 + 52 continuam com folga nos dois estados, entao a altura da barra nao muda. Se alguem subir mais, e a altura que cede primeiro, nao a logo. */ .agc-logo img{height:64px} body.agc-scrolled .agc-logo img{height:52px} body.agc-scrolled .agc-header .agc-logo img.agc-logo__neg{display:block} body.agc-scrolled .agc-header .agc-logo img.agc-logo__pos{display:none} body.agc-scrolled .agc-header .agc-logo img{filter:drop-shadow(0 6px 16px rgba(0,0,0,.32))} body.agc-scrolled .agc-header .agc-logo__txt{color:#fff} } /* ── menu ───────────────────────────────────────────────────────────── Em repouso: 9,2:1 sobre o ponto mais claro do fundo. Ativo e hover: areia clara com sublinhado terracota. O sublinhado antigo era um risco de 2px em bege sobre verde, quase invisivel. */ @media(min-width:961px){ .agc-header .agc-nav__list{gap:2px} .agc-header .agc-nav__list>li>a, .agc-header .agc-nav__drop, body.agc-scrolled .agc-header .agc-nav__list>li>a, body.agc-scrolled .agc-header .agc-nav__drop, body.is-home .agc-header .agc-nav__list>li>a, body.is-home .agc-header .agc-nav__list>li>button{ color:var(--jh-tinta); /* 15px, e nao 14. O pedido foi baixar 2px de 16; 15 e o PISO de tipo do site (publico de 50+ e 60+) e o `audit-paginas-taveira.php` reprova qualquer rotulo abaixo disso. Item de menu e exatamente o que a regra protege: texto que a pessoa le para decidir para onde ir. */ font-size:15px;font-weight:600;letter-spacing:0; padding:13px 15px;border-radius:var(--jh-r); transition:color .18s,background-color .18s; } .agc-header .agc-nav__list>li>a:hover, .agc-header .agc-nav__drop:hover, .agc-header .agc-has-mega:hover .agc-nav__drop, body.agc-scrolled .agc-header .agc-nav__list>li>a:hover, body.agc-scrolled .agc-header .agc-nav__drop:hover, body.is-home .agc-header .agc-nav__list>li>a:hover{ color:var(--jh-areia-cl); background:rgba(233,240,234,.07); } .agc-header .agc-nav__list>li>a.active, body.agc-scrolled .agc-header .agc-nav__list>li>a.active{color:var(--jh-areia-cl)} .agc-header .agc-nav__list>li>a::after, .agc-header .agc-nav__drop::after, body.is-home .agc-header .agc-nav__list>li>a::after, body.is-home .agc-header .agc-nav__drop::after{ left:15px;right:15px;bottom:7px;height:3px;border-radius:3px; background:linear-gradient(90deg,var(--jh-acao-cl),var(--jh-acao-d)); } .agc-header .agc-caret{opacity:.85} } /* ══════════════════════════════════════════════════════════════════════ 5 · ACOES Um acento cheio por barra. O botao e terracota, o microfone e contorno areia: hierarquia clara em vez de dois beges do mesmo valor brigando. ══════════════════════════════════════════════════════════════════════ */ @media(min-width:961px){ .agc-header .agc-act{gap:12px} /* 14/09/2026: O MESMO BOTAO EM TODAS AS PAGINAS, a pedido. A home ganhava areia chapada com tinta verde profunda (`body.is-home .agc-cta` no gt-chrome.css, com !important), e as internas caiam neste degrade areia com texto BRANCO: duas aparencias para o mesmo botao, e branco sobre areia clara mal passa de 2:1. Agora as internas repetem exatamente a home: #BFAC9B com #122720 (5,64:1), hover #D4C7B8, mesma sombra. */ .agc-header .agc-cta, .agc-header .agc-cta--wa{ min-height:52px;padding:0 26px;border-radius:var(--jh-r); font-size:16px;font-weight:700;letter-spacing:0; background:#BFAC9B; color:#122720;border:0; box-shadow:0 14px 30px -16px rgba(10,18,15,.9); transition:background .18s,box-shadow .2s,transform .2s var(--agc-ease); } .agc-header .agc-cta:hover, .agc-header .agc-cta--wa:hover{ background:#D4C7B8; color:#122720;filter:none;transform:translateY(-1px); box-shadow:0 3px 6px rgba(8,20,16,.3),0 20px 38px -16px rgba(16,38,32,.55); } .agc-header .agc-cta i{font-size:17px} /* MICROFONE: a mesma pastilha do contador de calculadoras, a pedido. Era contorno de areia a 10%, quase invisivel sobre o verde. Agora usa exatamente o preenchimento do `.agc-tools__pill` da barra de cima (terracota cheia, glifo branco), para as duas pecas lerem como o mesmo sistema. O botao de acao ao lado continua se distinguindo por ser DEGRADE e ter rotulo: cheio chapado contra degrade com texto. */ /* 14/09/2026: VERMELHO DE GRAVAR, a pedido. O botao e o "gravar um audio", e vermelho e o sinal universal de rec. Nao e o vermelho puro de alerta: e um tijolo quente (#B5462E, matiz 11 graus) puxado da terracota da marca (#B85713, 25 graus), para ler como "gravar" sem sair da paleta. Glifo branco sobre ele: 5,4:1. O anel fino em volta e o que da a cara de botao de rec em vez de mais uma pastilha solida. */ .agc-header .agc-mic, body.agc-scrolled:not(.is-home) .agc-header .agc-mic{ width:52px;height:52px;border-radius:50%;font-size:19px; background:#B5462E; border:0; color:#fff; box-shadow:0 0 0 4px rgba(181,70,46,.22),0 12px 24px -14px rgba(120,36,18,.8); transition:background .2s,box-shadow .2s; } .agc-header .agc-mic:hover, body.agc-scrolled:not(.is-home) .agc-header .agc-mic:hover{ background:#963721;border:0;color:#fff;transform:none; box-shadow:0 0 0 6px rgba(181,70,46,.28),0 16px 30px -14px rgba(120,36,18,.9); } } /* Barra de progresso: e ela que fecha o cabecalho por baixo, no lugar do filete. Colorida, porque a unica linha aceitavel ali e uma que significa alguma coisa. */ .agc-progress{ height:4px;bottom:0;border-radius:0 3px 3px 0; background:linear-gradient(90deg,var(--jh-acao-d) 0%,var(--jh-acao) 55%,var(--jh-acao-cl) 100%); box-shadow:0 0 14px rgba(191,172,155,.55); } /* ══════════════════════════════════════════════════════════════════════ 5b · DEGRAUS DE LARGURA Ficam DEPOIS das secoes 4 e 5 de proposito: mesma especificidade, entao quem vem por ultimo ganha. Colocados antes, o tamanho base do botao e do microfone reescrevia o degrau e a barra voltava a transbordar em 970 e 1024. ══════════════════════════════════════════════════════════════════════ */ /* Entre 961 e 1360px o bloco da direita (microfone + botao) e mais largo que a fatia que lhe cabe, e como o menu fica travado no centro real da barra o aperto sobra todo de um lado so: o vao entre menu e acoes media 11px. O menu encolhe um degrau para devolver o respiro sem sair do centro. */ @media(min-width:961px) and (max-width:1360px){ .agc-bar{column-gap:clamp(16px,1.6vw,30px)} .agc-header .agc-nav__list>li>a, .agc-header .agc-nav__drop{padding:13px 11px} .agc-header .agc-nav__list>li>a::after, .agc-header .agc-nav__drop::after{left:11px;right:11px} } /* Segundo degrau, de 961 a 1200px. Sem ele, em 1024 o bloco da direita entrava 76px por cima do menu e o botao cobria o item "Contato": medido, nao suposto. Tudo encolhe um grau de uma vez (logo, menu, microfone e botao), porque encolher so um deles empurra o problema para o vizinho. O piso de 15px do projeto continua respeitado. */ @media(min-width:961px) and (max-width:1200px){ /* Aqui o eixo perfeito cede. Com flancos de largura minima igual, quando falta espaco o bloco da direita transborda a propria coluna e entra por cima do menu: media -85px em 970, -58 em 1024, -20 em 1100. Voltando a `auto 1fr auto` o menu se centra no espaco que sobra de verdade e nada se sobrepoe. Simetria de eixo e luxo de tela larga; a partir de 1240px ela volta. */ .agc-bar{padding:0 24px;column-gap:14px;grid-template-columns:auto minmax(0,1fr) auto} .agc-logo img{height:44px} body.agc-scrolled .agc-logo img{height:40px} .agc-header .agc-nav__list>li>a, .agc-header .agc-nav__drop{font-size:15px;padding:12px 8px} .agc-header .agc-nav__list>li>a::after, .agc-header .agc-nav__drop::after{left:8px;right:8px} .agc-header .agc-act{gap:9px} .agc-header .agc-mic, body.agc-scrolled:not(.is-home) .agc-header .agc-mic{width:48px;height:48px;font-size:17px} .agc-header .agc-cta, .agc-header .agc-cta--wa{min-height:48px;padding:0 16px;font-size:15px} .agc-header .agc-cta i{font-size:15px} } /* Terceiro e ultimo degrau, de 961 a 1040px: e a faixa mais apertada em que o menu completo ainda aparece (abaixo de 961 ele vira gaveta). Sem isto o menu transbordava 16px para cada lado em 970. */ @media(min-width:961px) and (max-width:1040px){ .agc-bar{padding:0 18px;column-gap:10px} .agc-logo img{height:40px} body.agc-scrolled .agc-logo img{height:38px} .agc-header .agc-nav__list>li>a, .agc-header .agc-nav__drop{padding:12px 5px} .agc-header .agc-nav__list>li>a::after, .agc-header .agc-nav__drop::after{left:5px;right:5px} .agc-header .agc-cta, .agc-header .agc-cta--wa{padding:0 13px} } /* ══════════════════════════════════════════════════════════════════════ 6 · CELULAR Abaixo de 961px o cabecalho continua claro: a gaveta lateral e clara por pedido do cliente, e um topo escuro abrindo uma gaveta clara e um degrau que ninguem pediu. Aqui so o filete afina e a faixa ganha o mesmo verde fundo da versao grande, para os dois tamanhos falarem a mesma lingua. ══════════════════════════════════════════════════════════════════════ */ @media(max-width:960px){ .agc-topbar{background:linear-gradient(90deg,var(--jh-verde-0),#123024) !important} .agc-header, body.is-home .agc-header, body.agc-scrolled .agc-header{ border-bottom:1px solid rgba(18,39,32,.07) !important; box-shadow:0 8px 22px -14px rgba(18,39,32,.34) !important; } } /* ══════════════════════════════════════════════════════════════════════ 7 · PAINEL DAS CALCULADORAS · 10/09/2026 ────────────────────────────────────────────────────────────────────── Duas coisas, as duas pedidas de olho: 1. O PAINEL NAO FICAVA EMBAIXO DO BOTAO. Ele e `position:fixed` com `left:50%`, ou seja, centrado na JANELA: em 1440px abria de 390 a 1050 enquanto o botao "Calculadoras" vive de 1031 a 1232. Um menu que abre a 640px de distancia do proprio gatilho nao parece menu, parece caixa solta. Agora ele e `absolute` dentro do proprio item da faixa (que ja e fixa), com a borda direita alinhada a do botao. 2. AS SEIS LINHAS ABRIAM DA MESMA COR. A pastilha do icone escurecia o acento 58% com preto, e como os acentos vinham de um mapa chumbado que quase nao casava com os slugs de hoje, na pratica tudo caia no mesmo verde. Os acentos agora vem da propria ferramenta (paleta em correcoes/cores-calculadoras-jani.php) e entram inteiros: glifo branco sobre a cor cheia da entre 4,76:1 e 7,63:1, todos acima do minimo. A cor tambem tinge o fundo da linha (4%), o filete da esquerda e a pastilha do resultado, sempre como SUPERFICIE, nunca como tinta de texto: metade destes tons reprova como escrita sobre branco. ══════════════════════════════════════════════════════════════════════ */ @media(min-width:961px){ .agc-tb-item.agc-has-tools{position:relative} .agc-topbar .agc-tools{ position:absolute;top:calc(100% + 10px);left:auto;right:0; width:min(660px,calc(100vw - 36px)); max-height:calc(100vh - var(--agc-top) - 26px); transform:translateY(-10px); } .agc-has-tools:hover .agc-topbar .agc-tools, .agc-has-tools.is-open .agc-tools, .agc-has-tools:focus-within .agc-tools{transform:none} } /* a linha, agora com cor */ .agc-tools__list li + li{border-top:1px solid rgba(231,225,217,.9)} /* 12/09/2026: a cliente achou as seis linhas "grudadas". Eram 13px de respiro com titulo e descricao colados (2px). Mais ar entre as linhas, entre icone e texto e entre titulo e descricao; o painel ja tem rolagem propria (`max-height`), entao nada fica cortado em tela baixa. */ .agc-tl{padding:18px 24px;gap:18px} .agc-tl__ds{margin-top:5px} .agc-tools__bar{padding-top:18px;padding-bottom:16px} .agc-tl{ background:color-mix(in srgb,var(--c) 4%,#FFFFFF); transition:background-color .18s; } .agc-tl::before{ transform:scaleY(1);width:4px; background:color-mix(in srgb,var(--c) 42%,#FFFFFF); transition:background-color .2s; } .agc-tl:hover,.agc-tl:focus-visible{background:color-mix(in srgb,var(--c) 11%,#FFFFFF)} .agc-tl:hover::before,.agc-tl:focus-visible::before{background:var(--c)} @supports not (background:color-mix(in srgb,red 50%,#fff)){ .agc-tl{background:#FFFFFF} .agc-tl::before{background:var(--c)} } /* pastilha: a cor cheia, sem o escurecimento que igualava todas */ .agc-tl__ic{ width:40px;height:40px;border-radius:12px; background:var(--c); box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 6px 14px -8px color-mix(in srgb,var(--c) 85%,transparent); } .agc-tl__ic i{font-size:17px} /* 12/09/2026: no hover o glifo herdava o tom areia (#D9BE9A) das regras de hover dos itens da faixa do topo, porque a linha mora DENTRO desse item. Areia sobre pastilha terracota/oliva some. O glifo e sempre branco; a especificidade alta e para vencer as variantes `body.is-home`. */ .agc-topbar .agc-tools .agc-tl .agc-tl__ic i, .agc-topbar .agc-tools .agc-tl:is(:hover,:focus-visible) .agc-tl__ic i{color:#FFFFFF} /* o que a calculadora devolve: pastilha tingida pelo acento, tinta terra */ .agc-tl__sd{ background:color-mix(in srgb,var(--c) 12%,#FFFFFF); border:1px solid color-mix(in srgb,var(--c) 30%,#FFFFFF); color:#5A4A36; } /* cabecalho e rodape do painel: um fio da cor da marca no topo, para o painel deixar de ser uma caixa branca com uma borda cinza */ .agc-tools{border-color:rgba(191,172,155,.55)} .agc-tools__bar{ border-bottom:1px solid rgba(231,225,217,.9); background:linear-gradient(180deg,#FBF7F1,#FFFFFF); box-shadow:inset 0 3px 0 #BFAC9B; } .agc-tools__k{color:#6F5C44} /* ══════════════════════════════════════════════════════════════════════ 8 · CELULAR: CHROME CLARO · 10/09/2026, a pedido ────────────────────────────────────────────────────────────────────── O celular estava com cabecalho VERDE ESCURO e barra de baixo CLARA: as duas pontas da tela em linguagens diferentes, com a gaveta lateral (tambem clara) abrindo por cima do escuro. Agora o chrome do celular e claro de ponta a ponta, e e o mesmo papel dos cartoes do site. A LOGO TROCA DE VERSAO. Sobre papel claro a negativa (branca) sumiria: quem entra e a positiva, que ja existe na marcacao. O FILETE DE BAIXO VOLTA, e desta vez esta certo. O que foi reclamado em 09/09 era um filete claro sobre barra ESCURA, que ali e sujeira. Sobre papel claro, uma linha de 1px na cor da areia e o que separa o cabecalho do conteudo: sem ela a pagina encosta no cabecalho. ══════════════════════════════════════════════════════════════════════ */ @media(max-width:960px){ /* faixa do topo: papel um degrau mais quente que o cabecalho, para os dois se distinguirem sem precisar de linha entre eles */ .agc-topbar, body.is-home .agc-topbar, body.is-internal .agc-topbar, body.is-home:not(.agc-scrolled) .agc-topbar{ background:#F1EBE3 !important; border-bottom:0 !important; } /* 16/09/2026: a altura da faixa (38px, gt-chrome.css) e o `top` do cabecalho logo abaixo dela NAO SAO A MESMA REGRA: sao dois numeros escritos em arquivos diferentes que so por coincidencia batiam. Subir so a altura da faixa (primeira tentativa) deixava o cabecalho por baixo dela, cortado, porque o `top` dele continuava no numero antigo. Aqui os dois mudam JUNTOS, no mesmo lugar, para nunca mais desalinhar. */ .agc-topbar{height:50px !important} /* 16/09/2026, CORRIGIDO: faltava aqui a combinacao rolada. `gt-chrome.css` tem `body.is-home.agc-scrolled .agc-header{top:38px !important}` em (0,3,1), mais especifico que o `body.is-home:not(.agc-scrolled)` de baixo: ao rolar a pagina em telas home, aquela regra antiga voltava a vencer e o cabecalho subia para 38px, por baixo da faixa de 50px (logo, microfone e o botao de menu cortados atras dela). As tres combinacoes de `agc-scrolled` entram aqui tambem, com a MESMA especificidade da concorrente, para o `!important` decidir por ordem de arquivo (este carrega depois). */ .agc-header, body.is-home .agc-header, body.is-home:not(.agc-scrolled) .agc-header, body.is-home.agc-scrolled .agc-header, body.is-internal.agc-scrolled .agc-header, body.agc-scrolled .agc-header{top:50px !important} /* O `body.is-home` NAO E ENFEITE (de novo). `gt-chrome.css` tem `body.is-home .agc-tb-item{color:#D4C7B8}`, que e (0,2,1) por causa do elemento `body`; o meu `.agc-topbar .agc-tb-item` para em (0,2,0) e perde, mesmo vindo depois. Resultado medido em 660px: "Chapeco-SC" em areia sobre o papel claro do celular, 1,40:1. Praticamente invisivel, e so na home: nas internas a tinta ja era escura. */ .agc-topbar .agc-tb-item, body.is-home .agc-topbar .agc-tb-item, body.is-home .agc-topbar a.agc-tb-item:hover{color:#16261F} .agc-topbar .agc-tb-item i, body.is-home .agc-topbar .agc-tb-item i, body.is-home .agc-topbar a.agc-tb-item:hover i{color:#6F5C44} /* 16/09/2026: a faixa tinha 38px de altura fixa e `padding:0` no eixo vertical (gt-chrome.css) para caber as pastilhas de 34px com so 2px de folga de cada lado: quase colada em cima e embaixo. Aqui ela cresce e ganha padding vertical de verdade. O gap ENTRE as duas redes volta a ser menor que o do desktop (14px la e "espacado demais" aqui, a pedido); o respiro que faltava era o de cima/baixo, nao o de lado. */ /* ⚠ 16/09/2026, CORRIGIDO: a primeira tentativa daqui tinha sido `.agc-topbar{height:52px !important}`, direto na caixa. Isso criava exatamente o defeito que este arquivo ja avisa em outros pontos: `.agc-topbar` NASCE com `height:var(--agc-top)` (gt-chrome.css), e e esse MESMO token que posiciona `.agc-header` (`top:var(--agc-top)`, z-index MENOR que o da faixa) e reserva o padding do `

`. Como o `--agc-top` do celular continuava 32px em algum lugar do arquivo, a faixa cresceu para 52px mas o cabecalho abaixo dela continuou posicionado em 32px, ou seja, 20px por baixo da faixa: o cabecalho ficava PARCIALMENTE ATRAS da faixa (z-index menor), cortado por cima. A correcao certa e mudar o TOKEN, nao a caixa: tudo que depende dele (a propria faixa, o cabecalho, o padding do main, os paineis) acompanha sozinho. */ :root{--agc-top:50px} .agc-topbar__soc{gap:6px !important} /* 16/09/2026: so aqui no celular a faixa do topo vira clara (#F1EBE3, algumas linhas acima). A pastilha areia com glifo verde que funciona sobre o gradiente ESCURO do desktop (8,9:1 medido, ver o comentario onde ela nasce) quase some sobre esse papel claro: virou verde cheio, a pedido; o glifo trocou de creme para o mesmo dourado (`--jh-areia`) do desktop, pedido do dia seguinte (16/09 tarde), contraste 7,1:1 sobre o verde `#102620`. O desktop nao muda. */ .agc-topbar__soc a, .agc-topbar__soc a:has(i), .agc-topbar__soc a:has(.fa-instagram), .agc-topbar__soc a:has(.fa-whatsapp){background:#102620 !important;color:var(--jh-areia) !important} .agc-topbar__soc a:hover, .agc-topbar__soc a:has(i):hover{background:var(--jh-verde-3) !important;color:#F3F0EC !important} /* 16/09/2026: logo um pouco maior no celular, a pedido. Era 40px (gt-chrome.css), o mesmo valor tanto parada quanto rolada. */ .agc-logo img{height:46px !important} body.agc-scrolled .agc-logo img{height:42px !important} /* 16/09/2026: negrito tirado a pedido. O telefone continua se destacando por ser o primeiro item e por herdar a tinta mais escura da faixa; nao precisa de peso 700 em cima disso. */ .agc-topbar .agc-topbar__l .agc-tb-item:first-child, body.is-home .agc-topbar .agc-topbar__l .agc-tb-item:first-child{color:#102620;font-weight:500} body.is-home .agc-topbar .agc-tb-srch{color:#16261F} body.is-home .agc-topbar .agc-tb-srch i{color:#6F5C44} /* cabecalho: papel quase branco, com o filete de areia embaixo */ .agc-header, body.is-home .agc-header, body.is-internal .agc-header, body.agc-scrolled .agc-header, body.is-home:not(.agc-scrolled) .agc-header, body.is-internal:not(.agc-scrolled) .agc-header, body.is-home.agc-scrolled .agc-header{ background:linear-gradient(180deg,#FFFDF9 0%,#FBF7F2 100%) !important; border-bottom:1px solid #E4DBCE !important; box-shadow:0 10px 22px -20px rgba(16,38,32,.45) !important; } /* A logo positiva e a que aparece sobre papel. O `body.is-home` NAO E ENFEITE no seletor: `gt-chrome.css` tem `body.is-home .agc-logo img.agc-logo__neg{display:block !important}` FORA de media query, que vale (0,3,2). Sem o `body.is-home` aqui, o meu (0,2,1) perde por especificidade mesmo com `!important` e mesmo vindo depois: entre dois `!important`, quem decide e o peso do seletor. Era por isso que a logo branca continuava sobre o papel. */ .agc-logo img.agc-logo__neg, body.is-home .agc-logo img.agc-logo__neg, body.is-internal .agc-logo img.agc-logo__neg{display:none !important} .agc-logo img.agc-logo__pos, body.is-home .agc-logo img.agc-logo__pos, body.is-internal .agc-logo img.agc-logo__pos{display:block !important} .agc-logo img,body.is-home .agc-logo img{filter:none !important} .agc-logo__txt,body.is-home .agc-logo__txt{color:#102620 !important} /* microfone: o mesmo vermelho de gravar do desktop (#B5462E, glifo branco 5,4:1). No celular o cabecalho e creme, e o tijolo sobre creme continua lendo como "rec" sem precisar de anel. */ /* `body:not(.is-home)` na lista: sem ele, nas paginas internas paradas, `tv-chrome.css` (`body:not(.is-home) .agc-mic`, 0,2,1) vencia o `.agc-header .agc-mic` (0,2,0) daqui e o botao virava cinza. */ .agc-header .agc-mic, body:not(.is-home) .agc-header .agc-mic, body.agc-scrolled .agc-header .agc-mic, body.agc-scrolled:not(.is-home) .agc-header .agc-mic{ background:#B5462E; border:0; border-radius:50%; color:#fff; box-shadow:0 6px 14px -8px rgba(120,36,18,.7); } /* Botao do menu: cartao branco com as barras na tinta verde profunda. Mesma historia da logo, e um degrau pior. A regra do `gt-chrome.css` e uma LISTA: `body.is-home .agc-burger, body.is-home:not(.agc-scrolled) .agc-burger`. Numa lista, a especificidade que vale e a do seletor MAIS ESPECIFICO que casar, e o segundo tem o `:not()`, o que leva a regra a (0,3,1). Com `body.is-home` so, eu parava em (0,2,1) e o botao continuava invisivel: barra creme sobre fundo creme, 1:1 medido. Regra pratica para este arquivo: ao brigar com o gt-chrome, leia a LISTA inteira dele, nao o primeiro seletor. */ /* 16/09/2026: era um quadrado branco chapado com filete cinza, as tres barras soltas dentro. Ganhou o mesmo acabamento do resto do cabecalho: circulo (a forma que a base do arquivo ja pede, so a cor que este bloco achatava), com um leve degrade de areia clara e um anel fino no toque/hover, igual ao microfone ao lado. */ .agc-burger, body.is-home .agc-burger, body.is-internal .agc-burger, body:not(.agc-scrolled) .agc-burger, body.is-home:not(.agc-scrolled) .agc-burger, body.is-internal:not(.agc-scrolled) .agc-burger, body.is-home.agc-scrolled .agc-burger{ background:linear-gradient(150deg,#FFFFFF 0%,#F7F1E8 100%) !important; border:1px solid #E4DBCE !important; box-shadow:0 3px 10px -4px rgba(16,38,32,.28),inset 0 1px 0 rgba(255,255,255,.9) !important; transition:border-color .18s,box-shadow .18s,transform .18s; } .agc-burger:hover, body.is-home .agc-burger:hover, body.is-internal .agc-burger:hover{ border-color:var(--jh-areia) !important; box-shadow:0 5px 14px -4px rgba(16,38,32,.32),0 0 0 4px rgba(217,190,154,.28) !important; } .agc-burger:active{transform:scale(.94)} .agc-burger span, body.is-home .agc-burger span, body.is-internal .agc-burger span, body:not(.agc-scrolled) .agc-burger span, body.is-home:not(.agc-scrolled) .agc-burger span, body.is-internal:not(.agc-scrolled) .agc-burger span, body.is-home.agc-scrolled .agc-burger span{background:#102620 !important;box-shadow:none !important} .agc-burger::after,body.is-home .agc-burger::after{display:none !important} /* 16/09/2026: pedido do cliente. As redes sociais saem da faixa do topo no celular (ja vivem no rodape e na gaveta) e no lugar delas entra uma busca de verdade: pilula escura com lupa + "Pesquisar", o mesmo acabamento das bolinhas de rede social que estavam ali. A busca flutuante que aparecia ao rolar (`.agc-msearch`, ligada por JS depois de 100px de scroll) some de vez: duas entradas de busca na mesma tela era a que sobrava. */ .agc-topbar__soc{display:none !important} .agc-topbar__r .agc-tb-srch{ display:inline-flex !important;align-items:center;gap:7px; padding:7px 14px !important;border-radius:999px; background:#102620 !important;border:1px solid rgba(255,255,255,.14); color:var(--jh-areia) !important;font-size:13px;font-weight:700; letter-spacing:.01em; } .agc-topbar__r .agc-tb-srch i{color:var(--jh-areia) !important;font-size:12.5px} .agc-topbar__r .agc-tb-srch span{display:inline !important} .agc-topbar__r .agc-tb-srch:hover, .agc-topbar__r .agc-tb-srch:active{background:var(--jh-verde-3) !important} .agc-msearch{display:none !important} } /* ══════════════════════════════════════════════════════════════════════ 9 · A BARRA FIXA DE BAIXO O desenho VERDE ESCURO que vivia aqui foi substituido pela versao clara com fio dourado, na secao 11, no fim deste arquivo. Deixar os dois era repetir o erro que quebrou a barra: tres arquivos desenhando a mesma peca, cada um por cima do outro, nenhum inteiro. ══════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════ 10 · OS SUBMENUS DA BARRA (as folhas de "Calcular" e "Áreas") ────────────────────────────────────────────────────────────────────── TRES DEFEITOS MEDIDOS, e o primeiro torna a folha inutilizavel: 1. O CONTEUDO NAO ROLAVA. A grade de "Áreas" tem 820px de cartoes dentro de uma area de 529px, e a folha estava com `overflow-y:visible`. Ou seja, 291px de areas ficavam cortadas, sem barra, sem arrasto, sem caminho nenhum ate elas. Quatro das onze areas simplesmente nao existiam para quem abria o menu no celular. Agora a grade e o unico trecho que rola, com cabecalho e rodape presos nas pontas. 2. O ICONE DE CADA LINHA ERA INVISIVEL. `.agc-sheet__ic` tinha glifo branco (`color:#FFFFFF`) sobre fundo TRANSPARENTE: onze pastilhas vazias sobre papel claro. A cor `--sc` que cada cartao ja carrega inline nunca era usada como preenchimento. Agora ela preenche a pastilha e o glifo branco volta a ter piso. 3. O TITULO DE CADA LINHA saia em `#3A6253`, o verde-salvia que a paleta da Jani nao tem mais (ver CLAUDE.md, 24/08). Passa para a tinta do site. ══════════════════════════════════════════════════════════════════════ */ @media(max-width:960px){ /* 16/09/2026: com 86vh a folha subia ate o topo da tela e cobria o cabecalho ("muito pra cima"). Agora ela pousa 14px acima do circulo do WhatsApp (14 de margem + 66 da barra + 20 do circulo + 14) e para em 60vh: o cabecalho e o comeco da pagina continuam a vista atras do veu. */ .agc-sheet-wrap{padding:0 10px calc(114px + env(safe-area-inset-bottom,0px))} .agc-sheet-wrap .agc-sheet{ display:flex;flex-direction:column; max-height:min(60vh,540px); padding:0;overflow:hidden; border-radius:22px; background:#FBF7F2; box-shadow:0 -20px 50px -18px rgba(4,12,9,.6); } .agc-sheet-wrap .agc-sheet__grip{ flex:none;margin:9px auto 2px;width:44px;height:5px;border-radius:99px; background:rgba(16,38,32,.22); } /* cabecalho e rodape presos: so a lista rola entre eles */ .agc-sheet-wrap .agc-sheet__head{ flex:none;display:flex;align-items:center;gap:12px; padding:12px 18px 14px;border-bottom:1px solid #E4DBCE;background:#FBF7F2; } .agc-sheet-wrap .agc-sheet__ttl{min-width:0;flex:1} .agc-sheet-wrap .agc-sheet__ttl b{ display:block;font-family:var(--font-h2,'DM Sans',sans-serif); font-size:19px;font-weight:700;line-height:1.2;color:#16261F; } .agc-sheet-wrap .agc-sheet__ttl small{ display:flex;align-items:center;gap:7px;margin-top:4px; font-size:15px;color:#4A5A52; } .agc-sheet-wrap .agc-sheet__ttl small i{color:#6F5C44;font-size:13px} .agc-sheet-wrap .agc-sheet__x{ flex:none;width:44px;height:44px;border-radius:12px; background:rgba(16,38,32,.06);border:1px solid #E4DBCE; color:#16261F;font-size:17px;display:grid;place-items:center;cursor:pointer; } /* ESTE e o conserto principal: a lista vira o unico trecho rolavel */ .agc-sheet-wrap .agc-sheet__grid{ flex:1 1 auto;min-height:0; overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; display:grid;grid-template-columns:minmax(0,1fr);gap:9px; padding:14px 18px 16px;margin:0; } @media(min-width:560px){ .agc-sheet-wrap .agc-sheet__grid{grid-template-columns:repeat(2,minmax(0,1fr))} } /* 16/09/2026, CORRIGIDO: min-height:64px nao alcancava nem o icone com o padding (44 + 22 = 66px), quanto mais titulo de duas linhas + descricao de duas linhas (perto de 105px). Com `align-items:center` o conteudo que nao cabia vazava para CIMA e para BAIXO do cartao em partes iguais, invadindo o cartao vizinho: e o "tudo misturando" reportado. Subindo o piso para caber o pior caso (titulo+descricao de duas linhas cada) e alinhando pelo TOPO em vez do centro, qualquer sobra futura escorre so para baixo, dentro do proprio espaco do cartao (`gap` do grid continua separando um cartao do outro). */ .agc-sheet-wrap .agc-sheet__card{ display:flex;align-items:flex-start;gap:13px; min-height:108px;padding:14px 13px; background:#FFFFFF;border:1px solid #E4DBCE;border-radius:14px; text-decoration:none; } .agc-sheet-wrap .agc-sheet__card:active{background:#F4EDE4} /* a pastilha ganha o preenchimento que faltava: sem ele o glifo branco ficava invisivel sobre o papel */ /* A cor vem de `$agcSheetPal`, em _default_header.php, JA ESCURECIDA la: nos valores crus sete das onze pastilhas reprovavam com glifo branco. O porque de ter sido resolvido no PHP e nao aqui esta comentado la. */ .agc-sheet-wrap .agc-sheet__ic{ flex:none;display:grid;place-items:center;width:44px;height:44px; border-radius:13px;color:#FFFFFF;font-size:18px; background:var(--sc,#3E705D); /* VEU INTERNO. A folha das Areas usa `$agcSheetPal`, que ja escurecei no PHP; a das Calculadoras usa o acento da PROPRIA ferramenta, que vem de `FtRegistry` e nao passa por aquela lista: duas das seis reprovavam (4,11:1 e 4,19:1 com glifo branco). Este `inset` de 999px cobre o fundo inteiro com preto a 14% e nao encosta no glifo, que e texto: escurece so a superficie. Resolve as duas fontes de cor de uma vez, sem `color-mix` (que com `var()` vira transparente quando falha) e sem `filter`, que apagaria o glifo junto com o fundo. */ box-shadow:inset 0 0 0 999px rgba(0,0,0,.14); } /* 16/09/2026: na folha de AREAS (nao na de Ferramentas, que precisa do acento de cada calculadora para se orientar em `FtRegistry`) o cliente pediu uma pastilha so, verde institucional com glifo branco, em vez das onze cores de `$agcSheetPal`: mais calmo, e o icone deixa de "competir" com o nome da area. O veu escuro acima nao se aplica aqui: o fundo ja nasce solido. */ #agcSheetAreas .agc-sheet__ic{ background:var(--jh-verde-2,#123024);color:#FFFFFF;box-shadow:none; } .agc-sheet-wrap .agc-sheet__cb{min-width:0;flex:1} .agc-sheet-wrap .agc-sheet__cb b{ display:block;font-size:16px;font-weight:700;line-height:1.25;color:#16261F; } .agc-sheet-wrap .agc-sheet__cb small{ display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden; margin-top:2px;font-size:15px;line-height:1.35;color:#4A5A52; } /* alinhado ao centro do cartao, mesmo com o cartao inteiro alinhado pelo topo (`align-items:flex-start` acima): e so ele, glifo pequeno, que ainda faz sentido centralizar. */ .agc-sheet-wrap .agc-sheet__go{flex:none;align-self:center;color:#6F5C44;font-size:14px} .agc-sheet-wrap .agc-sheet__foot{ flex:none;display:grid;grid-template-columns:1fr 1fr;gap:9px; padding:12px 18px calc(14px + env(safe-area-inset-bottom,0px)); border-top:1px solid #E4DBCE;background:#FBF7F2; } .agc-sheet-wrap .agc-sheet__btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:48px;padding:0 12px;border-radius:12px; font-size:15px;font-weight:700;text-decoration:none;text-align:center; } .agc-sheet-wrap .agc-sheet__btn--ghost{ background:rgba(16,38,32,.06);border:1px solid #E4DBCE;color:#16261F; } /* O VERDE DESTE BOTAO NAO E DAQUI. `site.css` tem uma regra `!important` que pinta qualquer `a[href*="whatsapp"][class*="btn"]` com o degrade da marca, e `.agc-sheet__btn--wa` casa com ela (tem "btn" na classe). E o tratamento padrao de botao de WhatsApp do site inteiro, entao ele fica: brigar produziria um verde diferente dos outros vinte botoes. Aqui declaro so a FORMA e a tinta do texto, que a regra de la nao toca. Ver CLAUDE.md: a lista de excecoes daquela regra e o lugar de mexer, se um dia for preciso. */ .agc-sheet-wrap .agc-sheet__btn--wa{border:0;color:#08301F;font-weight:800} .agc-sheet-wrap .agc-sheet__bd{background:rgba(6,16,12,.62)} } /* ══════════════════════════════════════════════════════════════════════ 11 · A BARRA DE BAIXO · 16/09/2026, refeita pela referencia do cliente ────────────────────────────────────────────────────────────────────── Papel areia, cinco itens (Calculadoras, Solucoes, Falar, Blog, Contato) e o WhatsApp num circulo verde que SOBE acima da barra, com halo claro. Reverte o "circulo dentro da barra" da manha de 16/09: pedido direto. ROTULO EM 11px, abaixo do piso de 15px, de proposito: "Calculadoras" mede 74px em 11px e a coluna tem uns 70px num celular de 375px. Em 15px nao cabe em largura nenhuma de celular. Aqui o rotulo reforca o icone. COLUNAS 80/70/45/70/80, nao cinco iguais: as das pontas levam os rotulos mais longos e a do meio so precisa caber "Falar" (o circulo e absoluto). Continua simetrico, o circulo fica no centro. Ativo: tinta ouro-velho #7A5A2A (5,3:1 sobre o papel) e um ponto embaixo, sem pastilha. ══════════════════════════════════════════════════════════════════════ */ @media(max-width:960px){ .agc-dock{ left:10px;right:10px; bottom:calc(env(safe-area-inset-bottom,0px) + 14px); height:66px;padding:0 4px;border-radius:22px; grid-template-columns:80fr 70fr 45fr 70fr 80fr;align-items:stretch; overflow:visible; border:1px solid #E5D8C4; background:linear-gradient(180deg,#FCF8F1 0%,#F2E8D9 100%); -webkit-backdrop-filter:none;backdrop-filter:none; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px -2px rgba(74,54,28,.12), 0 16px 34px -16px rgba(74,54,28,.45); } .agc-dock::before,.agc-dock::after{display:none} .agc-dock .agc-dock__i, .agc-dock .agc-dock__cta{ position:relative; display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px; height:100%;width:100%;min-width:0;margin:0;padding:0 0 12px;border:0;background:none; font-family:inherit;line-height:1;text-decoration:none; color:#3A342C;transform:none; transition:color .2s var(--agc-ease); -webkit-tap-highlight-color:transparent; } .agc-dock .agc-dock__i i{ display:grid;place-items:center;width:auto;height:22px; font-size:19px;line-height:1;transform:none;color:inherit;opacity:1; background:none;box-shadow:none;border-radius:0; transition:transform .16s var(--agc-ease); } .agc-dock .agc-dock__i span, .agc-dock .agc-dock__cta-l{ position:relative;z-index:1; font-size:11px;font-weight:700;letter-spacing:-.01em;line-height:1; white-space:nowrap;overflow:visible;max-width:none;color:inherit; } .agc-dock .agc-dock__i::before{content:none} .agc-dock .agc-dock__i.is-active, .agc-dock .agc-dock__i.is-open{color:#7A5A2A} .agc-dock .agc-dock__i.is-active i, .agc-dock .agc-dock__i.is-open i{background:none;box-shadow:none;color:inherit} .agc-dock .agc-dock__i::after{ content:"";display:block;position:absolute;left:50%;bottom:4px; width:4px;height:4px;border-radius:50%;background:#7A5A2A; transform:translateX(-50%);opacity:0;transition:opacity .2s var(--agc-ease); } .agc-dock .agc-dock__i.is-active::after, .agc-dock .agc-dock__i.is-open::after{opacity:1;transform:translateX(-50%)} .agc-dock .agc-dock__i:active i{transform:scale(.9)} .agc-dock .agc-dock__cta{color:#1F2A24} .agc-dock .agc-dock__cta-in{ position:absolute;left:50%;top:-20px;transform:translateX(-50%); width:58px;height:58px;margin:0;border-radius:50%; display:grid;place-items:center;font-size:27px; background:radial-gradient(circle at 34% 28%,#5BE89B 0%,#25D366 46%,#159A4B 100%); color:#fff;border:0; box-shadow: 0 0 0 6px rgba(37,211,102,.18), 0 0 0 7px rgba(255,255,255,.6), 0 12px 24px -8px rgba(21,154,75,.6), inset 0 2px 0 rgba(255,255,255,.35); transition:transform .16s var(--agc-ease); } .agc-dock .agc-dock__cta-in::after{display:none} .agc-dock .agc-dock__cta-l{color:inherit;font-weight:700} .agc-dock .agc-dock__cta:active .agc-dock__cta-in{transform:translateX(-50%) scale(.94)} body.is-home,body.is-internal{ padding-bottom:calc(100px + env(safe-area-inset-bottom,0px)); } }