/* Cabecalho do site. * * Mora fora do home.css porque nao e estilo da Home: as paginas convertidas * carregam este arquivo para receber o mesmo cabecalho sem arrastar junto as * mil e oitocentas linhas de estilo da pagina inicial. */ /* A regra acima e escopada ao main para nao mexer no cabecalho e no rodape antigos. O cabecalho agora e nosso, entao precisa da largura de volta — e com peso suficiente para vencer o .sg-container do CSS canonico, que segue carregado por causa do rodape. Nao declara display: as duas caixas ja se declaram flex nas regras proprias. */ .sg-header .sg-container { /* position: static desfaz o position: relative que o CSS canonico poe em .sg-container. Sem isto, o painel do menu no celular se posiciona contra a barra principal e nasce com a largura do container, em vez de atravessar a tela inteira. */ position: static; /* 1440px, e nao o --sg-container de 1580px do conteudo: e a largura medida no cabecalho legado, que deixa o logo comecar em 240px numa tela de 1920px. */ width: min(calc(100% - 64px), 1440px); padding: 0; margin-inline: auto; } /* O cabecalho gruda no topo e encolhe assim que a pagina rola: a faixa utilitaria recolhe, a barra principal baixa de 88px para 64px e o logo diminui. O grudar depende do html e do body usarem overflow-x: clip, e nao hidden — hidden viraria um contexto de rolagem e quebraria o sticky. */ /* Declara a propria tipografia em vez de herdar: as paginas convertidas trazem fontes proprias, e sem isto o mesmo cabecalho saia com medidas diferentes em cada rota. */ .sg-header { font-family: "Google Sans Flex", Arial, sans-serif; font-variation-settings: "wght" 440, "wdth" 100; position: sticky; top: 0; z-index: 100; background: var(--sg-white); border-bottom: 1px solid rgba(0, 0, 0, .08); transition: box-shadow .25s ease; } /* O reset de link mora no home.css, que so a Home e a /internet/ carregam. Sem ele as demais rotas ficavam com o cabecalho no estilo de link do WordPress: o site-vendor.css traz `a{color:#c36}` e `a,a:visited{text-decoration: underline}`. Fica escopado ao cabecalho de proposito — um reset global de `a` mudaria tambem o conteudo legado destas paginas. Peso (0,1,1), igual ao `a:visited` do vendor; vence porque esta folha e injetada no fim do . Precisa vir antes das regras de cor abaixo (.sg-header__utility a e .sg-header__nav), que tem o mesmo peso e so prevalecem por ordem. */ .sg-header a, .sg-header a:hover, .sg-header a:focus, .sg-header a:visited { color: inherit; text-decoration: none; } /* Fundo transparente e tipografia de 14px em cinza medio: os valores medidos no cabecalho legado, que nao usava faixa colorida. */ .sg-header__utility { max-height: 44px; overflow: hidden; font-size: 14px; transition: max-height .25s ease, opacity .2s ease; } /* A goteira de 8px e a mesma que separava a Central do Assinante do WhatsApp quando os dois moravam no mesmo bloco. O respiro maior depois do logo vem da margem dele, e nao do gap, senao o WhatsApp descolaria da Central. */ .sg-header__main { display: flex; align-items: center; min-height: 68px; gap: 8px; transition: min-height .25s ease; } /* Os links institucionais aparecem na faixa utilitaria no desktop; esta copia dentro do painel serve so ao celular, onde a faixa perde a barra. */ .sg-header__secondary { display: none; } /* Contornado, nao preenchido, com raio de 8px: e assim no cabecalho legado. */ /* Segue o mesmo sistema do "Conheca os planos": preenchido de laranja, com o halo do .sg-button--glow no hover. As variaveis vem daquele modificador; aqui so o tamanho muda, mais baixo do que a versao contornada anterior. */ /* Dois niveis de seletor porque o CSS legado declara .sg-button com peso maior; com uma classe so, a altura e o recheio antigos venciam. */ /* !important porque as paginas convertidas trazem folhas proprias, carregadas depois desta, que recolorem os links do cabecalho. Sem isto o texto do botao voltava ao cinza escuro do WordPress em /unidades/ e /telefonia-fixa/. */ .sg-header .sg-button.sg-header__subscriber, .sg-header .sg-button.sg-header__subscriber:hover, .sg-header .sg-button.sg-header__subscriber:focus, .sg-header .sg-button.sg-header__subscriber:active { color: var(--sg-white) !important; } .sg-header .sg-header__subscriber { --sg-glow-surface: #ff8000; --sg-glow-radius: 10px; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 26px; color: var(--sg-white); font-size: 15px; font-variation-settings: "wght" 600; } /* No legado o WhatsApp e um anel verde com o icone vazado, e nao um circulo preenchido. Dois niveis de seletor porque o WhatsApp e um : com uma classe so, o reset de link acima (peso (0,1,1)) apagaria o verde. */ .sg-header .sg-header__whatsapp { display: grid; width: 50px; min-width: 50px; min-height: 50px; place-items: center; border: 2px solid var(--sg-green-button); border-radius: 50%; background: transparent; color: var(--sg-green-button); transition: background-color .2s ease, color .2s ease; } /* O site-vendor.css pinta todo botao de #c36 no hover e no foco, e o sanduiche ficava rosa assim que era clicado. O seletor de atributo [type=button]:hover pesa (0,2,0), igual a este — quem vence e o ultimo, e o home.css carrega depois. */ .sg-header__toggle:hover, .sg-header__toggle:focus, .sg-header__toggle:active { background: #f2f2f2; color: var(--sg-black); } /* A trava de rolagem precisa morar no , e nao no . * * O home.css poe `overflow-x: clip` no html, entao o html deixa de ser * "visible" e e ele — nao o body — quem propaga a rolagem para a viewport. * Com isso, `body { overflow: hidden }` fazia duas coisas erradas de uma vez: * nao travava a pagina, que continuava rolando pelo html, e transformava o * body num container de rolagem proprio. O cabecalho e sticky, e sticky se * prende ao container de rolagem mais proximo: preso ao body, ele subia junto * com a pagina e sumia assim que o dedo arrastava com o menu aberto. * * No html o overflow propaga para a viewport, o proprio html volta a ser * visible e o sticky continua ancorado nela. */ html.sg-menu-open { overflow: hidden; } .sg-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .sg-header__utility a { color: #555; font-variation-settings: "wght" 500; } /* O divisor entre os dois links institucionais tambem vem do legado. */ .sg-header__utility nav a + a::before { content: "|"; margin-inline-end: 24px; color: #c9c9c9; } .sg-header--compact { box-shadow: 0 6px 20px rgba(0, 0, 0, .08); } .sg-header--compact .sg-header__utility { max-height: 0; opacity: 0; } .sg-header--compact .sg-header__main { min-height: 56px; } .sg-header--compact .sg-header__brand img { width: 112px; } .sg-header__utility-inner, .sg-header__utility nav { display: flex; justify-content: flex-end; align-items: center; min-height: 32px; gap: 24px; } .sg-header__utility a:hover, .sg-header__utility a:focus-visible { text-decoration: underline; } .sg-header__brand { flex: 0 0 auto; margin-inline-end: 26px; } .sg-header__brand img { width: 143px; height: auto; transition: width .25s ease; } .sg-header__quick { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; } .sg-header__navigation { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 28px; } .sg-header__nav { display: flex; align-items: center; justify-content: center; gap: 0; margin-inline: auto; color: #202124; font-size: 16px; font-variation-settings: "wght" 400; } .sg-header__nav a { position: relative; padding: 14px 20px; } .sg-header__nav a::after { content: ""; position: absolute; right: 20px; bottom: 7px; left: 20px; height: 2px; border-radius: 2px; background: var(--sg-orange); transform: scaleX(0); transform-origin: right; transition: transform .22s ease; } .sg-header__nav a:hover::after, .sg-header__nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; } .sg-header__actions { display: flex; align-items: stretch; gap: 8px; } .sg-header .sg-header__whatsapp:hover, .sg-header .sg-header__whatsapp:focus-visible { background: var(--sg-green-button); color: var(--sg-white); } .sg-header__whatsapp svg { width: 23px; fill: currentColor; } /* O padding vem zerado de proposito: o site-vendor.css da .5rem 1rem a todo