/* ========================================================================= AS FONTES DA MARCA, SERVIDAS DAQUI -- e nao do servidor do Google. 🔴 Ate 30/08/2026 estas duas familias vinham de fonts.googleapis.com por tres linhas no do layout. Toda visita, de todo visitante, em toda pagina, mandava o IP dele para um terceiro ANTES de qualquer consentimento. O site opera em doze mercados, a maioria na UE, e e o cenario exato que o tribunal de Munique julgou em 2022 (20 O 1533/19) como transferencia ilicita de IP -- que virou base de campanhas de notificacao na Alemanha e na Austria. A politica de cookies do proprio site, enquanto isso, afirmava que nenhum terceiro acompanha o visitante. Auto-hospedar resolve tres coisas de uma vez: o risco juridico, o TODO de PWA offline que estava anotado no layout (fonte de fora nunca entra no cache do service worker), e uma conexao de terceiro no caminho critico de renderizacao de cada pagina. Sao ARQUIVOS VARIAVEIS: um por familia e por subconjunto cobre todos os pesos, e por isso as quatro faces abaixo pesam 76 KB somadas -- menos do que a ida e volta ao Google custava. `font-display: swap` mantem o texto legivel enquanto a fonte carrega, como o parametro `&display=swap` fazia. Para atualizar: baixar de novo do Google Fonts com um navegador moderno no user-agent (o CSS servido a agentes antigos devolve .ttf, nao .woff2). ========================================================================= */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/manrope-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/manrope-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Sora'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/sora-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Sora'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/sora-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ========================================================================= BRDeals Global — folha de estilo base Tokens copiados de src/app/globals.css do site atual (Tailwind v4 @theme). Valores conferidos no codigo-fonte, nao amostrados de captura de tela. ========================================================================= */ :root { /* Marca — valores exatos do site atual */ --brand-green: #187434; --brand-green-light: #3f9b45; --brand-blue: #1c4a82; --brand-blue-dark: #173a66; --brand-blue-light: #2e8dc2; --brand-yellow: #e2b618; --brand-yellow-dark: #c9970b; --brand-cream: #f7f5ef; --brand-navy: #0b1f38; --ink: #111827; --ink-soft: #4b5563; --ink-faint: #6b7280; --line: #e5e7eb; --surface: #ffffff; --shadow-soft: 0 20px 60px rgba(28, 74, 130, 0.12); --shadow-card: 0 2px 8px rgba(17, 24, 39, 0.06); --radius: 12px; --radius-lg: 20px; --container: 1200px; --gutter: 20px; --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: "Sora", var(--font-body); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* Impede o iOS de aumentar a fonte ao girar o aparelho. */ -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; background: linear-gradient(180deg, #fffdf8 0%, var(--brand-cream) 100%); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; /* Trava o estouro horizontal sem esconder conteudo vertical. O teste correto de estouro e window.scrollTo(9999,0) + scrollX === 0; scrollWidth > clientWidth da falso positivo quando ha overflow-x-clip. */ overflow-x: clip; } h1, h2, h3, .font-display { font-family: var(--font-display); line-height: 1.2; margin: 0 0 0.5em; } a { color: var(--brand-blue); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; } input, select, button, textarea { font: inherit; } button, a { cursor: pointer; } /* Foco visivel em tudo que recebe teclado — requisito WCAG 2.1 AA. Nunca substituir por outline:none sem colocar outra indicacao visual. */ :focus-visible { outline: 3px solid var(--brand-blue-light); outline-offset: 2px; border-radius: 4px; } /* Pular para o conteudo — primeiro tab da pagina, visivel so ao focar. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 20px; background: var(--brand-navy); color: #fff; border-radius: 0 0 var(--radius) 0; } .skip-link:focus { left: 0; } /* ---------------------------------------------------------------- layout */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .stack > * + * { margin-top: var(--stack-gap, 16px); } /* Superficies da marca — mesma linguagem do site atual */ .bg-brand-hero { background-color: var(--brand-navy); background-image: linear-gradient( 135deg, rgba(9, 29, 52, 0.96) 0%, rgba(28, 74, 130, 0.82) 48%, rgba(24, 116, 52, 0.82) 100% ); color: #fff; } .bg-brand-wash { background-image: radial-gradient(circle at top right, rgba(46, 141, 194, 0.12), transparent 42%), linear-gradient(180deg, #ffffff 0%, #f5f9fc 100%); } /* ---------------------------------------------------------------- header */ /* Cabecalho escuro translucido, com desfoque --------------------------------------------------------------------------- A cor de base e OPACA o bastante para o texto branco se sustentar sobre qualquer coisa -- inclusive sobre uma pagina de fundo branco, onde um cabecalho de verdade transparente deixaria os links invisiveis. Sobre a foto do pais, na home, ela deixa a imagem aparecer e ganha o efeito de vidro. `backdrop-filter` e um acabamento, nao a base: onde o navegador nao suporta, fica o azul-escuro solido e nada se perde. Por isso a cor vem primeiro e o filtro depois. */ /* A altura que o hero reserva para o cabecalho flutuante. Precisa acompanhar a altura REAL dele -- 56px da barra principal + a barra de pais/idioma. Curto demais, o titulo do hero nasce atras do menu. */ :root { --cabecalho-altura: 96px; } .site-header { position: sticky; top: 0; z-index: 40; background: rgba(11, 31, 56, 0.78); border-bottom: 1px solid rgba(255, 255, 255, 0.14); color: #ffffff; -webkit-backdrop-filter: saturate(140%) blur(20px); backdrop-filter: saturate(140%) blur(20px); } /* * A margem negativa faz o cabecalho FLUTUAR sobre o hero, em vez de empurrar a * pagina. E daqui que vem o vidro: sem sobrepor nao ha o que desfocar por tras, * e a transparencia so mostraria branco. * * SO onde existe hero para receber o cabecalho por cima. Aplicada sempre, ela * puxaria o conteudo de paginas sem hero (conta, mensagens, moderacao) para * TRAS do menu -- e as primeiras linhas ficariam escondidas. * * O hero devolve esse espaco em padding-top, logo abaixo: os dois numeros andam * juntos, por isso saem da mesma variavel. */ body:has(.hero--foto, .hero-foto, .bg-brand-hero) .site-header { margin-bottom: calc(var(--cabecalho-altura) * -1); } /* Com o cabecalho por cima, o hero comeca mais abaixo. Sem isto o titulo nasceria atras do menu. */ /* * 🔴 A classe vem DOBRADA de proposito: e o que faz esta regra ganhar. * * `.hero--foto` sozinho pesa o mesmo que `.hero`, e ha dois `.hero` mais * adiante neste arquivo com `padding: clamp(44px, 7vw, 82px) 0`. Empate de * peso, e quem vem depois ganha: o espaco reservado aqui virava 44px calado. * A home e a UNICA pagina cujo hero tambem e `.hero` -- por isso so ela * ficava com o titulo por baixo do cabecalho (36px escondidos, medidos). * * Dobrar a classe nao muda o que a regra seleciona, so o peso dela. Preferido * a mover o bloco para o fim do arquivo, que voltaria a quebrar assim que * alguem escrevesse outro `.hero` depois. * * 🔑 O valor da variavel nao muda o resultado: o hero comeca em * (altura do cabecalho - variavel) e devolve (variavel), entao o conteudo cai * sempre na base do cabecalho. A variavel so decide quanto da FOTO fica por * tras do vidro. */ .hero--foto.hero--foto, .hero-foto.hero-foto, .bg-brand-hero.bg-brand-hero { padding-top: var(--cabecalho-altura); } /* Onde o navegador desfoca, a cor pode ser bem mais leve -- e o desfoque que faz o trabalho. E o mesmo peso do site de referencia. */ @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .site-header { background: rgba(11, 31, 56, 0.28); } } /* * A salvaguarda: pagina SEM hero escuro no topo recebe o cabecalho opaco. * * Com 28% sobre fundo branco os links brancos sumiriam. O site de referencia * nao trata esse caso porque todas as paginas dele abrem com hero escuro; aqui * ha telas que nao abrem (conta, mensagens, moderacao), e elas nao podem ficar * com o menu ilegivel. */ body:not(:has(.hero--foto, .hero-foto, .bg-brand-hero)) .site-header { background: rgba(11, 31, 56, 0.94); } .site-header__inner { display: flex; align-items: center; gap: 16px; min-height: 56px; /* Ancora o painel do menu de celular, que abre em position:absolute. */ position: relative; /* Rede de seguranca: o cabecalho tem logo, nove links e os botoes de conta. Sem isto, quando a soma passa da largura da tela ele TRANSBORDA -- o botao "Quero anunciar" era cortado ao meio e a pagina inteira ganhava barra de rolagem lateral. Quebrando linha, no pior caso o cabecalho fica mais alto; nada some da tela. */ flex-wrap: wrap; } .site-header__brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--brand-navy); text-decoration: none; flex-shrink: 0; } .site-header__brand:hover { text-decoration: none; } .site-header__mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--brand-green); color: #fff; font-weight: 800; font-size: 0.9rem; } .site-header__spacer { flex: 1; } /* O menu tem 10 itens e nao cabe em uma linha abaixo de ~1088px. Por isso a troca para o menu de celular acontece em 1120px, e nao no 1024px habitual. Isso e deliberado e vem do site atual. */ .site-nav { display: none; gap: 18px; align-items: center; flex-wrap: nowrap; /* `min-width: 0` e o que permite este bloco encolher dentro do flex. Sem ele, o navegador respeita a largura do conteudo e empurra os botoes de conta para fora da tela. */ min-width: 0; flex-shrink: 1; } .site-nav a { color: var(--ink-soft); font-size: 0.94rem; white-space: nowrap; padding: 6px 2px; border-bottom: 2px solid transparent; } .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--brand-blue); border-bottom-color: var(--brand-yellow); text-decoration: none; } .site-header__actions { display: none; gap: 8px; align-items: center; /* Os botoes nunca quebram linha: se faltar espaco, quem cede e o menu, que ja encolhe. Um "Quero anunciar" na segunda linha e o que se quis evitar. */ flex-shrink: 0; } /* * Os botoes do cabecalho sao menores que os do corpo da pagina: aqui eles * dividem 1200px fixos com a logo e nove itens de menu. Ver `.site-nav a`. * * ⚠️ `min-height: 34px` abre mao dos 44px de alvo de toque que o `.btn` do * corpo garante. Vale so na barra de acoes do topo: ela aparece acima de * 1280px, largura de mouse, e some no celular -- onde quem faz esse papel e a * barra inferior, que mantem os 44px. Os itens do menu ao lado ja tem 31px, e * um botao de 44 ao lado de um link de 31 e o que fazia os dois parecerem de * tamanhos diferentes. * * 🔴 O seletor e `.site-header__actions .btn`, e NAO `.site-header .btn`. O * painel do menu de celular mora dentro do mesmo `
` e tambem usa * `.btn`: pelo seletor largo, os 34px vazavam para la e encolhiam o alvo de * toque justamente no aparelho onde ele importa. */ .site-header__actions .btn { font-size: 12px; min-height: 34px; padding: 6px 12px; } .menu-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-left: auto; background: transparent; border: 1px solid var(--line); border-radius: 10px; color: var(--brand-navy); } /* 1280px, e nao 1120px: com nove itens de menu, a logo e os botoes de conta, o cabecalho pedia cerca de 1330px para caber. Em 1120 ele aparecia inteiro e transbordava -- pior do que mostrar o menu de hamburguer, porque cortava a acao principal do site. Entre 1280 e 1440 o espacamento aperta um pouco, o que evita jogar notebooks comuns de volta para o hamburguer. */ @media (min-width: 1280px) { .site-nav, .site-header__actions { display: flex; } .menu-toggle { display: none; } } /* Este bloco existia para APERTAR o menu entre 1280 e 1440, quando a fonte era 15px e o espacamento 18px. Com o menu no tamanho da referencia (14px, 4px de intervalo), `gap: 13px` passou a AFROUXAR -- fazia o oposto do que dizia. Sobrou so o que ainda aperta. */ /* A faixa mais apertada: o menu completo acaba de aparecer e ainda ha nove itens disputando espaco com a logo e os botoes. Aqui tudo encolhe mais um pouco, porque quebrar linha custa caro -- o cabecalho dobra de altura e o titulo do hero acaba atras dele. */ /* ⚠️ Este bloco tem de ficar SEMPRE menor que o tamanho base -- e ja errou isso uma vez. Quando a base caiu para 12px, os 12.5px daqui passaram a AUMENTAR a fonte na faixa mais apertada, e os botoes de conta voltavam para a segunda linha justo nos notebooks comuns. Mexeu na base? Confira aqui. */ /* 🔴 ESTE BLOCO MUDOU-SE PARA O FIM DO ARQUIVO, e nao por capricho. Ele estava MORTO: as regras da secao de refinamento do cabecalho, la embaixo, repetem os mesmos seletores (`.site-nav a`, `.site-header__brand img`) com a mesma especificidade -- e media query NAO aumenta especificidade, entao quem vem depois no arquivo ganha, em qualquer largura. A faixa apertada de 1280-1440 nao apertava nada. Procure por "faixa de 1280 a 1440" no fim do arquivo. */ /* Menu de celular — sem JavaScript:
nativo. O e o proprio botao hamburguer; o painel abre absoluto logo abaixo da barra do cabecalho. */ .mobile-menu { margin-left: auto; } /* Esconde o triangulo padrao do
nos dois motores. */ .mobile-menu > summary { list-style: none; } .mobile-menu > summary::-webkit-details-marker { display: none; } .mobile-menu__panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-card); padding: 8px 0 20px; /* Menu longo em tela baixa precisa rolar sozinho. */ max-height: calc(100vh - 68px); overflow-y: auto; } .mobile-menu__panel a { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); /* Alvo de toque confortavel. */ min-height: 44px; } .mobile-menu__actions { display: grid; gap: 10px; margin-top: 16px; } /* O mesmo 1280px do menu completo, e nao 1120: entre um valor e outro nao pode existir faixa nenhuma sem navegacao. Se o hamburguer sumisse antes de o menu completo entrar, quem tivesse a janela nessa largura ficaria sem caminho para lugar nenhum. */ @media (min-width: 1280px) { .mobile-menu { display: none; } } /* --------------------------------------------------------------- seletor */ /* Pais e idioma vivem DENTRO da linha do cabecalho, e nao numa faixa abaixo. Ha uma instancia so no HTML; o que muda entre celular e desktop e apenas como ela se acomoda no flex. No celular: `flex-basis: 100%` faz o bloco tomar a propria linha, o que devolve exatamente o desenho de duas faixas. Sem isso ele disputaria os ~340px da tela com a logo e o botao do menu. A ORDEM importa: sem ela, um bloco de 100% inserido antes do botao do menu empurraria o botao para uma TERCEIRA linha. A logo fica em 0, o botao do menu em 1 -- os dois na primeira linha --, e o contexto em 2. */ .context-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; font-size: 0.82rem; color: var(--ink-faint); flex-basis: 100%; order: 2; } .site-header__brand { order: 0; } .mobile-menu { order: 1; } .context-bar__group { display: flex; align-items: center; gap: 6px; } .lang-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; } .lang-switch a { padding: 4px 12px; color: var(--ink-soft); font-weight: 600; font-size: 0.82rem; } .lang-switch a:hover { text-decoration: none; background: var(--brand-cream); } .lang-switch a[aria-current="true"] { background: var(--brand-blue); color: #fff; } .select-control { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 0.86rem; max-width: 100%; } /* --------------------------------------------------------------- botoes */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; /* 44px de altura minima: alvo de toque acessivel. */ min-height: 44px; padding: 10px 20px; border: 1px solid transparent; border-radius: 999px; font-weight: 600; font-size: 0.94rem; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; } .btn:hover { text-decoration: none; } .btn--primary { background: var(--brand-green); color: #fff; } .btn--primary:hover { background: #12602a; } .btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); } .btn--ghost:hover { border-color: var(--brand-blue); color: var(--brand-blue); } .btn--light { background: #fff; color: var(--brand-navy); } .btn[aria-disabled="true"], .btn:disabled { opacity: 0.55; cursor: not-allowed; } /* ----------------------------------------------------------------- hero */ .hero { padding: clamp(40px, 7vw, 76px) 0; } .hero__eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; font-weight: 700; opacity: 0.85; margin-bottom: 12px; } .hero h1 { /* Tipografia fluida: acompanha a largura sem media query. */ font-size: clamp(1.7rem, 4.4vw, 3rem); max-width: 20ch; text-wrap: balance; } .hero p { max-width: 58ch; font-size: clamp(1rem, 1.6vw, 1.12rem); opacity: 0.92; } /* --------------------------------------------------------------- busca */ .search-card { margin-top: 28px; padding: 18px; background: rgba(255, 255, 255, 0.96); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); display: grid; gap: 12px; grid-template-columns: 1fr; } .search-card label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 5px; } .search-card select, .search-card input { width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); } @media (min-width: 760px) { .search-card { grid-template-columns: 1fr 1fr auto; align-items: end; } } /* ------------------------------------------------------------ categorias */ .section { padding: clamp(36px, 5vw, 60px) 0; } .section__head { margin-bottom: 24px; } .section__head h2 { font-size: clamp(1.35rem, 2.6vw, 1.9rem); } .section__head p { color: var(--ink-soft); margin: 0; } .grid-cards { display: grid; gap: 16px; /* auto-fit + minmax evita quebra de grade em qualquer largura, de 360px a 1920px, sem media query por breakpoint. */ grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); } .card { display: flex; flex-direction: column; gap: 8px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); color: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease; } a.card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-soft); } .card__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--brand-cream); color: var(--brand-green); font-size: 1.2rem; } .card__title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--brand-navy); } .card__text { color: var(--ink-soft); font-size: 0.92rem; margin: 0; } /* Categoria Doacao usa identidade propria no site atual. */ .card--donation .card__icon { background: color-mix(in srgb, var(--brand-yellow) 22%, #fff); color: var(--brand-yellow-dark); } /* ------------------------------------------------------------ estado vazio */ /* Marketplace vazio mostra ISTO — nunca anuncio de exemplo. Decisao do dono: nada de conteudo falso em producao. */ .empty-state { padding: clamp(40px, 8vw, 72px) 24px; text-align: center; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius-lg); } .empty-state__icon { font-size: 2.4rem; margin-bottom: 12px; } .empty-state h2 { font-size: 1.25rem; } .empty-state p { color: var(--ink-soft); max-width: 46ch; margin: 0 auto 20px; } /* --------------------------------------------------------------- rodape */ /* Fundo claro, logo colorida, redes a direita — como o site atual. */ .site-footer { margin-top: 64px; padding: 40px 0 32px; border-top: 1px solid var(--line); background: transparent; color: var(--ink-soft); font-size: 0.94rem; } .site-footer__inner { display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; } .site-footer__main { flex: 1 1 min(100%, 620px); } .site-footer__logo { height: 52px; width: auto; margin-bottom: 18px; } .site-footer__brand { margin: 0 0 10px; color: var(--brand-blue); font-size: 0.86rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .site-footer__intro { margin: 0 0 16px; max-width: 66ch; line-height: 1.65; } .site-footer__contact { display: flex; align-items: center; gap: 8px; margin: 0 0 20px; } .site-footer__contact a { color: var(--brand-blue); font-weight: 600; } .site-footer__links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 18px; } .site-footer__links a { color: var(--ink-soft); font-size: 0.84rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; } .site-footer__links a:hover { color: var(--brand-blue); } /* "Preferencias de cookies" nao e documento legal: fica em caixa normal para nao competir com os outros links. */ .site-footer__links--soft { text-transform: none !important; letter-spacing: 0.04em !important; font-weight: 500 !important; } .site-footer__made { margin: 0 0 6px; } .site-footer__copy { margin: 0; color: var(--ink-faint); font-size: 0.86rem; } .site-footer__social { flex: 0 1 auto; text-align: right; } .site-footer__social-label { margin: 0 0 14px; color: var(--ink-faint); font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .site-footer__social ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .site-footer__social a { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; min-height: 44px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--brand-navy); font-weight: 600; font-size: 0.9rem; } .site-footer__social a:hover { text-decoration: none; border-color: var(--brand-blue); color: var(--brand-blue); } @media (max-width: 720px) { .site-footer__social, .site-footer__social ul { text-align: left; align-items: stretch; } .site-footer__social a { justify-content: center; } } /* ----------------------------------------------------------------- erro */ .error-page { padding: clamp(60px, 12vw, 120px) 0; text-align: center; } .error-page h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); } .error-page p { color: var(--ink-soft); max-width: 44ch; margin: 0 auto 24px; } /* ----------------------------------------------------- preferencia do SO */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================ Secao "Comece pelo que voce precisa" — reproducao da home atual. ============================================================ */ .cat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; } .cat-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); color: var(--brand-navy); margin-bottom: 6px; } .cat-head p { margin: 0; color: var(--ink-soft); font-size: 1rem; } .cat-head__link { display: inline-flex; align-items: center; gap: 8px; color: var(--brand-blue); font-weight: 600; white-space: nowrap; /* Alinha o link com a linha do subtitulo, como no original. */ margin-top: auto; } .cat-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); } /* O card usa grade de 2 colunas: icone | texto, com a seta na 3a coluna. Assim titulo e seta ficam na mesma linha e a descricao alinha sob o titulo, nao sob o icone. */ .cat-card { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 6px 14px; padding: 22px; background: var(--surface); border-radius: 18px; box-shadow: 0 1px 3px rgba(17, 24, 39, 0.05); color: inherit; transition: box-shadow 0.16s ease, transform 0.16s ease; } .cat-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-soft); } .cat-card__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #eef2f8; color: var(--brand-navy); grid-row: 1 / span 1; } .cat-card__title { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; color: var(--brand-navy); align-self: center; } .cat-card__arrow { color: #9aa9bd; align-self: center; transition: transform 0.16s ease, color 0.16s ease; } .cat-card:hover .cat-card__arrow { color: var(--brand-blue); transform: translateX(3px); } .cat-card__text { grid-column: 2 / -1; margin: 0; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.5; } .cat-card__meta { grid-column: 2 / -1; margin-top: 8px; color: var(--brand-green); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; } /* Doacao fora da grade, com identidade propria — como no site atual. */ /* A faixa de doacao usa o degrade da marca -- o mesmo navy -> azul -> verde da tela de sem-conexao e do topo dos e-mails. Antes era um creme amarelado que nao aparecia em lugar nenhum do site, e a faixa se perdia no fundo claro da secao de categorias. */ .donation-banner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 22px; padding: 30px 32px; border-radius: 20px; color: #ffffff; background-color: var(--brand-navy); background-image: linear-gradient(160deg, #0b1f38 0%, #1c4a82 58%, #187434 100%); } .donation-banner__body { min-width: min(100%, 320px); flex: 1; } .donation-banner__eyebrow { margin: 0 0 8px; /* Amarelo claro, e nao o escuro: sobre o navy o dourado escuro nao levanta. */ color: var(--brand-yellow); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .donation-banner h3 { font-size: clamp(1.25rem, 2.6vw, 1.75rem); color: #ffffff; margin-bottom: 8px; } .donation-banner__text { margin: 0; color: rgba(255, 255, 255, 0.86); max-width: 62ch; } /* Sobre o degrade escuro da faixa de doacao, o botao preto desapareceria. Aqui ele inverte: claro sobre escuro. */ .donation-banner .btn--dark { background: #ffffff; color: var(--brand-navy); } .donation-banner .btn--dark:hover { background: #f1f5f9; color: var(--brand-navy); } .btn--dark { background: #0f172a; color: #fff; } .btn--dark:hover { background: #1e293b; } /* ============================================================ Home — hero, paises, destaques e anunciantes ============================================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .eyebrow { margin: 0 0 8px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-yellow); } .section .eyebrow { color: var(--brand-yellow-dark); } /* -------------------------------------------------------------- hero */ .hero { padding: clamp(44px, 7vw, 82px) 0 clamp(36px, 5vw, 56px); } .hero__inner { max-width: 880px; } .hero h1 { font-size: clamp(1.85rem, 4.6vw, 3.1rem); max-width: 16ch; text-wrap: balance; } .hero__lead { max-width: 56ch; font-size: clamp(1rem, 1.5vw, 1.1rem); opacity: 0.92; } .hero__trust { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 22px; max-width: 74ch; font-size: 0.86rem; opacity: 0.82; } .hero__trust svg { flex-shrink: 0; margin-top: 3px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; } .btn--outline { background: transparent; border-color: rgba(255, 255, 255, 0.45); color: #fff; } .btn--outline:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); } .btn--navy { background: var(--brand-blue); color: #fff; } .btn--navy:hover { background: var(--brand-blue-dark); } .btn--search { background: var(--brand-blue); color: #fff; } .btn--search:hover { background: var(--brand-blue-dark); } /* Barra de numeros do hero */ .hero__stats { display: grid; gap: 18px 32px; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); margin: 30px 0 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.18); } .hero__stats dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.72; margin-bottom: 6px; } .hero__stats dd { margin: 0; font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; } .hero__stats-market strong { display: block; font-size: 1.15rem; } .hero__stats-market span { display: block; font-family: var(--font-body); font-size: 0.78rem; font-weight: 400; opacity: 0.7; } /* ----------------------------------------------------------- secoes */ .section--wash { background-image: radial-gradient(circle at top right, rgba(46, 141, 194, 0.1), transparent 44%), linear-gradient(180deg, #ffffff 0%, #f5f9fc 100%); } /* * A faixa bege das categorias. * * Usa `--brand-cream`, que ja e a cor bege da marca em outros oito lugares da * folha -- e nao um bege novo parecido. Dois beges quase iguais no mesmo site * sao o tipo de coisa que ninguem nota de proposito e todo mundo sente como * desalinho. * * Fundo chapado, sem gradiente: a secao vizinha de cima (`section--wash`) ja * termina num azul claro, e emendar um gradiente no outro deixaria a divisa * entre as duas lavada. O corte seco e o que faz a faixa ler como faixa. */ .section--cream { background: var(--brand-cream); } .section__head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .section__link { color: var(--brand-blue); font-weight: 600; white-space: nowrap; } /* ------------------------------------------------------------ paises */ /* Trilho horizontal com scroll-snap. Sem JS: e rolagem nativa, funciona com dedo, roda do mouse, teclado e leitor de tela. */ .country-rail { list-style: none; margin: 0; padding: 4px 0 14px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(232px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; } .country-rail > li { scroll-snap-align: start; } /* O trilho dos anuncios em destaque. Mesma mecanica do trilho de mercados: grade de coluna automatica com rolagem nativa e scroll-snap. A largura minima e a mesma do cartao na grade -- o destaque nao pode virar uma miniatura so por estar num carrossel, senao o lugar que o anunciante comprou vale menos que o gratuito logo abaixo. */ .listing-rail { list-style: none; margin: 0; padding: 4px 0 14px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(258px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; } .listing-rail > li { scroll-snap-align: start; display: flex; } .listing-rail > li > .anuncio-card-wrap { flex: 1 1 auto; } /* Com poucos destaques o trilho nao deve esticar os cartoes ate a largura da tela: um destaque sozinho viraria um banner de 1200px. */ @media (min-width: 900px) { .listing-rail { grid-auto-columns: minmax(258px, 288px); justify-content: start; } } /* As setas e o "ver todos" dividem o canto direito do cabecalho. */ .section__head-acoes { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .country-card { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 20px; border-radius: 18px; background-image: linear-gradient(160deg, #12304f 0%, #1c4a82 62%, #187434 100%); color: #fff; box-shadow: var(--shadow-card); } .country-card:hover { text-decoration: none; box-shadow: var(--shadow-soft); } .country-card--current { outline: 2px solid var(--brand-yellow); outline-offset: 2px; } .country-card__badge { align-self: flex-start; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); color: var(--brand-navy); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .country-card__name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; } .country-card__market { font-size: 0.85rem; opacity: 0.82; } .country-card__domain { margin-top: 2px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; opacity: 0.72; } .country-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; font-size: 0.76rem; opacity: 0.9; } .country-card__langs { padding: 2px 8px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; font-size: 0.66rem; letter-spacing: 0.06em; } /* ------------------------------------------------- estado vazio suave */ .empty-state--soft { padding: 34px 24px; border-style: dashed; background: rgba(255, 255, 255, 0.7); } .empty-state__title { margin: 0 0 6px; font-family: var(--font-display); font-weight: 700; color: var(--brand-navy); } /* ------------------------------------------------------- anunciantes */ .advertiser { padding: clamp(40px, 6vw, 68px) 0; background-image: linear-gradient(115deg, #eef7f0 0%, #eaf2fb 55%, #dfeaf7 100%); } .advertiser__inner { display: grid; gap: 30px; grid-template-columns: 1fr; align-items: center; } @media (min-width: 900px) { .advertiser__inner { grid-template-columns: 1.1fr 1fr; gap: 56px; } } .advertiser h2 { font-size: clamp(1.4rem, 2.8vw, 2.05rem); color: var(--brand-navy); max-width: 20ch; } .advertiser__body p { color: var(--ink-soft); max-width: 52ch; margin: 0; } .advertiser__benefits { list-style: none; margin: 0 0 22px; padding: 0; } .advertiser__benefits li { padding: 13px 0; border-bottom: 1px solid rgba(28, 74, 130, 0.15); color: var(--ink); } .advertiser__actions { display: flex; flex-wrap: wrap; gap: 12px; } /* --------------------------------------------------- busca do hero */ .search-card__term { display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink-faint); } .search-card__term input { border: 0 !important; padding-inline: 0 !important; min-height: 44px; background: transparent; } .search-card__term input:focus { outline: none; } @media (min-width: 980px) { .search-card { grid-template-columns: 1.4fr 1fr 1fr auto; align-items: end; } .search-card__term { grid-row: 1; } } /* ============================================================ Paginas editoriais e planos ============================================================ */ .hero--compact { padding-block: clamp(38px, 5.5vw, 64px); } .hero__panel { margin-top: 26px; padding: 18px 22px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); max-width: 62ch; } .hero__panel-label { margin: 0 0 4px; font-weight: 700; } .hero__panel-meta { margin: 0; font-size: 0.9rem; opacity: 0.85; } /* Marca e pais dentro do painel: rotulos pequenos, para nao competirem com as duas frases que eles apresentam. */ .hero__panel-brand { margin: 0 0 2px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; } .hero__panel-label + .hero__panel-brand { margin-top: 12px; } /* ------------------------------------------------------------ passos */ .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); counter-reset: step; } .step { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .step h3 { font-size: 1.08rem; color: var(--brand-navy); margin-bottom: 6px; } .step p { margin: 0; color: var(--ink-soft); } .step__number { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px; border-radius: 50%; background: var(--brand-green); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; } /* --------------------------------------------------------- historia */ .story { max-width: 74ch; } .story h2 { font-size: clamp(1.35rem, 2.6vw, 1.95rem); color: var(--brand-navy); } .story p { color: var(--ink-soft); line-height: 1.7; } /* Citação do fundador. A marca é uma aspa tipográfica, não uma barra lateral colorida: aspa é o sinal que a tipografia usa há séculos para dizer "isto é fala de alguém", e não carrega o ar de componente genérico. */ .story__quote { position: relative; margin: 30px 0 0; padding: 26px 28px 22px 30px; background: var(--brand-cream); border-radius: var(--radius-lg); } .story__quote::before { content: "\201C"; position: absolute; top: 4px; left: 14px; font-family: var(--font-display); font-size: 3.6rem; line-height: 1; color: var(--brand-green); opacity: 0.28; } .story__quote p { position: relative; margin: 0 0 10px; font-family: var(--font-display); font-size: 1.12rem; line-height: 1.5; color: var(--brand-navy); } .story__quote footer { color: var(--ink-faint); font-size: 0.86rem; } /* Travessão antes do nome — convenção de atribuição em citação. */ .story__quote footer::before { content: "— "; } /* --------------------------------------------------------- avisos */ .notice { margin: 28px 0; padding: 20px 24px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--brand-yellow) 12%, #fff); border: 1px solid color-mix(in srgb, var(--brand-yellow) 34%, #fff); } .notice--strong { background: color-mix(in srgb, var(--brand-blue-light) 10%, #fff); border-color: color-mix(in srgb, var(--brand-blue-light) 28%, #fff); } .notice__title { margin: 0 0 6px; font-family: var(--font-display); font-weight: 700; color: var(--brand-navy); font-size: 1.35rem; } .notice p:last-child { margin: 0; color: var(--ink-soft); } /* Botoes dentro do aviso -- a Central de Seguranca fecha aqui, sem um bloco de chamada depois. */ .notice__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; } .warning-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 78ch; } .warning-list li { position: relative; padding: 14px 18px 14px 46px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-soft); } .warning-list li::before { content: "!"; position: absolute; left: 16px; top: 14px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--brand-yellow) 30%, #fff); color: var(--brand-yellow-dark); font-weight: 800; font-size: 0.78rem; } /* ---------------------------------------------------------- planos */ /* Faixa do plano gratuito: uma linha antes da grade, nao um quarto cartao. Publicar e gratis -- isso e a regua, e nao mais uma opcao a comparar. */ .plan-free { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 20px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; } .plan-free__price { margin: 0; font-family: var(--font-display); font-size: 1.15rem; color: var(--brand-navy); } .plan-free__price span { font-weight: 600; opacity: 0.75; } .plan-free__tagline { margin: 0; flex: 1 1 220px; color: var(--ink-soft); } .plan-grid { display: grid; gap: 18px; /* Tres cartoes, e nao quatro: o gratuito saiu para a faixa acima. */ grid-template-columns: repeat(auto-fit, minmax(min(258px, 100%), 1fr)); align-items: start; } /* Tela de um plano: os beneficios de um lado, o estado real do outro. */ .plan-detail { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); align-items: start; } .plan-detail__side { display: grid; gap: 18px; } .plan-detail .plan-card h2 { font-size: 1.15rem; color: var(--brand-navy); margin-bottom: 14px; } .hero__period { font-size: 1rem; font-weight: 600; opacity: 0.75; margin-left: 4px; } /* O que o destaque NAO promete, colado nos cartoes. */ .plan-fine-print { max-width: 78ch; margin: 22px auto 0; font-size: 0.9rem; line-height: 1.6; color: var(--ink-soft); } .plan-card { display: flex; flex-direction: column; height: 100%; padding: 26px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } /* Cada plano tem a propria cor, como no site: azul, verde e dourado. O tom entra so no alto do cartao, para diferenciar sem competir com o texto. */ .plan-card { position: relative; } .plan-card--boost { border-color: color-mix(in srgb, var(--brand-blue-light) 55%, var(--line)); background: radial-gradient(circle at top left, color-mix(in srgb, var(--brand-blue-light) 16%, transparent), transparent 62%), var(--surface); } .plan-card--pro { border-color: color-mix(in srgb, var(--brand-green) 55%, var(--line)); background: radial-gradient(circle at top left, color-mix(in srgb, var(--brand-green) 14%, transparent), transparent 62%), var(--surface); } .plan-card--elite { border-color: color-mix(in srgb, #d9a441 55%, var(--line)); background: radial-gradient(circle at top left, color-mix(in srgb, #d9a441 15%, transparent), transparent 62%), var(--surface); } .plan-card--popular { box-shadow: var(--shadow-soft); } /* Etiqueta "melhor custo-beneficio": canto superior direito, so no PRO. */ .plan-card__flag { position: absolute; top: 16px; right: 16px; margin: 0; padding: 4px 12px; border-radius: 999px; background: var(--brand-green); color: #fff; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; } .plan-card__icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 16px; border-radius: 12px; background: color-mix(in srgb, currentColor 12%, #fff); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); } .plan-card--boost .plan-card__icon { color: var(--brand-blue); } .plan-card--pro .plan-card__icon { color: var(--brand-green); } .plan-card--elite .plan-card__icon { color: #b5822a; } /* Aqui vivia `.plan-card__ready`, o selo "Pronto para lancamento". Saiu com o selo, em 30/08/2026: regra de estilo sem elemento que a use e peso morto que ninguem ousa apagar depois, porque ninguem sabe mais se algo depende dela. */ .plan-card h3 { font-size: 1.25rem; color: var(--brand-navy); margin-bottom: 4px; } .plan-card__price { margin: 0 0 6px; } .plan-card__price strong { font-family: var(--font-display); font-size: 1.85rem; color: var(--brand-navy); } .plan-card__price span { color: var(--ink-faint); font-size: 0.88rem; } .plan-card__tagline { margin: 0 0 18px; color: var(--ink-soft); font-size: 0.92rem; } .plan-card__benefits { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; flex: 1; } .plan-card__benefits li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.9rem; color: var(--ink-soft); } .plan-card__benefits span { flex-shrink: 0; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; font-size: 0.68rem; font-weight: 800; } .plan-card__benefits li span { background: transparent; color: var(--brand-green); font-size: 0.85rem; } /* Tabela comparativa: cabecalho escuro e simbolos no lugar de "Sim/Nao", como no site. O texto continua no HTML para quem usa leitor de tela. */ .compare thead th { background: var(--brand-navy); color: #fff; border-color: color-mix(in srgb, var(--brand-navy) 70%, #fff); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .compare thead th:first-child { text-transform: none; letter-spacing: 0; } .compare__icon { display: inline-grid; place-items: center; vertical-align: -4px; margin-right: 6px; opacity: 0.9; } .compare__yes { color: var(--brand-green); font-size: 1.05rem; font-weight: 700; } .compare__no { color: var(--ink-faint); } .plan-card__actions { display: grid; gap: 8px; } .btn--link { background: transparent; color: var(--brand-blue); min-height: 36px; padding: 6px 12px; } /* --------------------------------------------------------- tabela */ /* A tabela rola dentro do proprio contêiner: a pagina nunca rola na horizontal. */ .table-scroll { overflow-x: auto; /* * Ancora para o que e posicionado DENTRO da tabela -- em especial os * de "Incluido"/"Nao incluido" das celulas. * * 🔴 `.sr-only` e `position: absolute`. Sem ancestral posicionado, o bloco * que o contem passa a ser a RAIZ da pagina: ele escapa desta caixa que rola * E do `overflow-x: clip` do body, e vai parar na coordenada onde calhou de * cair dentro da tabela larga -- x=540 numa tela de 412. Sozinho, 1px * invisivel esticava o documento inteiro para 540px: a barra inferior fixa * nascia com 540 de largura e a pagina inteira saia torta no celular. * * ⚠️ Nao da para ver isso por `document.body.scrollWidth`: o clip do body * devolve o valor certo e esconde o estrago. O teste que enxerga e * `document.documentElement.scrollWidth` maior que `clientWidth`. */ position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); } .compare { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 0.92rem; } .compare th, .compare td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); } .compare thead th { background: var(--brand-cream); color: var(--brand-navy); font-family: var(--font-display); font-size: 0.95rem; } .compare tbody th { color: var(--ink); font-weight: 600; } .compare td { color: var(--ink-soft); } .compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; } /* ============================================================ Documentos legais ============================================================ */ .legal { display: grid; gap: 34px; padding-block: clamp(30px, 4vw, 52px); grid-template-columns: 1fr; } @media (min-width: 940px) { .legal { grid-template-columns: 250px 1fr; gap: 48px; align-items: start; } /* O indice acompanha a rolagem: texto legal e longo e ninguem quer voltar ao topo para achar a proxima secao. */ .legal__toc { position: sticky; top: 92px; max-height: calc(100vh - 120px); overflow-y: auto; } } .legal__updated { margin-top: 14px; font-size: 0.86rem; opacity: 0.8; } .legal__toc ol { margin: 0; padding: 0 0 0 2px; list-style: none; counter-reset: toc; display: grid; gap: 6px; } .legal__toc a { display: block; padding: 6px 10px; border-left: 2px solid var(--line); color: var(--ink-soft); font-size: 0.86rem; line-height: 1.4; } .legal__toc a:hover { border-left-color: var(--brand-green); color: var(--brand-blue); background: var(--brand-cream); text-decoration: none; } .legal__body { max-width: 74ch; } .legal__body section { /* Compensa o cabecalho fixo quando se chega por ancora: sem isto o titulo da secao fica escondido atras dele. */ scroll-margin-top: 96px; padding-bottom: 26px; } .legal__body h2 { font-size: 1.16rem; color: var(--brand-navy); margin-bottom: 10px; } .legal__body p { color: var(--ink-soft); line-height: 1.72; margin: 0 0 12px; } .legal__body ul { margin: 0 0 14px; padding-left: 22px; color: var(--ink-soft); display: grid; gap: 7px; } .legal__body li { line-height: 1.65; } /* ============================================================ Trilho de mercados — cards com foto do país ============================================================ */ .rail-nav { display: flex; gap: 8px; } .rail-nav__btn { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--brand-navy); } .rail-nav__btn:hover { border-color: var(--brand-blue); color: var(--brand-blue); } .rail-nav__btn:disabled { opacity: .35; cursor: not-allowed; } .country-card { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 200px; padding: 16px; border-radius: 18px; overflow: hidden; color: #fff; background: var(--brand-navy); box-shadow: var(--shadow-card); isolation: isolate; } .country-card__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } /* Véu escuro: sem ele o texto branco some sobre céu claro. Mais denso embaixo, onde ficam o nome e a contagem. */ .country-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 20, 38, .35) 0%, rgba(6, 20, 38, .62) 52%, rgba(6, 20, 38, .88) 100%); } .country-card:hover { text-decoration: none; box-shadow: var(--shadow-soft); } .country-card:hover .country-card__photo { transform: scale(1.04); } .country-card__photo { transition: transform .4s ease; } .country-card--current { outline: 2px solid var(--brand-yellow); outline-offset: 2px; } .country-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: auto; } .country-card__flag { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .18); backdrop-filter: blur(4px); } .country-card__flag .flag { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); } .country-card__badge { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--brand-navy); font-size: .62rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; } .country-card__go { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .22); backdrop-filter: blur(4px); } .country-card__body { margin-top: 22px; } .country-card__name { display: block; font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; line-height: 1.15; } .country-card__market { display: block; font-size: .88rem; opacity: .9; } .country-card__domain { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .22); font-size: .66rem; font-weight: 700; letter-spacing: .1em; opacity: .72; } .country-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: .78rem; } .country-card__langs { padding: 3px 9px; border: 1px solid rgba(255, 255, 255, .38); border-radius: 999px; font-size: .64rem; letter-spacing: .05em; white-space: nowrap; } /* ============================================================ Cartoes ilustrativos do hero ============================================================ */ .hero__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } /* Abaixo de 1100px os cartoes saem: o hero e o texto que converte, e miniatura ilustrativa espremida nao ajuda ninguem. */ .hero-cards { display: none; } @media (min-width: 1100px) { .hero__grid { grid-template-columns: minmax(0, 1fr) 396px; gap: 56px; } .hero-cards { display: block; position: relative; height: 748px; /* Fora do fluxo do teclado e do leitor de tela: e decoracao. */ pointer-events: none; } } @media (min-width: 1320px) { .hero__grid { grid-template-columns: minmax(0, 1fr) 400px; } } .hero-card { position: absolute; width: 206px; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 18px 44px rgba(4, 16, 32, .34); color: var(--ink); } /* Cascata diagonal: cada cartao desce e alterna o lado, como na referencia. Sem sobreposicao de texto — amontoar corta justamente o titulo e o preco, que sao a informacao que a ilustracao existe para mostrar. */ .hero-card--1 { top: 0; left: 0; transform: rotate(-2.5deg); z-index: 5; } .hero-card--2 { top: 132px; left: 150px; transform: rotate(2deg); z-index: 4; } .hero-card--3 { top: 268px; left: 22px; transform: rotate(-1.5deg); z-index: 3; } .hero-card--4 { top: 404px; left: 168px; transform: rotate(2.5deg); z-index: 2; } .hero-card--5 { top: 540px; left: 46px; transform: rotate(-2deg); z-index: 1; } .hero-card__media { position: relative; line-height: 0; } .hero-card__media img { width: 100%; height: 96px; object-fit: cover; } .hero-card__badge { position: absolute; top: 7px; left: 7px; padding: 4px 11px; border-radius: 999px; background: var(--brand-blue); color: #fff; font-size: .56rem; font-weight: 700; letter-spacing: .09em; } .hero-card__body { padding: 11px 13px 12px; } .hero-card__title { margin: 0 0 5px; /* Titulo longo quebra em ate 2 linhas em vez de estourar o cartao. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--font-display); font-size: .84rem; font-weight: 700; color: var(--brand-navy); line-height: 1.25; } .hero-card__place { display: flex; align-items: center; gap: 6px; margin: 0 0 9px; font-size: .7rem; color: var(--ink-faint); } .hero-card__place .flag { flex-shrink: 0; width: 15px; height: 10px; border-radius: 2px; } .hero-card__foot { display: flex; align-items: center; justify-content: space-between; margin: 0; } .hero-card__price { font-family: var(--font-display); font-size: .92rem; font-weight: 700; color: var(--brand-green); } .hero-card__fav { color: #cbd5e1; } /* ============================================================ Globo com as bandeiras no hero A arte NAO tem canal alpha (RGB, fundo preto estrelado), entao o recorte vem de `mix-blend-mode: screen`: sobre o gradiente da marca o preto desaparece sozinho e o globo se funde no fundo. As duas mascaras se cruzam (mask-composite: intersect): a horizontal abre espaco para o texto a esquerda; a vertical evita que a borda da imagem vire uma linha reta no meio do hero. ============================================================ */ .hero { position: relative; overflow: hidden; } .hero > .container, .hero__globe ~ * { position: relative; z-index: 1; } .hero__globe { position: absolute; inset: 0; pointer-events: none; background: url('../hero/globo-bandeiras.webp') center center / cover no-repeat; mix-blend-mode: screen; opacity: .16; } @media (min-width: 1100px) { /* Sem os cartoes, a coluna da direita nao existe mais. */ .hero__grid { grid-template-columns: 1fr; } .hero__globe { top: 0; right: 0; bottom: 3rem; left: auto; width: 56%; opacity: 1; background-position: right top; background-size: contain; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 14%, #000 38%), linear-gradient(180deg, transparent 0%, #000 4%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 14%, #000 38%), linear-gradient(180deg, transparent 0%, #000 4%, #000 93%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } } /* ------------------------------------------- convite para instalar o app */ /* Desenho copiado do cartao do site Next, medida por medida: mesmo raio, mesmo fio de marca no topo, mesma logo compacta. Sao dois enderecos do mesmo produto, e o visitante precisa reconhecer o convite nos dois. Fica abaixo do skip-link (z-index 100) e acima de todo o resto. */ .install-card { position: fixed; right: 12px; bottom: 12px; left: 12px; z-index: 90; margin: 0 auto; max-width: 384px; overflow: hidden; border: 1px solid rgba(226, 232, 240, 0.8); border-radius: 1.35rem; background: var(--surface); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22); opacity: 0; transform: translateY(8px); transition: opacity 0.22s ease, transform 0.22s ease; } @media (min-width: 640px) { .install-card { right: 20px; left: auto; margin: 0; } } .install-card--visivel { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .install-card { transform: none; transition: opacity 0.01ms; } } /* Fio nas cores da marca: assina o aviso sem competir com o conteudo. */ .install-card__hairline { height: 4px; background: linear-gradient(90deg, var(--brand-green) 0%, var(--brand-green-light) 50%, var(--brand-blue) 100%); } .install-card__body { position: relative; padding: 16px; } .install-card__close { position: absolute; top: 14px; right: 10px; display: grid; place-items: center; padding: 6px; border: 0; border-radius: 999px; background: transparent; color: #94a3b8; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .install-card__close:hover { background: #f1f5f9; color: var(--ink-soft); } /* Espaco para o X nao encostar no texto. */ .install-card__head { padding-right: 28px; } .install-card__logo { display: block; height: 36px; width: auto; } .install-card__title { margin: 12px 0 0; font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; line-height: 1.35; color: #0f172a; } .install-card__text { margin: 4px 0 0; font-size: 0.78rem; line-height: 1.25rem; color: var(--ink-soft); } .install-card__actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; } /* O .btn do site e pilula; aqui o raio acompanha o do cartao. */ .install-card__cta { flex: 1; border-radius: 0.95rem; font-size: 0.9rem; box-shadow: 0 6px 16px rgba(24, 116, 52, 0.28); } .install-card__later { flex-shrink: 0; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 0.95rem; background: transparent; color: #64748b; font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .install-card__later:hover { background: #f1f5f9; color: var(--ink-soft); } .install-card__steps { margin: 16px 0 0; padding: 12px; list-style: none; border-radius: 0.95rem; background: #f8fafc; font-size: 0.78rem; line-height: 1.25rem; color: #334155; } .install-card__steps li { display: flex; align-items: center; gap: 10px; } .install-card__steps li + li { margin-top: 10px; } .install-card__steps svg { flex-shrink: 0; color: var(--brand-blue); } .install-card__step-num { display: grid; flex-shrink: 0; place-items: center; width: 16px; height: 16px; border-radius: 999px; background: rgba(28, 74, 130, 0.12); color: var(--brand-blue); font-size: 0.6rem; font-weight: 700; } /* `hidden` precisa vencer o `display` do autor. O atributo `hidden` so aplica `display: none` pela folha do navegador, que perde para qualquer `display` declarado aqui. Sem esta regra, `.btn[hidden]` (display:inline-flex) e `.install-card__actions[hidden]` (display:flex) continuariam visiveis, e o botao de instalar apareceria ate para quem ja instalou. Vale para o site inteiro, nao so para o convite. */ [hidden] { display: none !important; } .site-footer__install { margin: 20px 0 0; } /* --------------------------------------------------------------------------- Blog: lista de artigos e pagina do artigo. Segue os mesmos tokens dos cartoes de categoria -- nenhum valor novo de cor ou sombra foi inventado aqui. --------------------------------------------------------------------------- */ .post-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); } .post-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--surface); border-radius: 18px; box-shadow: 0 1px 3px rgba(17, 24, 39, 0.05); color: inherit; transition: box-shadow 0.16s ease, transform 0.16s ease; } .post-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-soft); } .post-card__date { margin: 0; color: var(--ink-faint); font-size: 0.78rem; } /* Assunto e tempo de leitura no alto do cartao: juntos, dizem num relance se vale abrir agora. */ .post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; } .post-card__tag { padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--brand-green) 12%, #fff); color: var(--brand-green); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .post-card__time { color: var(--ink-faint); font-size: 0.78rem; } /* Data e "ler guia" na mesma linha, no pe do cartao. */ .post-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: auto 0 0; padding-top: 14px; } .post-card__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; line-height: 1.35; color: var(--brand-navy); } .post-card__excerpt { margin: 0; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; } .post-card__more { color: var(--brand-blue); font-size: 0.85rem; font-weight: 600; } .post-card:hover .post-card__more { color: var(--brand-blue-dark); } /* Artigo: reaproveita a medida de leitura dos documentos legais. */ .post { max-width: 74ch; padding-bottom: 26px; } .post h2 { font-family: var(--font-display); font-size: 1.16rem; color: var(--brand-navy); margin: 26px 0 10px; } .post p { color: var(--ink-soft); line-height: 1.72; margin: 0 0 12px; } .post ul { margin: 0 0 14px; padding-left: 22px; color: var(--ink-soft); display: grid; gap: 7px; } .post__back { display: inline-block; margin-top: 18px; color: var(--brand-blue); font-size: 0.9rem; font-weight: 600; } /* --------------------------------------------------------------------------- Formularios de conta: entrar, criar conta, meus dados. Mesmos tokens do resto do site -- nenhuma cor nova foi inventada. --------------------------------------------------------------------------- */ .auth { max-width: 460px; margin: 0 auto; } .auth--wide { max-width: 720px; } .form-card { background: var(--surface); border-radius: 18px; padding: 28px; box-shadow: 0 1px 3px rgba(17, 24, 39, 0.05); } .field { display: grid; gap: 6px; margin-bottom: 16px; } .field__label { font-size: 0.88rem; font-weight: 600; color: var(--brand-navy); } .field__hint { font-size: 0.8rem; color: var(--ink-faint); } .field__control { width: 100%; padding: 11px 13px; font: inherit; font-size: 0.98rem; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 11px; transition: border-color 0.14s ease, box-shadow 0.14s ease; } .field__control:focus { outline: none; border-color: var(--brand-blue-light); box-shadow: 0 0 0 3px rgba(46, 141, 194, 0.18); } .field__control[aria-invalid="true"] { border-color: #b42318; } .field__error { font-size: 0.82rem; color: #b42318; } .field--check { grid-template-columns: auto 1fr; align-items: start; gap: 10px; } .field--check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--brand-green); } .field--check label { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.5; } .alert { padding: 13px 16px; border-radius: 12px; margin-bottom: 18px; font-size: 0.92rem; } .alert--ok { background: #ecfdf3; color: #05603a; border: 1px solid #abefc6; } .alert--erro { background: #fef3f2; color: #912018; border: 1px solid #fecdca; } .form-foot { margin-top: 18px; text-align: center; font-size: 0.9rem; color: var(--ink-soft); } /* Bloco de aviso da exclusao de conta: precisa parecer serio, sem gritar. */ .danger-zone { border: 1px solid #fecdca; border-radius: 18px; padding: 24px; background: #fffafa; } .danger-zone h2 { color: #912018; margin-bottom: 10px; } .danger-zone ul { margin: 0 0 18px; padding-left: 20px; display: grid; gap: 8px; color: var(--ink-soft); line-height: 1.6; } .btn--danger { background: #b42318; color: #fff; border: 1px solid #b42318; } .btn--danger:hover { background: #912018; text-decoration: none; } /* Miniaturas das fotos ja enviadas, no formulario do anuncio. */ .foto-grade { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; } .foto-grade__item { margin: 0; } .foto-grade__item img { display: block; width: 160px; height: 120px; object-fit: cover; border-radius: 12px; background: #eef2f8; } /* --------------------------------------------------------------------------- Anuncio: cartao na grade e pagina do anuncio. --------------------------------------------------------------------------- */ .anuncio-card { display: flex; flex-direction: column; background: var(--surface); border-radius: 18px; overflow: hidden; box-shadow: 0 1px 3px rgba(17, 24, 39, 0.05); color: inherit; transition: box-shadow 0.16s ease, transform 0.16s ease; } .anuncio-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-soft); } .anuncio-card__media { position: relative; aspect-ratio: 4 / 3; background: #eef2f8; } .anuncio-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .anuncio-card__sem-foto { display: grid; place-items: center; width: 100%; height: 100%; color: #9aa9bd; } /* Selo de destaque pago --------------------------------------------------------------------------- Fica sobre a foto, no alto e a esquerda: e o primeiro ponto que o olho encontra ao varrer a grade, e o canto direito ja e onde o coracao de favoritar vai morar. O anel do cartao destacado e discreto de proposito. Um destaque que grita afasta o olhar do resto da vitrine, e uma vitrine que so mostra anuncio pago deixa de ser vitrine -- quem paga tambem perde, porque a pagina para de trazer gente. */ .anuncio-card__selo { position: absolute; z-index: 1; top: 10px; left: 10px; padding: 4px 9px; border-radius: 999px; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.4; color: #ffffff; background: var(--brand-blue); box-shadow: 0 1px 4px rgba(11, 31, 56, 0.28); } .anuncio-card__selo--pro { background: var(--brand-green); } /* Dourado com texto escuro: branco sobre amarelo nao alcanca contraste de leitura no tamanho em que este selo aparece. */ .anuncio-card__selo--elite { color: var(--brand-navy); background: linear-gradient(135deg, var(--brand-yellow) 0%, var(--brand-yellow-dark) 100%); } .anuncio-card--destaque { box-shadow: 0 0 0 1.5px rgba(28, 74, 130, 0.35), var(--shadow-card); } .anuncio-card--destaque:hover { box-shadow: 0 0 0 1.5px rgba(28, 74, 130, 0.45), var(--shadow-soft); } @media (prefers-reduced-motion: reduce) { .anuncio-card { transition: none; } } .anuncio-card__body { display: grid; gap: 5px; padding: 16px 18px 18px; } .anuncio-card__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.35; color: var(--brand-navy); } .anuncio-card__place { margin: 0; color: var(--ink-faint); font-size: 0.84rem; } /* A nota do anunciante no cartao da grade. A estrela usa o mesmo amarelo da ficha do anuncio: a mesma informacao nao pode mudar de cor conforme a pagina. */ .anuncio-card__nota { /* 🔴 Ancora para o `.sr-only` que vive aqui dentro. Ele e `position: absolute`; sem ancestral posicionado o bloco que o contem vira a RAIZ da pagina, e 1px invisivel estica o documento inteiro ate a coordenada onde ele calhou de cair -- a barra inferior fixa nasce torta no celular. O `.anuncio-card-wrap` ja e `relative`, mas depender de um ancestral tres niveis acima e o tipo de coisa que se perde na proxima mexida no cartao. */ position: relative; margin: 1px 0 0; font-size: 0.82rem; color: var(--ink-faint); } .anuncio-card__nota-visivel { display: flex; align-items: center; gap: 4px; } .anuncio-card__nota svg { color: var(--brand-yellow-dark); flex: none; } .anuncio-card__nota strong { color: var(--brand-navy); font-size: 0.86rem; } .anuncio-card__price { margin: 4px 0 0; color: var(--brand-green); font-weight: 700; font-size: 1.02rem; } .anuncio { max-width: 860px; } .anuncio__preco { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--brand-green); margin: 6px 0 2px; } .anuncio__local { color: var(--ink-soft); margin: 0 0 18px; } .anuncio__fotos { display: grid; gap: 12px; margin-bottom: 22px; } .anuncio__fotos img { width: 100%; height: auto; border-radius: 16px; background: #eef2f8; } .anuncio__texto { color: var(--ink-soft); line-height: 1.72; margin-bottom: 18px; max-width: 70ch; } .anuncio__meta { color: var(--ink-soft); margin: 0 0 8px; } .anuncio__contato { background: var(--brand-cream); border-radius: 16px; padding: 20px 22px; margin: 22px 0; } .anuncio__contato h2 { font-size: 1.05rem; margin-bottom: 8px; } .anuncio__contato p { margin: 0 0 5px; } .anuncio__data { color: var(--ink-faint); font-size: 0.84rem; } /* Guardar / denunciar, na pagina do anuncio. */ .anuncio__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 20px 0; } .anuncio__acoes form { margin: 0; } /* =========================================================================== Paginas Sobre e Manuais, e a grade de categorias. Mesmos tokens de marca do resto do site -- nenhuma cor nova. =========================================================================== */ /* Painel branco que agrupa blocos, como no site atual. */ .painel { background: var(--surface); border: 1px solid rgba(229, 231, 235, .8); border-radius: 32px; padding: 30px; } @media (max-width: 640px) { .painel { padding: 20px; border-radius: 22px; } } .cartao { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 24px; } .cartao h2 { font-size: 1.22rem; margin: 14px 0 8px; } .cartao h3 { font-family: var(--font-display); font-size: 1.02rem; color: var(--brand-navy); margin: 12px 0 6px; } .cartao p { color: var(--ink-soft); line-height: 1.65; margin: 0; } .cartao--claro { background: rgba(248, 250, 252, .7); } .cartao--azulado { background: rgba(28, 74, 130, .05); border-color: rgba(28, 74, 130, .15); } /* O cartao escuro usa o mesmo gradiente do hero -- e a mesma marca. */ .cartao--escuro { background-color: var(--brand-navy); background-image: linear-gradient(135deg, rgba(9,29,52,.96) 0%, rgba(28,74,130,.82) 48%, rgba(24,116,52,.82) 100%); border-color: transparent; color: #fff; } .cartao--escuro h2 { color: #fff; } .cartao--escuro p { color: rgba(255,255,255,.78); } .cartao__icone { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: rgba(28, 74, 130, .1); color: var(--brand-blue); } .cartao--escuro .cartao__icone, .cartao__icone--claro { background: rgba(255, 255, 255, .12); color: var(--brand-yellow); } .missao-visao, .dois-cartoes { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); } .passos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); } /* A historia do fundador, num bloco de leitura mais calmo. */ .historia { margin-top: 18px; padding: 28px; border-radius: 24px; background: linear-gradient(135deg, #fff 0%, #f8fafc 100%); border: 1px solid var(--line); } .historia h2 { font-size: 1.6rem; margin-bottom: 14px; } .historia p { color: var(--ink-soft); line-height: 1.75; margin: 0 0 12px; max-width: 72ch; } .citacao { position: relative; overflow: hidden; margin: 22px 0 0; padding: 26px 28px; border-radius: 20px; background-color: var(--brand-navy); background-image: linear-gradient(135deg, rgba(9,29,52,.96) 0%, rgba(28,74,130,.82) 48%, rgba(24,116,52,.82) 100%); color: #fff; } .citacao p { position: relative; color: #fff; font-weight: 700; font-style: italic; line-height: 1.6; margin: 0 0 10px; max-width: 62ch; } .citacao footer { color: var(--brand-yellow); font-weight: 700; font-size: .88rem; } .citacao__aspas { position: absolute; top: -18px; right: 14px; font-family: var(--font-display); font-size: 9rem; line-height: 1; color: rgba(255, 255, 255, .08); pointer-events: none; } /* Bloco escuro de encerramento, com caixa de contato ao lado. */ .bloco-escuro { display: grid; gap: 22px; align-items: center; grid-template-columns: 1fr; padding: 30px; border-radius: 30px; background-color: var(--brand-navy); background-image: linear-gradient(135deg, rgba(9,29,52,.96) 0%, rgba(28,74,130,.82) 48%, rgba(24,116,52,.82) 100%); color: #fff; } @media (min-width: 900px) { .bloco-escuro { grid-template-columns: 1fr auto; } } .bloco-escuro h2 { color: #fff; margin: 12px 0 8px; } .bloco-escuro p { color: rgba(255,255,255,.78); margin: 0; max-width: 60ch; } .bloco-escuro__eyebrow { color: var(--brand-yellow); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 6px; } .caixa-contato { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); border-radius: 22px; padding: 20px 22px; } .caixa-contato__rotulo { color: var(--brand-yellow); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 8px !important; } .caixa-contato a { color: #fff; text-decoration: underline; } /* --------------------------------------------------------------- manuais */ .manual-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); } .manual-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid rgba(229,231,235,.85); border-radius: 26px; overflow: hidden; transition: box-shadow .16s ease, transform .16s ease; } .manual-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); } /* `contain` sobre fundo verde: a arte e retrato e `cover` a cortaria. */ .manual-card__capa { aspect-ratio: 1055 / 1491; background: #eaf6ee; display: grid; place-items: center; } .manual-card__capa img { width: 100%; height: 100%; object-fit: contain; } .manual-card__corpo { display: flex; flex-direction: column; gap: 10px; padding: 20px; } .manual-card__corpo h3 { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.35; color: var(--brand-navy); margin: 0; } .manual-card__texto { color: var(--ink-soft); font-size: .92rem; line-height: 1.55; margin: 0; } .manual-card__selos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } .selo { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .selo--verde { background: rgba(24, 116, 52, .1); color: var(--brand-green); } .selo--azul { background: rgba(28, 74, 130, .08); color: var(--brand-blue); } .manual-card__dados { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .manual-card__dados dt { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px; } .manual-card__dados dd { margin: 0; font-weight: 600; color: var(--brand-navy); font-size: .92rem; } .btn--baixar { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--brand-green); color: #fff; border: 1px solid var(--brand-green); width: 100%; } .btn--baixar:hover { background: var(--brand-blue); border-color: var(--brand-blue); text-decoration: none; } /* Aviso de que o material e informativo -- amarelo calmo, nao alarme. */ .aviso-importante { display: flex; gap: 14px; align-items: flex-start; margin-top: 24px; padding: 20px 22px; border-radius: 24px; border: 1px solid rgba(226, 182, 24, .45); background: #fff9dc; } .aviso-importante__icone { color: var(--brand-yellow-dark); flex: none; margin-top: 2px; } .aviso-importante__titulo { font-weight: 700; color: var(--brand-navy); margin: 0 0 4px; } .aviso-importante p { color: var(--ink-soft); margin: 0; line-height: 1.6; } /* ------------------------------------------------------------- categorias */ .cat-card__meta { color: var(--brand-green); font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; } .btn--dark { display: inline-flex; align-items: center; gap: 8px; background: #0b1220; color: #fff; border: 1px solid #0b1220; border-radius: 999px; } .btn--dark:hover { background: var(--brand-blue); border-color: var(--brand-blue); text-decoration: none; } /* --------------------------------------------------------------------------- Hero com a foto do pais. A foto troca junto com o mercado. E o sinal mais rapido de que o site entendeu onde a pessoa esta -- sem ele, os 12 mercados parecem a mesma pagina. --------------------------------------------------------------------------- */ .hero-foto { position: relative; overflow: hidden; display: grid; align-items: center; min-height: 320px; background-color: var(--brand-navy); } /* No computador a faixa precisa de altura: a mesma foto numa tira fina mostra um quarto da imagem, e o pais deixa de ser reconhecivel. */ @media (min-width: 1024px) { .hero-foto { min-height: 520px; } } .hero-foto__imagem { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Veu escuro + gradiente da marca: sem ele, texto branco sobre ceu claro simplesmente some. */ .hero-foto__veu { position: absolute; inset: 0; background: linear-gradient(118deg, rgba(9,29,52,.9) 0%, rgba(28,74,130,.8) 34%, rgba(24,116,52,.72) 100%), rgba(2, 6, 23, .46); } .hero-foto__conteudo { position: relative; padding: 54px 0; color: #fff; } .hero-foto__conteudo h1 { color: #fff; } .hero-foto__conteudo .hero__lead { color: rgba(255,255,255,.82); } .hero-foto__conteudo .hero__eyebrow { color: var(--brand-yellow); } .hero-foto__pais { display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 0; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.1); color: #fff; font-size: .86rem; font-weight: 600; } .hero-foto__pais svg { border-radius: 3px; } /* Botao de apoio no rodape. Altura fixa para nao brigar com o logo ao lado. */ .site-footer__cafe { display: inline-block; margin: 4px 0 12px; } .site-footer__cafe img { display: block; height: 40px; width: auto; } .site-footer__cafe:hover { opacity: .9; } /* --------------------------------------------------------------------------- Seletor de pais. `
` nativo: abre e fecha sozinho, anda pelo teclado e sobrevive a uma falha de script -- e trocar de pais e a decisao mais importante da primeira visita. --------------------------------------------------------------------------- */ .seletor-pais { position: relative; } .seletor-pais > summary { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 8px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--brand-navy); font-weight: 600; font-size: .92rem; cursor: pointer; list-style: none; user-select: none; } .seletor-pais > summary::-webkit-details-marker { display: none; } .seletor-pais > summary:hover { border-color: var(--brand-blue-light); } .seletor-pais[open] > summary { border-color: var(--brand-blue); } .seletor-pais[open] .seletor-pais__seta { transform: rotate(180deg); } .seletor-pais__seta { color: var(--ink-faint); transition: transform .16s ease; } /* A bandeira num cartao branco: sobre o cabecalho escuro ela sumiria. */ .seletor-pais__bandeira { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(17, 24, 39, .16); flex: none; } .seletor-pais__bandeira svg { width: 22px; height: auto; border-radius: 3px; } /* -------------------------------------------- pais e idioma no desktop -- ⚠️ ESTE BLOCO PRECISA FICAR AQUI, DEPOIS DAS REGRAS QUE ELE SOBRESCREVE. Ja errei isso uma vez: coloquei-o junto ao `@media` que liga o menu, la em cima, e nada aconteceu. Media query NAO soma especificidade -- entre duas regras de mesmo peso vence a ultima do arquivo, e tanto `.context-bar` quanto `.seletor-pais` sao definidas ABAIXO daquele ponto. O bloco parecia correto e era letra morta. O que ele faz: tira o contexto da linha propria e o encaixa entre o menu e os botoes, compactando o pais para bandeira + seta e o idioma para PT/EN. 🔴 A compactacao nao e estetica, e aritmetica. O container para de crescer em 1200px, entao o espaco e fixo e monitor maior nao ajuda. Medido antes: com o nome do pais e o rotulo "Idioma:", faltavam 147px para quem esta logado -- que tem tres botoes de conta, e nao um. O nome do pais sai da tela, mas nao do leitor de tela: o `aria-label` do carrega "Pais: Irlanda", e o nome completo continua visivel dentro do painel, que e onde a escolha de fato acontece. */ @media (min-width: 1280px) { .context-bar { flex-basis: auto; order: 2; padding: 0; gap: 8px; } /* A conta que fecha a linha. A caixa util e 1160px (1200 menos 40 de padding) e nao cresce nunca. Quem esta logado tem tres botoes de conta e pedia 1234px -- 74px a mais do que existe. O vao entre os itens do menu era o maior desperdicio: 7 vaos de 18px sao 126px de ar puro. Em 10px sobram 70px, que e quase toda a diferenca. Os itens continuam separados por 10px de vao mais o padding proprio de cada link, entao a leitura nao aperta. `gap` fixo aqui tambem para o proprio cabecalho: acima de 1440px ele voltava para os 16px da base, e a linha estourava de novo justamente nas telas maiores -- onde, como o container nao cresce, nao ha nenhum ganho em ser mais largo. */ /* 🔴 O CABECALHO FICA MAIS LARGO QUE A COLUNA DE CONTEUDO, e essa e a decisao que faz a linha unica existir. A conta, medida: caixa util de 1160px (1200 menos 40 de padding) contra 1200px de conteudo para quem esta logado -- 40px a menos do que precisa. Tirar "Inicio" ja tinha devolvido 55px, e a compactacao do pais e do idioma, outros 130. As alternativas custavam mais caro. Encurtar a logo e apertar as pastilhas do menu rende ~50px, mas o item da pagina atual usa padding maior que os demais: a folga oscilaria com a pagina visitada e ficaria em ~12px na pior. Um cabecalho que quebra dependendo de onde voce esta e pior do que um que nao alinha com o conteudo. Aqui a folga passa a ser de ~80px, e ela nao depende de fonte, de idioma nem da pagina. O preco e visual e pequeno: acima de 1360px a logo fica 60px a esquerda da borda do conteudo. Abaixo disso a tela manda na largura e os dois voltam a alinhar sozinhos. */ .site-header__inner { gap: 10px; max-width: 1320px; } .site-nav { order: 1; } .site-header__actions { order: 3; gap: 6px; } .site-header__actions .btn { padding-left: 10px; padding-right: 10px; } .seletor-pais__atual { display: none; } .context-bar__rotulo { display: none; } .seletor-pais > summary { gap: 4px; padding: 4px 6px 4px 4px; } .seletor-pais__bandeira { width: 26px; height: 26px; border-radius: 7px; } .seletor-pais__bandeira svg { width: 18px; } } .seletor-pais__painel { position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; width: min(340px, 88vw); max-height: 60vh; overflow-y: auto; padding: 8px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(11, 31, 56, .22); } .seletor-pais__painel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .seletor-pais__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; color: inherit; } .seletor-pais__item:hover { background: #f4f7fb; text-decoration: none; } .seletor-pais__item--atual { background: #f4f7fb; } .seletor-pais__texto { display: grid; gap: 1px; min-width: 0; } .seletor-pais__nome { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--brand-navy); font-size: .98rem; } /* O endereco explica por que cada mercado e um lugar, e nao um apelido. */ .seletor-pais__dominio { color: var(--ink-faint); font-size: .82rem; } .seletor-pais__selo { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(28, 74, 130, .1); color: var(--brand-blue); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } /* A pagina de paises usa o mesmo cartao do carrossel, em grade. */ .pais-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); } .pais-grid .country-card { width: auto; } /* Avisos da home: seguranca e anuncios proibidos --------------------------------------------------------------------------- O aviso de seguranca cobre a tela porque e o unico da home que a pessoa precisa ter lido antes de negociar com um desconhecido. Os demais avisos do site sao faixas; este e o que interrompe. O card de proibidos fica no canto inferior ESQUERDO: o direito ja e do convite de instalacao. */ .aviso-seguranca { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: var(--gutter); background: rgba(11, 31, 56, 0.55); } .aviso-seguranca[hidden] { display: none; } .aviso-seguranca__caixa { width: min(560px, 100%); max-height: 86vh; overflow-y: auto; padding: 24px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-soft); } .aviso-seguranca__titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--brand-navy); } .aviso-seguranca__titulo svg { color: var(--brand-yellow-dark); flex: none; } .aviso-seguranca__texto { margin: 0 0 14px; font-size: 14.5px; line-height: 1.62; color: var(--ink-soft); } .aviso-seguranca__feedback { margin: 0 0 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.6; color: var(--ink-faint); } .aviso-proibidos { position: fixed; z-index: 40; left: 16px; bottom: 16px; width: min(21rem, calc(100vw - 32px)); padding: 16px 18px; border: 1px solid #f3c3c8; border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16); } .aviso-proibidos[hidden] { display: none; } .aviso-proibidos__fechar { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-faint); cursor: pointer; } .aviso-proibidos__fechar:hover { background: #f3f4f6; color: var(--ink); } .aviso-proibidos__titulo { display: flex; align-items: center; gap: 7px; margin: 0 26px 10px 0; font-family: var(--font-display); font-size: 15px; font-weight: 700; color: #b3261e; } .aviso-proibidos__titulo svg { flex: none; } .aviso-proibidos__lista { margin: 0 0 10px; padding-left: 18px; font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); } .aviso-proibidos__aviso { margin: 0; font-size: 12.5px; font-weight: 700; color: #b3261e; } /* Em telas estreitas os dois cards do rodape ficariam lado a lado e nenhum caberia. O de proibidos assume a largura e o convite continua por cima. */ @media (max-width: 720px) { .aviso-proibidos { left: 16px; right: 16px; width: auto; } } /* Barra de busca da vitrine --------------------------------------------------------------------------- Mesma linguagem do cartao de busca da home (.search-card): rotulo pequeno em caixa alta, campo branco de borda discreta e foco com halo azul. Aqui ela precisa ser um cartao proprio -- na vitrine nao ha hero por baixo para segurar os campos, e soltos na pagina eles apareciam como controles crus do navegador, com o rotulo colado ao lado em vez de acima. */ .filter-bar { display: grid; gap: 14px; margin-bottom: 26px; padding: 18px; background: rgba(255, 255, 255, 0.96); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .filter-bar__field { display: grid; gap: 6px; /* Sem isto o campo estoura a coluna quando o valor e longo. */ min-width: 0; } .filter-bar__field > label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); } .filter-bar input[type="search"], .filter-bar input[type="number"], .filter-bar select { width: 100%; /* 44px: mesmo alvo de toque dos botoes. */ min-height: 44px; padding: 11px 14px; color: var(--ink); background-color: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: border-color 0.14s ease, box-shadow 0.14s ease; } .filter-bar input[type="search"] { padding-left: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.4-3.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 14px center; background-size: 16px; } /* Seta propria: a nativa tem desenho diferente em cada sistema e destoava dos outros campos, que sao todos desenhados aqui. */ .filter-bar select { -webkit-appearance: none; appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 12px; } .filter-bar input[type="search"]:hover, .filter-bar input[type="number"]:hover, .filter-bar select:hover { border-color: #cfd6e0; } .filter-bar input[type="search"]:focus, .filter-bar input[type="number"]:focus, .filter-bar select:focus { border-color: var(--brand-blue-light); box-shadow: 0 0 0 3px rgba(46, 141, 194, 0.18); } /* O foco global arredonda o contorno em 4px, o que apertava os cantos de um campo de 12px e do botao redondo no momento exato em que ele aparece. */ .filter-bar input[type="search"]:focus-visible, .filter-bar input[type="number"]:focus-visible, .filter-bar select:focus-visible { border-radius: var(--radius); } .filter-bar button[type="submit"]:focus-visible { border-radius: 999px; } .filter-bar > button[type="submit"] { justify-self: start; } @media (min-width: 880px) { .filter-bar { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) auto; align-items: end; column-gap: 16px; } /* O botao sobe para o fim da primeira linha, mas continua depois dos filtros avancados no HTML: quem navega por teclado passa pelos filtros antes de enviar. */ .filter-bar > button[type="submit"] { grid-column: 3; grid-row: 1; } } /* Filtros avancados da vitrine --------------------------------------------------------------------------- Fechados por padrao: texto e categoria resolvem a maioria das buscas, e seis campos a mais na primeira linha atrapalhariam quem so quer digitar e achar. Abrem sozinhos quando ha filtro em uso, para que a pessoa veja POR QUE a lista esta curta. */ /* "Mais filtros" a esquerda e "Limpar filtros" a direita, na mesma linha. */ .filtros-avancados__linha { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 16px; } .filtros-avancados { flex: 1; min-width: 0; margin-top: 2px; } .filtros-avancados > summary { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 13.5px; font-weight: 600; color: var(--brand-blue); cursor: pointer; list-style: none; } .filtros-avancados > summary::-webkit-details-marker { display: none; } .filtros-avancados > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); transition: transform 0.15s ease; } .filtros-avancados[open] > summary::before { transform: rotate(-135deg) translate(-2px, -2px); } .filtros-avancados__grade { display: grid; gap: 14px 16px; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); align-items: end; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--line); } /* Somente com foto e uma escolha de uma tecla, nao um campo: vira etiqueta clicavel e acende em verde quando esta valendo, para dar para ver o que esta filtrando sem ler os seis campos. */ .filter-bar__field--check { display: inline-flex; align-items: center; gap: 9px; justify-self: start; min-height: 44px; padding: 0 15px; background: #fff; border: 1px solid var(--line); border-radius: 999px; transition: border-color 0.14s ease, background-color 0.14s ease; } .filter-bar__field--check input { width: 17px; height: 17px; margin: 0; accent-color: var(--brand-green); } .filter-bar__field--check label { margin: 0; font-size: 0.88rem; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; color: var(--ink-soft); cursor: pointer; } .filter-bar__field--check:has(input:checked) { background: #eaf5ec; border-color: var(--brand-green); } .filter-bar__field--check:has(input:checked) label { color: var(--brand-green); } /* Limpar filtros fecha a saida: quem estreitou a busca ate nao sobrar nada precisa de um caminho de volta que nao seja apagar campo por campo. Fica fora do
, porque quem buscou so por texto nunca o abriria. */ .filtros-avancados__limpar { flex: none; padding: 4px 0; font-size: 0.86rem; font-weight: 600; color: var(--ink-faint); } .filtros-avancados__limpar:hover { color: var(--brand-blue); } @media (prefers-reduced-motion: reduce) { .filtros-avancados > summary::before { transition: none; } .filter-bar input, .filter-bar select, .filter-bar__field--check { transition: none; } } /* Pagina do anuncio: migalhas, galeria e WhatsApp ------------------------------------------------------------------------- */ .migalhas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 13px; color: var(--ink-faint); } .migalhas a { color: var(--brand-blue); } .migalhas span { color: #c3cbd6; } /* Deslizante por scroll-snap: o dedo arrasta e a roda rola, sem biblioteca. As miniaturas sao ancoras, entao pular para uma foto funciona sem script. */ .galeria { margin: 16px 0 22px; } .galeria__trilho { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; border-radius: var(--radius-lg); -webkit-overflow-scrolling: touch; } .galeria__trilho:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 3px; } .galeria__item { flex: 0 0 100%; margin: 0; scroll-snap-align: center; } .galeria__item img { display: block; width: 100%; height: auto; max-height: 68vh; object-fit: contain; border-radius: var(--radius-lg); background: #eef2f8; } .galeria__miniaturas { display: flex; gap: 8px; overflow-x: auto; margin-top: 10px; padding-bottom: 4px; } .galeria__miniatura { flex: 0 0 auto; width: 78px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; line-height: 0; } .galeria__miniatura:hover, .galeria__miniatura:focus-visible { border-color: var(--brand-blue); } .galeria__miniatura img { width: 100%; height: 58px; object-fit: cover; } /* Verde do proprio WhatsApp: o botao e reconhecido pela cor antes de ser lido, e trocar por uma cor da marca custaria esse reconhecimento. */ .btn--whatsapp { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; background: #1faf54; border-color: #1faf54; color: #ffffff; } .btn--whatsapp:hover { background: #189145; border-color: #189145; color: #ffffff; } /* Compartilhar o anuncio --------------------------------------------------------------------------- WhatsApp primeiro porque e onde os anuncios deste publico circulam de fato. Os botoes usam as CORES DAS MARCAS, e nao as do site: o reconhecimento vem da cor antes de vir do rotulo, e um WhatsApp azul faria a pessoa parar para ler o que deveria reconhecer de relance. */ .compartilhar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .compartilhar__rotulo { font-size: 0.86rem; font-weight: 600; color: var(--ink-soft); margin-right: 2px; } .btn--marca { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; min-height: 38px; font-size: 0.9rem; color: #ffffff; } .btn--marca svg { flex: none; } .btn--marca-whatsapp { background: #25d366; border-color: #25d366; } .btn--marca-whatsapp:hover { background: #1da851; border-color: #1da851; color: #ffffff; } .btn--marca-facebook { background: #1877f2; border-color: #1877f2; } .btn--marca-facebook:hover { background: #145dbf; border-color: #145dbf; color: #ffffff; } /* No celular a linha quebra: tres botoes lado a lado nao cabem, e apertados viram alvo de toque ruim. */ @media (max-width: 520px) { .compartilhar { gap: 6px; } .compartilhar__rotulo { width: 100%; margin-bottom: 2px; } .compartilhar .btn { flex: 1 1 auto; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .galeria__trilho { scroll-behavior: auto; } } /* Barra inferior do celular --------------------------------------------------------------------------- Cinco destinos ao alcance do polegar. So no celular: no computador o cabecalho ja cabe inteiro na tela e a barra roubaria altura util. Tudo o que e fixo no rodape sobe junto quando ela existe -- convite de instalacao, aviso de proibidos e o CTA do anuncio. Sem isso a barra cobriria os tres. */ :root { --barra-inferior-altura: 0px; } .barra-inferior { display: none; } @media (max-width: 720px) { :root { --barra-inferior-altura: 58px; } .barra-inferior { position: fixed; z-index: 80; inset: auto 0 0 0; display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch; height: var(--barra-inferior-altura); /* A faixa de gestos do iPhone fica por baixo da barra; sem isto o ultimo item ficaria embaixo dela e nao aceitaria toque. */ padding-bottom: env(safe-area-inset-bottom, 0px); border-top: 1px solid var(--line); background: var(--surface); box-shadow: 0 -2px 14px rgba(15, 23, 42, 0.07); } .barra-inferior__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink-faint); text-decoration: none; /* 11.5px, e nao 10.5: a pedido do dono, e medido antes de subir. De 360px para cima -- praticamente todo celular de hoje -- os cinco rotulos ficam em uma linha, sem se tocar e sem corte. So em 320px um deles quebra em duas linhas ("Minha Conta"), e isso ja acontecia com 10.5px, com outro item: "Quero anunciar", que por causa disto passou a aparecer aqui como "Anunciar" (ver barra-inferior.blade.php). A barra continua com 58px em todos os casos. */ font-size: 11.5px; line-height: 1.2; } .barra-inferior__item[aria-current="page"] { color: var(--brand-blue); font-weight: 600; } .barra-inferior__item:hover { text-decoration: none; } .barra-inferior__icone { display: grid; place-items: center; } /* Anunciar e a acao que o site quer que aconteca: ganha peso, e nao mais um lugar na fileira. */ .barra-inferior__item--destaque .barra-inferior__icone { width: 34px; height: 34px; margin-top: -12px; border-radius: 50%; background: var(--brand-blue); color: #ffffff; box-shadow: 0 4px 12px rgba(28, 74, 130, 0.32); } .barra-inferior__item--destaque { color: var(--brand-blue); } /* O rodape da pagina nao pode terminar embaixo da barra. */ body { padding-bottom: calc(var(--barra-inferior-altura) + env(safe-area-inset-bottom, 0px)); } .install-card { bottom: calc(var(--barra-inferior-altura) + 12px); } .aviso-proibidos { bottom: calc(var(--barra-inferior-altura) + 16px); } /* Na pagina de um anuncio, o convite de instalacao e o CTA de contato disputavam o MESMO ponto do rodape -- e o convite, por estar numa camada acima, cobria inteiro o botao de falar com o vendedor. Aqui o convite sobe e os dois passam a caber empilhados. `:has()` porque so a pagina de anuncio tem CTA; um recuo fixo deixaria um vao no rodape de todas as outras. Onde o navegador nao entende `:has()`, a regra e simplesmente ignorada e volta o comportamento antigo -- por isso o CTA tambem sobe de camada abaixo, o que ja resolve o encobrimento. */ body:has(.cta-anuncio) .install-card { bottom: calc(var(--barra-inferior-altura) + 74px); } /* O CTA fica ACIMA do convite: ele e a acao principal da pagina, e o convite e dispensavel. */ .cta-anuncio { z-index: 95; } /* O conteudo termina acima do CTA, e nao atras dele: a barra ja tem o seu recuo no `body`, e o CTA precisa do proprio. */ body:has(.cta-anuncio) { padding-bottom: calc(var(--barra-inferior-altura) + 72px + env(safe-area-inset-bottom, 0px)); } } /* CTA fixo da pagina do anuncio --------------------------------------------------------------------------- Numa pagina longa, o contato fica no fim -- e quem rolou ate a metade e se interessou nao deveria precisar procurar. So no celular: no computador o bloco de contato ja fica visivel ao lado. */ .cta-anuncio { display: none; } @media (max-width: 720px) { .cta-anuncio { position: fixed; z-index: 70; left: 12px; right: 12px; bottom: calc(var(--barra-inferior-altura) + 12px); display: block; } .cta-anuncio .btn { width: 100%; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2); } } /* Coracao de favoritar no cartao --------------------------------------------------------------------------- O cartao inteiro e um link, e um
nao pode viver dentro de um . Por isso o envoltorio: o link cobre o conteudo e o botao fica ao lado dele na arvore, sobreposto aqui. Canto superior DIREITO, oposto ao selo de destaque -- os dois aparecem juntos no mesmo cartao e nao podem disputar o mesmo lugar. */ .anuncio-card-wrap { position: relative; display: flex; } .anuncio-card-wrap > .anuncio-card { flex: 1 1 auto; min-width: 0; } .anuncio-card__favorito { position: absolute; z-index: 2; top: 8px; right: 8px; margin: 0; } .anuncio-card__favorito button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--ink-soft); cursor: pointer; box-shadow: 0 1px 5px rgba(15, 23, 42, 0.18); transition: color 0.14s ease, transform 0.14s ease; } .anuncio-card__favorito button:hover { color: #d33d52; transform: scale(1.06); } .anuncio-card__favorito button.is-ativo { color: #d33d52; } .anuncio-card__favorito button:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .anuncio-card__favorito button { transition: none; } .anuncio-card__favorito button:hover { transform: none; } } /* Olho da senha --------------------------------------------------------------------------- O envoltorio e criado pelo JavaScript. Sem ele, o campo continua sendo um campo de senha comum -- nada aqui muda o funcionamento, so a aparencia. */ .campo-senha { position: relative; display: block; } .campo-senha > .field__control { /* Espaco para o botao nao cobrir o que esta sendo digitado. */ padding-right: 44px; } .campo-senha__olho { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-faint); cursor: pointer; } .campo-senha__olho:hover { color: var(--ink); background: #f1f5f9; } .campo-senha__olho:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 1px; } /* Botoes de entrar com Google e Apple --------------------------------------------------------------------------- Largura inteira e conteudo centralizado: os dois ficam um sob o outro e larguras diferentes fariam a coluna parecer torta. 🔴 Estes botoes vivem sobre cartao BRANCO. Antes eles vinham com `btn--outline`, que e a variante do hero escuro (`color: #fff`): o rotulo ficava branco sobre branco e sumia, sobrando so o simbolo. As cores agora moram aqui, para o bloco nao depender de uma classe pensada para outro fundo. */ .btn--social { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; background: var(--surface); border-color: var(--line); color: var(--ink); } .btn--social:hover { background: #f9fafb; border-color: #d1d5db; } .btn--social svg { flex: none; } /* A diretriz da Apple pede o botao preto com a maca branca. O `currentColor` do SVG segue esta cor, entao o simbolo acompanha sozinho. */ .btn--apple { background: #000; border-color: #000; color: #fff; } .btn--apple:hover { background: #1a1a1a; border-color: #1a1a1a; } /* Bloco "ou" + botoes sociais. Sem cartao proprio: quem inclui decide. */ .entrar-com { display: grid; gap: 10px; } /* "ou" com um fio de cada lado, como no site de referencia. O texto precisa de fundo proprio para o fio nao passar por tras dele. */ .entrar-com__divisor { display: flex; align-items: center; gap: 12px; margin: 18px 0 8px; color: var(--ink-faint); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; } .entrar-com__divisor::before, .entrar-com__divisor::after { content: ""; flex: 1; height: 1px; background: var(--line); } .entrar-com__legal { margin: 4px 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--ink-faint); text-align: center; } /* Botao de largura inteira -- o "Entrar" principal e os sociais. */ .btn--bloco { display: flex; width: 100%; } /* Cartao unico da tela de entrar ------------------------------------------------------------------------- */ .auth-tela { display: flex; align-items: center; min-height: 60vh; } .auth-card { padding: 30px 28px 26px; } /* A marca abre o cartao e serve de saida: quem chegou por engano volta para a home sem procurar o menu. O fio abaixo separa a identidade do formulario. */ .auth-card__marca { display: block; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); } .auth-card__marca img { display: block; height: 44px; width: auto; } @media (max-width: 520px) { .auth-card { padding: 24px 20px 22px; } .auth-card__marca img { height: 38px; } } /* Escolher qual anuncio recebe o BOOST ------------------------------------------------------------------------- */ .escolher-anuncios { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .escolher-anuncios__item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .escolher-anuncios__texto { display: grid; gap: 2px; min-width: 0; } .escolher-anuncios__texto a { font-weight: 600; color: var(--ink); } .escolher-anuncios__meta { font-size: 0.86rem; color: var(--ink-faint); } /* Ja em destaque e ESTADO, nao botao. Verde para nao ser lido como erro. */ .escolher-anuncios__ativo { flex: none; padding: 6px 12px; border-radius: 999px; background: #eaf5ec; color: var(--brand-green); font-size: 0.84rem; font-weight: 600; } /* No celular a linha vira duas: o botao precisa da largura inteira para ser um alvo de toque decente. */ @media (max-width: 560px) { .escolher-anuncios__item { flex-direction: column; align-items: stretch; gap: 12px; } .escolher-anuncios__item .btn { width: 100%; } } /* Conversa ------------------------------------------------------------------------- */ .conversas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .conversa-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: inherit; } .conversa-item:hover { text-decoration: none; box-shadow: var(--shadow-card); } .conversa-item--nova { border-color: var(--brand-blue); } .conversa-item__corpo { display: grid; gap: 2px; min-width: 0; } .conversa-item__titulo { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conversa-item__quem { font-size: 13px; color: var(--ink-faint); } .conversa-item__selo { flex: none; min-width: 22px; padding: 2px 7px; border-radius: 999px; background: var(--brand-blue); color: #fff; font-size: 12px; font-weight: 700; text-align: center; } .conversa__anuncio { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--radius); color: inherit; } .conversa__anuncio:hover { text-decoration: none; background: #f8fafc; } /* Altura fixa com rolagem propria: a lista cresce sem empurrar o campo de escrever para fora da tela. */ .conversa__mensagens { display: grid; gap: 8px; max-height: 52vh; overflow-y: auto; padding: 14px 4px; margin: 14px 0; } .bolha { max-width: 78%; padding: 9px 13px; border-radius: 14px; background: #f1f5f9; } .bolha--minha { margin-left: auto; background: #e3edf9; } .bolha__texto { margin: 0; font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; } .bolha__aviso { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: #b3261e; } .bolha__hora { margin: 4px 0 0; font-size: 11px; color: var(--ink-faint); text-align: right; } .conversa__rapidas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .conversa__rapidas-titulo { flex-basis: 100%; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-faint); } .conversa__rapidas form { margin: 0; } .btn--rapida { font-size: 13px; padding: 7px 12px; } .conversa__envio { display: flex; gap: 8px; align-items: flex-end; } .conversa__envio textarea { flex: 1 1 auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; font-size: 14.5px; resize: vertical; } .notice--aviso { border-left: 3px solid var(--brand-yellow-dark); } /* Proposta de preco dentro da conversa --------------------------------------------------------------------------- Destacada do fio: e a unica parte da conversa em que um clique fecha um valor, e precisa se distinguir de uma mensagem qualquer. */ .oferta { margin: 4px 0 14px; padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--brand-green); border-radius: var(--radius); background: #f8fafc; } .oferta:empty { display: none; } .oferta__titulo { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-faint); } .oferta__valor { margin: 0 0 10px; font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--brand-green); } .oferta__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .oferta__acoes form { margin: 0; } .oferta__espera { margin: 0; font-size: 13.5px; color: var(--ink-faint); } .oferta__contra, .oferta__nova { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .oferta__personalizado { display: flex; gap: 8px; align-items: center; } .oferta input[type="number"] { width: 130px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; font-size: 14.5px; } /* Reputacao e avaliacao --------------------------------------------------------------------------- Os selos dizem FATOS -- quando a conta foi criada, se o e-mail foi confirmado, o que outras pessoas disseram. Nada aqui promete que a pessoa e confiavel: o site nao verifica identidade, e prometer isso seria vender uma garantia que nao existe. */ .reputacao { margin: 16px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); } .reputacao__titulo { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-faint); } .reputacao__nota { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; } .reputacao__estrelas { display: inline-flex; gap: 1px; color: var(--brand-yellow-dark); } .reputacao__nota strong { font-size: 17px; } .reputacao__nota span:last-child { font-size: 13px; color: var(--ink-faint); } .reputacao__vazia { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-faint); } .reputacao__selos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .reputacao__selos li { padding: 3px 9px; border-radius: 999px; background: #eef2f8; font-size: 12px; color: var(--ink-soft); } /* Estrelas do formulario: radios de verdade, desenhados ao contrario para que passar o mouse acenda da primeira ate a escolhida. */ .estrelas { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; border: 0; padding: 0; } .estrelas legend { float: left; width: 100%; } .estrelas input { position: absolute; opacity: 0; width: 1px; height: 1px; } .estrelas label { color: #d5dbe4; cursor: pointer; line-height: 0; } .estrelas input:checked ~ label, .estrelas label:hover, .estrelas label:hover ~ label { color: var(--brand-yellow-dark); } .estrelas input:focus-visible + label { outline: 2px solid var(--brand-blue); outline-offset: 2px; } .marcas { display: flex; flex-wrap: wrap; gap: 8px; } .marca { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; } /* Foto do pais no topo da home --------------------------------------------------------------------------- Substitui o globo das bandeiras: quem escolhe Portugal ve Lisboa. E o sinal mais rapido de que o site entendeu onde a pessoa esta -- antes disto a home era identica nos doze mercados e so o texto mudava. A cor de marca fica por baixo da foto de proposito: enquanto a imagem nao carrega, o topo ja tem o fundo certo e o texto branco continua legivel. Sem isso haveria um instante de texto branco sobre branco. */ .hero--foto { position: relative; isolation: isolate; background-color: var(--brand-navy); color: #ffffff; } .hero--foto .hero__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } /* O veu nao e enfeite: sem ele o texto branco some nas partes claras da foto, e cada pais falharia num ponto diferente. Mais escuro embaixo, onde ficam o campo de busca e os numeros. */ .hero--foto .hero__veu { position: absolute; inset: 0; z-index: -1; background: linear-gradient( 180deg, rgba(9, 29, 52, 0.62) 0%, rgba(9, 29, 52, 0.70) 45%, rgba(9, 29, 52, 0.86) 100% ); } /* O que vive dentro do cabecalho escuro --------------------------------------------------------------------------- Cada item aqui existe porque o fundo deixou de ser branco. Trocar so a cor do cabecalho e esquecer estes deixaria texto escuro sobre escuro -- exatamente o defeito que apareceu nos botoes sociais quando a variante errada foi usada sobre cartao branco. */ /* A logo tem letras verdes e azul-escuras: sobre o cabecalho escuro ela praticamente sumiria. O cartao branco e o que a mantem legivel -- e e como ela aparece na referencia. */ .site-header__brand { flex-shrink: 0; padding: 6px 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 16px 36px rgba(2, 6, 23, 0.16); } /* 130px, como na referencia -- a logo de 166px comia o espaco de dois itens de menu. */ .site-header__brand img { width: 116px; height: auto; } /* 14px e espacamento curto, como no site de referencia: com nove itens, e o que faz o menu caber sem apertar os botoes de conta contra a borda. */ .site-nav { gap: 2px; } .site-nav a { color: rgba(255, 255, 255, 0.85); /* * 12px, e nao 13px. * * O container do cabecalho e fixo em 1200px, entao tela maior NAO da mais * espaco: a conta e sempre a mesma -- logo + nove itens + tres botoes. Com * 13px a soma passava de 1200 e os botoes de conta caiam para uma segunda * linha, em qualquer largura. Um pixel de fonte aqui vale mais que dezenas * de pixels de tela. */ font-size: 12px; font-weight: 500; padding: 6px 7px; border-radius: 999px; border-bottom: 0; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; } .site-nav a:hover { background: rgba(255, 255, 255, 0.1); } .site-nav a:hover { color: #ffffff; text-decoration: none; } /* A pagina atual ganha uma pastilha, e nao so uma linha embaixo: sobre foto a linha fina se perde em qualquer trecho claro da imagem. */ .site-nav a[aria-current="page"] { color: #ffffff; background: rgba(255, 255, 255, 0.16); border-radius: 999px; border-bottom-color: transparent; padding: 6px 12px; } .site-header .btn--ghost { border-color: rgba(255, 255, 255, 0.42); color: #ffffff; background: rgba(255, 255, 255, 0.08); } .site-header .btn--ghost:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.6); color: #ffffff; } .context-bar { border-top: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.78); } /* Seletor de pais e idioma viram pilulas claras, como na referencia. */ .seletor-pais > summary { background: rgba(255, 255, 255, 0.92); color: var(--brand-navy); border-radius: 999px; padding: 5px 12px; border-color: transparent; } .seletor-pais > summary:hover { background: #ffffff; } .lang-switch a { color: rgba(255, 255, 255, 0.8); border-radius: 999px; padding: 3px 10px; } .lang-switch a[aria-current="true"] { background: #ffffff; color: var(--brand-navy); font-weight: 700; } /* ------------------------------------------ alvo de toque do idioma -- Os links PT/EN tinham 27px de altura. Um dedo pede 44px, e no celular eles ficam colados um no outro dentro da mesma pastilha: errar o alvo nao deixa a pessoa sem acao, troca o idioma do site inteiro. Ao lado, o seletor de pais ja tem 46px -- eram os dois controles da mesma faixa com metade da altura um do outro. ⚠️ ESTE BLOCO PRECISA FICAR DEPOIS DA REGRA DA LINHA ~4532, e nao junto das outras regras de desktop la em cima. Aquele `.lang-switch a` vem por ultimo no arquivo e vencia qualquer padding definido antes -- foi o que aconteceu com a minha primeira tentativa, que ficou sem efeito nenhum. */ .lang-switch a { display: inline-flex; align-items: center; min-height: 44px; padding-left: 14px; padding-right: 14px; } @media (min-width: 1280px) { /* No desktop o ponteiro e preciso, e a linha inteira do cabecalho tem 57px: 44px de alvo aqui a empurrariam para mais de 60px so por causa disto. */ .lang-switch a { min-height: 0; padding: 3px 9px; font-size: .78rem; } } .menu-toggle { color: #ffffff; } /* O painel do menu de celular abre POR CIMA da pagina, e nao sobre a foto -- ali o fundo claro e o certo, senao o conteudo por baixo atravessa o texto. */ .mobile-menu__panel { background: var(--surface); color: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; } .mobile-menu__panel a { color: var(--ink); } /* O painel de paises tambem: e uma lista longa que precisa de fundo solido. */ .seletor-pais__painel { background: var(--surface); color: var(--ink); } /* Minha localizacao (ordenar por distancia) ------------------------------------------------------------------------- */ .localizacao { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .localizacao__ativa { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: #eaf5ec; color: var(--brand-green); font-size: 0.85rem; font-weight: 600; } /* A dica explica o que e guardado. Fica junto do botao, e nao escondida atras de um "saiba mais": quem vai decidir sobre a propria localizacao precisa saber ANTES de clicar. */ .localizacao__dica { font-size: 0.8rem; line-height: 1.45; color: var(--ink-faint); /* Larga o bastante para a dica caber em duas linhas ao lado do botao; mais do que isso e o olho perde a volta da linha. */ max-width: 62ch; } /* Botao e dica na mesma linha enquanto couber, empilhados no celular. Antes a dica caia numa coluna estreita ao lado do botao e quebrava em tres linhas soltas. */ .localizacao__pedir { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; } .localizacao__pedir .localizacao__dica { flex: 1 1 300px; } /* Permissao recusada: o aviso ocupa a linha inteira debaixo do botao. */ .localizacao__erro { flex: 1 1 100%; margin: 0; font-size: 0.82rem; font-weight: 600; color: #b42318; } .filter-bar__field--largo { grid-column: 1 / -1; } /* Paginacao --------------------------------------------------------------------------- Uma linha so, centralizada, com o mesmo formato de pilula dos botoes do site. A pagina atual e a unica preenchida: quem chega rolando precisa saber onde esta antes de escolher para onde vai. */ .paginacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 32px 0 8px; } .paginacao__seta, .paginacao__pagina { display: inline-flex; align-items: center; justify-content: center; /* 44px: mesmo alvo de toque do resto do site. */ min-width: 44px; min-height: 44px; padding: 0 14px; font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); background: #fff; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; transition: border-color 0.14s ease, color 0.14s ease; } .paginacao__seta:hover, .paginacao__pagina:hover { border-color: var(--brand-blue); color: var(--brand-blue); text-decoration: none; } .paginacao__pagina--atual, .paginacao__pagina--atual:hover { background: var(--brand-green); border-color: var(--brand-green); color: #fff; cursor: default; } /* Ponta da lista: o botao continua no lugar para a linha nao mudar de forma, mas apagado e sem clique. */ .paginacao__seta--fim { opacity: 0.45; cursor: not-allowed; } .paginacao__paginas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .paginacao__reticencias { padding: 0 2px; color: var(--ink-faint); } .paginacao__seta:focus-visible, .paginacao__pagina:focus-visible { border-radius: 999px; } @media (max-width: 520px) { /* Em tela estreita os numeros saem: as duas setas resolvem, e uma fileira de dez pilulas quebrada em tres linhas atrapalha mais do que ajuda. */ .paginacao__paginas { display: none; } } @media (prefers-reduced-motion: reduce) { .paginacao__seta, .paginacao__pagina { transition: none; } } /* Mensagens nao lidas: selo do cabecalho, da barra do celular e o aviso da conta --------------------------------------------------------------------------- O numero e sempre o mesmo (uma consulta so, no AppServiceProvider). Muda a forma: pastilha no botao, bolinha sobre o icone, faixa clicavel no painel. */ .selo-mensagens { position: relative; padding-left: 14px; padding-right: 14px; } .selo-mensagens__numero { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #b42318; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; } .barra-inferior__item { position: relative; } /* O numero herdava o tamanho do item e cresceria junto com o rotulo, dentro de um circulo de 17px. Fica preso no tamanho antigo: quem precisa de leitura confortavel e a palavra embaixo do icone, nao o "9+". */ .barra-inferior__selo { font-size: 10.5px; position: absolute; top: 4px; left: 50%; margin-left: 4px; min-width: 17px; height: 17px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #b42318; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1; } /* Na conta o aviso e a primeira coisa da pagina, entao pode ocupar a linha inteira -- e clicavel por inteiro, nao so no texto. */ .aviso-mensagens { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-card); color: var(--ink); text-decoration: none; font-size: 0.94rem; line-height: 1.5; } .aviso-mensagens:hover { border-color: var(--brand-green); text-decoration: none; } .aviso-mensagens__numero { flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--brand-green); color: #fff; font-weight: 700; } /* Distancia e mapa da regiao ------------------------------------------------------------------------- */ /* A distancia acompanha o local, e nao compete com ele: mesma linha, mesmo tamanho, so um peso a mais. Cor propria dela seria um terceiro tom disputando atencao com o preco, que e o que a grade existe para comparar. */ .anuncio-card__distancia, .anuncio__distancia { font-weight: 600; white-space: nowrap; } .mapa { margin: 0 0 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } /* O triangulo do
some e vira um rotulo clicavel de tamanho de dedo: 44px de altura util, que e o minimo confortavel no telefone. */ .mapa__abrir { list-style: none; cursor: pointer; padding: 12px 14px; font-weight: 600; color: var(--brand-navy); } .mapa__abrir::-webkit-details-marker { display: none; } .mapa__abrir::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); } .mapa[open] .mapa__abrir::after { transform: translateY(2px) rotate(-135deg); } .mapa__abrir:focus-visible { outline: 2px solid var(--brand-green); outline-offset: 2px; } /* Proporcao fixa para o quadro nao pular de altura quando o mapa termina de carregar -- o salto empurraria o texto que a pessoa esta lendo. */ .mapa__quadro { aspect-ratio: 16 / 9; margin: 0 14px; border-radius: calc(var(--radius) - 4px); overflow: hidden; /* Cinza claro por tras enquanto o mapa nao chega: o quadro branco pareceria um erro de carregamento. */ background: var(--brand-cream); } .mapa__quadro iframe { width: 100%; height: 100%; border: 0; display: block; } .mapa__aviso { margin: 10px 14px 14px; font-size: 0.8rem; line-height: 1.45; color: var(--ink-faint); } /* Selo de anuncio de demonstracao ------------------------------------------------------------------------- */ /* Faixa na BASE da foto, e nao um selo de canto: o canto esquerdo e do destaque pago e o direito do coracao, e um anuncio pode ser as tres coisas ao mesmo tempo. A faixa tambem e mais dificil de nao ver -- que e exatamente o ponto de um aviso de honestidade. Fundo solido o bastante para o texto sobreviver a qualquer foto por tras: um aviso que some sobre a imagem clara nao avisa ninguem. */ .anuncio-card__demo { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; margin: 0; padding: 5px 10px; background: rgba(11, 31, 56, 0.86); color: #ffffff; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; line-height: 1.45; text-align: center; text-transform: uppercase; } /* Selo de demonstracao na pagina do anuncio ------------------------------------------------------------------------- Na grade o selo e uma faixa sobre a foto; aqui ele precisa de outra forma, porque nao ha foto por tras e ele vem ANTES do titulo. Fica um bloco largo, com a barra a esquerda que o site ja usa para avisos -- reconhecivel como "recado do site", e nao como parte do anuncio. */ .anuncio__demo { margin: 0 0 10px; padding: 9px 13px; border-left: 4px solid var(--brand-navy); border-radius: 0 var(--radius) var(--radius) 0; background: #eef2f8; color: var(--brand-navy); font-family: var(--font-display); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } /* No contato o tom muda: ali nao se avisa, se explica o que vai acontecer se a pessoa clicar. Por isso frase inteira, sem caixa alta e sem peso de selo. */ .anuncio__demo-contato { margin: 0 0 12px; color: var(--ink-faint); font-size: 0.9rem; line-height: 1.5; } /* Atalho da mesa de moderacao, na area da conta ------------------------------------------------------------------------- O bloco so existe para quem administra algum mercado -- ver conta/index. */ .moderacao-atalho__lead { margin: 0 0 14px; color: var(--ink-soft); font-size: 0.95rem; } /* Um mercado por linha, em pilulas: com doze paises, uma lista com marcador viraria uma coluna comprida e sem foco. */ .moderacao-atalho__mercados { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .moderacao-atalho__mercados a { display: inline-block; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--brand-navy); font-size: 0.9rem; font-weight: 600; text-decoration: none; } .moderacao-atalho__mercados a:hover, .moderacao-atalho__mercados a:focus-visible { border-color: var(--brand-green); color: var(--brand-green); } /* * Quantos estao esperando naquele pais. * * Vermelho CHEIO, e nao texto vermelho: o bloco tem doze rotulos iguais, e o * que se procura ali e qual deles pede atencao -- uma mancha de cor resolve * isso antes da leitura comecar. E o mesmo #b42318 do `btn--danger`, para o * site nao ganhar um segundo vermelho. * * ⚠️ A cor nao e a unica pista, de proposito: o numero esta escrito, e o link * carrega um `title` dizendo quantos sao de fila e quantos de denuncia. Quem * nao distingue vermelho continua sabendo o mesmo. */ .moderacao-atalho__espera { display: inline-block; min-width: 20px; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #b42318; color: #fff; font-size: 0.78rem; font-weight: 700; line-height: 1.5; text-align: center; } /* A borda do rotulo acompanha, para a marca nao depender so do numero quando a lista enche a largura toda. */ .moderacao-atalho__mercados a[data-espera] { border-color: #fecdca; } .moderacao-atalho__mercados a[data-espera]:hover, .moderacao-atalho__mercados a[data-espera]:focus-visible { border-color: #b42318; color: #b42318; } /* Quem ja esta restrito: o estado vem antes do botao, senao o rotulo "devolver o direito" aparece sem dizer que ele foi tirado. */ .moderacao__estado { margin: 0 0 10px; font-size: 0.9rem; font-weight: 600; color: var(--brand-yellow-dark); } /* =========================================================== convite == O convite para apoiar e os tres planos ⚠️ O PREFIXO E `convite`, e nao `oferta`. `.oferta__*` ja pertence a proposta de preco do chat (`mensagens/oferta.blade.php`), com trinta regras. Escrevi este bloco com aquele prefixo primeiro e, como ele vem depois no arquivo, sobrescrevi o `.oferta` da conversa -- a caixa de proposta perdeu borda, fundo e espacamento, e o titulo daqui saiu em CAIXA ALTA por herdar o `text-transform` de la. Nada acusou: as duas telas continuaram carregando, no fim do formulario de anuncio e no painel do anunciante. O DESENHO PEDIDO: o cartao de apoio a ESQUERDA, ocupando pouco menos de metade da linha, e o bloco dos planos EMBAIXO, na largura toda. A coluna da direita fica vazia de proposito -- e o respiro que separa o convite do catalogo, e o que impede os dois de parecerem a mesma oferta. ⚠️ Este bloco vive no FIM do arquivo, e nao junto dos outros cartoes. Duas vezes hoje uma regra escrita mais acima virou letra morta: media query nao soma especificidade, e entre pesos iguais vence a ultima do arquivo. No celular vira uma coluna so, na mesma ordem em que se le. */ .convite { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 32px; } @media (min-width: 900px) { .convite { grid-template-columns: minmax(0, 430px) minmax(0, 1fr); } .convite__cartao--apoio { grid-column: 1; } /* `1 / -1` e o que o pedido chama de "embaixo": a segunda linha inteira. */ .convite__cartao--planos { grid-column: 1 / -1; } } .convite__cartao { /* O degrade da referencia: creme quente descendo para o creme da marca. */ background: linear-gradient(155deg, #fffdf3 0%, #faf3dd 55%, #f4ecd6 100%); border: 1px solid #f0e3bb; border-radius: 20px; padding: 26px 24px; } .convite__selo { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--brand-yellow); color: var(--brand-navy); margin-bottom: 16px; } .convite__etiqueta { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9a6b12; } .convite__etiqueta--planos { color: var(--brand-green); } .convite__titulo { margin: 0 0 10px; font-size: 21px; line-height: 1.25; color: var(--brand-navy); } .convite__texto { margin: 0 0 18px; color: var(--ink-soft); font-size: 15px; line-height: 1.55; } .convite__botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; border-radius: 999px; } .convite__nota { margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-faint); } /* Os planos: um cartao por plano, lado a lado, quebrando sozinhos quando a linha acaba. Nao e tabela -- a comparacao completa mora em /planos. */ .convite__planos { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; } .convite__plano { display: flex; flex-direction: column; gap: 2px; min-width: 150px; padding: 12px 18px; border: 1px solid #e6dcc0; border-radius: 14px; background: rgba(255, 255, 255, .72); color: var(--brand-navy); text-decoration: none; transition: border-color .15s ease, background-color .15s ease; } .convite__plano:hover { border-color: var(--brand-green); background: #fff; text-decoration: none; } .convite__plano:focus-visible { outline: 3px solid var(--brand-blue-light); outline-offset: 2px; } .convite__plano-nome { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .convite__plano-preco { font-size: 17px; font-weight: 700; } .convite__plano-periodo { font-size: 13px; font-weight: 500; color: var(--ink-faint); } /* O plano ainda sem preco no Stripe continua na lista, mas avisado: some-lo faria a pagina de precos, que promete os tres, contradizer esta. */ .convite__plano-breve { font-size: 12px; font-style: normal; font-weight: 600; color: #9a6b12; } .convite__todos { display: inline-block; font-weight: 600; color: var(--brand-blue); } /* ========================================================== telefone == Codigo do pais e numero lado a lado. Sao dois campos de verdade, e nao um campo escondido preenchido por script: se o JavaScript falhar, o formulario continua enviando o numero certo -- e o telefone e o unico jeito de o comprador chegar em quem anuncia. No celular o seletor fica em cima e a caixa embaixo: lado a lado, os dois ficariam estreitos demais para ler o nome do pais e digitar o numero. */ .telefone { display: grid; grid-template-columns: 1fr; gap: 8px; } @media (min-width: 560px) { .telefone { /* O seletor pede largura fixa: com `auto` ele encolhe e cresce conforme o pais escolhido, e a caixa do numero pula de tamanho a cada troca. */ grid-template-columns: minmax(0, 190px) minmax(0, 1fr); } } .telefone__ddi { min-width: 0; } .telefone__numero { min-width: 0; } /* Detalhes de moradia na pagina do anuncio: lista simples, uma linha por informacao. Sao dados que se comparam entre anuncios, e nao prosa. */ .anuncio__moradia { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; font-size: 15px; color: var(--ink-soft); } .anuncio__moradia li { padding-left: 16px; position: relative; } .anuncio__moradia li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-green); } /* --------------------------------------------------------------------------- Cabecalho: a linha unica, e o ar em volta da logo --------------------------------------------------------------------------- Tudo o que mexe no desenho do cabecalho mora AQUI, no fim do arquivo, e por um motivo mecanico: as regras de refinamento acima repetem os mesmos seletores com a mesma especificidade, e media query nao aumenta especificidade. Regra de cabecalho escrita antes delas nao vale nada. A conta, medida no navegador em 1280px: o cabecalho pedia 1226px e a caixa util tem 1225. UM pixel -- e um pixel joga a fila inteira de botoes para uma segunda linha. A folga de ~80px que existia foi consumida quando o botao de mensagens entrou: eram tres botoes de conta, passaram a ser quatro. */ /* Ar em cima e embaixo da logo. O cartao branco tinha 6px e a marca ficava espremida contra as bordas; 10px devolvem o respiro da referencia. O horizontal fica em 10px de proposito -- cada pixel ali disputa com o menu, e o vertical nao custa largura nenhuma. */ .site-header__brand { padding: 10px 10px; } @media (min-width: 1280px) { /* Os botoes de conta ficam colados no ultimo item do menu; o pais e o idioma vao para a ponta direita. Antes era o contrario, e a fila de acoes ficava separada do menu por 150px de seletores. */ .site-header__actions { order: 2; } .context-bar { order: 3; } } /* A faixa de 1280 a 1440: onde o menu completo acaba de aparecer e ainda ha nove itens disputando espaco com a logo e QUATRO botoes. Aqui tudo encolhe um pouco -- quebrar linha custa caro, porque o cabecalho dobra de altura e o titulo do hero acaba atras dele. ⚠️ Estes valores tem de ficar SEMPRE menores que os da base, ou o bloco aumenta em vez de apertar. Mexeu na base? Confira aqui. A fonte do menu subiu de 11.5px para 12px a pedido do dono -- passou a ser a mesma da base, e o bloco deixou de encolher a letra. Sozinha, a mudanca derrubava a folga de 26px para 10, o que e pouco: uma fonte de sistema diferente ou um item novo de menu quebraria a linha. O espaco veio de dois lugares que ninguem enxerga -- 1px de padding em cada lado das pastilhas do menu (nove itens, 18px) e 2px no vao entre os blocos do cabecalho (6px) --, e a folga terminou em 30px: MAIOR do que era com a letra menor. Medido no navegador, na vitrine, que e o pior caso: o item ativo do menu usa padding maior que os demais. */ @media (min-width: 1280px) and (max-width: 1440px) { .site-nav a { font-size: 12px; padding-left: 5px; padding-right: 5px; } .site-header__inner { gap: 8px; } .site-header__actions { gap: 6px; } .site-header__brand img { width: 104px; } .site-header__actions .btn { padding-left: 10px; padding-right: 10px; font-size: 11.5px; } } /* O nome do pais ao lado da bandeira, so quando ha espaco de sobra. --------------------------------------------------------------------------- Medido: o nome custa 52px, e a caixa util do cabecalho e 1280px em QUALQUER tela grande, porque o `max-width: 1320px` nao cresce. A folga na pagina de Anuncios -- a pior, porque o item ativo do menu usa padding maior -- e de 26px. Mostrar o nome ali deixaria a conta em -26 e jogaria os botoes de volta para a segunda linha. A partir de 1560px de tela sobra o suficiente para alargar o cabecalho e pagar os 52px, com ~54px de folga. Abaixo disso o nome continua escondido, e quem usa leitor de tela nao perde nada: o `aria-label` do diz "Pais: Irlanda" em qualquer largura, e o nome completo esta dentro do painel que se abre -- que e onde a troca de fato acontece. */ @media (min-width: 1560px) { .site-header__inner { max-width: 1400px; } .seletor-pais__atual { display: inline; } } /* --------------------------------------------------------------------------- Onde este anuncio vai sair: os doze paises, e o cadeado nos fechados --------------------------------------------------------------------------- O cartao de convite ao ELITE reaproveita `.convite__cartao`, que ja desenha a oferta de planos no fim desta mesma pagina -- so muda o espacamento, para ele caber ACIMA do formulario sem empurrar o campo de titulo para longe. Um segundo desenho de "convite ao plano" na mesma tela seria a mesma oferta com duas caras. */ .convite__cartao--pais { margin-bottom: 18px; padding: 20px 22px; } .convite__cartao--pais .convite__texto { margin-bottom: 14px; } /* O botao do cartao de convite ocupa a largura toda; neste, acima do formulario, isso viraria uma barra verde de 700px pedindo dinheiro antes de a pessoa escrever a primeira palavra. */ .convite__botao--curto { width: auto; min-height: 44px; padding-left: 22px; padding-right: 22px; } .paises-do-anuncio { margin: 0 0 18px; } .paises-do-anuncio__titulo { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--ink-soft); } .paises-do-anuncio__lista { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .pais-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line, #e5e7eb); border-radius: 999px; background: #fff; color: var(--ink-soft); font-size: 13px; text-decoration: none; } .pais-chip:hover { border-color: var(--brand-green); color: var(--brand-navy); } /* O pais deste anuncio: cheio, e nao apenas contornado -- de longe tem de dar para ver em qual pais o anuncio vai sair sem ler os doze. */ .pais-chip--atual { background: var(--brand-navy); border-color: var(--brand-navy); color: #fff; font-weight: 700; } /* Fechado, e nao escondido: continua legivel, continua clicavel, e o clique leva a /planos. Um botao desativado nao explicaria por que esta desativado. */ .pais-chip--trancado { opacity: .72; } .pais-chip--trancado:hover { opacity: 1; } .pais-chip__selo { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--brand-yellow); color: var(--brand-navy); } .pais-chip--atual .pais-chip__selo { background: var(--brand-green); color: #fff; } /* O pais da conta, quando a tela esta noutro: contornado, para a pessoa achar de relance o unico chip onde ela PODE publicar. Nao pintado por dentro -- pintado e o pais da tela, e dois cheios competiriam. */ .pais-chip--casa { border-color: var(--brand-green); color: var(--brand-navy); font-weight: 700; } /* ========================================================================== A lista publica de avaliacoes de um anunciante (/anunciante/{id}/avaliacoes) ========================================================================== */ /* Texto corrido se le em coluna estreita: a largura da vitrine, que existe para caber cartao lado a lado, joga o olho longe demais entre uma linha e a proxima. */ .avaliacoes-coluna { max-width: 720px; } .reputacao--destaque { margin: 0 0 20px; padding: 16px 18px; } .reputacao--destaque .reputacao__nota strong { font-size: 22px; } .avaliacoes { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; } .avaliacao { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; } .avaliacao__topo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .avaliacao__estrelas { display: inline-flex; gap: 1px; color: var(--brand-yellow-dark); } .avaliacao__autor { font-weight: 600; font-size: 14px; } /* A data empurrada para a direita: ela informa, mas nao disputa a leitura com o que a pessoa escreveu. */ .avaliacao__data { margin-left: auto; font-size: 12.5px; color: var(--ink-faint); } .avaliacao__texto { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; } .avaliacao__texto--vazio { color: var(--ink-faint); font-style: italic; } .avaliacao__marcas { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; } .avaliacao__marcas li { padding: 3px 9px; border-radius: 999px; background: #eef2f8; font-size: 12px; color: var(--ink-soft); } .avaliacao__anuncio { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-faint); } .avaliacao__anuncio a { color: inherit; } /* Os caminhos que saem da reputacao: as avaliacoes e o portfolio. `block`, e nao `inline-block`: desde que sao DOIS, dois inline-block cabem lado a lado na coluna larga e so quebram na estreita -- a mesma caixa mudava de desenho conforme a largura, e no telefone os dois links colavam um no outro. Empilhados, sao dois caminhos distintos em qualquer largura. `width: fit-content` mantem a area clicavel do tamanho do texto: um `block` solto faria o clique valer na faixa inteira, inclusive no vazio a direita. */ /* O contador de visualizacoes, na coluna do anuncio. Divide o desenho com `.anuncio__data` -- a data de publicacao logo acima e da mesma natureza -- e ganha so o peso: e a unica linha daquele bloco que existe para ser notada, e sem nenhuma diferenca a classe seria um gancho inventado que nao faz nada. */ .anuncio__visualizacoes { font-weight: 600; color: var(--ink-soft); } /* 🔴 NOTA RUIM SAI EM VERMELHO -- ordem do dono. O corte e abaixo de 3 e mora num lugar so, `App\Support\CorDaNota`: a nota aparece em quatro telas, e um limite copiado nas quatro um dia vale em tres. `#912018` e o mesmo vermelho de `.alert--erro`, e nao um tom novo: o site ja diz "algo esta errado" nessa cor, e uma segunda voz para a mesma ideia faz o leitor aprender duas. As estrelas herdam a cor por `currentColor` no `fill` e no `stroke` -- por isso basta pintar o bloco, e o `` do numero precisa da regra propria so porque ele tinha uma cor fixa antes. */ .reputacao__nota--ruim, .avaliacao__estrelas--ruim, .anuncio-card__nota--ruim { color: #912018; } .reputacao__nota--ruim .reputacao__estrelas, .anuncio-card__nota--ruim svg { color: #912018; } .reputacao__nota--ruim strong, .anuncio-card__nota--ruim strong { color: #912018; } .reputacao__link { display: block; width: fit-content; margin-top: 8px; font-size: 13px; }