/* ========================================================================== TeuQuiz v2 — sistema visual ESCRITO PARA CELULAR PRIMEIRO. 94,3% dos cliques do site vêm de mobile (Search Console, 90 dias); desktop é 4%. As regras base são as de tela pequena, e telas maiores é que recebem ajuste com `min-width`. -------------------------------------------------------------------------- O QUE MUDOU NESTA VERSÃO, E POR QUÊ -------------------------------------------------------------------------- A v2 tinha um CSS que funcionava e parecia um formulário. O print que o dono deixou (`ferramentas/imagens/comparacao-teuquiz-quizur.png`), com a beta à esquerda e o 1º colocado da busca à direita na mesma largura de 414px, deixa a diferença óbvia — e ela não é de gosto: - **Sem escala.** Tudo entre 0.8rem e 1.06rem, três pesos, e a hierarquia feita à mão em cada bloco. Página sem escala parece painel de admin. - **Sem elevação.** Toda superfície com a mesma borda de 1px. Borda separa; sombra ORDENA — diz o que está por cima do quê. - **Sem forma consistente.** Um raio só, de 0.75rem, do cartão gigante ao chip minúsculo. Raio é proporcional ao tamanho, senão o pequeno parece quadrado e o grande parece mole. - **Sem alvo de marca.** O vermelho aparecia como barra de 4px na lateral de todo cartão — o acento gasto no lugar mais barato, e nenhum botão "criar quiz" no topo, que é a ação que sustenta o site. A resposta é um SISTEMA, não uma folha de estilos: escala tipográfica, escala de espaço, escala de raio, três níveis de elevação e um acento que aparece pouco e sempre no mesmo papel. -------------------------------------------------------------------------- A TIPOGRAFIA — e a decisão que foi revista -------------------------------------------------------------------------- A versão anterior deste arquivo dizia "nada de fonte externa" e usava a fonte do sistema. O argumento era bom: requisição a mais num site de conexão ruim. Mas ele custava a identidade inteira — a fonte do sistema é literalmente a fonte de todo aplicativo do aparelho, e um site de quiz que parece a tela de ajustes do celular não parece um produto. A decisão nova: **uma família variável, subconjunto latino, com fallback de sistema e `display=swap`.** Plus Jakarta Sans é geométrica e amigável — o registro do produto — e cobre título e interface, então é UM arquivo. O que protege o desempenho: - `display=swap`: o texto aparece na hora, na fonte do sistema, e troca quando a fonte chega. Nunca há tela em branco esperando fonte. - `preconnect` no ``, antes do `` da folha. - a pilha de fallback continua completa: se a fonte não carregar, o site fica exatamente como estava. A CSP já autorizava `fonts.googleapis.com` e `fonts.gstatic.com` (`config/app.php`, chave `terceiros`) — nada foi afrouxado para isto. -------------------------------------------------------------------------- IDENTIDADE O vermelho continua sendo o do site em produção; o que mudou foi o papel dele. Antes ele era moldura (barra na lateral de cada cartão). Agora é AÇÃO: botão principal, item ativo, foco, e nada mais. Acento que aparece em tudo não acentua nada. ESCRITO PARA QUALQUER DIREÇÃO DE TEXTO. Onde o lado depende da leitura, as propriedades são LÓGICAS (`padding-inline-start`, `border-inline-start`, `inset-inline-start`) e não físicas. Árabe, hebraico e persa são 3 dos 42 idiomas do roster, e com propriedade lógica eles viram de lado sozinhos. A EXCEÇÃO SÃO AS ÁREAS SEGURAS: `--seguro-esq` e `--seguro-dir` continuam em `padding-left/right` de propósito. O notch fica num lado FÍSICO do aparelho, e esse lado não muda porque o texto mudou de direção. ========================================================================== */ :root { /* ------------------------------------------------------------------ COR Os nomes são os antigos porque metade do arquivo já depende deles — trocar nome de token é refatoração que não muda um pixel. O que mudou foram os VALORES, e a lógica por trás deles: --fundo o papel. Cinza levemente frio, nunca branco: com o fundo branco, o cartão branco some e a página vira uma folha de Word. --superficie o que está sobre o papel. --superficie-2 o que está DENTRO de uma superfície (campo, chip). ------------------------------------------------------------------ */ --marca: #E5322D; /* Para TEXTO sobre fundo claro. O vermelho vivo não passa em contraste como texto pequeno; este passa, e continua sendo a mesma cor. */ --marca-forte: #B31F1B; --marca-clara: #FF5A54; --marca-escura: #A81A16; /* Fundo tingido de marca: seleção, item ativo, aviso. */ --marca-tinta: #FFF0EF; --marca-contraste: #FFFFFF; --escuro: #26262C; --escuro-medio: #63636E; --fundo: #F4F4F7; --superficie: #FFFFFF; --superficie-2: #F0F0F4; --superficie-3: #E7E7EE; --texto: #131317; --texto-suave: #5F5F6B; --texto-fraco: #8B8B97; --borda: #E7E7EE; --borda-forte: #D6D6E0; /* Cor da seção "Quiz sobre mim", herdada do site atual. */ --quiz-sobre-mim: #E5322D; --verde: #12A150; --verde-tinta: #E8F7EF; /* O par do erro. Não é a cor da marca: `--marca` significa AÇÃO no sistema visual (botão, item ativo, foco), e usá-la para "errou" faria a resposta errada parecer clicável. */ --vermelho: #C42B21; --vermelho-tinta: #FCEDEC; /* ------------------------------------------------------------------ FORMA — o raio é proporcional ao tamanho do elemento. Um raio só para tudo é o erro mais comum: no chip de 24px ele some, e no cartão de 300px ele parece derretido. ------------------------------------------------------------------ */ --r-xs: 0.5rem; --r-sm: 0.75rem; --raio: 1rem; /* o padrão, e o nome antigo */ --r-lg: 1.25rem; --r-xl: 1.75rem; --r-pilula: 999px; /* ------------------------------------------------------------------ ELEVAÇÃO — três níveis, e cada um tem um trabalho. Duas camadas por sombra: uma curta e escura (o contato com o papel) e uma longa e difusa (a luz do ambiente). Sombra de uma camada só é o que faz interface parecer adesivo colado na tela. ------------------------------------------------------------------ */ --sombra-1: 0 1px 2px rgba(19, 19, 23, .05), 0 1px 3px rgba(19, 19, 23, .04); --sombra-2: 0 2px 4px rgba(19, 19, 23, .04), 0 8px 20px rgba(19, 19, 23, .07); --sombra-3: 0 4px 8px rgba(19, 19, 23, .06), 0 16px 40px rgba(19, 19, 23, .12); --sombra-marca: 0 4px 14px rgba(229, 50, 45, .30); /* ------------------------------------------------------------------ TIPOGRAFIA — escala fluida, com o passo crescendo junto do tamanho. Cada nível tem tracking próprio: título grande precisa de tracking negativo (as letras já se tocam), texto pequeno precisa de positivo (senão fecha). Fonte com escala e tracking constantes é o que dá o aspecto de "tema padrão". ------------------------------------------------------------------ */ --fonte: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fonte-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --t-display: clamp(2.125rem, 1.55rem + 2.9vw, 3.25rem); --t-h1: clamp(1.75rem, 1.42rem + 1.65vw, 2.5rem); --t-h2: clamp(1.3125rem, 1.2rem + 0.56vw, 1.625rem); --t-h3: 1.0625rem; --t-corpo: 1rem; --t-sm: 0.875rem; --t-xs: 0.78125rem; --t-micro: 0.6875rem; /* ------------------------------------------------------------------ ESPAÇO — uma escala, para o ritmo vertical não ser decidido bloco a bloco. `--v-secao` é a distância entre seções, e ela cresce com a tela: no celular o ar custa rolagem; no desktop ele é o que separa. ------------------------------------------------------------------ */ --v-secao: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); --largura: 64rem; /* Suavização do movimento. Uma curva só no site inteiro. */ --curva: cubic-bezier(.2, .7, .3, 1); --rapido: 140ms; --normal: 220ms; /* Espaço para o "notch" e a barra de gestos dos celulares */ --seguro-esq: env(safe-area-inset-left, 0px); --seguro-dir: env(safe-area-inset-right, 0px); --seguro-baixo: env(safe-area-inset-bottom, 0px); --seguro-topo: env(safe-area-inset-top, 0px); color-scheme: light; } /* -------------------------------------------------------------------------- MODO ESCURO — POR ESCOLHA, NÃO PELO APARELHO Este bloco era disparado por `@media (prefers-color-scheme: dark)`. Agora ele só vale com `data-theme="dark"` no ``, escrito pelo servidor a partir da escolha guardada em cookie (ver `app/Core/Aparencia.php`). É decisão de produto do dono, e ela tem um custo que vale dizer em voz alta: quem está com o celular no escuro passa a receber uma página clara na primeira visita. O que compensa isso é a gaveta, onde a troca é um toque e vale para o site inteiro, para sempre. Ligar os dois — respeitar o aparelho E deixar trocar — daria três estados (claro, escuro, automático) e um menu de três itens para uma preferência que a maioria nunca abre. Se um dia isso for desejado, o lugar é aqui: basta reintroduzir a media query com o mesmo corpo, protegida por `:root:not([data-theme])`. Não é o claro invertido. Duas correções que a inversão ingênua erra: 1. **As superfícies clareiam com a elevação**, não escurecem. No escuro, "mais perto de você" é "mais claro" — é assim que a luz funciona. 2. **O vermelho clareia.** O `#E5322D` sobre `#14141A` vibra e cansa; o mesmo tom com mais luminosidade assenta. -------------------------------------------------------------------------- */ :root[data-theme="dark"] { color-scheme: dark; --marca: #FF544E; --marca-forte: #FF7B76; --marca-clara: #FF8B87; --marca-escura: #D93A35; --marca-tinta: #2A1615; --marca-contraste: #17090A; --escuro: #0E0E12; --escuro-medio: #9A9AA6; --fundo: #0E0E12; --superficie: #17171D; --superficie-2: #1F1F27; --superficie-3: #272730; --texto: #F3F3F6; --texto-suave: #A3A3AF; --texto-fraco: #7A7A87; --borda: #262630; --borda-forte: #35353F; --quiz-sobre-mim: #FF544E; --verde: #38D07E; --verde-tinta: #10281B; --vermelho: #FF7A70; --vermelho-tinta: #2B1210; --sombra-1: 0 1px 2px rgba(0, 0, 0, .5); --sombra-2: 0 2px 6px rgba(0, 0, 0, .45), 0 12px 28px rgba(0, 0, 0, .40); --sombra-3: 0 6px 14px rgba(0, 0, 0, .5), 0 24px 56px rgba(0, 0, 0, .55); --sombra-marca: 0 4px 16px rgba(255, 84, 78, .28); } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--fonte); font-size: var(--t-corpo); line-height: 1.6; /* `optical sizing` e `kerning` custam nada e melhoram tudo em fonte variável; `antialiased` no WebKit tira o peso extra que a fonte ganha em fundo escuro. */ font-optical-sizing: auto; font-kerning: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-wrap: break-word; } img { max-width: 100%; height: auto; } /* `hidden` PRECISA VENCER, e por isso leva `!important`. O atributo `hidden` esconde por meio de `display: none` na folha do navegador — a mais fraca de todas. Qualquer `display` escrito aqui ganha dele, e `.botao` declara `display: flex`. O efeito é um elemento marcado como escondido aparecendo na tela, sem erro nenhum e sem nada no código dizendo por quê. Já estava acontecendo com o botão da folha nativa de compartilhar: ele nasce `hidden` e só deveria aparecer quando o navegador confirma que sabe compartilhar — o comentário dele diz, com todas as letras, que "botão que não faz nada é pior que botão ausente". Ele aparecia em todos. */ [hidden] { display: none !important; } /* O anel de foco é o mesmo no site inteiro — inclusive dentro dos componentes, que por isso nunca redefinem `outline`. */ :focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; border-radius: var(--r-xs); } /* -------------------------------------------------------------------------- Tipografia -------------------------------------------------------------------------- */ h1, h2, h3 { /* `balance` distribui as palavras entre as linhas em vez de deixar uma órfã na última. Vale muito em título curto de duas linhas, que é o caso de quase todo H2 deste site. */ text-wrap: balance; } h1 { font-size: var(--t-h1); font-weight: 800; line-height: 1.1; letter-spacing: -0.028em; margin: 0 0 0.5rem; } h2 { font-size: var(--t-h2); font-weight: 700; line-height: 1.2; letter-spacing: -0.018em; margin: 0 0 0.75rem; } h3 { font-size: var(--t-h3); font-weight: 700; line-height: 1.35; letter-spacing: -0.008em; margin: 0 0 0.375rem; } .subtitulo { color: var(--texto-suave); font-size: 1.0625rem; line-height: 1.55; margin: 0 0 1.5rem; max-width: 44rem; text-wrap: pretty; } /* Etiqueta: o menor degrau da escala. Caixa alta com tracking aberto, que é a única forma de caixa alta ser legível. */ .titulo-lista, .etiqueta { font-size: var(--t-micro); font-weight: 700; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: 0.09em; margin: 0 0 0.75rem; } /* Todo número que o usuário lê como quantidade usa algarismo de largura fixa. Sem isso, "1.482 respostas" e "9.999 respostas" têm larguras diferentes e a coluna de cartões treme. */ .cartao-chamada, .pastilha-tema-contagem, .lista-links-nota, .placar-numero, .ranking-nota { font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- Pular para o conteúdo -------------------------------------------------------------------------- */ .pular-para-conteudo { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100; padding: 0.75rem 1.125rem; background: var(--marca); color: var(--marca-contraste); font-weight: 700; text-decoration: none; border-end-end-radius: var(--raio); } .pular-para-conteudo:focus { inset-inline-start: 0; } /* -------------------------------------------------------------------------- Faixa de ambiente (só fora de produção) -------------------------------------------------------------------------- */ .faixa-ambiente { margin: 0; padding: 0.5rem 1rem; background: var(--escuro); color: #FFD9D7; text-align: center; font-size: var(--t-xs); font-weight: 600; line-height: 1.35; } /* ========================================================================== CABEÇALHO Duas faixas, como o concorrente e como todo catálogo: 1. IDENTIDADE E AÇÃO — ☰, marca, busca, "criar quiz", idioma. 2. NAVEGAÇÃO — as seções de mais tráfego, com a atual sublinhada. O botão "criar quiz" é a mudança de produto mais importante daqui: o site inteiro existe para alguém criar um quiz, e não havia **nenhum** atalho permanente para isso. A pessoa que chega num quiz de 2021 pelo WhatsApp precisava voltar à home para descobrir que dá para fazer o dela. O cabeçalho é STICKY. Numa página de 23 mil quizzes a rolagem é longa, e perder a navegação depois da primeira tela é o que faz a pessoa usar o botão "voltar" em vez do site. ========================================================================== */ .topo { position: sticky; top: 0; z-index: 50; /* Sem fundo próprio: quem pinta é o `::before` abaixo. Ver o porquê lá. */ background: transparent; border-bottom: 1px solid var(--borda); padding-top: var(--seguro-topo); padding-left: var(--seguro-esq); padding-right: var(--seguro-dir); /* Isola o desfoque do pseudo-elemento: sem isto, em navegador que compõe camadas de forma agressiva, o `blur` pode vazar para fora da barra. */ isolation: isolate; } /* * O FUNDO DESFOCADO VIVE NUM PSEUDO-ELEMENTO, E ISSO NÃO É PREFERÊNCIA. * * `backdrop-filter` (como `filter`, `transform` e `perspective`) faz o * elemento virar **bloco contentor de descendentes `position: fixed`**. A * gaveta é `position: fixed` e mora DENTRO do cabeçalho — com o filtro em * `.topo`, ela deixaria de se posicionar contra a tela e passaria a se * posicionar contra a barra: o painel de altura `100dvh` abriria espremido * dentro de um cabeçalho de 60px de altura. * * O defeito não daria erro nenhum. A gaveta continuaria abrindo, com o * conteúdo certo, no lugar errado — e só em quem tem suporte a * `backdrop-filter`, que é a maioria dos aparelhos e nenhum dos testes. * * No pseudo-elemento o filtro fica isolado: ele é irmão do conteúdo, não * ancestral dele, e o `fixed` volta a resolver contra a tela. * * `z-index: -1` funciona porque `.topo` já é um contexto de empilhamento * (tem `position` e `z-index`): o pseudo pinta atrás do conteúdo da barra, e * não atrás da página. */ .topo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--superficie) 82%, transparent); /* Onde não houver suporte, o `color-mix` acima já deixa a barra quase opaca — degrada sem quebrar. */ -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); } .topo-interno { max-width: var(--largura); margin: 0 auto; padding: 0.625rem 1rem; display: flex; align-items: center; gap: 0.5rem; } /* --- marca --------------------------------------------------------------- */ .marca { display: flex; align-items: center; gap: 0.5rem; /* `min-width: 0` deixa o nome encolher em vez de empurrar os botões da direita para fora da tela em aparelho estreito. */ min-width: 0; margin-inline-end: auto; padding: 0.25rem 0; color: var(--marca); font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; } .marca-simbolo { width: 1.875rem; height: 1.875rem; flex-shrink: 0; display: block; } .marca-nome { line-height: 1; overflow: hidden; text-overflow: ellipsis; } /* --- botões do topo ------------------------------------------------------ */ /* O botão de ícone: 44px de alvo, o desenho ocupando 20. */ .topo-icone { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; flex-shrink: 0; border-radius: var(--r-sm); color: var(--texto-suave); text-decoration: none; transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva); } .topo-icone:hover, .topo-icone:focus-visible { background: var(--superficie-2); color: var(--texto); } .topo-icone svg { width: 1.25rem; height: 1.25rem; display: block; } /* A AÇÃO PRINCIPAL, e a única coisa vermelha do cabeçalho. */ .topo-acao { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-height: 2.375rem; padding: 0 0.9375rem; background: var(--marca); color: var(--marca-contraste); border-radius: var(--r-pilula); font-size: var(--t-sm); font-weight: 700; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; box-shadow: var(--sombra-marca); transition: transform var(--rapido) var(--curva), filter var(--rapido) var(--curva); } .topo-acao:hover, .topo-acao:focus-visible { filter: brightness(1.06); transform: translateY(-1px); } .topo-acao:active { transform: translateY(0); } /* -------------------------------------------------------------------------- Seletor de idiomas ERA UMA PASTILHA POR IDIOMA. Com três cabia; com seis já empurra a marca, e o roster tem 42 — a solução antiga não escalava por construção. Virou um menu: o idioma atual num botão pequeno, e a lista abrindo abaixo. `
`, como a gaveta, pelo mesmo motivo: funciona sem JavaScript, já traz teclado e `aria-expanded`, e o conteúdo está no HTML servido. -------------------------------------------------------------------------- */ .idiomas { position: relative; flex-shrink: 0; } .idiomas > summary { list-style: none; cursor: pointer; } .idiomas > summary::-webkit-details-marker { display: none; } .idiomas-botao { display: inline-flex; align-items: center; gap: 0.25rem; height: 2.375rem; padding: 0 0.625rem; border: 1px solid var(--borda-forte); border-radius: var(--r-pilula); color: var(--texto-suave); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.02em; } .idiomas[open] .idiomas-botao, .idiomas-botao:hover { border-color: var(--texto-fraco); color: var(--texto); } /* A setinha gira quando abre — a única pista de que aquilo é um menu. */ .idiomas-seta { width: 0.625rem; height: 0.625rem; transition: transform var(--rapido) var(--curva); } .idiomas[open] .idiomas-seta { transform: rotate(180deg); } .idiomas-lista { position: absolute; inset-inline-end: 0; top: calc(100% + 0.5rem); z-index: 60; min-width: 11rem; max-height: 60vh; overflow-y: auto; padding: 0.375rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-3); } .idioma { display: flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0.375rem 0.625rem; border-radius: var(--r-xs); color: var(--texto); font-size: var(--t-sm); font-weight: 600; text-decoration: none; white-space: nowrap; } .idioma:hover, .idioma:focus-visible { background: var(--superficie-2); } .idioma.atual { color: var(--marca-forte); background: var(--marca-tinta); } .idioma-sigla { display: inline-flex; align-items: center; justify-content: center; min-width: 1.875rem; padding: 0.0625rem 0.25rem; border-radius: var(--r-xs); background: var(--superficie-2); color: var(--texto-suave); font-size: var(--t-micro); font-weight: 800; letter-spacing: 0.04em; } .idioma.atual .idioma-sigla { background: var(--marca); color: var(--marca-contraste); } /* -------------------------------------------------------------------------- A barra de seções Rola na horizontal quando não couber, em vez de quebrar linha — quebrar linha muda a altura do cabeçalho conforme a página, e cabeçalho que muda de altura entre páginas é a coisa que mais faz um site parecer instável. -------------------------------------------------------------------------- */ .menu { max-width: var(--largura); margin: 0 auto; padding: 0 1rem; display: flex; gap: 1.25rem; overflow-x: auto; scrollbar-width: none; /* A máscara desbota o texto na borda direita quando há mais para o lado. É a pista de rolagem mais barata que existe: sem elemento, sem script, e ela some sozinha quando tudo cabe. */ -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent); } .menu::-webkit-scrollbar { display: none; } .menu a { flex-shrink: 0; padding: 0.625rem 0 0.75rem; color: var(--texto-suave); font-size: var(--t-sm); font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; transition: color var(--rapido) var(--curva), border-color var(--rapido) var(--curva); } .menu a:hover { color: var(--texto); } /* A seção em que se está fica marcada. `aria-current` é a fonte da verdade: o estilo segue o atributo de acessibilidade, e não uma classe paralela que um dia diverge dele. */ .menu a[aria-current="page"] { color: var(--marca-forte); border-bottom-color: var(--marca); } /* ========================================================================== GAVETA DE NAVEGAÇÃO (celular) POR QUE `details` E NÃO UM BOTÃO COM JAVASCRIPT O menu do site em produção abre com `onclick` inline. Sem script, ele não abre — e os links dele deixam de existir para quem está com a rede ruim, que é parte real do público de um site 94% celular. `
` abre e fecha sozinho, já vem com teclado e com `aria-expanded`, e o conteúdo está no HTML servido nos dois estados. O ÍCONE É DESENHADO EM CSS: são três traços, e uma requisição a mais no topo de toda página custa mais do que eles valem. ========================================================================== */ .gaveta { flex-shrink: 0; } .gaveta > summary { list-style: none; cursor: pointer; } .gaveta > summary::-webkit-details-marker { display: none; } .gaveta-botao { display: flex; align-items: center; justify-content: center; width: 2.75rem; /* 44px — o alvo de toque mínimo do site */ height: 2.75rem; margin-inline-start: -0.5rem; border-radius: var(--r-sm); color: var(--texto); transition: background var(--rapido) var(--curva); } .gaveta-botao:hover { background: var(--superficie-2); } /* * ABERTA, O BOTÃO SOBE PARA CIMA DO PAINEL. * * Sem isto o painel cobre o próprio botão que o abriu, e o único jeito de * fechar seria o "voltar" do navegador — que, numa gaveta, sai da página em * vez de fechar o menu. Com o botão fixo por cima, fechar é tocar no mesmo * lugar de sempre. É o que faz esta gaveta funcionar com ZERO JavaScript. */ .gaveta[open] .gaveta-botao { position: fixed; inset-block-start: calc(0.625rem + var(--seguro-topo)); inset-inline-start: max(0.5rem, var(--seguro-esq)); z-index: 92; color: var(--texto); } /* Os três traços. O do meio é o próprio elemento; os outros dois são pseudo-elementos posicionados em relação a ele. */ .gaveta-tracos, .gaveta-tracos::before, .gaveta-tracos::after { display: block; width: 1.125rem; height: 2px; border-radius: 2px; background: currentColor; } .gaveta-tracos { position: relative; transition: background var(--rapido) var(--curva); } .gaveta-tracos::before, .gaveta-tracos::after { content: ""; position: absolute; inset-inline-start: 0; transition: transform var(--normal) var(--curva), top var(--normal) var(--curva); } .gaveta-tracos::before { top: -6px; } .gaveta-tracos::after { top: 6px; } /* Aberta, vira um X — a mesma affordance do menu de qualquer aplicativo. */ .gaveta[open] .gaveta-tracos { background: transparent; } .gaveta[open] .gaveta-tracos::before { top: 0; transform: rotate(45deg); } .gaveta[open] .gaveta-tracos::after { top: 0; transform: rotate(-45deg); } /* * O PAINEL. * * A altura usa `100dvh` com `100vh` de reserva. No iOS, `100vh` é a altura COM * a barra de endereço recolhida — o fim do menu fica embaixo dela e os últimos * itens ficam inalcançáveis. `dvh` é a unidade que acompanha a barra. */ .gaveta-painel { position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: 91; width: min(19.5rem, 88vw); height: 100vh; height: 100dvh; padding: calc(4.25rem + var(--seguro-topo)) 0.75rem calc(1.5rem + var(--seguro-baixo)); padding-inline-start: max(0.75rem, var(--seguro-esq)); background: var(--superficie); border-inline-end: 1px solid var(--borda); box-shadow: var(--sombra-3); overflow-y: auto; overscroll-behavior: contain; animation: gaveta-entra var(--normal) var(--curva); } /* Ela ENTRA deslizando. É o único movimento do site que existe por si, e ele ganha o lugar: a gaveta vem de fora da tela, e mostrar de onde ela veio é o que a faz parecer uma camada em vez de um bloco que apareceu. */ @keyframes gaveta-entra { from { transform: translateX(-100%); } to { transform: translateX(0); } } /* O fundo escurecido. Ele não fecha a gaveta sozinho — isso exigiria script —, e serve para dizer que o resto da página está atrás. */ .gaveta[open]::before { content: ""; position: fixed; inset: 0; z-index: 90; background: rgba(10, 10, 14, .55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: gaveta-fundo var(--normal) var(--curva); } @keyframes gaveta-fundo { from { opacity: 0; } to { opacity: 1; } } .gaveta-nav { display: flex; flex-direction: column; gap: 0.125rem; } .gaveta-item { display: flex; align-items: center; min-height: 2.875rem; padding: 0.5rem 0.875rem; border-radius: var(--r-sm); color: var(--texto); font-size: 1rem; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva); } .gaveta-item:hover, .gaveta-item:focus-visible { background: var(--superficie-2); } .gaveta-item[aria-current="page"] { background: var(--marca-tinta); color: var(--marca-forte); font-weight: 700; } /* O TÍTULO DE GRUPO, no lugar do filete mudo que havia aqui. O filete dizia "aqui muda alguma coisa". Numa gaveta de doze seções, o que falta é dizer O QUE muda — senão a pessoa lê os doze itens para achar um. O argumento antigo contra o título era espaço, e ele foi medido errado: em 430px, com as doze seções e a troca de aparência no pé, sobram mais de 300px no painel. Três títulos custam ~60px. O texto vem das MESMAS chaves do rodapé (`nav.grupo_*`). */ .gaveta-grupo { margin: 1.125rem 0 0.25rem; padding-inline: 0.875rem; color: var(--texto-fraco); font-size: var(--t-micro); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } /* O primeiro não empurra: ele já está colado no topo do painel. */ .gaveta-grupo:first-child { margin-top: 0; } /* -------------------------------------------------------------------------- A APARÊNCIA, NO PÉ DA GAVETA Um par de botões que se comporta como um seletor: o escolhido fica em relevo, o outro fica rente ao fundo. `aria-pressed` é a fonte da verdade — o estilo segue o atributo de acessibilidade, e não uma classe paralela que um dia diverge dele. É a mesma regra que a barra de seções já segue com `aria-current`. A BOLINHA NÃO É ENFEITE: ela é a amostra do tema. Um círculo claro para o claro e um escuro para o escuro dizem, sem palavra nenhuma, o que o botão faz — e continuam dizendo nos 42 idiomas do roster, onde "Claro" e "Escuro" viram palavras que ninguém aqui sabe conferir. -------------------------------------------------------------------------- */ .gaveta-aparencia { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--borda); } .gaveta-aparencia-rotulo { margin: 0 0 0.5rem; padding-inline: 0.875rem; color: var(--texto-fraco); font-size: var(--t-micro); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .gaveta-aparencia-opcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.375rem; padding: 0.25rem; background: var(--superficie-2); border-radius: var(--r-sm); } .gaveta-aparencia-botao { display: flex; align-items: center; justify-content: center; gap: 0.5rem; /* 44px de alvo, como todo alvo de toque do site. */ min-height: 2.75rem; padding: 0 0.625rem; background: transparent; border: 1px solid transparent; border-radius: var(--r-xs); color: var(--texto-suave); font-family: inherit; font-size: var(--t-sm); font-weight: 700; cursor: pointer; transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva), border-color var(--rapido) var(--curva); } .gaveta-aparencia-botao:hover { color: var(--texto); } .gaveta-aparencia-botao[aria-pressed="true"] { background: var(--superficie); border-color: var(--borda-forte); color: var(--texto); box-shadow: var(--sombra-1); } /* A amostra. As cores são LITERAIS de propósito: elas mostram o tema que o botão liga, e não o tema em que a página está. Usar `var(--superficie)` aqui faria as duas bolinhas ficarem iguais dentro de um mesmo tema — que é exatamente a informação que elas existem para dar. */ .gaveta-aparencia-marca { width: 0.875rem; height: 0.875rem; flex-shrink: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(120, 120, 135, .45); } .gaveta-aparencia-botao[value="claro"] .gaveta-aparencia-marca { background: #FFFFFF; } .gaveta-aparencia-botao[value="escuro"] .gaveta-aparencia-marca { background: #17171D; } /* -------------------------------------------------------------------------- Conteúdo -------------------------------------------------------------------------- */ .conteudo { max-width: var(--largura); margin: 0 auto; padding: 1.5rem 1rem 4rem; padding-left: max(1rem, var(--seguro-esq)); padding-right: max(1rem, var(--seguro-dir)); min-height: 60vh; } .secao-topo { margin-bottom: 1.75rem; } /* ========================================================================== HERO O bloco de abertura da home. Antes era H1 + parágrafo + dois botões pretos soltos no fundo da página — que é o que qualquer página tem, e por isso não é nada. Agora é um painel com tinta de marca, o que faz duas coisas: separa a promessa do resto da página, e dá ao vermelho um lugar onde ele é ambiente em vez de moldura. A malha de gradiente é radial e assimétrica de propósito. Gradiente linear de canto a canto é o efeito que envelheceu; dois focos de luz fora do centro parecem iluminação, não filtro. ========================================================================== */ .hero { position: relative; margin-bottom: var(--v-secao); padding: clamp(1.5rem, 1rem + 2.4vw, 2.5rem); border-radius: var(--r-xl); background: radial-gradient(120% 90% at 8% 0%, color-mix(in srgb, var(--marca) 16%, transparent), transparent 62%), radial-gradient(90% 80% at 100% 100%, color-mix(in srgb, var(--marca) 10%, transparent), transparent 60%), var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra-1); overflow: hidden; } .hero h1 { font-size: var(--t-display); max-width: 18ch; } .hero .subtitulo { font-size: 1.0625rem; max-width: 42ch; margin-bottom: 1.75rem; } .hero .acoes { margin-bottom: 0; } /* ========================================================================== CABEÇALHO DE SEÇÃO — título e "ver todos" na mesma linha O link vinha DEPOIS da lista, num parágrafo solto. Isso o deixa longe do título que ele completa e obriga a pessoa a rolar a prateleira inteira para descobrir que havia caminho para o resto. `baseline` no alinhamento, e não `center`: o link é bem menor que o título, e centralizar dois textos de tamanhos diferentes faz o menor parecer flutuando. Pela linha de base, os dois assentam no mesmo chão. ========================================================================== */ .secao-cabecalho { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: var(--v-secao) 0 1rem; } .secao-cabecalho > h2 { margin: 0; } .secao-cabecalho-link { flex-shrink: 0; padding: 0.5rem 0; color: var(--marca-forte); font-size: var(--t-sm); font-weight: 700; text-decoration: none; white-space: nowrap; } .secao-cabecalho-link:hover, .secao-cabecalho-link:focus-visible { text-decoration: underline; text-underline-offset: 0.25em; } /* A seta anda um pouco quando o dedo passa. É o movimento mais barato que existe e o único que este componente tem. */ .secao-cabecalho-link::after { content: "→"; display: inline-block; margin-inline-start: 0.3em; transition: transform var(--rapido) var(--curva); } .secao-cabecalho-link:hover::after, .secao-cabecalho-link:focus-visible::after { transform: translateX(3px); } /* -------------------------------------------------------------------------- Trilha (breadcrumb) visível Existe nas páginas de acervo, que são as que recebem visita de fora sem passar pela home. Quem chega por um link de WhatsApp num quiz de 2021 não sabe onde está — a trilha responde isso em duas palavras, e de quebra é link interno de verdade, não só marcação em JSON-LD. -------------------------------------------------------------------------- */ .trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.375rem; margin-bottom: 0.875rem; font-size: var(--t-xs); font-weight: 600; color: var(--texto-fraco); } .trilha a { padding: 0.25rem 0; color: var(--texto-suave); text-decoration: none; } .trilha a:hover, .trilha a:focus-visible { color: var(--marca-forte); text-decoration: underline; text-underline-offset: 0.2em; } /* -------------------------------------------------------------------------- Botões Largura total no celular, onde o polegar precisa de alvo grande e onde não há nada para dividir a linha com. -------------------------------------------------------------------------- */ .acoes { display: flex; flex-direction: column; gap: 0.625rem; margin: 0 0 1.5rem; } .botao { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3.125rem; padding: 0.75rem 1.5rem; background: var(--marca); color: var(--marca-contraste); border: 1px solid transparent; border-radius: var(--r-pilula); font-family: inherit; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; text-align: center; text-decoration: none; cursor: pointer; box-shadow: var(--sombra-marca); transition: transform var(--rapido) var(--curva), filter var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva); } .botao:hover, .botao:focus-visible { filter: brightness(1.06); transform: translateY(-1px); } /* O botão AFUNDA ao ser pressionado, e volta. É a única resposta tátil que uma tela consegue dar, e a falta dela é o que faz um botão parecer figura. */ .botao:active { transform: translateY(1px) scale(0.995); box-shadow: var(--sombra-1); } /* O secundário é um contorno, não outro preenchimento: dois botões cheios lado a lado disputam, e aí nenhum dos dois é o principal. */ .botao.secundario { background: var(--superficie); color: var(--texto); border-color: var(--borda-forte); box-shadow: var(--sombra-1); } .botao.secundario:hover, .botao.secundario:focus-visible { border-color: var(--texto-fraco); filter: none; } .link-secundario { color: var(--marca-forte); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; } /* ========================================================================== CARTÕES O QUE MUDOU, E POR QUÊ O cartão antigo tinha uma barra vermelha de 4px na lateral — o acento da marca gasto no lugar mais barato, repetido dezenas de vezes por página. E tinha borda de 1px em tudo, sem elevação nenhuma: a página inteira no mesmo plano. Agora: sem barra, borda quase invisível, sombra de nível 1 em repouso e de nível 2 ao toque, com a foto ganhando um pouco de escala. O cartão SOBE quando você o encosta — é o que diz que ele é clicável antes de qualquer texto dizer. A FOTO NÃO É ENFEITE. O acervo tem uma capa 640×480 por quiz, por lista e por enquete, gravada desde a criação. É a identidade visual do site há anos e é o que o visitante reconhece antes de ler o título. ========================================================================== */ .cartoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.875rem; grid-template-columns: 1fr; } /* Vitrine do acervo. Duas colunas JÁ NO CELULAR, que é o que o site em produção faz há anos. A razão não é estética: são 24 cartões por página, cada um com capa 4:3. Em coluna única a página passa de dez telas e o visitante vê seis quizzes antes de desistir; em duas, vê doze na primeira. */ .cartoes-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } /* -------------------------------------------------------------------------- Prateleira — a vitrine que rola de lado Uma vitrine de 12 quizzes numa grade de duas colunas ocupa seis fileiras: mais de uma tela no celular, e a página passa a ter uma seção por rolagem. Na prateleira, os mesmos 12 ocupam uma fileira. O CORTE É PROPOSITAL: 78% de largura, e não 50%. Com metade exata dois cartões cabem certinho, a fileira parece terminar ali e o gesto de arrastar nunca é descoberto — o erro clássico de carrossel, que não dá erro nenhum: a pessoa só não vê o resto. `scroll-padding-inline` alinha o snap com a margem da página, senão o primeiro cartão encosta na borda quando se volta ao início. -------------------------------------------------------------------------- */ .prateleira { grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 0.125rem; overscroll-behavior-x: contain; padding: 0.25rem 0.125rem 0.75rem; /* Espaço para a sombra do cartão não ser cortada pelo `overflow`. */ margin-inline: -0.125rem; scrollbar-width: none; } .prateleira::-webkit-scrollbar { display: none; } .prateleira > .cartao { scroll-snap-align: start; } /* --- o cartão em si ------------------------------------------------------ */ .cartao a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.75rem; row-gap: 0.1875rem; align-items: start; /* As linhas ficam empacotadas no topo. Sem isto, um cartão sem foto ao lado de um COM foto estica as próprias linhas para preencher a altura da grade, e a chamada acaba flutuando longe do título. */ align-content: start; height: 100%; padding: 1rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-1); color: inherit; text-decoration: none; transition: transform var(--normal) var(--curva), box-shadow var(--normal) var(--curva), border-color var(--normal) var(--curva); } .cartao a:hover, .cartao a:focus-visible { transform: translateY(-3px); box-shadow: var(--sombra-2); border-color: var(--borda-forte); } .cartao a:active { transform: translateY(-1px); } /* O emoji vira uma ficha, não um caractere solto: com fundo próprio ele fica do mesmo tamanho em qualquer aparelho, e para de brigar com o título pela linha de base. */ .cartao-emoji { grid-row: 1 / 3; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--r-sm); background: var(--superficie-2); font-size: 1.125rem; line-height: 1; } .cartao-nome { font-size: 1rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.012em; } .cartao-chamada { color: var(--texto-fraco); font-size: var(--t-xs); font-weight: 500; line-height: 1.45; } /* Cartão estreito: o texto encolhe junto, senão o título ocupa cinco linhas. */ .cartoes-grade .cartao-nome { font-size: 0.9375rem; } .cartoes-grade .cartao-emoji { width: 1.75rem; height: 1.75rem; font-size: 0.9375rem; border-radius: var(--r-xs); } .selo-adulto { grid-column: 2; justify-self: start; margin-top: 0.375rem; padding: 0.125rem 0.5rem; border-radius: var(--r-pilula); background: var(--marca); color: var(--marca-contraste); font-size: var(--t-micro); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; } .selo-solto { display: inline-block; margin: 0 0 0.75rem; } /* -------------------------------------------------------------------------- /criar-quiz — O CARTÃO QUE MOSTRA O QUE VOCÊ VAI CRIAR A página do botão "Criar um quiz" do cabeçalho mostrava os mesmos cartões do hub: foto, nome e uma linha. Quem chega em "criar quiz sobre mim" não sabe o que é um "eu nunca, eu já" — e nenhum cartão dizia. Agora cada cartão carrega TRÊS PERGUNTAS REAIS do acervo daquele tipo. É a diferença entre descrever o produto e mostrar o produto, e é o que o concorrente faz na página equivalente. UM LINK POR CARTÃO. O nome do tipo é o link, e o `::after` dele se estica por cima do cartão inteiro — a área de toque é o cartão, o nome acessível é só o nome, e não existe segunda parada de teclado para o mesmo destino. -------------------------------------------------------------------------- */ .criar-tipos { display: grid; gap: 0.875rem; margin: 0 0 var(--v-secao); padding: 0; list-style: none; } .criar-tipo { /* O contexto de posicionamento do `::after` que estica o link. */ position: relative; display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-1); overflow: hidden; transition: transform var(--normal) var(--curva), box-shadow var(--normal) var(--curva), border-color var(--normal) var(--curva); } .criar-tipo:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); border-color: var(--borda-forte); } /* O ANEL DE FOCO VAI NO CARTÃO, NÃO NO NOME. O link ocupa o cartão inteiro por causa do `::after`; desenhar o anel em volta das duas palavras do título diria que o alvo é o título, e o alvo é o cartão. */ .criar-tipo:has(.criar-tipo-nome:focus-visible) { outline: 2px solid var(--marca); outline-offset: 3px; } .criar-tipo-foto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } /* A capa desenhada ocupa o lugar exato da foto. O desenho dela é o mesmo do cartão do hub, e está junto de `.cartao-capa` — uma receita só. */ .criar-tipo-capa { width: 100%; } .criar-tipo-corpo { display: flex; flex: 1; flex-direction: column; gap: 0.5rem; padding: 1rem; } .criar-tipo-cabeca { display: flex; align-items: center; gap: 0.625rem; margin: 0; } .criar-tipo-nome { color: var(--texto); font-size: var(--t-h3); font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; text-decoration: none; } /* É ISTO que faz o cartão inteiro ser clicável, com um link só. */ .criar-tipo-nome::after { content: ""; position: absolute; inset: 0; } .criar-tipo-nome:focus-visible { outline: none; } .criar-tipo .selo-adulto { /* `grid-column` da regra base não vale aqui: este cartão é flex. */ margin: 0; } .criar-tipo-chamada { margin: 0; color: var(--texto-suave); font-size: var(--t-sm); } /* --- as três perguntas de exemplo ---------------------------------------- */ .criar-tipo-exemplos { margin-top: 0.125rem; padding: 0.75rem 0.875rem; background: var(--superficie-2); border-radius: var(--r-sm); } .criar-tipo-exemplos-rotulo { margin: 0 0 0.4375rem; color: var(--texto-fraco); font-size: var(--t-micro); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .criar-tipo-exemplos ul { display: flex; flex-direction: column; gap: 0.375rem; margin: 0; padding: 0; list-style: none; } .criar-tipo-exemplos li { position: relative; padding-inline-start: 0.875rem; color: var(--texto); font-size: var(--t-sm); line-height: 1.45; } /* O marcador é um ponto neutro, e não o vermelho: acento que aparece em três linhas por cartão, sete vezes na página, deixa de acentuar qualquer coisa. */ .criar-tipo-exemplos li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.6em; width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background: var(--texto-fraco); } /* --- a ação --------------------------------------------------------------- `margin-top: auto` alinha a ação no pé de TODOS os cartões, mesmo quando um tipo tem chamada de duas linhas e o vizinho de uma. É a mesma linha de base que faz uma vitrine parecer uma vitrine. -------------------------------------------------------------------------- */ .criar-tipo-acao { margin-top: auto; padding-top: 0.625rem; color: var(--marca-forte); font-size: var(--t-sm); font-weight: 800; } @media (min-width: 48em) { .criar-tipos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } } /* -------------------------------------------------------------------------- Temas do acervo — as pastilhas O NÚMERO EM CADA PASTILHA NÃO É ENFEITE: ele é a única coisa que distingue um tema com 200 quizzes de um com 8, e é o que faz alguém escolher onde clicar. Sem número isto seria uma nuvem de tags — o padrão que a web abandonou justamente por não informar nada. -------------------------------------------------------------------------- */ .fita-temas { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 1.5rem; padding: 0; } .pastilha-tema { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.375rem; padding-inline: 0.875rem 0.375rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-pilula); box-shadow: var(--sombra-1); color: var(--texto); font-size: var(--t-sm); font-weight: 600; text-decoration: none; transition: transform var(--rapido) var(--curva), border-color var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva); } .pastilha-tema:hover, .pastilha-tema:focus-visible { transform: translateY(-2px); border-color: var(--marca); box-shadow: var(--sombra-2); } .pastilha-tema-contagem { display: inline-flex; align-items: center; justify-content: center; min-width: 1.625rem; height: 1.625rem; padding: 0 0.375rem; background: var(--superficie-2); border-radius: var(--r-pilula); color: var(--texto-fraco); font-size: var(--t-micro); font-weight: 800; } .pastilha-tema:hover .pastilha-tema-contagem, .pastilha-tema:focus-visible .pastilha-tema-contagem { background: var(--marca-tinta); color: var(--marca-forte); } /* -------------------------------------------------------------------------- Erro -------------------------------------------------------------------------- */ .erro { text-align: center; padding: 3rem 0; } .codigo-erro { font-size: clamp(3.5rem, 2.5rem + 5vw, 5.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--marca); margin: 0 0 0.5rem; } .detalhe-erro { color: var(--texto-suave); } .erro .acoes { justify-content: center; max-width: 22rem; margin-inline: auto; } /* -------------------------------------------------------------------------- Rodapé -------------------------------------------------------------------------- */ .rodape { max-width: var(--largura); margin: 0 auto; padding: 2.5rem 1rem; padding-bottom: calc(2.5rem + var(--seguro-baixo)); border-top: 1px solid var(--borda); color: var(--texto-suave); font-size: var(--t-sm); } /* * O mapa do site. * * Duas colunas já no celular: com uma só, as quinze seções empurram a faixa * legal para uma tela inteira abaixo — e é a faixa legal que o AdSense exige * estar acessível de toda página. */ .rodape-mapa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; margin-bottom: 2rem; } .rodape-coluna-titulo { /* É um `

`, não um título — ver o comentário em layout.php. */ font-size: var(--t-micro); font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; color: var(--texto-fraco); margin: 0 0 0.625rem; } .rodape-coluna ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.125rem; } .rodape-coluna a { display: block; padding: 0.3125rem 0; min-height: 2rem; color: var(--texto); text-decoration: none; font-size: 0.9375rem; font-weight: 500; } .rodape-coluna a:hover, .rodape-coluna a:focus-visible { color: var(--marca-forte); text-decoration: underline; text-underline-offset: 0.2em; } /* ========================================================================== TELAS MAIORES — a partir daqui é melhoria, não correção ========================================================================== */ @media (min-width: 40em) { .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .acoes { flex-direction: row; flex-wrap: wrap; } .botao { min-width: 13rem; } } @media (min-width: 48em) { /* * A PRATELEIRA VIRA GRADE onde há largura. * * Rolagem horizontal é solução para tela estreita, não escolha estética: * no desktop ela esconde conteúdo atrás de um gesto que o mouse faz mal. */ .prateleira { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow-x: visible; padding-bottom: 0.25rem; } /* * A GAVETA SOME NO DESKTOP, e a barra de seções fica. * * Não é o contrário do que este arquivo prega: o padrão é celular, e a * gaveta é a regra base. Aqui é a exceção — com largura de sobra, um menu * que exige um toque para aparecer é um toque a mais por nada. */ .gaveta { display: none; } .rodape-mapa { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } .topo-interno { padding-block: 0.75rem; } .marca { font-size: 1.25rem; } .marca-simbolo { width: 2.125rem; height: 2.125rem; } } @media (min-width: 60em) { .cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Com três colunas largas o cartão do acervo volta ao corpo normal: o texto menor existia só para caber em meia tela de celular. */ .cartoes-grade .cartao-nome { font-size: 1rem; } .cartoes-grade .cartao-emoji { width: 2rem; height: 2rem; font-size: 1.0625rem; } .conteudo { padding-top: 2.5rem; } .menu { /* Com tudo cabendo, a máscara de rolagem não tem o que anunciar. */ -webkit-mask-image: none; mask-image: none; } } /* Respeita quem pediu menos movimento no sistema. Vale para tudo: o site inteiro só tem transição e duas animações, e as duas são da gaveta. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========================================================================== Fluxo de quiz: criar, responder, resultado A tela de criar e a de responder usam os MESMOS componentes de propósito. A pessoa monta o quiz do mesmo jeito que os amigos vão respondê-lo, então entende o que está criando — e o site tem uma cara só. ========================================================================== */ .etiqueta-tipo { margin: 0 0 0.375rem; color: var(--quiz-sobre-mim); font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .perguntas { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.75rem; } .pergunta { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1rem; } .pergunta fieldset { border: 0; margin: 0; padding: 0; } .pergunta legend { display: block; width: 100%; padding: 0; margin-bottom: 0.75rem; } .pergunta-numero { display: inline-block; min-width: 1.75rem; margin-inline-end: 0.375rem; color: var(--texto-suave); font-size: 0.8125rem; font-weight: 700; } .pergunta-texto { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; } /* Opções como cartão tocável. O radio some, mas continua sendo um radio de verdade — funciona com teclado e leitor de tela, sem JavaScript nenhum. */ .opcoes { display: grid; gap: 0.5rem; } .opcao-radio { position: absolute; opacity: 0; width: 1px; height: 1px; } .opcao { display: flex; align-items: center; min-height: 3rem; /* alvo de toque confortável */ padding: 0.625rem 0.875rem; background: var(--fundo); border: 2px solid var(--borda); border-radius: var(--raio); font-size: 1rem; line-height: 1.3; cursor: pointer; } .opcao-radio:checked + .opcao { border-color: var(--marca); background: color-mix(in srgb, var(--marca) 10%, var(--fundo)); font-weight: 650; } .opcao-radio:focus-visible + .opcao { outline: 3px solid var(--marca); outline-offset: 2px; } /* Campos */ .campo { display: grid; gap: 0.375rem; margin: 0 0 1.25rem; } .campo label { font-size: 0.9375rem; font-weight: 600; } .campo input[type="text"] { min-height: 3rem; padding: 0.625rem 0.875rem; background: var(--superficie); color: var(--texto); border: 2px solid var(--borda); border-radius: var(--raio); font-size: 1rem; /* 16px: abaixo disso o iOS dá zoom sozinho */ font-family: inherit; } .campo input[type="text"]:focus { border-color: var(--marca); outline: none; } .campo-destaque { padding: 1rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); margin-bottom: 1.5rem; } .form-responder .botao { width: 100%; } .nota { color: var(--texto-suave); font-size: 0.875rem; margin: 0 0 1rem; } .aviso { padding: 1rem; background: var(--superficie); border: 1px solid var(--borda); border-inline-start: 4px solid var(--marca); border-radius: var(--raio); } /* -------------------------------------------------------------------------- MÉTRICAS DE UM QUIZ — quantas perguntas, quantas pessoas já responderam Prova social no ponto da decisão. O número já existia no CARTÃO de cada quiz e não aparecia na PÁGINA dele, que é onde a pessoa decide se começa. Duas pastilhas, e só a segunda é forte: "12.482 pessoas já responderam" é o argumento; "10 perguntas" é informação. Dar o mesmo peso às duas seria não dar peso a nenhuma. -------------------------------------------------------------------------- */ .metricas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; } .metrica { display: inline-flex; align-items: center; min-height: 1.875rem; padding-inline: 0.75rem; background: var(--superficie-2); border-radius: var(--r-pilula); color: var(--texto-suave); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.01em; } .metrica-forte { background: var(--marca-tinta); color: var(--marca-forte); } /* -------------------------------------------------------------------------- COMPARTILHAR O bloco existe em duas telas com pesos diferentes: depois de criar um quiz sobre mim ele É a tela, e na página de um quiz de conhecimento ele vem depois do formulário, como oferta. A mesma marcação serve as duas — o que muda é onde ela entra. -------------------------------------------------------------------------- */ .compartilhar { margin-block: var(--v-secao) 0; } .compartilhar .titulo-lista { margin-bottom: 0.75rem; } .caixa-link { margin-bottom: 1.25rem; } .campo-link { width: 100%; min-height: 3rem; padding: 0.625rem 0.875rem; background: var(--superficie); color: var(--texto); border: 2px dashed var(--borda); border-radius: var(--raio); font-size: 0.9375rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .botao-whatsapp { background: #25D366; border-color: #25D366; color: #0B3D25; } .botao-whatsapp:hover, .botao-whatsapp:focus-visible { background: #1EB958; border-color: #1EB958; color: #0B3D25; } /* Placar */ .placar { text-align: center; } .placar .subtitulo { margin-inline: auto; } .placar-numero { margin: 0.5rem 0 0.25rem; font-size: clamp(3.5rem, 2.5rem + 5vw, 5rem); font-weight: 800; line-height: 1; color: var(--marca); } .placar-total { font-size: 0.45em; color: var(--texto-suave); font-weight: 700; } .placar .acoes { justify-content: center; } /* Gabarito */ .gabarito .pergunta { border-inline-start: 4px solid var(--borda); } .gabarito .pergunta.acertou { border-inline-start-color: #2BA84A; } .gabarito .pergunta.errou { border-inline-start-color: var(--marca); } .gabarito .pergunta-texto { margin: 0 0 0.625rem; } .opcoes-gabarito { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; } .opcoes-gabarito li { padding: 0.5rem 0.75rem; border: 1px solid var(--borda); border-radius: 0.5rem; font-size: 0.9375rem; color: var(--texto-suave); } .opcoes-gabarito .opcao-correta { border-color: #2BA84A; color: var(--texto); font-weight: 650; } .opcoes-gabarito .opcao-marcada { border-color: var(--marca); color: var(--texto); } .marca-gabarito { display: inline-block; margin-inline-start: 0.375rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.75; } /* Ranking */ .ranking { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 0.375rem; } .ranking-item { display: grid; grid-template-columns: 2.25rem 1fr auto; align-items: center; gap: 0.5rem; padding: 0.625rem 0.875rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: 0.5rem; } .ranking-pos { color: var(--texto-suave); font-weight: 700; font-size: 0.875rem; } .ranking-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ranking-nota { font-weight: 700; color: var(--marca); } @media (min-width: 40em) { .opcoes { grid-template-columns: repeat(2, 1fr); } .form-responder .botao { width: auto; min-width: 16rem; } } /* Lista aberta de perguntas -------------------------------------------------- */ .indice { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2rem; } .indice a { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; padding: 0.375rem 0.75rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: 999px; color: var(--texto); font-size: 0.875rem; font-weight: 600; text-decoration: none; } .indice a:hover, .indice a:focus-visible { border-color: var(--marca); } .indice-qt { padding: 0 0.375rem; background: var(--marca); color: #fff; border-radius: 999px; font-size: 0.75rem; } .grupo-perguntas { margin: 0 0 2.5rem; scroll-margin-top: 1rem; } .grupo-perguntas h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.25rem; } /* Lista numerada de verdade: quem quer copiar leva a numeração junto. */ .lista-perguntas { margin: 0.75rem 0 1.25rem; padding-inline-start: 1.5rem; display: grid; gap: 0.5rem; } .lista-perguntas li { padding-inline-start: 0.25rem; font-size: 1rem; line-height: 1.45; } .lista-perguntas li::marker { color: var(--marca); font-weight: 700; } /* Trivia --------------------------------------------------------------------- */ .cartao-trivia a { border-inline-start-color: #2BA84A; /* cor da seção trivia no site atual */ } .foto-pergunta { display: block; width: 100%; max-width: 22rem; margin: 0 0 0.75rem; border-radius: var(--raio); aspect-ratio: 4 / 3; object-fit: cover; background: var(--fundo); } .paginacao { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.75rem; margin: 2rem 0; } .paginacao .botao { width: auto; min-width: 8rem; } .paginacao-info { color: var(--texto-suave); font-size: 0.875rem; font-weight: 600; } /* Busca ---------------------------------------------------------------------- */ .form-busca { display: grid; gap: 0.625rem; margin: 0 0 1.5rem; max-width: 34rem; } .form-busca input[type="search"] { min-height: 3rem; padding: 0.625rem 0.875rem; background: var(--superficie); color: var(--texto); border: 2px solid var(--borda); border-radius: var(--raio); font-size: 1rem; font-family: inherit; -webkit-appearance: none; } .form-busca input[type="search"]:focus { border-color: var(--marca); outline: none; } /* Visível para leitor de tela, escondido na tela */ .oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (min-width: 40em) { .form-busca { grid-template-columns: 1fr auto; } .form-busca .botao { min-width: 9rem; } } /* Conteúdo de apoio: como funciona e FAQ -------------------------------------- A página da seção tinha 267 palavras contra 723 do 1º colocado. Estes blocos dão profundidade sem virar enchimento: respondem o que a pessoa perguntou. */ .secao-texto { margin: 2.5rem 0 0; padding-top: 1.75rem; border-top: 1px solid var(--borda); } .secao-texto h2 { font-size: 1.25rem; } /* Subtítulos da seção "qual desses eu escolho": é o único lugar do site com H3, e eles precisam se distinguir do H2 sem competir com ele. */ .secao-texto h3 { margin: 1.5rem 0 0.375rem; font-size: 1.02rem; color: var(--marca); } .secao-texto h3:first-of-type { margin-top: 1rem; } .secao-texto p { margin: 0 0 0.75rem; max-width: 44rem; line-height: 1.6; } /* Destaque de um tipo novo no hub. Cartão com a cor da seção, para não passar despercebido entre sete botões iguais — mas sem virar banner. */ .secao-destaque { margin: 2.5rem 0 0; padding: 1.25rem 1.25rem 0.5rem; border: 1px solid var(--borda); border-inline-start: 4px solid var(--quiz-sobre-mim); border-radius: var(--raio); background: var(--superficie); } .secao-destaque h2 { margin: 0 0 0.5rem; font-size: 1.15rem; } .secao-destaque p { margin: 0 0 1rem; max-width: 44rem; line-height: 1.6; } /* A amostra de perguntas na página de cada tipo, e o emoji do resultado do quiz de personalidade. */ .secao-perguntas, .secao-como { margin: 2.5rem 0 0; padding-top: 1.75rem; border-top: 1px solid var(--borda); } .secao-perguntas h2, .secao-como h2 { font-size: 1.25rem; } .acoes-secundarias { align-items: center; flex-wrap: wrap; gap: 0.75rem; } /* A capa no topo de uma página do acervo — lista e quiz de conhecimento. É a mesma imagem que a produção mostra nestas URLs há anos, e a mesma que vai no cartão do WhatsApp. Proporção fixa para o título abaixo não pular quando ela carrega. */ .lista-capa, .capa-quiz { width: 100%; max-width: 34rem; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--raio); display: block; margin: 0 0 1rem; } /* A foto no topo da página do tipo. Proporção fixa para o texto abaixo não pular quando ela carrega. */ .foto-tipo { width: 100%; max-width: 34rem; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--raio); display: block; margin: 0 0 1.5rem; } /* Vitrine de quizzes no fim do hub: lista de links, sem virar cartão. Ela é um caminho para outra página, não o conteúdo principal — e é o que fecha a diferença de link interno contra o 1º colocado da busca. */ .lista-links { margin: 0 0 1.25rem; padding: 0; list-style: none; display: grid; gap: 0.5rem; } .lista-links li { padding-bottom: 0.5rem; border-bottom: 1px solid var(--borda); } .lista-links a { color: var(--texto); font-weight: 600; text-decoration: none; } .lista-links a:hover, .lista-links a:focus-visible { color: var(--marca); text-decoration: underline; } .lista-links-nota { display: block; color: var(--texto-suave); font-size: 0.8125rem; } @media (min-width: 40rem) { .lista-links { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; } } .resultado-emoji { margin: 0.5rem 0 0.25rem; font-size: 3.5rem; line-height: 1; } .passos { margin: 0 0 1.5rem; padding-inline-start: 1.25rem; display: grid; gap: 0.625rem; max-width: 44rem; } .passos li { padding-inline-start: 0.25rem; line-height: 1.5; } .passos li::marker { color: var(--marca); font-weight: 700; } .faq-item { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); margin-bottom: 0.625rem; } .faq-item summary { padding: 0.875rem 1rem; min-height: 3rem; display: flex; align-items: center; font-weight: 650; cursor: pointer; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; margin-inline-start: auto; padding-inline-start: 0.75rem; color: var(--marca); font-size: 1.25rem; font-weight: 700; } .faq-item[open] summary::after { content: "−"; } .faq-item p { margin: 0; padding: 0 1rem 1rem; color: var(--texto-suave); line-height: 1.55; } /* Quiz customizado: a tela onde a pessoa escreve o próprio quiz. */ .linha-alternativa { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.5rem; } .linha-alternativa input[type="text"] { flex: 1; min-width: 0; } .marca-certa { /* Alvo de toque de 44px sem inflar a linha inteira. */ width: 1.375rem; height: 1.375rem; margin: 0; flex-shrink: 0; accent-color: var(--marca); } /* Rótulo que existe para leitor de tela, não para a vista. Não usa display:none — isso o esconderia do leitor também. */ .rotulo-escondido { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ========================================================================== Enquetes, guia passo a passo e formulário de contato -------------------------------------------------------------------------- Escrito com as mesmas variáveis e o mesmo espaçamento do resto do arquivo: nada aqui inventa cor nova, e as três telas herdam o modo escuro de graça. ========================================================================== */ /* --- Enquete: capa, alternativas e barra de resultado ---------------------- */ .enquete-topo { margin-bottom: 1.5rem; } .enquete-capa { width: 100%; border-radius: var(--raio); display: block; margin-bottom: 1rem; } /* Capa de texto: o legado guarda a frase e as duas cores no banco. As cores passam por validação hexadecimal no repositório antes de virar `style` — sem isso, seria injeção de CSS por conteúdo de usuário. */ .enquete-capa-texto { margin: 0 0 1rem; padding: 2rem 1.25rem; border-radius: var(--raio); font-size: 1.375rem; font-weight: 700; line-height: 1.35; text-align: center; } .enquete-meta { color: var(--texto-suave); font-size: 0.9375rem; margin: 0.5rem 0 0; } .enquete-votacao fieldset { border: 0; margin: 0; padding: 0; } .enquete-votacao legend { font-weight: 700; margin-bottom: 0.75rem; padding: 0; } .enquete-alternativas { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.625rem; } .enquete-alternativa label { display: block; cursor: pointer; background: var(--superficie); border: 2px solid var(--borda); border-radius: var(--raio); padding: 0.875rem; } /* A alternativa em primeiro lugar fica marcada mesmo antes de a pessoa votar: o resultado é o conteúdo da página, não a recompensa pelo voto. */ .enquete-alternativa.lider label { border-color: var(--marca); } .enquete-alternativa label:hover, .enquete-alternativa:focus-within label { border-color: var(--marca-clara); } .enquete-alternativa input[type="radio"] { /* Alvo de toque cheio, sem inflar a linha. */ width: 1.375rem; height: 1.375rem; margin: 0 0.625rem 0 0; vertical-align: middle; accent-color: var(--marca); } .enquete-alternativa-corpo { display: inline-block; width: calc(100% - 2.25rem); vertical-align: middle; } .enquete-alternativa-corpo img { width: 100%; border-radius: calc(var(--raio) - 0.25rem); margin-bottom: 0.5rem; display: block; } .enquete-alternativa-texto strong { display: block; } .enquete-alternativa-texto small { display: block; color: var(--texto-suave); line-height: 1.4; } /* A barra é decorativa (`aria-hidden`): quem lê com leitor de tela recebe o número em `.enquete-numero`, que diz a mesma coisa em palavras. */ .enquete-barra { display: block; height: 0.5rem; margin-top: 0.625rem; border-radius: 999px; background: var(--borda); overflow: hidden; } .enquete-barra-cheia { display: block; height: 100%; background: var(--marca); border-radius: 999px; } .enquete-numero { display: block; margin-top: 0.375rem; color: var(--texto-suave); font-size: 0.875rem; font-variant-numeric: tabular-nums; } .enquete-tags, .lista-tags { color: var(--texto-suave); font-size: 0.9375rem; } /* --- Guia passo a passo --------------------------------------------------- */ .guia-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; } .guia-passo { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1rem 1.125rem; } .guia-passo h3 { display: flex; align-items: center; gap: 0.625rem; margin: 0 0 0.5rem; font-size: 1.0625rem; } .guia-numero { flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--marca); color: #fff; font-size: 0.9375rem; line-height: 1.75rem; text-align: center; } .guia-passo p { margin: 0; } .lista-simples { margin: 0 0 1rem; padding-inline-start: 1.25rem; } .lista-simples li { margin-bottom: 0.5rem; } /* --- Formulário de contato ------------------------------------------------ */ .formulario { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1.25rem; margin-bottom: 1.5rem; } .formulario fieldset.campo { border: 0; margin: 0 0 1rem; padding: 0; } .formulario legend { font-weight: 700; margin-bottom: 0.5rem; padding: 0; } .campo input[type="email"], .campo textarea { width: 100%; padding: 0.75rem; font: inherit; color: var(--texto); background: var(--fundo); border: 1px solid var(--borda); border-radius: calc(var(--raio) - 0.25rem); } .campo textarea { resize: vertical; min-height: 8rem; } .campo input[type="email"]:focus, .campo textarea:focus { border-color: var(--marca); outline: none; } .campo-erro { display: block; margin-top: 0.375rem; color: var(--marca); font-size: 0.875rem; font-weight: 600; } /* Campo-armadilha para robô. Fora da tela em vez de `display:none`: robô que ignora `display:none` continua caindo nele, e ninguém que use o site enxerga ou tabula até aqui (`tabindex="-1"` + `aria-hidden` no HTML). */ .fora-da-tela { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ========================================================================== REFINO DAS TELAS DE PRODUTO As seções acima nasceram antes do sistema visual e usavam o vocabulário antigo: borda de 1px em tudo, um raio só, nenhuma elevação. Elas herdaram as cores novas de graça, porque os nomes dos tokens não mudaram — o que falta é a FORMA. Este bloco vem por último de propósito. Ele não reescreve os componentes: sobe cada um para a linguagem nova, e a diferença fica legível num lugar só em vez de espalhada em quinhentas linhas. ========================================================================== */ /* --- cartão com foto ------------------------------------------------------ */ .cartao-com-foto a { display: block; padding: 0; overflow: hidden; } .cartao-foto { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; /* Levemente dessaturada em repouso para o texto do cartão ganhar a atenção; ao tocar, a foto acende e cresce um pouco dentro do recorte. É o movimento que faz o cartão parecer uma janela e não um adesivo. */ filter: saturate(0.88); transition: filter var(--normal) var(--curva), transform var(--normal) var(--curva); } .cartao-com-foto a:hover .cartao-foto, .cartao-com-foto a:focus-visible .cartao-foto { filter: saturate(1.05); transform: scale(1.045); } @media (prefers-reduced-motion: reduce) { .cartao-com-foto a:hover .cartao-foto, .cartao-com-foto a:focus-visible .cartao-foto { transform: none; } } /* -------------------------------------------------------------------------- A CAPA DESENHADA — o cartão sem foto com a silhueta do cartão com foto As sete artes dos tipos de quiz são fotos que vêm do site em produção. Um tipo NOVO não tem foto, e numa grade em que todos os outros têm, o cartão compacto de emoji lê como imagem que não carregou. A capa ocupa exatamente o lugar da foto (4:3), com o emoji grande sobre um degradê da própria paleta. Nada de cinza-placeholder: o objetivo é parecer escolha, não ausência. -------------------------------------------------------------------------- */ .cartao-capa, .criar-tipo-capa { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: radial-gradient(120% 90% at 20% 15%, var(--marca-tinta) 0%, transparent 60%), linear-gradient(150deg, var(--superficie-2) 0%, var(--superficie) 55%, var(--marca-tinta) 100%); border-bottom: 1px solid var(--borda); font-size: clamp(2.5rem, 12vw, 3.75rem); line-height: 1; /* O emoji é o único conteúdo: sem isto ele herda o `letter-spacing` negativo dos títulos e desencosta do centro óptico. */ letter-spacing: 0; transition: transform var(--normal) var(--curva); } .cartao-com-capa a:hover .cartao-capa, .cartao-com-capa a:focus-visible .cartao-capa { transform: scale(1.045); } @media (prefers-reduced-motion: reduce) { .cartao-com-capa a:hover .cartao-capa, .cartao-com-capa a:focus-visible .cartao-capa { transform: none; } } /* Dentro do cartão com foto, o texto retoma o grid ficha | conteúdo. */ .cartao-com-foto .cartao-texto { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.625rem; row-gap: 0.1875rem; align-items: start; padding: 0.8125rem 0.875rem 0.9375rem; } /* * Com capa desenhada NÃO HÁ ficha de emoji dentro do texto — ela virou a capa. * Sem esta regra o texto continuaria num grid de duas colunas com um filho a * menos, e o nome cairia na coluna estreita ao lado da chamada. Uma coluna só. * * DEPOIS da regra do cartão com foto, e não antes: o cartão com capa carrega * as duas classes, as duas regras têm a mesma especificidade, e quem ganha é a * última. Trocar a ordem aqui desmonta o cartão sem erro nenhum. */ .cartao-com-capa .cartao-texto { grid-template-columns: 1fr; } .cartao-com-capa .selo-adulto { grid-column: 1; } /* Sem foto, o `span` é transparente para o grid do próprio cartão: os filhos dele é que precisam cair nas colunas. */ .cartao:not(.cartao-com-foto) .cartao-texto { display: contents; } /* --- superfícies de conteúdo --------------------------------------------- */ .secao-texto, .secao-como, .secao-perguntas { margin-bottom: var(--v-secao); max-width: 46rem; } .secao-texto p { color: var(--texto-suave); line-height: 1.65; text-wrap: pretty; } /* O bloco de destaque deixa de ser uma caixa com borda e passa a ser uma superfície tingida — mesmo recurso do hero, na dose menor. */ .secao-destaque { margin: var(--v-secao) 0; padding: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); border: 1px solid var(--borda); border-radius: var(--r-lg); background: radial-gradient(110% 100% at 100% 0%, color-mix(in srgb, var(--marca) 10%, transparent), transparent 60%), var(--superficie); box-shadow: var(--sombra-1); } .secao-destaque h2 { margin-top: 0; } /* --- perguntas, opções, campos ------------------------------------------- */ .pergunta { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-lg); box-shadow: var(--sombra-1); padding: 1.125rem; } .pergunta-numero { /* Vira uma ficha, como o emoji do cartão: com fundo próprio ele não se confunde com o começo do enunciado. */ display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; height: 1.375rem; margin-inline-end: 0.5rem; padding: 0 0.375rem; border-radius: var(--r-pilula); background: var(--superficie-2); color: var(--texto-fraco); font-size: var(--t-micro); font-weight: 800; font-variant-numeric: tabular-nums; vertical-align: 0.15em; } .pergunta-texto { font-size: 1.0625rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.012em; } .opcao { min-height: 3.125rem; padding: 0.6875rem 0.9375rem; background: var(--superficie-2); border: 2px solid transparent; border-radius: var(--r-sm); font-size: 1rem; line-height: 1.35; font-weight: 500; transition: background var(--rapido) var(--curva), border-color var(--rapido) var(--curva); } .opcao:hover { background: var(--superficie-3); } /* A opção escolhida ganha a tinta de marca e a borda — os dois juntos, porque só a borda some para quem enxerga pouco e só a cor some no daltonismo. */ .opcao-radio:checked + .opcao { border-color: var(--marca); background: var(--marca-tinta); color: var(--texto); font-weight: 700; } .campo input[type="text"], .campo input[type="email"], .campo select, .campo textarea { min-height: 3.125rem; padding: 0.6875rem 0.9375rem; background: var(--superficie); color: var(--texto); border: 1.5px solid var(--borda-forte); border-radius: var(--r-sm); font-size: 1rem; /* 16px: abaixo disso o iOS dá zoom sozinho */ font-family: inherit; transition: border-color var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva); } .campo input[type="text"]:focus, .campo input[type="email"]:focus, .campo select:focus, .campo textarea:focus { border-color: var(--marca); /* Um halo em vez de outline: ele acompanha o raio do campo, o que o `outline` não faz em todo navegador. */ box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 22%, transparent); outline: none; } .campo-destaque { padding: 1.125rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-lg); box-shadow: var(--sombra-1); margin-bottom: 1.5rem; } .campo-link { border: 1.5px dashed var(--borda-forte); border-radius: var(--r-sm); font-family: var(--fonte-mono); background: var(--superficie-2); } /* --- avisos --------------------------------------------------------------- */ .aviso { padding: 0.9375rem 1.125rem; background: var(--marca-tinta); border: 1px solid color-mix(in srgb, var(--marca) 28%, transparent); border-radius: var(--r-sm); color: var(--texto); } /* --- placar e gabarito ---------------------------------------------------- */ .placar-numero { font-weight: 800; letter-spacing: -0.04em; } .gabarito .pergunta.acertou { border-inline-start: 4px solid var(--verde); } .gabarito .pergunta.errou { border-inline-start: 4px solid var(--marca); } .opcoes-gabarito li { padding: 0.5625rem 0.8125rem; border: 1.5px solid var(--borda); border-radius: var(--r-sm); font-size: 0.9375rem; } .opcoes-gabarito .opcao-correta { border-color: var(--verde); background: var(--verde-tinta); } .opcoes-gabarito .opcao-marcada { border-color: var(--marca); background: var(--marca-tinta); } /* --- ranking -------------------------------------------------------------- */ .ranking-item { padding: 0.6875rem 0.9375rem; border: 1px solid var(--borda); border-radius: var(--r-sm); box-shadow: var(--sombra-1); } .ranking-pos { font-variant-numeric: tabular-nums; } .ranking-nota { color: var(--marca-forte); font-weight: 800; } /* --- FAQ ------------------------------------------------------------------ */ .faq-item { border: 1px solid var(--borda); border-radius: var(--r-sm); background: var(--superficie); box-shadow: var(--sombra-1); margin-bottom: 0.5rem; /* Sem isto, o canto do `summary` vaza para fora do canto arredondado quando ele ganha fundo no `:hover`. */ overflow: hidden; } .faq-item summary { padding: 0.9375rem 1.125rem; font-weight: 700; font-size: 0.9375rem; letter-spacing: -0.008em; transition: background var(--rapido) var(--curva); } .faq-item summary:hover { background: var(--superficie-2); } .faq-item summary::after { content: "+"; margin-inline-start: auto; padding-inline-start: 0.75rem; color: var(--marca); font-size: 1.375rem; font-weight: 400; line-height: 1; transition: transform var(--normal) var(--curva); } /* O "+" GIRA para virar "×" em vez de trocar de caractere. Trocar o texto faz o ícone piscar; girar 45° é o mesmo desenho se movendo, que é o que a pessoa entende como "abriu". */ .faq-item[open] summary::after { content: "+"; transform: rotate(45deg); } .faq-item p { padding: 0 1.125rem 1.125rem; line-height: 1.65; } /* --- passos numerados ----------------------------------------------------- */ .passos li::marker { color: var(--marca); font-weight: 800; } .guia-numero { background: var(--marca); color: var(--marca-contraste); font-variant-numeric: tabular-nums; } /* --- lista de links ------------------------------------------------------- */ .lista-links li { padding-bottom: 0.5625rem; border-bottom: 1px solid var(--borda); } .lista-links a { font-weight: 600; letter-spacing: -0.008em; } .lista-links a:hover, .lista-links a:focus-visible { color: var(--marca-forte); } .lista-links-nota { color: var(--texto-fraco); font-size: var(--t-xs); } /* --- capas do acervo ------------------------------------------------------ */ .lista-capa, .capa-quiz, .foto-tipo, .enquete-capa { border-radius: var(--r-lg); box-shadow: var(--sombra-1); } /* --- enquetes ------------------------------------------------------------- */ .enquete-alternativa label { border: 2px solid var(--borda); border-radius: var(--r-sm); padding: 0.9375rem; box-shadow: var(--sombra-1); transition: border-color var(--rapido) var(--curva), background var(--rapido) var(--curva); } .enquete-alternativa.lider label { border-color: var(--marca); background: var(--marca-tinta); } .enquete-barra { border-radius: var(--r-pilula); background: var(--superficie-2); overflow: hidden; } .enquete-barra-cheia { border-radius: var(--r-pilula); background: var(--marca); } /* --- paginação ------------------------------------------------------------ */ .paginacao { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--v-secao); } .paginacao .botao { min-width: auto; padding-inline: 1.25rem; } .paginacao-info { color: var(--texto-fraco); font-size: var(--t-sm); font-weight: 600; font-variant-numeric: tabular-nums; } /* --- etiqueta de tipo ----------------------------------------------------- */ .etiqueta-tipo { display: inline-block; margin: 0 0 0.625rem; padding: 0.1875rem 0.625rem; border-radius: var(--r-pilula); background: var(--marca-tinta); color: var(--marca-forte); font-size: var(--t-micro); font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; } /* --- rodapé: a faixa legal ------------------------------------------------ */ .rodape-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-bottom: 0.875rem; padding-top: 1.25rem; border-top: 1px solid var(--borda); } .rodape-links a { color: var(--texto-fraco); font-size: var(--t-xs); font-weight: 500; text-decoration: none; } .rodape-links a:hover, .rodape-links a:focus-visible { color: var(--marca-forte); text-decoration: underline; text-underline-offset: 0.2em; } .rodape p { color: var(--texto-fraco); font-size: var(--t-xs); margin: 0; } /* --- a etiqueta de prova social do hero ----------------------------------- */ .hero-etiqueta { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem; padding: 0.3125rem 0.75rem 0.3125rem 0.625rem; background: color-mix(in srgb, var(--marca) 10%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--marca) 24%, transparent); border-radius: var(--r-pilula); color: var(--marca-forte); font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.02em; } /* O ponto pulsa devagar. É o único movimento contínuo do site, e ele existe por um motivo: prova social parada é texto; prova social piscando é sinal de que há gente do outro lado. Some inteiro em `prefers-reduced-motion`. */ .hero-ponto { width: 0.4375rem; height: 0.4375rem; flex-shrink: 0; border-radius: 50%; background: var(--marca); animation: pulso 2.4s var(--curva) infinite; } @keyframes pulso { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } } /* ========================================================================== CORREÇÕES VISTAS NO APARELHO Achadas abrindo a beta em 430px, que é a largura mediana do público. Cada uma é do tipo que não aparece lendo o código. ========================================================================== */ /* * O NOME DA MARCA SOME NO CELULAR ESTREITO. * * Com busca, "criar um quiz" e idioma na mesma linha, "Teu Quiz" era o único * que podia encolher — e encolhia até virar "T…", que é pior que não ter * nome nenhum: parece defeito. * * O símbolo continua, e ele é o que o público reconhece. É o que o * concorrente faz na mesma largura, e pelo mesmo motivo. */ .marca-nome { display: none; } @media (min-width: 30em) { .marca-nome { display: block; } } /* * ...E ABAIXO DE ~345px SUMIA O SÍMBOLO TAMBÉM — junto com o único link * para a home. * * A regra acima resolveu o nome. O que ela não viu é que `.marca` é item * flexível com `min-width: 0` — posto ali justamente para o nome poder * encolher. Quando a soma do cabeçalho passa da largura da tela, quem cede é * ela, e vai a ZERO. O símbolo tem `flex-shrink: 0` e mesmo assim some * junto, porque o reset dá `max-width: 100%` a toda imagem, e 100% de um * contentor de zero é zero. * * O resultado: cabeçalho sem marca nenhuma e sem caminho de volta — `a.marca` * é o ÚNICO `href="/"` de qualquer página do site. Sem erro, sem aviso, e só * em quem tem a tela mais estreita. * * A marca passa a não encolher, e quem cede é o espaço em volta dela. */ .marca { flex-shrink: 0; } /* * O cabeçalho aperta em vez de empurrar a marca para fora. * * São 6 px de padding, 2 px por vão e 5 px de cada lado do seletor de idioma * — o suficiente para as cinco peças caberem em 320 px, que é o piso do * público. O alvo de 44 px do botão de busca fica intacto: espaçamento é * negociável, alvo de toque não é. */ @media (max-width: 22.5em) { .topo-interno { padding-inline: 0.5rem; gap: 0.375rem; } .topo-acao { padding: 0 0.75rem; } .idiomas-botao { padding: 0 0.4375rem; } } /* O último bloco da página não precisa da própria margem de baixo: ela soma com o respiro do `.conteudo` e abre um vazio que parece conteúdo faltando. */ .conteudo > *:last-child { margin-bottom: 0; } /* * `balance` SÓ ONDE O TÍTULO É CURTO. * * `text-wrap: balance` iguala o comprimento das linhas — ótimo num título de * duas ou três linhas escrito por nós, péssimo num título de acervo com 80 * caracteres: ele produz quatro linhas curtas e um vão branco à direita, e o * título mais importante da página fica parecendo uma coluna de jornal * estreita. * * O H1 de página de conteúdo passa a `pretty`, que só evita a palavra órfã na * última linha e deixa o resto preencher. */ h1 { text-wrap: pretty; } .hero h1 { text-wrap: balance; } /* O H1 do acervo é texto de quem criou o quiz: pode ser longo, e o tracking fechado dos títulos grandes atrapalha quando são muitas linhas. */ .responder-topo h1 { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2rem); letter-spacing: -0.02em; } /* * A CHAMADA DO CARTÃO ESTREITO PARA EM TRÊS LINHAS. * * Em duas colunas o texto de um tipo ocupa cinco linhas e o do vizinho duas — * os cartões da mesma fileira ficam com alturas diferentes, e a grade perde a * linha de base que faz uma vitrine parecer uma vitrine. * * Três linhas cabem a frase inteira na maioria dos casos e cortam com * reticências no resto. O texto completo continua na página do tipo, que é * para onde o cartão leva — cortar aqui não esconde nada de ninguém. */ .cartoes-grade .cartao-chamada { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } /* O título também: dois cartões com título de tamanhos muito diferentes desalinham o resto do cartão. Três linhas é o limite em que o título ainda se lê inteiro na esmagadora maioria do acervo. */ .cartoes-grade .cartao-nome { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } /* -------------------------------------------------------------------------- O QUIZ RESPONDIDO EM ORDEM — uma pergunta por vez, certo/errado no toque. Tudo aqui é ligado por classe que o JavaScript escreve. Sem script, nenhuma destas regras chega a valer: a página continua sendo o formulário inteiro, com todas as perguntas abertas. Ver parciais/responder-script.php. -------------------------------------------------------------------------- */ /* Enquanto a pessoa está na etapa do nome, a lista de perguntas não existe para ela. `display: none` e não opacidade: uma lista de dez perguntas entrevista atrás do campo do nome é ruído, não contexto. */ .form-responder.em-etapas .perguntas, .form-responder.em-etapas .calculando { display: none; } .etapa-nome .botao { width: 100%; margin-top: 0.25rem; } /* A pergunta que ainda não chegou continua no fluxo, ocupando o mesmo espaço: é o que dá a noção de "faltam quantas". O que ela perde é a LEITURA — o desfoque cobre enunciado e opções, porque ler a próxima pergunta antes da hora é exatamente o que a ordem existe para impedir. Quem não tem script nunca vê esta classe: ela é escrita pelo JavaScript. */ .pergunta.bloqueada { opacity: 0.45; filter: blur(3px); user-select: none; } .pergunta.bloqueada .opcao { cursor: default; } .pergunta.respondida { opacity: 1; filter: none; } /* O par certo/errado. O verde e o vermelho são os únicos lugares do site onde cor sozinha carrega significado — por isso vêm com peso e com marca de texto, nunca só com a cor. */ .opcao-radio:disabled + .opcao, .opcao-radio[data-certa]:disabled + .opcao { cursor: default; } /* A ESPECIFICIDADE AQUI É DE PROPÓSITO, e vale explicar: a opção escolhida já é pintada por `.opcao-radio:checked + .opcao`, que tem duas classes e uma pseudo-classe. Uma regra com duas classes perde desse desempate mesmo estando depois na folha — e o resultado seria a opção ERRADA saindo com a tinta de marca, como se estivesse certa. */ .opcoes .opcao-radio + .opcao.opcao-certa { border-color: var(--verde); background: var(--verde-tinta); color: var(--texto); font-weight: 700; } .opcoes .opcao-radio + .opcao.opcao-errada { border-color: var(--vermelho); background: var(--vermelho-tinta); color: var(--texto); font-weight: 650; text-decoration: line-through; text-decoration-thickness: 1px; } .opcoes .opcao-radio + .opcao.opcao-certa::after { content: "✓"; margin-inline-start: auto; padding-inline-start: 0.5rem; color: var(--verde); font-weight: 700; } .opcoes .opcao-radio + .opcao.opcao-errada::after { content: "✕"; margin-inline-start: auto; padding-inline-start: 0.5rem; color: var(--vermelho); font-weight: 700; } /* O aviso de "responda na ordem" é fixo porque ele responde a um toque que pode ter acontecido em qualquer altura da página. Um aviso que aparece fora da tela é um aviso que não existe. */ .aviso-sequencia { position: fixed; inset-inline: 1rem; bottom: 1.25rem; z-index: 30; margin: 0 auto; max-width: 26rem; padding: 0.75rem 1rem; background: var(--escuro, #131317); color: #FFFFFF; border-radius: var(--r-sm); box-shadow: var(--sombra-2); font-size: 0.9375rem; line-height: 1.35; text-align: center; } .calculando { display: flex; align-items: center; justify-content: center; gap: 0.625rem; min-height: 6rem; margin: 1.5rem 0; padding: 1.25rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); color: var(--texto-suave); font-size: 1rem; font-weight: 600; } .girando { width: 1.25rem; height: 1.25rem; border: 2px solid var(--borda-forte); border-top-color: var(--marca); border-radius: 50%; animation: girar 0.7s linear infinite; } @keyframes girar { to { transform: rotate(360deg); } } /* Movimento é decoração aqui: quem pediu menos movimento continua vendo o aviso, sem a roda girando e sem a rolagem suave. */ @media (prefers-reduced-motion: reduce) { .girando { animation: none; border-top-color: var(--borda-forte); } .pergunta.bloqueada { filter: none; } } /* -------------------------------------------------------------------------- ANÚNCIOS O espaço é RESERVADO antes de o anúncio chegar. Não é métrica: entre duas perguntas, o conteúdo que um anúncio tardio empurra é a PERGUNTA SEGUINTE, no instante em que a pessoa vai tocar nela. Reservar é acessibilidade antes de ser Core Web Vitals. O rótulo "Publicidade" é o que a produção já faz, e é exigência de política: anúncio precisa ser distinguível do conteúdo. -------------------------------------------------------------------------- */ .anuncio { margin: 1.5rem 0; padding: 0.5rem; min-height: 6.25rem; /* o menor formato que o AdSense entrega */ display: grid; gap: 0.375rem; align-content: start; background: var(--superficie-2); border: 1px dashed var(--borda-forte); border-radius: var(--r-sm); overflow: hidden; /* bloco largo demais não estica a página */ } .anuncio-rotulo { margin: 0; color: var(--texto-suave); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; } .anuncio .adsbygoogle { /* Sem largura explícita o AdSense mede zero dentro de um grid e desiste de preencher — e "não preencheu" não dá erro em lugar nenhum. */ width: 100%; } /* O trilho lateral da produção some abaixo de 992px, e 94% do público está abaixo disso. Mesmo corte aqui, para não gastar um bloco onde ele não é visto — e para não empilhar mais um anúncio na tela mais estreita. */ .anuncio-desktop { display: none; } @media (min-width: 62rem) { .anuncio-desktop { display: grid; } } /* Fora de produção o bloco sai vazio, só com o rótulo: é assim que dá para conferir o LAYOUT na beta sem gerar impressão inválida, que é motivo de suspensão de conta no AdSense. */ /* O anúncio entre perguntas mora num `

  • ` porque `.perguntas` é um `
      ` e `
        ` só aceita `
      1. `. O item em si não desenha nada: quem desenha é o `.anuncio` dentro dele. */ .anuncio-fatia { list-style: none; } .anuncio-fatia .anuncio { margin: 0; } /* ANÚNCIO QUE NÃO PREENCHEU DESAPARECE — caixa e rótulo juntos. O AdSense escreve `data-ad-status="unfilled"` quando não tem o que servir, e isso é comum. Sem esta regra sobra uma moldura tracejada de 100px com a palavra "Publicidade" e nada dentro: espaço morto no meio do quiz, e um rótulo anunciando um anúncio que não existe. Fora de produção o `` nem é escrito, então a regra não casa e a caixa continua visível — que é justamente como se confere o layout na beta. */ .anuncio:has(> ins[data-ad-status="unfilled"]) { display: none; } /* A pergunta virou `

        ` para entrar no sumário do documento — e um `

        ` traz `font-size` e `margin` do próprio elemento. O tamanho já era definido por `.pergunta-texto`; a margem não era, e empurrava as alternativas para baixo em toda pergunta. */ .pergunta-texto { margin: 0; } /* -------------------------------------------------------------------------- AS QUATRO FAMÍLIAS DE CONTEÚDO, em /criar-quiz. Linha e não grade de cartões: são quatro escolhas curtas, e uma lista vertical com ícone à esquerda se lê de uma passada no celular — que é onde 94% do público está. Cartão com foto seria competir com os oito tipos que vêm logo abaixo, que TÊM foto. -------------------------------------------------------------------------- */ .familias { list-style: none; margin: 0 0 var(--v-secao); padding: 0; display: grid; gap: 0.625rem; } .familia-link { display: flex; align-items: center; gap: 0.875rem; padding: 0.9375rem 1rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-lg); box-shadow: var(--sombra-1); color: inherit; text-decoration: none; } .familia-link:hover { border-color: var(--marca); } .familia-icone { display: grid; place-items: center; flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--marca-tinta, var(--superficie-2)); color: var(--marca); } .familia-icone .icone { width: 22px; height: 22px; } .familia-texto { display: grid; gap: 0.125rem; min-width: 0; } .familia-nome { font-size: 1.0625rem; font-weight: 700; line-height: 1.25; } .familia-chamada { color: var(--texto-suave); font-size: 0.9375rem; line-height: 1.35; } .familia-seta { margin-inline-start: auto; color: var(--texto-fraco); font-size: 1.125rem; } /* O ícone do menu: some do lado do texto sem empurrar nada. A barra do topo rola na horizontal, então ali ele encolhe um pouco mais. */ .gaveta-item, .menu a { display: inline-flex; align-items: center; gap: 0.5rem; } .gaveta-item .icone, .menu a .icone { flex: 0 0 auto; opacity: 0.7; } .menu a .icone { width: 17px; height: 17px; } .gaveta-item[aria-current="page"] .icone, .menu a[aria-current="page"] .icone { opacity: 1; }