/* ============================================================ PALMASNET — Design System HTML/CSS/JS estático · tema escuro · azul-marinho + amarelo ============================================================ */ /* ---------- Fontes self-hosted ---------- */ @font-face { font-family: "Sora"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/sora-700.woff2") format("woff2"); } @font-face { font-family: "Sora"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/sora-800.woff2") format("woff2"); } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/manrope-400.woff2") format("woff2"); } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/manrope-500.woff2") format("woff2"); } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/manrope-700.woff2") format("woff2"); } /* ---------- Tokens ---------- */ :root { --navy-900: #0f1836; --navy-800: #16224e; --navy-700: #24346f; --navy-600: #2e3f82; --navy-card: #182449; --cyan: #22c1e6; --cyan-soft: #6fdcf5; --yellow: #f9b233; --yellow-600: #f59e0b; --white: #ffffff; --ink: #e8ecf8; --muted: #a9b3d4; --muted-2: #7f8bb4; --line: rgba(255,255,255,.10); --line-strong: rgba(255,255,255,.18); --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; --shadow: 0 10px 30px rgba(0,0,0,.35); --shadow-lg: 0 24px 60px rgba(0,0,0,.45); --glow-yellow: 0 8px 30px rgba(249,178,51,.35); --container: 1180px; --gap: clamp(1rem, 3vw, 2rem); --font-display: "Sora", ui-sans-serif, system-ui, sans-serif; --font-body: "Manrope", ui-sans-serif, system-ui, sans-serif; --header-h: 76px; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 92%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } body { font-family: var(--font-body); color: var(--ink); background: var(--navy-900); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* atmosfera de fundo */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 50% at 85% -5%, rgba(34,193,230,.14), transparent 60%), radial-gradient(50% 40% at 5% 10%, rgba(249,178,51,.10), transparent 60%), linear-gradient(180deg, var(--navy-900), #0b1128 60%, var(--navy-900)); } /* O atributo hidden e aplicado pelo navegador como display:none, mas qualquer display declarado no CSS o vence — e .btn usa inline-flex. Sem isto, um botao com [hidden] continua visivel. */ [hidden] { display: none !important; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } ul { list-style: none; padding: 0; } :focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 6px; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; color: var(--white); } h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); } h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; } p { color: var(--muted); } /* ---------- Layout ---------- */ .container { width: min(100% - 2.4rem, var(--container)); margin-inline: auto; } .section { padding: clamp(2.25rem, 5.5vw, 4rem) 0; } .section--tight { padding: clamp(2.5rem, 5vw, 3.5rem) 0; } .eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan-soft); padding: .4rem .8rem; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(34,193,230,.06); } .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: var(--glow-yellow); } .section__head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); } /* O selo e o título são irmãos, e o reset do projeto zera a margem de todo mundo — a pílula ficava encostada na primeira linha do título. Vale para os onze selos do site; onde o HTML já traz um margin-top próprio, ele continua mandando. */ .eyebrow + h2 { margin-top: .75rem; } .section__head p { margin-top: .9rem; font-size: 1.05rem; } .text-center { text-align: center; } .text-center .section__head { margin-inline: auto; } /* ---------- Botões ---------- */ .btn { --bg: var(--navy-700); --fg: var(--white); --bd: transparent; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .72rem 1.2rem; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: .95rem; letter-spacing: -.01em; background: var(--bg); color: var(--fg); border: 1.5px solid var(--bd); transition: transform .18s ease, box-shadow .25s ease, background .2s ease, border-color .2s ease; will-change: transform; } .btn svg { width: 1.15em; height: 1.15em; } .btn:hover { transform: translateY(-2px); } .btn--yellow { --bg: var(--yellow); --fg: #201400; box-shadow: var(--glow-yellow); } .btn--yellow:hover { --bg: #ffc24d; box-shadow: 0 12px 36px rgba(249,178,51,.5); } .btn--cyan { --bg: var(--cyan); --fg: #04202a; } .btn--cyan:hover { --bg: var(--cyan-soft); } .btn--outline { --bg: transparent; --fg: var(--white); --bd: var(--line-strong); } .btn--outline:hover { --bd: var(--cyan); background: rgba(34,193,230,.08); } .btn--ghost { --bg: rgba(255,255,255,.05); --fg: var(--white); --bd: var(--line); } .btn--ghost:hover { --bd: var(--line-strong); } .btn--lg { padding: .85rem 1.5rem; font-size: .96rem; } .btn--block { width: 100%; } .btn--wa { --bg: #25d366; --fg: #04220f; } .btn--wa:hover { --bg: #33e277; } /* ---------- Header ---------- */ .header { position: sticky; top: 0; z-index: 60; background: rgba(11,17,40,.72); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); transition: padding .25s ease, background .25s ease; } .header__inner { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); transition: min-height .25s ease; } .header.is-scrolled { background: rgba(11,17,40,.92); } .header.is-scrolled .header__inner { min-height: 62px; } /* A marca e uma peca so, do arquivo oficial. Antes o site montava a logo com o simbolo de um lado e a palavra escrita em HTML na fonte Sora, que nao e a tipografia da marca — o desenho ficava parecido, nao igual. A versao usada tem "Palmas" em branco, entao vale nos tres lugares onde ela aparece, todos sobre fundo escuro: cabecalho, rodape e tela de entrada. Numa area clara seria preciso a versao colorida. */ .logo { display: inline-flex; align-items: center; flex: none; } .logo__img { height: 34px; width: auto; display: block; } .footer .logo__img { height: 44px; } /* Fatura Facil no cabecalho do celular, ao lado da marca. No desktop ele ja esta no menu; abaixo de 980px o menu vira sanfona e o atalho mais procurado por quem ja e cliente — 2a via, Pix, desbloqueio — ficava a dois toques. Aqui fica a um. Some acima de 980px para nao repetir o item do menu. */ .header__ff { display: none; } @media (max-width: 979px) { .header__ff { display: inline-flex; align-items: center; gap: .4rem; flex: none; min-height: 40px; padding: .45rem .7rem; border-radius: 999px; background: var(--yellow); color: #0f1836; font-weight: 800; font-size: .8rem; white-space: nowrap; } .header__ff svg { width: 16px; height: 16px; flex: none; } .header__ff:hover { background: #ffc456; } /* a marca cede espaco: com ela em 34px o conjunto estoura em 360px */ .header .logo__img { height: 30px; } } /* entre 361 e 420px o rotulo cabe se a marca e a fonte cederem um pouco */ @media (max-width: 420px) { .header .logo__img { height: 26px; } .header__ff { font-size: .72rem; padding: .4rem .6rem; gap: .3rem; } } /* abaixo disso nao ha espaco para o texto: fica so o icone, com o nome no aria-label. Medido: em 360px o conjunto com rotulo daria 354 de 360, e em 320 estouraria. */ @media (max-width: 360px) { .header__ff span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .header__ff { padding: .45rem; min-width: 40px; justify-content: center; } } /* telefone no header — texto, não botão, para não competir com o CTA amarelo */ .header__phone { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--ink); white-space: nowrap; transition: color .2s; } .header__phone svg { width: 18px; height: 18px; color: var(--cyan); flex: none; } .header__phone:hover { color: var(--white); } .header__phone--mobile { justify-content: center; padding: .6rem 0; } /* O header ficou bem mais leve depois que saíram os itens "Planos" e "Produtos" do menu e o botão do Fatura Fácil: agora o número inteiro cabe já a partir de 1000px, medido. As regras que escondiam o número abaixo de 1080px e o botão de contorno abaixo de 1240px saíram junto, porque deixaram de ter função. Abaixo de 980px o .header__cta inteiro continua escondido pelo menu mobile, que traz sua própria cópia do telefone. */ .nav { margin-left: auto; } .nav__list { display: flex; align-items: center; gap: .1rem; } .nav__list a { padding: .5rem .7rem; border-radius: 999px; font-weight: 500; font-size: .92rem; color: var(--ink); white-space: nowrap; transition: background .2s, color .2s; } .nav__list a:hover, .nav__list a[aria-current="page"] { background: rgba(255,255,255,.07); color: var(--white); } .nav__list a[aria-current="page"] { color: var(--yellow); } /* Fatura Facil em destaque no menu: e o atalho mais procurado por quem ja e cliente (2a via, Pix, desbloqueio) e sumia entre os outros itens. Pilula amarela de contorno — o mesmo amarelo da versao mobile do atalho, mas vazada para nao competir com o botao solido do comercial ao lado. So no desktop: ate 980px o menu vira sanfona e o atalho ja aparece amarelo ao lado da marca (.header__ff), entao la dentro ele volta a ser um item de menu comum. */ @media (min-width: 981px) { .nav__list a.nav__ff { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; font-weight: 700; color: var(--yellow); background: rgba(249,178,51,.10); border: 1px solid rgba(249,178,51,.55); transition: background .2s, color .2s, border-color .2s, box-shadow .2s; } .nav__list a.nav__ff:hover, .nav__list a.nav__ff:focus-visible { background: var(--yellow); border-color: var(--yellow); color: var(--navy-900); box-shadow: var(--glow-yellow); } } .nav__list a.nav__ff svg { width: 15px; height: 15px; flex: none; } /* na sanfona o icone sairia da margem dos outros itens do menu: some, porque o atalho amarelo ao lado da marca ja carrega o mesmo icone */ @media (max-width: 980px) { .nav__list a.nav__ff svg { display: none; } } .header__cta { display: flex; align-items: center; gap: .6rem; margin-left: .5rem; flex: none; } .header__cta .btn { padding: .6rem 1rem; font-size: .88rem; white-space: nowrap; } /* 31/07 — com a entrada de "Empresas" o menu passou a ter seis itens, e entre 980 e 1179px o telefone ao lado do botão deixava de caber: a barra passava 23px da tela e a página inteira rolava de lado. Nessa faixa o número sai do cabeçalho; ele continua no menu do celular, no rodapé e nas páginas. 08/09 — a pílula de destaque do Fatura Fácil alargou o menu em 28px e a faixa subiu: em 1180px a Empresas voltava a estourar por 10px, medido. */ @media (max-width: 1189px) { .header__cta .header__phone { display: none; } } .burger { display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid var(--line); position: relative; } .burger span, .burger span::before, .burger span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 2px; background: var(--white); transform: translate(-50%,-50%); transition: transform .25s ease, opacity .2s ease; border-radius: 2px; } .burger span::before { transform: translate(-50%,-8px); } .burger span::after { transform: translate(-50%,6px); } .nav-open .burger span { background: transparent; } .nav-open .burger span::before { transform: translate(-50%,-50%) rotate(45deg); } .nav-open .burger span::after { transform: translate(-50%,-50%) rotate(-45deg); } /* ---------- Barra de destaques (amarela) ---------- */ .hilite-bar { background: var(--yellow); border-bottom: 3px solid rgba(15,24,54,.14); } .hilite-bar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.4rem; padding: .7rem 0; } .hilite-bar__item { display: inline-flex; align-items: center; gap: .55rem; color: #17224c; font-family: var(--font-display); font-weight: 700; font-size: clamp(.8rem, 1vw, .94rem); line-height: 1.15; } .hilite-bar__item svg { width: 26px; height: 26px; color: #24346f; flex: none; } @media (max-width: 820px) { .hilite-bar__inner { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 1.5rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .hilite-bar__inner::-webkit-scrollbar { display: none; } .hilite-bar__item { flex: none; white-space: nowrap; } } /* A curva branca do pe da arte, redesenhada em CSS. Limitar a altura do hero obriga a recortar a arte, e o recorte come essa curva — a transicao para a secao seguinte virava uma linha reta. O caminho aqui nao foi desenhado a mao: foi lido da propria arte, coluna a coluna, procurando de baixo para cima o primeiro pixel branco. Por isso acompanha a curva original, inclusive o filete dourado. Como ela e um elemento a parte, vale em qualquer altura e em qualquer largura: o casal passa a ser cortado pela curva da marca, e nao por uma aresta reta. */ .hero--banner { --hero-curva: clamp(34px, 5.2vw, 88px); } .hero__banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: var(--hero-curva); pointer-events: none; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201672%20160%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C60%20L24%2C66%20L48%2C72%20L72%2C78%20L96%2C83%20L120%2C89%20L144%2C93%20L168%2C97%20L192%2C101%20L216%2C105%20L240%2C109%20L264%2C112%20L288%2C115%20L312%2C118%20L336%2C120%20L360%2C122%20L384%2C124%20L408%2C126%20L432%2C128%20L456%2C129%20L480%2C131%20L504%2C132%20L528%2C133%20L552%2C134%20L576%2C135%20L600%2C136%20L624%2C136%20L648%2C137%20L672%2C137%20L696%2C137%20L720%2C137%20L744%2C136%20L768%2C136%20L792%2C136%20L816%2C135%20L840%2C134%20L864%2C134%20L888%2C133%20L912%2C132%20L936%2C130%20L960%2C129%20L984%2C127%20L1008%2C126%20L1032%2C124%20L1056%2C122%20L1080%2C120%20L1104%2C118%20L1128%2C116%20L1152%2C113%20L1176%2C111%20L1200%2C108%20L1224%2C105%20L1248%2C102%20L1272%2C98%20L1296%2C95%20L1320%2C91%20L1344%2C87%20L1368%2C83%20L1392%2C79%20L1416%2C74%20L1440%2C69%20L1464%2C65%20L1488%2C59%20L1512%2C54%20L1536%2C48%20L1560%2C42%20L1584%2C36%20L1608%2C29%20L1632%2C22%20L1656%2C14%20L1672%2C12%20L1672%2C160%20L0%2C160%20Z%22%20fill%3D%22%23ffffff%22%2F%3E%3Cpath%20d%3D%22M0%2C60%20L24%2C66%20L48%2C72%20L72%2C78%20L96%2C83%20L120%2C89%20L144%2C93%20L168%2C97%20L192%2C101%20L216%2C105%20L240%2C109%20L264%2C112%20L288%2C115%20L312%2C118%20L336%2C120%20L360%2C122%20L384%2C124%20L408%2C126%20L432%2C128%20L456%2C129%20L480%2C131%20L504%2C132%20L528%2C133%20L552%2C134%20L576%2C135%20L600%2C136%20L624%2C136%20L648%2C137%20L672%2C137%20L696%2C137%20L720%2C137%20L744%2C136%20L768%2C136%20L792%2C136%20L816%2C135%20L840%2C134%20L864%2C134%20L888%2C133%20L912%2C132%20L936%2C130%20L960%2C129%20L984%2C127%20L1008%2C126%20L1032%2C124%20L1056%2C122%20L1080%2C120%20L1104%2C118%20L1128%2C116%20L1152%2C113%20L1176%2C111%20L1200%2C108%20L1224%2C105%20L1248%2C102%20L1272%2C98%20L1296%2C95%20L1320%2C91%20L1344%2C87%20L1368%2C83%20L1392%2C79%20L1416%2C74%20L1440%2C69%20L1464%2C65%20L1488%2C59%20L1512%2C54%20L1536%2C48%20L1560%2C42%20L1584%2C36%20L1608%2C29%20L1632%2C22%20L1656%2C14%20L1672%2C12%22%20fill%3D%22none%22%20stroke%3D%22%23f5b52a%22%20stroke-width%3D%225%22%2F%3E%3C%2Fsvg%3E") bottom center / 100% 100% no-repeat; } /* ---------- Hero: arte de fundo com o texto por cima ---------- A arte vem sem texto, com um vazio azul a esquerda reservado para ele. No celular a arte e recortada so na foto e o texto desce para o branco: num quadro estreito o vazio da esquerda nao caberia nem a primeira linha do titulo. */ .hero--banner { position: relative; background: #fff; padding: 0 0 clamp(1.6rem, 3vw, 2.4rem); } .hero__banner { position: relative; } .hero__banner img { width: 100%; height: auto; display: block; } .hero--banner .hero__copy { max-width: 760px; margin-inline: auto; text-align: center; } .hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.4rem; justify-content: center; } /* Três colunas de mesma largura, e não uma fila com espaço entre os itens. Com o flex antigo cada bloco tinha a largura do próprio texto: "6" ficava estreito, "Do provedor à sua casa" largo, e os três números caíam em posições irregulares. Em colunas iguais, com o texto centrado em cada uma e um risco separando, os números ficam alinhados e o conjunto lê como uma tabela — que é o que ele é. */ /* minmax(0,1fr) e nao 1fr: com 1fr a coluna nunca fica menor que o conteudo, e num celular de 320px a de "1000 Mega" empurrava as outras duas — 104px contra 90px. Assim as tres sao sempre iguais, e o tamanho do numero e que cede (ver o media query logo abaixo). */ .hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.8rem auto 0; padding-top: 1.5rem; border-top: 1px solid rgba(15,24,54,.14); max-width: 660px; } .hero__stat { text-align: center; padding: 0 clamp(.35rem, 1.6vw, 1rem); } .hero__stat + .hero__stat { border-left: 1px solid rgba(15,24,54,.12); } .hero__stat b { display: block; font-family: var(--font-display); font-size: clamp(1.2rem, 3vw, 1.45rem); line-height: 1.15; color: #0f1836; font-weight: 800; } /* a unidade acompanha o número na mesma linha, só menor */ .hero__stat__un { font-size: .82em; font-weight: 700; color: #55618a; margin-left: .28em; } /* só o rótulo de baixo, que é filho direto — não o "Mega", que vive no */ .hero__stat > span { display: block; margin-top: .3rem; line-height: 1.35; font-size: .9rem; color: #55618a; text-wrap: balance; } /* Num quadro de 320px cada coluna tem 94px. "1000 Mega" no tamanho normal pede 94 sozinho e o "Mega" cairia para a linha de baixo, separado do numero. Menor, cabe com folga. */ @media (max-width: 380px) { .hero__stat { padding: 0 .15rem; } .hero__stat b { font-size: 1.05rem; } .hero__stat > span { font-size: .8rem; } } .hero--banner .btn--outline { --fg: #0f1836; --bd: rgba(15,24,54,.22); } .hero--banner .btn--outline:hover { background: rgba(36,52,111,.06); --bd: #1a6d84; } /* Acima de 760px o texto entra POR CIMA da arte, no vazio azul da esquerda que ela deixa de proposito. Antes o titulo, os itens e o botao vinham desenhados dentro da imagem: nao existiam para o Google nem para leitor de tela, e o "Assinar agora" era um retangulo transparente posicionado por cima do botao pintado. Agora sao texto e botao de verdade. A largura maxima de 44% mantem a coluna dentro do vazio: o casal comeca por volta dos 47% da arte. */ @media (min-width: 761px) { /* A arte e 16:9. Solta, ela faz o hero ter a altura da largura dividida por 1.78 — 720px num notebook, 1080px num monitor grande, mais que a tela inteira. Aqui a altura e limitada e a arte e recortada. O 26% e medido, nao chutado: no arquivo de 1672x941 o topo do cabelo do homem esta em y=150. Com o enquadramento em 58%, que era o valor anterior, a janela do recorte comecava em y=244 num monitor de 1800px e cortava a cabeca dele. Com 26% a janela comeca em y=100 no pior caso (1920px) e as duas cabecas ficam inteiras de 768 a 1920px. O preco e a curva branca do rodape da arte (y=830), que fica de fora acima de 768px: a transicao para a secao seguinte vira uma linha reta. */ .hero--banner { --hero-altura: clamp(400px, 42vw, 600px); } .hero__banner { height: var(--hero-altura); } .hero__banner img { height: 100%; object-fit: cover; object-position: 50% 22%; } /* A arte de empresas é bem mais larga que a do casal — 2,89 contra 1,78, porque a curva embutida foi cortada fora do pé dela. Numa janela baixa e estreita (768x400) o recorte tira um terço da largura, e centrado ele comia o senhor da direita. Em 82% a janela vai de 27% a 94% da arte: os dois homens cabem e a coluna de texto continua sobre o azul escuro. */ .hero__slide--empresas img { object-position: 82% center; } /* Véu escuro só no lado do texto desta arte. Como ela é recortada de um jeito diferente em cada largura, o que fica atrás do título muda junto: em 820px a fachada iluminada entrava debaixo da última linha e o contraste caía para 2,90:1, abaixo do mínimo de 3:1. O véu resolve em qualquer recorte, e some antes de chegar nas pessoas. */ .hero__slide--empresas .hero__banner::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(9,16,40,.62) 0%, rgba(9,16,40,.5) 30%, rgba(9,16,40,0) 62%); } /* centraliza na ARTE, nao na secao. Com inset:0 o bloco se centrava em tudo o que a secao contem — arte, faixa de numeros e o padding de baixo — e o texto descia uns 80px. Descontar parte da curva branca sobe mais um pouco: a curva come o pe da arte, entao o centro otico fica acima do centro geometrico. */ .hero__conteudo { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--hero-altura) - var(--hero-curva) * .55); display: flex; align-items: center; pointer-events: none; } .hero__conteudo .hero__copy { pointer-events: auto; } .hero--banner .hero__copy { max-width: 44%; margin: 0; text-align: left; } .hero--banner .hero__title { color: #fff; font-size: clamp(1.7rem, 3.4vw, 3rem); line-height: 1.1; text-wrap: balance; } .hero--banner .hero__sub { margin-top: .9rem; color: #dbe2f7; font-size: clamp(.95rem, 1.25vw, 1.12rem); max-width: 34ch; } .hero__actions { justify-content: flex-start; } /* sobre o azul escuro da arte o contorno escuro sumiria */ .hero--banner .btn--outline { --fg: #fff; --bd: rgba(255,255,255,.45); } .hero--banner .btn--outline:hover { background: rgba(255,255,255,.12); --bd: #fff; } } /* telas curtas e largas: a arte fica baixa e o texto sobreposto aperta */ @media (min-width: 761px) and (max-width: 1000px) { /* 44%, nao 48%: com 48% a ultima linha do titulo encostava no braco da moca. O contraste ainda passava (6.94:1 sobre a pele), mas texto sobre rosto e pior de ler do que o numero sugere. */ .hero--banner .hero__copy { max-width: 44%; } .hero--banner .hero__title { font-size: clamp(1.4rem, 3.1vw, 2rem); } .hero--banner .hero__sub { display: none; } } @media (max-width: 760px) { /* no celular a arte vira so a foto: o vazio da esquerda nao caberia nem a primeira linha do titulo. O texto desce para o branco, abaixo dela. */ .hero__banner img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 76% center; } .hero--banner .hero__copy { padding-top: 1.4rem; } .hero--banner .hero__title { font-size: clamp(1.6rem, 7vw, 2.1rem); color: #0f1836; max-width: 20ch; margin-inline: auto; } .hero--banner .hero__sub { margin-top: .8rem; color: #55618a; } /* A arte de empresas e mais larga que a do casal (2.89 contra 1.78), entao o recorte 4:3 tira mais da metade da largura. Os dois homens ocupam de 51% a 96% da arte; com o enquadramento em 76%, que e o da outra arte, a janela terminava em 88% e cortava o ombro do senhor. Em 98% ela vai de 50% a 99% e os dois cabem inteiros. */ .hero__slide--empresas img { object-position: 98% center; } /* No celular os dois banners dividem uma altura só: a faixa cresce até o mais alto, e o de empresas é 81px mais alto por causa do selo e da terceira linha do título. Sem isto o banner da casa ficava com um vão de 89px entre os botões e as bolinhas. Centrando o texto no espaço que sobra, ele se divide em cima e embaixo e vira respiro. */ .hero__slide { display: flex; flex-direction: column; } .hero__slide .hero__conteudo { flex: 1; display: flex; align-items: center; } .hero__slide .hero__copy { width: 100%; } /* Os dois botões passam a ocupar a largura toda, um sobre o outro. Antes ficavam lado a lado enquanto coubessem — e como o rótulo muda de banner para banner ("Assinar agora" contra "Quero um plano de celular"), uns empilhavam e outros não, o que fazia a altura pular a cada troca de banner. Empilhados sempre, os quatro ficam quase da mesma altura e o vão branco do banner mais curto encolhe junto. */ .hero__actions { flex-direction: column; align-items: stretch; gap: .6rem; margin-top: 1rem; } .hero__actions .btn { width: 100%; } /* Os quatro banners dividem a altura do mais alto, então o vão branco do mais curto só encolhe se o conteúdo de TODOS encolher — mexer só no banner vazio não adiantaria nada. Daí o aperto vir daqui. */ .hero--banner { padding-bottom: 1.1rem; } .hero--banner .hero__copy { padding-top: .9rem; } .hero--banner .hero__sub { margin-top: .6rem; } } /* ---------- Hero: carrossel de dois banners ---------- A rolagem é a nativa do navegador, com encaixe: o dedo arrasta, a roda do mouse com shift funciona e o teclado também. O JavaScript só acrescenta as bolinhas e a troca automática — sem ele os dois banners continuam ali, lado a lado, roláveis. */ /* "overflow-y: hidden" NÃO é enfeite. Com só o overflow-x declarado, o navegador calcula o eixo Y como "auto" — a regra do CSS é que, se um eixo deixa de ser visible, o outro também deixa. E a faixa tem 1px de sobra na vertical: a curva do pé do banner fica em "bottom: -1px", de propósito, para não abrir um fio entre a arte e a seção seguinte. Esse 1px bastava para a faixa virar uma área rolável de verdade. Com o cursor em cima dela, a roda do mouse era engolida ali e a página não descia — a cliente encontrou isso em 31/07. Fechando o eixo Y, a roda volta a chegar na página, e o arrasto de lado continua igual. */ .hero__pista { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; } .hero__pista::-webkit-scrollbar { width: 0; height: 0; } /* 0 0 100%: cada banner ocupa a largura toda e nenhum encolhe para caber */ .hero__slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; } /* Selo do banner de empresas. Sobre a arte escura fica dourado; no celular, quando o texto desce para o branco, vira azul-marinho (ver acima). */ /* O título do banner só é

no primeiro: os outros são parágrafo, para a página não ficar com quatro títulos de nível 1 disputando o assunto. Sem declarar a fonte aqui, só o primeiro herdava a Sora 800 da regra de h1 e os outros saíam na fonte de texto, bem mais fina. */ .hero__title { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; } .hero__selo { display: inline-block; margin-bottom: .75rem; font-family: var(--font-display); font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--yellow); border: 1px solid rgba(249,178,51,.5); border-radius: 999px; padding: .3rem .85rem; } /* Depois da regra acima, nao antes: as duas tem a mesma especificidade e quem vem por ultimo vence. Estava antes e o selo continuava dourado no celular, com 1.84:1 sobre o branco. */ @media (max-width: 760px) { .hero__selo { color: #0f1836; border-color: rgba(15,24,54,.28); } } .hero__controles { display: flex; align-items: center; justify-content: center; gap: 0; margin-top: .5rem; } /* A bolinha desenhada tem 10px; o botão em volta dela tem 30x40. O mínimo da WCAG 2.5.8 é 24px, mas no celular o resto do site trabalha com 40px de altura, e um alvo de 26px no meio deles seria o mais difícil de acertar justo para quem tem menos firmeza na mão. */ .hero__dot { width: 30px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 8px; } .hero__dot i { display: block; width: 10px; height: 10px; border-radius: 50%; background: rgba(15,24,54,.24); transition: background .25s, transform .25s; } /* Azul-marinho, nao o amarelo da marca: sobre o branco o amarelo fica em 3.03:1, colado no minimo de 3:1 que a WCAG pede para um componente de interface. Aqui a bolinha ativa da 17:1. */ .hero__dot[aria-current="true"] i { background: #0f1836; transform: scale(1.25); } .hero__dot:hover i { background: rgba(15,24,54,.45); } .hero__dot:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .hero__dot i { transition: none; } } /* ---------- Ícones de sinal espalhados (decoração) ---------- Camada solta com o ícone de wi-fi da marca repetido em tamanhos e opacidades diferentes, dando profundidade às seções claras. Puramente decorativa: aria-hidden no HTML e pointer-events desligado. */ /* z-index NEGATIVO, e não zero: com zero os sinais são elemento posicionado e pintam ACIMA do texto do container, que não é posicionado — os arcos amarelos passavam por cima dos parágrafos e atrapalhavam a leitura no celular. Negativo, eles ficam acima do fundo da seção e abaixo do texto, que é o lugar de uma decoração. */ .sinais { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; } /* O PNG entra como MÁSCARA e a cor vem do fundo: assim o ícone sai no amarelo exato da marca, em vez de tingido por filtro. Como a máscara é vetorizada pelo alpha, ampliar não deixa a borda serrilhada como ampliar o PNG. */ .sinais i { position: absolute; display: block; width: var(--t, 60px); aspect-ratio: 77 / 76; background: var(--yellow); opacity: var(--o, .3); /* No celular a coluna de texto ocupa a tela inteira e não há para onde a decoração fugir: ela cai atrás do parágrafo e embaralha a leitura. Aqui ela vira um traço de fundo bem leve — continua na composição, sem disputar com o texto. */ -webkit-mask: url("../img/sinal-wifi.png") center / contain no-repeat; mask: url("../img/sinal-wifi.png") center / contain no-repeat; } @media (max-width: 760px) { .sinais i { opacity: calc(var(--o, .3) * .35); } } /* Linhas menos irregulares na coluna estreita do celular. "pretty" evita a última linha com uma palavra sozinha, e a hifenização acerta o resto: sem ela, palavras longas ("tecnologia", "humanizado") empurravam a quebra e deixavam a borda direita muito recortada — o que se lê como texto desalinhado. O idioma vem do lang="pt-BR" da página. */ @media (max-width: 760px) { .section--light p, .section--light .section__head p { text-wrap: pretty; hyphens: auto; } } /* flutuação lenta; cada ícone com fase própria para não subirem em bloco */ @media (prefers-reduced-motion: no-preference) { .sinais i { animation: sinal-flutua var(--d, 9s) ease-in-out infinite; animation-delay: var(--atraso, 0s); } } @keyframes sinal-flutua { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-14px) rotate(var(--r, 0deg)); } } /* o conteúdo fica acima dos ícones */ .section--light > .container, .section--paper > .container { position: relative; z-index: 1; } /* ---------- Tela de selecao de cidade (entrada) ---------- Escondida por padrao e so exibida com .js no : sem JavaScript ela nao teria como ser fechada e o site inteiro ficaria inacessivel. */ .porta { display: none; } /* Duas colunas: a caixa fica centralizada DENTRO da area livre da arte, e a segunda coluna e so o espaco da moca, que ocupa o terco direito da imagem. Antes a caixa era ancorada na margem esquerda com padding, o que a deixava colada na borda e com um vao enorme ate a foto. Assim ela se recentra sozinha em qualquer largura de tela. */ .js .porta { display: grid; grid-template-columns: 58% 42%; place-items: center; position: fixed; inset: 0; z-index: 200; padding: 1.2rem; overflow: auto; isolation: isolate; background: var(--navy-900); } .js .porta.is-off { display: none; } .porta__bg { position: absolute; inset: 0; z-index: -2; } .porta__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; } /* denso a esquerda, atras da caixa; abre a direita para a moca aparecer */ .porta__veu { position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 58% at 29% 50%, rgba(8,12,32,.78), rgba(8,12,32,.50) 60%, rgba(8,12,32,.18) 86%, transparent), linear-gradient(180deg, rgba(8,12,32,.42), transparent 26%, transparent 74%, rgba(8,12,32,.42)); } .porta__box { width: min(100%, 380px); text-align: center; } @media (max-width: 760px) { /* no retrato nao ha espaco lateral: a caixa volta ao centro e o enquadramento sobe para o rosto */ .js .porta { grid-template-columns: 1fr; place-items: center; padding: 1.2rem; } .porta__bg img { object-position: 74% center; } .porta__veu { background: radial-gradient(64% 46% at 50% 52%, rgba(8,12,32,.80), rgba(8,12,32,.55) 62%, rgba(8,12,32,.25) 88%, transparent), linear-gradient(180deg, rgba(8,12,32,.5), transparent 22%, transparent 74%, rgba(8,12,32,.5)); } } .porta__logo { display: inline-flex; justify-content: center; margin-bottom: 1.1rem; } .porta__logo .logo__img { height: 46px; } .porta__titulo { font-size: clamp(1.7rem, 5vw, 2.3rem); color: #fff; text-shadow: 0 2px 22px rgba(0,0,0,.5); } .porta__rotulo { display: block; margin: 1rem auto .7rem; max-width: 34ch; font-size: .95rem; line-height: 1.45; color: #e9ecf8; text-shadow: 0 1px 12px rgba(0,0,0,.5); } /* A lista suspensa age ao escolher: nao ha botao de confirmar depois dela. Por isso e um pouco maior que os selects comuns do site — ela e o botao. */ /* O campo da cidade. Precisa de dois seletores (.porta .porta__select) porque a regra base ".input, .select, .textarea" vem depois no arquivo e, com a mesma especificidade, venceria: era por isso que o campo saia escuro, com a borda azul-neon, parecendo caixa de texto em vez de lista. O alfinete a esquerda e a seta a direita dizem, sem palavra nenhuma, que ali se escolhe um lugar numa lista. */ .porta__select, .troca__select { min-height: 54px; font-weight: 600; } .porta .porta__select, .troca .troca__select { /* Volta ao fundo azul do resto do site e a borda ciano, por escolha do cliente em 29/07. O que fica da revisao e o que o campo tinha de faltar: o alfinete de localizacao, a seta de lista e o texto "Selecione sua cidade" — sem eles o campo parecia caixa de texto. Os dois desenhos ficam numa variavel porque precisam ser repetidos no :focus: a regra base ".select:focus" usa o atalho "background", que zera imagem, repeticao e posicao de uma vez, e empata em especificidade com esta — vencendo por vir depois no arquivo. */ --campo-icones: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2322c1e6%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2010c0%206-9%2012-9%2012s-9-6-9-12a9%209%200%200%201%2018%200z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20stroke%3D%22%23a9b3d4%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206l4%204%204-4%22%2F%3E%3C%2Fsvg%3E"); background-color: rgba(255,255,255,.06); color: #fff; border: 1px solid var(--cyan); background-image: var(--campo-icones); background-repeat: no-repeat, no-repeat; background-position: left .9rem center, right 1rem center; padding-left: 2.7rem; cursor: pointer; } .porta .porta__select:hover, .troca .troca__select:hover { background-color: rgba(34,193,230,.12); } .porta .porta__select:focus, .troca .troca__select:focus { background-color: rgba(34,193,230,.10); background-image: var(--campo-icones); background-repeat: no-repeat, no-repeat; background-position: left .9rem center, right 1rem center; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34,193,230,.28); outline: none; } /* A lista aberta e desenhada pelo sistema, nao pelo site: sem estas duas linhas, no Windows ela sai com texto branco sobre fundo branco. */ .porta .porta__select option, .troca .troca__select option { background-color: #16204a; color: #fff; } /* atalho do Fatura Facil, para quem so quer a 2a via */ .porta__ff { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; padding: .7rem .9rem; border-radius: var(--radius); text-align: left; background: var(--yellow); color: #201400; box-shadow: var(--glow-yellow); transition: transform .18s ease, box-shadow .25s ease; } .porta__ff:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(249,178,51,.5); } .porta__ff svg { width: 22px; height: 22px; flex: none; } .porta__ff b { display: block; font-family: var(--font-display); font-size: .92rem; letter-spacing: .02em; } .porta__ff small { display: block; font-size: .78rem; opacity: .78; } .porta__ff em { margin-left: auto; font-style: normal; font-size: 1.3rem; font-weight: 700; } body.porta-aberta { overflow: hidden; } /* cidade escolhida, exibida no header */ .header__cidade { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; color: var(--ink); white-space: nowrap; } .header__cidade svg { width: 15px; height: 15px; color: var(--yellow); flex: none; } /* No cabecalho a cidade vira uma pastilha, e a pastilha INTEIRA e o botao. Duas correcoes de 29/07 no mesmo lugar: a cidade era texto solto, do mesmo tamanho e cor do telefone ao lado — a informacao que personaliza precos, planos e cobertura passava despercebida; e so a setinha lateral abria a troca, o que ninguem descobria, porque a pessoa olha para o nome da cidade e nao para um icone de 14px. 31/07: o mesmo desenho passou a valer no menu do celular, a pedido da cliente — eram tres jeitos diferentes de mostrar a mesma coisa. No rodape o chip continua em linha, com "trocar cidade" por extenso. */ .header__cta .header__cidade, .header__cidade--pilula { gap: .45rem; padding: .4rem .55rem .4rem .7rem; border-radius: 999px; background: rgba(34,193,230,.10); border: 1px solid rgba(34,193,230,.38); cursor: pointer; font: inherit; transition: background .18s ease, border-color .18s ease; } .header__cta .header__cidade > span, .header__cidade--pilula > span { color: #fff; font-weight: 800; font-size: .85rem; } .header__cta .header__cidade__seta, .header__cidade--pilula .header__cidade__seta { width: 14px; height: 14px; color: var(--cyan-soft); flex: none; transition: transform .18s ease; } .header__cta .header__cidade:hover, .header__cidade--pilula:hover { background: rgba(34,193,230,.22); border-color: var(--cyan); } .header__cta .header__cidade:hover .header__cidade__seta, .header__cidade--pilula:hover .header__cidade__seta { transform: translateY(2px); } .header__cta .header__cidade:focus-visible, .header__cidade--pilula:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; } /* nas telas em que o cabecalho fica mais apertado, o resto cede um pouco */ @media (max-width: 1279px) { .header__inner { gap: .6rem; } .header__cta { gap: .45rem; } .header__cta .btn { padding: .55rem .8rem; font-size: .84rem; } .header__phone { gap: .35rem; } } /* 1399px, nao 1239: com o chip de cidade somado ao telefone e aos dois botoes, o header so cabe a partir de ~1400px. Medido: a 1280px estourava 73px. */ /* 1179px, nao 1399: o limite antigo foi medido quando o menu tinha oito itens. Com cinco, o chip inteiro — nome da cidade e "trocar" — cabe a partir de 1160px. Medido em 980, 1024, 1100, 1160, 1200, 1240, 1280 e 1366: estoura por 136px em 1024, por 60px em 1100 e por nada dai para cima. */ @media (max-width: 1179px) { .header__cta .header__cidade { display: none; } } /* A pastilha fora do cabeçalho: no menu do celular e no rodapé. No menu ela é a única forma de trocar de cidade — a do .header__cta some abaixo de 1180px e o menu só existe abaixo de 980px —, e por ser alvo de dedo tem 44px de altura, o mínimo confortável. No rodapé ela encolhe (ver abaixo), porque ali divide a linha com o © e os links legais. */ .header__cidade--pilula { align-self: flex-start; min-height: 44px; padding: .55rem .7rem .55rem .9rem; font-size: .95rem; } .header__cidade--pilula > span { font-size: .95rem; } /* No rodapé a mesma pastilha, num tamanho que conversa com a linha em que ela mora — a do © e dos links legais, que é a menor do site. */ .footer__bottom .header__cidade--pilula { min-height: 32px; font-size: .84rem; padding: .3rem .5rem .3rem .7rem; } .footer__bottom .header__cidade--pilula > span { font-size: .84rem; } /* ---------- Avaliações do Google ---------- Cards de depoimento num carrossel, reusando o .carousel do site: o arrasto, as bolinhas e o giro vêm de graça e se comportam igual aos outros. O que é só daqui é o desenho do card. */ .aval { margin-top: .5rem; } .section--light .aval__fonte { font-size: .92rem; } .section--light .aval__resumo { text-align: center; margin: 0 0 1.4rem; font-family: var(--font-display); font-weight: 700; color: #0f1836; } .carousel--aval .carousel__slide { flex: 0 0 100%; } @media (min-width: 700px) { .carousel--aval .carousel__slide { flex-basis: 50%; } } @media (min-width: 1040px) { .carousel--aval .carousel__slide { flex-basis: 33.333%; } } .aval__card { display: flex; flex-direction: column; height: 100%; padding: clamp(1.2rem, 2.5vw, 1.6rem); border-radius: var(--radius); background: #fff; border: 1px solid rgba(15,24,54,.1); box-shadow: 0 10px 30px rgba(15,24,54,.06); } .aval__topo { display: flex; align-items: center; gap: .8rem; } /* A inicial no lugar da foto: a do Google viria dos servidores deles, e o site não carrega imagem de fora. O tom é o azul da marca, sempre o mesmo — cor sorteada por nome pareceria significar alguma coisa. */ .aval__inicial { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #eef2fa; color: #24346f; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; } .section--light .aval__topo b { display: block; font-family: var(--font-display); font-size: .95rem; color: #0f1836; line-height: 1.2; } .section--light .aval__quando { font-size: .8rem; color: #5c6689; } .aval__notas { display: flex; gap: .12rem; margin: .9rem 0 .6rem; } .aval__notas svg { width: 17px; height: 17px; fill: #f0a92b; } .section--light .aval__texto { font-size: .95rem; line-height: 1.6; color: #38416a; } .aval__pe { text-align: center; margin-top: 1.4rem; } /* a frase que fica quando não há JavaScript */ .section--light .aval__semjs { text-align: center; font-size: .95rem; } .js .aval__semjs { display: none; } /* topo da aba Planos: titulo da cidade e o atalho para trocar */ .planos-cidade__topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .3rem .8rem; margin: -0.6rem 0 1.4rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: #0f1836; } .planos-cidade__trocar { background: none; border: 0; padding: .2rem .1rem; cursor: pointer; font: inherit; font-size: .84rem; font-weight: 600; color: #1a6d84; text-decoration: underline; } .planos-cidade__trocar:hover { color: #0f1836; } /* ---------- Feixes de fibra óptica ---------- Decoração: filetes de luz atravessando as seções escuras. Puro CSS, sem imagem nem SVG. Vão dentro de