/** 256bip:deps — gerado por deps_annotate.py; não editar manualmente * used-by: frontend/layout/header.php * uses: (nenhum detectado) */ /* * ============================================================ * 256bip — Core CSS * Design Premium, Escuro, Sem contraste absoluto (preto/branco puro) * ============================================================ */ /* === RESET === */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* * `hidden` PRECISA ESCONDER (09/08/26). * * O atributo `hidden` só vira `display: none` pela folha do NAVEGADOR, que é a * origem mais fraca da cascata: basta o nosso CSS declarar qualquer `display` * para o elemento — um `display: flex` num painel, por exemplo — e o * `el.hidden = true` do JavaScript deixa de esconder qualquer coisa. * * Foi assim que a barra de formatação ficou pendurada na tela por versões a fio: * o JS escondia, `.bip-fmt` tinha `display: flex`, e o esconder não existia. Dez * tentativas de conserto mexeram em QUANDO esconder; o problema era o COMO. * * Este arquivo tinha VINTE remendos `.algo[hidden] { display: none !important }` * — cada um foi um bug igual, encontrado e tapado sozinho. Esta regra resolve a * classe inteira, inclusive para o que ainda vai ser escrito. Quem quiser um * elemento visível não põe `hidden` nele. */ [hidden] { display: none !important; } :root { /* ══ TEMA ESCURO, REFEITO (13/09/26, ordem do dono: *"nosso tema claro está um espetáculo, mas nosso tema escuro está uma tragédia; não vou ditar cores, só não faça ffffff com 000000, faça o seu melhor"*). O que havia: uma passada anterior tinha trocado o azul de acento por um BEGE (#D1CFC0) e cravado esse bege, com #363636 e #1F1F1F, em dezenas de regras `:root:not([data-theme="light"])`, deixando os tokens originais em comentário. Sidebar, rail, cartões e botões liam cinza sobre cinza, com um creme de acento que não é de lugar nenhum. Essas regras foram REMOVIDAS: o escuro volta a ser só estes tokens. A escala: grafite FRIO (um pingo de azul no cinza), quatro degraus (chão → cartão → campo → hover), texto marfim e não branco, acento azul claro da mesma família do #4B7BB7 do claro. Chão #141619 e título #ECEEF2: nem 000000 nem ffffff. */ --bg: #141619; --bg-2: #191C21; --surface: #1E2126; --surface-2: #262A31; --surface-3: rgba(255,255,255,0.04); /* Sobreposição (hover) da navegação — no claro vira cinza (ver tema claro). */ --nav-hover: #23272E; --border: rgba(255,255,255,0.08); --border-hover: rgba(255,255,255,0.16); --border-focus: rgba(111,160,232,0.55); --white: #F1F3F6; --text: #D6D9DE; /* `--text-1` NUNCA EXISTIU (achado em 24/08/26, dono: *"sem contar este css branco, fica péssimo para ler"*). Sessenta e três declarações a usavam — `color: var(--text-1)` sem fallback é declaração INVÁLIDA, e a cor caía na herança: no tema claro isso pintava de branco o nome de quem tem status, sobre fundo claro. Ela é o degrau mais forte da escala (título, nome, o que precisa de peso), acima de `--text`. */ --text-1: #ECEEF2; --text-2: #9AA2AE; --text-3: #6A7280; /* Azul claro da família do #4B7BB7 do claro: sobre grafite, o mesmo azul médio afunda; um degrau mais claro lê como o MESMO azul. */ --accent: #6FA0E8; /* A MOBÍLIA NO ESCURO (21/08/26). Precisa existir nos DOIS temas: a tarja do cabeçalho usa `var(--orkut-bar)` e escreve em BRANCO por cima. Sem esta linha, no escuro a variável não resolve, o fundo vira transparente e o título fica branco sobre cartão escuro… que até se lê, mas some a tarja inteira — o móvel que dá a cara do Orkut. Tom mais fundo que o #4B7BB7 do claro: sobre superfície escura o azul médio brilha demais e a coluna vira um farol. */ --orkut-bar: #2F5382; /* No ESCURO o "pálido" é um azul fundo — pálido de verdade viraria um bloco branco no meio da coluna preta. A tinta é clara pelo mesmo motivo. */ --orkut-tarja: #242B36; --orkut-tinta: #B9CEEC; --orkut-bar-hover: #284670; --orkut-bar-glow: rgba(47,83,130,0.35); --accent-soft: rgba(111,160,232,0.14); --accent-glow: rgba(111,160,232,0.30); --green: #22C083; --green-soft: rgba(34,192,131,0.14); --red: #F0555A; accent-color: var(--accent); /* * QUEM DESENHA O EMOJI É O SISTEMA — e deve continuar sendo (09/08/26). * * Cheguei a pôr 'Noto Color Emoji' aqui para resolver as bandeiras que o * Windows não tem. Foi um mau negócio: a Noto passou a valer para TODOS os * emojis e substituiu o Fluent Emoji do Windows 11 — que é justamente o * desenho bonito e 3D que o dono admirou nas outras redes. Trocar o melhor * pelo pior para consertar as bandeiras é pagar caro demais por elas. * * Emoji igual em todo sistema se resolve com IMAGEM (spritesheet do * emoji-mart), não trocando a fonte — e essa decisão fica para quando o * seletor novo entrar, com o dono escolhendo o estilo. */ --font: 'Inter', system-ui, -apple-system, sans-serif; --radius: 12px; /* --radius-md FALTAVA (26/07/26): 4 caixas usavam var(--radius-md) indefinida, o navegador ignorava a linha inteira e o canto saía RETO (a barra da tag na busca era a mais visível). Definida, todas arredondam de uma vez. */ --radius-md: 12px; --radius-lg: 12px; --radius-xl: 12px; --sidebar-width: 240px; --nav-col-width: 240px; /* INVERSÃO (24/07/26): em vez de esticar o feed até os menus, o meio ENCOLHE e as laterais vêm pra dentro. 620 = card cheio (respiro 14px) com o conteúdo/foto nos 548px ORIGINAIS — proporção intacta, distância padrão. */ --feed-col-width: 620px; --rail-col-width: 320px; --layout-gap: 28px; --feed-gutter-x: 14px; /* respiro padrão card→borda da coluna (24/07/26) */ --shell-pad-x: 40px; --app-shell-width: calc(var(--shell-pad-x) * 2 + var(--nav-col-width) + var(--layout-gap) + var(--feed-col-width) + var(--layout-gap) + var(--rail-col-width)); --content-col-width: var(--feed-col-width); --feed-rail-width: var(--rail-col-width); --rail-stack-gap: 16px; /* ══ O RESPIRO DO TOPO, UM BOTÃO SÓ (29/08/26) ═══════════════════════ Ordem do dono: *"veja o respiro entre a nota e o topo — este é o tamanho ideal. Em comunidade está muito alto, no chat, no perfil. Não tem mesmo como investigar e resolver isso?"*. Tinha, e a causa era boba: QUATRO arquivos repetiam o mesmo número à mão — `profile.css`, `communities.css`, `inbox.css` (22px cada, todos com o comentário "régua única do topo") e `mensagens.css` (16px). "Régua única" escrita quatro vezes não é régua nenhuma: mudar no celular exigia achar os quatro, e a primeira tentativa de corrigir o perfil ainda apanhou da ordem de carga (o CSS da página entra DEPOIS do `mobile.css` e ganhava o empate). Agora é uma variável. As páginas dizem `padding-top: var(--topo-respiro)` e param de decidir; quem decide é este valor, e o celular o troca num lugar só (ver o `mobile.css`). Variável não tem esse problema de ordem: ela é lida na hora do uso, não na hora da declaração. */ --topo-respiro: 22px; --app-topbar-height: 72px; --feed-rail-offset-y: 12px; --container-max: var(--app-shell-width); --container-pad-x: 32px; --header-h: 64px; --ease: cubic-bezier(0.4, 0, 0.2, 1); --duration: 0.25s; /* Sombras mais fundas no escuro (13/09/26): é a sombra, e não a linha, que separa o cartão do chão quando os dois são grafite. */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.45); --shadow-md: 0 6px 20px rgba(0,0,0,0.50); /* Pastilha das abas (feed, perfil, comunidade, busca) no ESCURO. Vive aqui e não só no bloco claro: lá `--orkut-tinta` é escura (#33383f) e funciona em cima do #BCCDE9; aqui `--orkut-tinta` é clara (tarja) e some na pastilha — era o "Fórum" ilegível no tema escuro. */ /* No escuro a pastilha é um azul fundo com tinta clara (13/09/26): o mesmo par da tarja do Orkut, um degrau acima do cartão. */ --pastilha: #2B3D5C; --pastilha-tinta: #D6E3F5; --pastilha-sombra: none; /* A PÍLULA "SEGUIR" (11/09/26, dono: o botão do aipim.social é "maravilhoso", e quer igual em toda a rede). Um par FIXO por tema, e não `--white`/`--bg`, que trocam de papel entre os temas (ver a nota em `.follows-btn`). No ESCURO ela inverte: pílula branca, letra preta; os estados (Seguindo/Conectados/Pendente) em cinza escuro com letra clara. Quem lê estes tokens: cartão, resposta, rail, /follows, rankings, busca (BipTag), perfil e o "+" do avatar no celular. A versão CLARA mora no bloco `[data-theme="light"]`, mais abaixo. */ --seguir-bg: #ECEEF2; --seguir-bg-hover: #F6F7F9; --seguir-fg: #15181D; --seguir-feito-bg: #2A2F37; --seguir-feito-bg-hover: #343A44; --seguir-feito-fg: #E4E7EC; } /* === Tema claro — pastel suave, sem branco puro. Só sobrescreve COR (layout/fontes ficam) === */ [data-theme="light"] { /* DUAS CORES, SÓ (16/08/26, ordem do dono: "#F4F4F4 e #FFFFFF"). Com as caixas sem contorno, quem separa o cartão do fundo é o DEGRAU de cor — então ele precisa ser um só e ser claro: #F4F4F4 embaixo, #FFFFFF em cima. O antigo #F9FAFB era quase branco e, sem borda, o cartão se dissolvia na página. A cor de SOBREPOSIÇÃO (hover) da navegação vira cinza mais abaixo (--nav-hover) — surface-2 fica branco porque alimenta ~40 painéis. */ /* PALETA ORKUT (21/08/26, cores levantadas pelo DONO). Para voltar: --bg: #D9E8F5; (azul-Orkut, 1ª medição, 21/08) --bg: #F7F3ED; (creme — tentativa minha, 21/08, ERRADA) --bg: #EFF4F7; (cinza com fundo azul, 17/08/26) --bg: #F4F4F4; (cinza neutro, 16/08/26) DUAS TENTATIVAS MINHAS ERRARAM ANTES DESTA, e vale registrar por quê: primeiro fui de CREME ("o Orkut era quente porque nada era cinza") e depois cogitei MAGENTA. As duas estavam erradas — a memória que as pessoas têm do Orkut é o AZUL DE BARRA, e foi o dono quem trouxe os números certos. Lição: em cor, referência levantada vale mais do que dedução bem argumentada. A paleta dele, e o papel de cada uma nesta casa: #4B7BB7 barras e cabeçalhos ...... `--orkut-bar` (mobília) #D4DDED fundo (valor CONFIRMADO pelo dono, 21/08) . `--bg` #E5E5E5 bordas e divisórias ...... `--border` #FFFFFF conteúdo ................. `--surface` (já era) SUPERADO NO MESMO DIA. Aqui eu escrevi que o #4B7BB7 "não vira o azul de ação" — que mobília e ação precisavam de tons diferentes para não sumir a hierarquia de "onde eu clico". O dono foi levando um por um (botões, depois os links) e a página com UM azul só ficou melhor do que o meu argumento previa: o que separa botão de link não é o tom, é a FORMA — botão é bloco cheio com letra branca, link é palavra sublinhável no meio do texto. Fica registrado que a previsão errou. */ /* ══ MENOS AZUL, MESMO DEGRAU (21/08/26) ═══════════════════════════════ O dono comparou o modal "Nova comunidade" (cinza neutro) com o resto do site e disse: *"o nosso layout do modal e muito mais lindo que este monte de azul, fala serio"*. Ele esta certo, e a medicao mostrou por que — e de quebra desmentiu a minha primeira ideia. EU PROPUS CLAREAR o fundo (#EFF2F7) achando que isso destacaria os cartoes. Errado nos dois pontos: - clarear PIORA o degrau do cartao branco (1,37 → 1,12): quanto mais perto do branco, menos o cartao existe; - e #EFF2F7 tem 33% de saturacao contra os 41% do #D4DDED — quase o mesmo azul, so mais claro. Nao resolveria o "monte de azul". O eixo certo nao era CLARIDADE, era SATURACAO. #E5E8EE tem a mesma familia do #F9FAFB do modal (21% x 20%) e mantem o degrau do cartao em 1,23 — perto do 1,37 de antes. Metade do azul, o cartao continua existindo. O AZUL-ORKUT NAO MORREU: ele continua na mobilia (barras, botoes, links, icones, a pastilha), que e onde ele sempre esteve no Orkut de verdade. O que mudou e que ele parou de ser tambem o CHAO — e cor que esta em tudo nao destaca nada. Para voltar: `--bg: #D4DDED` e `--bg-2: #CBD4E4`. */ /* CHÃO #FAFAFA (11/09/26, ordem do dono). Era #E5E8EE. Os espelhos fora daqui mudaram juntos: theme-color no header.php, theme_color no pwa_helpers/seo_helpers e o fundo do chat retrô. --bg-2 NÃO mudou. */ --bg: #FAFAFA; /* A cor da MOBÍLIA. Vive aqui, e não solta no CSS, para o dia em que ela mudar de tom mudar num lugar só. */ --orkut-bar: #4B7BB7; /* A TARJA VOLTOU A SER PÁLIDA (21/08/26, e o dono estava certo). Eu li "#4B7BB7 = barras e cabeçalhos" e fiz uma FAIXA CHEIA saturada com letra branca. Olhando o Orkut de verdade, quase nada ali era bloco sólido: os painéis eram azul pálido sobre azul mais pálido, e o #4B7BB7 aparecia como TINTA e nas pilulinhas da barra. Palavras dele: *"o contraste existia, mas de forma mais suave"*. Então a tarja é `--orkut-tarja` e quem escreve nela é `--orkut-tinta` — um azul mais fundo, porque o #4B7BB7 sobre o pálido dá só 3,46:1 e o título de caixa é texto pequeno em negrito. Com #35597F são 5,77:1: fica suave de LONGE e legível de PERTO, que é o que o Orkut fazia. */ /* A TINTA DO TÍTULO = A LETRA DO MENU (21/08/26, último ajuste do dono: *"vamos tentar colocar a mesma cor do menu no nome das caixas"*). Ele sublinhou os RÓTULOS do menu, não os ícones — e é a leitura que funciona: `--text` sobre a tarja dá **7,34:1**, o melhor número da coluna inteira. O azul do ÍCONE (#4B7BB7) daria 2,71:1 e estaria reprovado. Ganho de desenho junto: com o título na mesma tinta do menu, a barra lateral e a coluna da direita passam a ser a mesma família — sobra UM azul na página (o da mobília, nos ícones e botões) em vez de dois. */ /* VALORES OFICIAIS (21/08/26): o dono achou um print da página real do Orkut e tirou as cores de lá — #D4DDED no azul claro (nosso `--bg`), **#BCCDE9** no azul escuro (esta tarja) e #B11E89 no rosa. Acabaram as estimativas: os três agora são medidos da fonte. A tinta fica em #35597F — sobre o #BCCDE9 ela dá 4,52:1 e passa raspando; o #4B7BB7 daria 2,71:1, reprovado. Se um dia a tarja escurecer mais, a tinta tem de escurecer junto (o #2A4763 já está medido em 5,99:1). */ /* A TARJA DAS CAIXAS DO RAIL, muito mais pálida (21/08/26). Eram seis faixas azuis empilhadas na coluna da direita — metade do "monte de azul" que o dono viu. Agora e um degrau discreto dentro do cartao branco (1,18) e a tinta escura sobe para 9,7:1. O cabecalho continua existindo; ele so parou de gritar. Anterior: #BCCDE9 (o azul escuro da pagina oficial do Orkut). */ --orkut-tarja: #EBECEF; --orkut-tinta: #33383f; /* O PAR DA MOBÍLIA (21/08/26). Existem porque o botão "Novo BiP" tinha `#3d7de5` CRAVADO no hover e um `--accent-glow` do azul ANTIGO na sombra: parado ele era #4B7BB7, e ao passar o mouse pulava para outro tom, mais vivo e de outra família — foi o "estranho" que o dono viu. Hover é o MESMO azul um passo mais fundo; brilho é o próprio azul, nunca o de outra paleta. */ /* Ficou SEM USO em 21/08 quando os botões passaram a clarear no hover (`filter: brightness`) em vez de trocar de cor — igual ao "Seguir" do rail, que o dono aprovou. Fica porque é o par do `--orkut-bar` e o próximo elemento que precisar de um azul-mobília mais fundo já tem o valor pronto, medido em 5,56:1 com branco. */ --orkut-bar-hover: #3F6A9F; --orkut-bar-glow: rgba(75,123,183,0.28); /* Um degrau ABAIXO do fundo (16/08/26, dono: "essa caixa perdeu o contraste, pode ser uma variação um pouquinho mais forte"). Igualada ao fundo, a barra de pílulas sumia e a pílula branca ficava boiando. Este tom é o "afundado" da casa: serve à barra e aos campos, sem virar uma terceira cor na página. ACOMPANHA O FUNDO, SEMPRE. O degrau é o MESMO de sempre (-9 por canal), agora sobre o azul-Orkut confirmado: 212,221,237 vira 203,212,228. Deixar este tom para trás quando o `--bg` muda é o erro que suja as caixas afundadas — aconteceu em 17/08 com o cinza neutro debaixo de um fundo azulado. Anteriores: #E6EBEE (17/08) · #EBEBEB (16/08). */ --bg-2: #DCDFE5; --surface: #FFFFFF; --surface-2: #FFFFFF; --surface-3: rgba(15,23,42,0.04); /* O REALCE DO MENU (21/08/26, dono: *"este efeito de sobreposição mudar para essa cor #BCCDE9"*). Era #EAEDEF, um cinza claro da época em que a barra era quase branca. MEDIDO, e sem enfeitar: contra o fundo #D4DDED os dois dão praticamente o mesmo — 1,16:1 o antigo, 1,18:1 o novo. Ou seja, a troca NÃO deixa o realce mais forte; ela troca a FAMÍLIA. O antigo puxava para o branco (cinza de outra paleta), o novo é a mesma pálida da tarja das caixas, e aí a barra passa a usar a cor que o resto da página já usa. Se um dia o realce precisar ser mais visível, o caminho é aumentar o DEGRAU (descer para o #ADC2E3, por exemplo), não trocar de tom. Escrito como `var(--orkut-tarja)` e não como o hex: é o MESMO valor, e assim os dois não têm como se separar quando a pálida da casa mudar. */ /* Idem: o realce do menu tambem se separou da tarja. Com o fundo novo (#E5E8EE) ele fica em #D7DDE9 — um degrau que se ve sem virar mancha. */ --nav-hover: #EBECEF; /* BORDA DO ORKUT: #E5E5E5, sólida. Sai o slate translúcido — ele tinge de AZUL-ARDÓSIA tudo o que contorna, e era metade do ar de painel corporativo que o dono queria tirar. Sólida também é previsível: a translúcida mudava de cor conforme o que estivesse por baixo. Anterior: rgba(15,23,42,0.10). */ --border: #E5E5E5; --border-hover: #D2D2D2; --border-focus: #B4B4B4; --white: #1E1C1C; --text: #33383f; /* Ver a nota no tema escuro: sem esta linha o texto forte herdava branco. */ --text-1: #1E1C1C; --text-2: #5f6672; --text-3: #9aa0ab; /* A pílula "Seguir" no CLARO (11/09/26): preta com letra branca, como no aipim; os estados em cinza claro (#EEEDF4, o chão único do app) com letra escura. A versão escura mora no `:root`, acima. */ --seguir-bg: #111111; --seguir-bg-hover: #2A2A2A; --seguir-fg: #FFFFFF; --seguir-feito-bg: #EEEDF4; --seguir-feito-bg-hover: #E2E1EA; --seguir-feito-fg: #33383f; /* ══ UM AZUL SÓ (21/08/26, ordem do dono: *"MUDA A COR DOS LINKS PARA A COR DO BOTÃO, TODOS OS LINKS"*) ═══════════════════════════════════════ Em 21/08 eu separei `--accent` (azul vivo, para texto) de `--btn-azul` (azul da mobília, que preenche botão) e argumentei que juntar os dois reprovaria na régua de leitura. O dono viu na tela e mandou juntar. Vai junto, e o número fica escrito aqui sem maquiagem: link #4B7BB7 no cartão branco ...... 4,36:1 (antes 4,70) link #4B7BB7 no fundo da página .... 3,19:1 (antes 3,44) Ou seja: o mínimo de 4,5 já não era alcançado com o azul anterior no fundo da página — a diferença real entre os dois é pequena, e o ganho de ter UMA cor azul na rede inteira é grande. Assumido de olhos abertos. `--btn-azul` continua existindo e continua valendo a pena: os dois têm o mesmo valor hoje, mas nomeiam papéis diferentes. No dia em que a mobília escurecer, quem lê "azul de botão" muda e quem lê "azul de link" decide separado — que é exatamente a escolha que este comentário registra. O par SOFT/GLOW acompanha o tom novo: brilho tingido do azul velho debaixo de uma peça do azul novo é a sobra que já apareceu três vezes hoje (a sombra verde sob a pílula rosa, o halo #2f6fe0 sob o botão, o `rgba(79,142,247)` sob a pílula do feed). */ --accent: #4B7BB7; --accent-soft: rgba(75,123,183,0.10); --accent-glow: rgba(75,123,183,0.22); --green: #0f9d6e; --green-soft: rgba(15,157,110,0.12); --red: #dc2626; --shadow-sm: 0 1px 3px rgba(15,23,42,0.10); --shadow-md: 0 4px 16px rgba(15,23,42,0.12); } /* O AZUL DA MARCA NOS ÍCONES DO MENU (17/08/26, ordem do dono: "coloque todos estes ícones na cor #145BD7"). É o mesmo #145BD7 do logotipo, e não o `--accent` (#2f6fe0 no claro, #4F8EF7 no escuro), que é a cor de AÇÃO — o botão "Novo BiP", os links, o "Seguir". Se o menu usasse o accent, ele mudaria junto no dia em que a cor de ação mudasse, e o menu não é uma ação. PASSOU A SER O AZUL DA MOBÍLIA (21/08/26, pergunta do dono: "a cor azul dos ícones não deveria ser a mesma do topo das caixas?"). Deveria — e o raciocínio acima já apontava para lá: o menu é MOBÍLIA. Só faltava escolher QUAL azul de mobília, e com a paleta Orkut a tela tinha passado a ter TRÊS: #145BD7 nos ícones, #4B7BB7 nas tarjas e #2f6fe0 nas ações. Três é um a mais do que a página aguenta, e foi isso que ele viu. E no fim do dia ficou UM: o dono levou os botões e depois os links para o #4B7BB7 também. A rede tem um azul de interface só — mobília, botão e link — e o LOGOTIPO segue no #145BD7, o que não é incoerência: marca pode ter cor própria, é um elemento único e pequeno. Anterior: #145BD7. */ :root { --icone-menu: #627084; } /* No ESCURO o ícone do menu sobe um degrau (13/09/26): #627084 sobre grafite #141619 dava 3:1 e o menu inteiro parecia desligado. */ :root:not([data-theme="light"]) { --icone-menu: #96A2B4; } /* A SOMBRA VERDE DA MARCA (17/08/26, ordem do dono: "a sombra do botão em verde do logo"). O verde é o #00A63C do logotipo, não o `--green` da interface (#0f9d6e), que é o verde de ESTADO — "deu certo", "online". Misturar os dois faria a pastilha do feed parecer um aviso de sucesso. Fica fora dos blocos de tema porque a marca é uma só nos dois: o que muda de um para o outro é a opacidade, e 30% aguenta claro e escuro sem virar borrão verde num nem sumir no outro. */ :root { --verde-marca: #00A63C; /* O ROSA DO ORKUT (21/08/26, escolha do dono para a pílula do feed). Ele entra como PILAR PRÓPRIO e não por cima do `--verde-marca`: o verde continua sendo METADE DO LOGOTIPO e o estado "Conectados", e sobrescrevê-lo arrastaria os dois junto sem ninguém pedir. A sombra vem no par: a pílula usa `box-shadow` tingido, e uma pastilha rosa com brilho VERDE embaixo é exatamente o tipo de sobra que passa despercebida em revisão e salta na tela. */ /* O ROSA DA CASA. Para voltar em um passo — a linha do tempo inteira: --rosa-orkut: #EC4798; + letra branca (3,55:1) ← o dono gostou --rosa-orkut: #EFAFD0; + tinta escura (5,10:1) pastel --rosa-orkut: #EC1B90; + letra branca (4,10:1) o primeiro CHEGOU AQUI POR MEDIÇÃO, não por gosto. O dono aprovou o #EC4798 de olho — e estava certo no tom: ele conversa com o azul da mobília sem gritar. O problema era só o número: 3,55:1 com letra branca, e a pílula é 14,4px semibold, então a régua é 4,5 (a de 3,0 vale a partir de 18,66px em negrito). Este é o MESMO rosa um passo mais fundo: **4,73:1**, passa, e a diferença de cor é quase imperceptível ao lado do aprovado. DESFECHO (mesmo dia): o #D42A80 foi visto na tela e o dono achou escuro demais; voltamos ao #EC4798, com 3,55:1 assumido de olhos abertos. E aí ele achou um print da página OFICIAL do Orkut e tirou o rosa de lá: **#B11E89**. O #B11E89 dá 6,15:1 com letra branca — melhor número de todos. E MESMO ASSIM ficou de fora: visto na tela, o dono achou que puxava para o roxo e preferiu o #EC4798. Está certo, e tem explicação: no Orkut aquele rosa era do LOGOTIPO e de acentos de texto, nunca preenchimento de botão. Cor herdada de um papel não serve automaticamente em outro. FICA O #EC4798, com 3,55:1 assumido de olhos abertos — rótulo de duas palavras em negrito. Eu seguraria a régua se fosse texto corrido; aqui não é, e quem olha a tela todo dia é ele. */ --rosa-orkut: #EC4798; /* A TINTA do rosa: mesma família, escura. Existe por um motivo medido, não estético — `#EC1B90` com texto BRANCO dava **4,10:1**, abaixo do mínimo de 4,5, e clarear para o pastel (pedido do dono, 21/08) só pioraria. Com letra branca, quanto mais harmônico o rosa, menos legível a pílula. Pastel + tinta da mesma família dá **5,10:1** e ainda fica mais suave: a cor deixa de gritar e passa a se ler. */ --rosa-orkut-tinta: #8A1157; /* Sombra na cor nova e mais fraca: a de 0.30 sob um pastel virava um halo sujo em volta de uma peça clara. */ --shadow-rosa: 0 2px 8px rgba(236,71,152,0.30); /* Sombra do VERDE da marca. Ficou sem uso quando a pastilha do feed virou rosa (21/08/26) e a `--shadow-rosa` tomou o lugar — mas fica: ela é o par do `--verde-marca`, e o próximo elemento que usar o verde da marca vai precisar dela. Apagar agora só obrigaria a redescobrir o valor depois. */ --shadow-marca: 0 2px 8px rgba(0,166,60,0.30); /* ══ O AZUL DOS BOTÕES (21/08/26, dono: *"olha a cor deste botão, não tem como ver todos os botões e deixar tudo padrão?"*) ═════════════════════ O "Deixar recado" saiu azul #2f6fe0 ao lado de um "Novo BiP" #4B7BB7. Não era um botão esquecido: em 21/08 eu troquei À MÃO os dois botões que o dono estava olhando (Novo BiP e Seguir) e deixei os outros ~20 no `--accent`. Conserto pontual em cor é isto — nasce certo na tela que se está olhando e errado em todas as outras. DUAS FUNÇÕES, DOIS NOMES, e é o que faltava: --accent o azul VIVO — links, marcas, indicadores, foco. É TEXTO sobre a página, então precisa passar na régua de leitura: #2f6fe0 sobre o fundo #D4DDED dá 4,52:1. O #4B7BB7 daria 3,19:1 e reprovaria — por isso o azul da mobília não pode simplesmente engolir o `--accent`. --btn-azul o azul de MOBÍLIA que PREENCHE botão. Aqui a régua é outra (branco em cima do azul, não azul em cima do fundo): branco sobre #4B7BB7 dá 4,36:1. Ele é `var(--orkut-bar)` de propósito, e não uma cópia do valor: assim o botão não tem como se separar da mobília no dia em que o tom mudar. Um lugar, um lever — que é o que o dono pediu. */ --btn-azul: var(--orkut-bar); /* ══ A PASTILHA DO CONTROLE SELECIONADO ═══════════════════════════════ O que pinta "esta aba está aberta" nas barras da rede: feed, perfil e busca (os chips do filtro do feed saíram em 11/09/26, com o filtro). Vive num nome PRÓPRIO (21/08/26, dono: *"vamos tentar trocar este rosa pela cor do botão"*) justamente porque já trocou três vezes num dia — verde → rosa → azul. Estava cravado em quatro arquivos, e cada troca era uma caçada. Agora é UMA linha. PARA VOLTAR AO ROSA, troque as duas linhas abaixo por: --pastilha: var(--rosa-orkut); --pastilha-tinta: #FFFFFF; --pastilha-sombra: var(--shadow-rosa); --pastilha: var(--btn-azul); --pastilha-tinta: #FFFFFF; --pastilha-sombra: 0 2px 8px var(--orkut-bar-glow); A TINTA VAI JUNTO, SEMPRE. Voltar só a cor de fundo é como o par fundo/letra do "Seguir BiPTag" ficou preto: um lado mudou, o outro não. MEDIDO: branco sobre o azul dá **4,36:1**, contra 3,55:1 do rosa — a troca também melhora a leitura do rótulo aceso. O CUSTO, que fica anotado porque é real: azul é a cor de AÇÃO da casa (Novo bip, Seguir, Mensagem). Com a pastilha azul, uma aba JÁ ABERTA passa a ter a mesma cara de um botão que se aperta — e no feed a pílula "Novo" cai logo abaixo do botão "Novo bip", os dois no mesmo tom. */ /* CRAVADA agora, e nao mais `var(--orkut-tarja)`: a tarja do rail acabou de ficar quase branca (21/08), e a pastilha PRECISA se ler contra o trilho branco — se ela seguisse a tarja, o controle inteiro sumiria. Duas coisas que eram a mesma cor por coincidencia, nao por regra. */ --pastilha: #EBECEF; /* A TINTA VIAJA COM A PASTILHA (21/08/26) — e agora ela precisa mesmo. Enquanto a pastilha foi verde, rosa e azul, o rótulo era branco fixo nos três casos e ninguém sentiu falta de um nome. Com o #BCCDE9, branco caía para **1,61:1** e o rótulo simplesmente some. Deixar a cor sem o par é exatamente o defeito do "Seguir BiPTag" preto: um lado do par mudou, o outro ficou. Aqui os dois andam juntos, sempre. Com o #33383f (a tinta do menu) no #EBECEF o contraste sobe. */ --pastilha-tinta: #33383f; /* Sem halo: sombra debaixo de uma peça clara vira borrão sujo. Quem faz a pastilha existir é o degrau contra o trilho branco. */ --pastilha-sombra: none; } /* === GLOBAL === */ html { scroll-behavior: smooth; } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body:has(.app-topbar) { --feed-rail-offset-y: calc(var(--app-topbar-height) + 6px); } h1, h2, h3, h4 { font-family: var(--font); color: var(--white); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; } a { text-decoration: none; color: inherit; } /* === Shell 3 colunas (nav | feed | rail) — centralizado === */ .app-shell { display: grid; grid-template-columns: var(--nav-col-width) minmax(0, 1fr); gap: var(--layout-gap); width: min(var(--app-shell-width), 100%); max-width: var(--app-shell-width); margin: 0 auto; padding: 0 var(--shell-pad-x); align-items: start; min-height: 100vh; } /* === Navegação esquerda (estilo X / Bluesky) === */ .sidebar { position: sticky; top: 0; width: var(--nav-col-width); height: 100vh; display: flex; flex-direction: column; align-items: stretch; padding: 8px 0 24px; background: transparent; border-right: none; z-index: 100; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; } .sidebar::-webkit-scrollbar { display: none; } /* ══ A CABECEIRA DA BARRA ═══════════════════════════════════════════════ Logotipo + a chave que encolhe o menu, na mesma linha (29/08/26). O botão não pode morar DENTRO do : link dentro de link não existe em HTML e o clique viraria navegação para a home. */ .sidebar-head { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; } .sidebar-logo { color: var(--white); text-decoration: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: transparent; border: none; border-radius: var(--radius); transition: background var(--duration) var(--ease); min-width: 0; } /* AS DUAS PEÇAS DA MARCA — uma por vez, nunca as duas. `logo-oficial` é DEITADA (2172×724): é ela que traz o "256bip" escrito, e é ela que fica cortada quando a coluna encolhe. O `/logo.png` da raiz é QUADRADO (512×512) e é o que sobrevive nos 88px da barra estreita. */ .sidebar-logo__marca { height: 44px; width: auto; max-width: 100%; display: block; object-fit: contain; } .sidebar-logo__icone { display: none; width: 44px; height: 44px; object-fit: contain; } /* A CHAVE. Discreta parada, acende no hover — ela é mobília, não convite. */ .sidebar-collapse { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-left: auto; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--text-3); font-size: 1.15rem; cursor: pointer; opacity: 0.55; transition: background var(--duration) var(--ease), color var(--duration) var(--ease), opacity var(--duration) var(--ease); } .sidebar-collapse:hover, .sidebar-collapse:focus-visible { /* Mesmo par do `.sidebar-link:hover` logo abaixo — a chave é vizinha dos itens do menu e tem que acender igual a eles. `--hover` e `--text` NÃO existem nesta folha; var fantasma vira herança e some. */ background: var(--nav-hover); color: var(--white); opacity: 1; } .sidebar-logo:hover { /* Efeito over removido a pedido do design */ transform: none; } .sidebar-logo__pager { display: block; width: 36px; height: 36px; flex-shrink: 0; color: var(--white); filter: drop-shadow(0 0 8px rgba(79, 142, 247, 0.4)); transition: filter var(--duration); } .sidebar-logo:hover .sidebar-logo__pager { filter: drop-shadow(0 0 14px rgba(79, 142, 247, 0.65)); } /* Tema claro: sem o glow azul (vira um borrão esfumaçado no fundo claro). */ [data-theme="light"] .sidebar-logo__pager, [data-theme="light"] .sidebar-logo:hover .sidebar-logo__pager { filter: none; } .sidebar-logo__wordmark { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em; color: var(--white); } /* SELO BETA (12/08/26, pedido do dono): retângulo em PRATA refinada ao lado do logotipo — metal escovado: gradiente claro-escuro-claro, borda que segura o brilho, luz interna no topo e a leve sombra que descola do fundo. */ .bip-beta-badge { display: inline-block; padding: 2px 8px 3px; border-radius: 6px; background: linear-gradient(180deg, #f8fafc 0%, #d7dce3 38%, #aeb6c2 62%, #e6eaef 100%); border: 1px solid #98a1ad; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 1px rgba(70, 80, 95, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25); color: #3d4653; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); line-height: 1.3; vertical-align: middle; -webkit-user-select: none; user-select: none; } .sidebar-nav { display: flex; flex-direction: column; gap: 4px; flex-grow: 0; width: 100%; } .sidebar-footer { margin-top: auto; padding-top: 8px; width: 100%; display: flex; flex-direction: column; gap: 10px; } .sidebar-e81-stamp { margin: 10px 8px 14px; padding: 0; text-align: center; } .sidebar-e81-stamp .e81-stamp { padding: 0; gap: 3px; font-size: 0.62rem; line-height: 1.35; text-align: center; color: var(--text-3); } .sidebar-e81-stamp .e81-stamp a { color: var(--text-2); font-weight: 600; } .sidebar-e81-stamp .e81-stamp a:hover { color: var(--text-1); text-decoration: underline; } /* ── O MENU ENCOLHEU (12/09/26, ordem do dono, depois de comparar lado a lado com o do aipim: *"então bora melhorar este menu"*) ──────────────────────── A fonte NÃO era o problema — os dois usam Inter (conferido no navegador deles). Era o TAMANHO: o nosso rótulo estava em 1,2rem (19px) com ícone de 1,72rem e linha de 52px; o deles, 14px com ícone de 18px e linha de 38px. Um terço maior em tudo, e por isso o nosso parecia um menu de tablet e o deles um menu de aplicativo. O que ficou: 15px de rótulo, ícone de 22px, linha de 44px e gap de 12. Não copiei os 14px deles porque a nossa lista é mais curta e a leitura em português tem palavras mais longas ("Selo de Verificação") — 15px é o piso confortável aqui. E a COR: item parado vira `--text-2`. Com tudo em preto cheio, doze linhas competiam entre si e nenhuma vencia; apagando as paradas, a página aberta (negrito, cor cheia, fundo e risquinho azul) aparece de longe. */ .sidebar-link { position: relative; color: var(--text-2); font-size: 0.95rem; font-weight: 500; text-decoration: none; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border-radius: var(--radius); transition: background var(--duration) ease, color var(--duration) ease; border: none; background: transparent; cursor: pointer; font-family: inherit; text-align: left; } /* AZUL EM TODOS OS ESTADOS (17/08/26): parado, sob o cursor e na página aberta. O ícone deixou de carregar estado e passou a ser identidade — quem diz onde você está continua sendo o rótulo em negrito, o fundo da linha e o risquinho azul na borda esquerda, que são três sinais e sobram. */ .sidebar-link i { font-size: 1.32rem; width: 24px; flex-shrink: 0; text-align: center; color: var(--icone-menu); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .sidebar-link__label { font-size: 0.95rem; letter-spacing: -0.01em; white-space: nowrap; } button.sidebar-link { -webkit-appearance: none; appearance: none; } /* ── ITEM DESLIGADO (24/08/26) ───────────────────────────────────────────── Recurso em manutenção continua na barra, apagado e inerte: sumir da lista faria quem já usava concluir que ele acabou. A etiqueta diz o que houve — sem ela, o item cinza pareceria defeito. */ .sidebar-link--off { cursor: default; opacity: 0.45; } .sidebar-link--off:hover { background: transparent; color: var(--text); } .sidebar-link__tag { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--surface-2, rgba(120, 120, 128, 0.14)); color: var(--text-3); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; } .sidebar-link:hover { background: var(--nav-hover); color: var(--white); } /* O ÍCONE ESCURECE JUNTO. Parado ele é o azul do menu; sobre a pálida esse azul mede 2,71:1 — abaixo dos 3,0 que um componente pede, e na tela vira azul dentro de azul. Acompanhar o rótulo é o que o menu da conta já fazia (`.sidebar-user-menu__item:hover i`), e é o mesmo aprendizado do "Ver todas" que sumia dentro da tarja: quem entra numa superfície tira a cor DELA. */ .sidebar-link:hover i { color: var(--white); } .sidebar-link.active { font-weight: 700; /* A página aberta é a ÚNICA em cor cheia — é o contraste com as apagadas que faz o "você está aqui" funcionar sem gritar. */ color: var(--white); } .sidebar-link.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 26px; background: var(--white); border-radius: 0 4px 4px 0; } .sidebar-link.active i { color: var(--icone-menu); } .sidebar-link--danger { color: var(--text-2); } .sidebar-link--danger:hover, .sidebar-link--danger:hover i { color: var(--red); } /* ══ OS GRUPOS DA BARRA (12/09/26, refeitos em 27/09/26) ═════════════════════ Desde 27/09 são Conversas (o mesmo grupo que o app abre ao segurar o chat) e Extras (as telas de passatempo), ordem do dono: *"nosso menu está ficando muito grande e muito bagunçado"*. O Suporte virou o "Fale conosco" de Conversas. Aqui eles DOBRAM (`
`): fechado, cada grupo é UMA linha, e ele já nasce aberto quando a página aberta mora dentro dele. O rótulo segue a escrita da casa, sem `text-transform`: caixa alta gritaria. */ .sidebar-grupo { width: 100%; } .sidebar-grupo > summary { list-style: none; } .sidebar-grupo > summary::-webkit-details-marker { display: none; } /* A seta é enfeite do rótulo: sem o tamanho e o azul dos ícones de destino. */ .sidebar-link i.sidebar-grupo__seta { width: auto; margin-left: auto; font-size: 1.1rem; color: var(--text-3); transition: transform var(--duration) ease; } .sidebar-grupo[open] > summary .sidebar-grupo__seta { transform: rotate(180deg); } .sidebar-grupo__itens { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 6px 14px; } .sidebar-grupo__itens .sidebar-link { min-height: 40px; } /* O "FALE CONOSCO" DA GAVETA DO CELULAR (12/09/26, ordem do dono: *"um botão fale conosco e ao clicar abre o chat comigo @geniouk"*). Veste o desenho do "Novo Bip". Na barra do computador ele é um item de Conversas desde 27/09/26. */ .suporte-fale { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 40px; padding: 8px 16px; border-radius: var(--radius); background: #2A2A2A; color: #fff; font-family: var(--font); font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: filter var(--duration) var(--ease); } .suporte-fale:hover, .suporte-fale:focus-visible { color: #fff; filter: brightness(1.08); } .suporte-fale i { font-size: 1.2rem; } .rail-social__btn--email:hover, .rail-social__btn--email:focus-visible { color: var(--accent); } .sidebar-post-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; flex-shrink: 0; margin: 12px 0 0; padding: 10px 20px; border: none; border-radius: var(--radius); /* O AZUL DA MOBÍLIA TAMBÉM NOS BOTÕES (21/08/26, dono: "botão novo e botão de seguir ainda estão na cor azul diferente"). Só o FUNDO DOS BOTÕES muda, não o `--accent` inteiro: ele também pinta os LINKS (#hashtag, endereço de comunidade, o "Hoje" do aniversário), e o #4B7BB7 sobre o fundo #D4DDED mede 3,19:1 — reprovado para texto. Botão é fundo com letra branca; link é letra sobre a página. Mesmo tom, exigências diferentes. MEDIDO: branco sobre #4B7BB7 dá 4,36:1, um triz abaixo do 4,5 da régua. Se a letra do botão parecer fraca, o conserto é escurecer o tom em um passo (#43709F), não devolver o botão ao azul antigo. */ background: #2A2A2A; color: #fff; font-family: var(--font); font-size: 0.85rem; font-weight: 600; cursor: pointer; /* SEM BRILHO E SEM PULO (21/08/26, dono: *"parece mover quando sobreposto"* e *"se quiser o mesmo de Quem seguir está perfeito"*). O botão tinha um `box-shadow` largo e um `translateY(-1px)` no hover — era o pulo. E o hover ESCURECIA o azul, enquanto o "Seguir" do rail CLAREIA: mesma cor, efeito oposto, e era isso que fazia os dois parecerem azuis diferentes. Agora os três botões se comportam igual. */ transition: filter var(--duration) var(--ease); } .sidebar-post-btn i { display: none; font-size: 1.5rem; } .sidebar-post-btn:hover { filter: brightness(1.08); } /* A marca no botão: "bip" minúsculo e mais forte que o resto da frase. */ .sidebar-post-btn b { font-weight: 800; } /* Chip do usuário (rodapé da nav — estilo X) */ .sidebar-user-wrap { position: relative; width: 100%; } .sidebar-user { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: none; border-radius: var(--radius); background: transparent; color: var(--text); font-family: var(--font); text-align: left; cursor: pointer; transition: background var(--duration) ease; } .sidebar-user:hover, .sidebar-user[aria-expanded="true"] { background: var(--nav-hover); } .sidebar-user__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; color: var(--text-3); font-size: 1.25rem; } .sidebar-user__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .sidebar-user__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .sidebar-user__name { font-size: 0.92rem; font-weight: 700; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* O NOME INTEIRO NO MENU (16/10/26, ordem do dono: "fazer o nome ficar em 2 ou 3 linhas, mas sem corte"): quebra em linhas em vez de virar "Bip.fan - A Red…". Só no menu lateral; na barra de cima segue numa linha. */ #bip-sidebar .sidebar-user__name { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.25; } .sidebar-user__nick { font-size: 0.8rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user__more { font-size: 1.35rem; color: var(--text-2); flex-shrink: 0; } .sidebar-user-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 6px; z-index: 300; overflow: hidden; } .sidebar-user-menu[hidden] { display: none; } .sidebar-user-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: none; border-radius: var(--radius); background: transparent; color: var(--text); text-decoration: none; font-family: var(--font); font-size: 0.88rem; font-weight: 500; text-decoration: none; text-align: left; cursor: pointer; transition: background var(--duration) ease, color var(--duration) ease; } .sidebar-user-menu__item i { font-size: 1.15rem; color: var(--text-2); } .sidebar-user-menu__item:hover { background: var(--nav-hover); color: var(--white); } .sidebar-user-menu__item:hover i { color: var(--white); } .sidebar-user-menu__item--danger { color: var(--text-2); } .sidebar-user-menu__item--danger:hover { color: var(--red); } .sidebar-user-menu__item--danger:hover i { color: var(--red); } /* === MAIN CONTENT === */ .main-wrapper { flex: 1; margin-left: 0; width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: stretch; padding-top: 0; padding-bottom: 0; } .app-topbar { width: 100%; max-width: calc(var(--feed-col-width) + var(--layout-gap) + var(--rail-col-width)); /* Linha em TODA página (21/07/26): a comunidade usava o topbar base (só o sino) e ficava sem o separador que o resto do site tem. */ padding: 14px 0 12px; /* A LINHA DO TOPO É MOBÍLIA (21/08/26, dono: *"a linha de cima que era branca eu também acho que deveria mudar para a cor do botão"*). Era `--border` (#E5E5E5) — cinza claríssimo, escolhido quando o fundo da página era quase branco. Sobre o azul-Orkut ela virou um risco esbranquiçado que não separava nada. Vai para `--orkut-bar` e NÃO para `--btn-azul`: é a mesma cor, mas aqui o papel é mobília, não botão. Nome errado hoje é a linha que muda junto com os botões amanhã, sem ninguém pedir. */ border-bottom: 1px solid var(--orkut-bar); display: flex; justify-content: flex-end; align-items: center; position: sticky; top: 0; z-index: 200; background: var(--bg); min-height: 56px; } .app-topbar--home, .app-topbar--feed, .app-topbar--search { display: grid; grid-template-columns: minmax(0, var(--feed-col-width)) var(--rail-col-width); gap: var(--layout-gap); align-items: center; padding-bottom: 12px; /* O MESMO RISCO EM TODA PÁGINA (21/08/26, dono: *"a cor do risco está ok, mas deve ser assim para tudo e não só aqui"*). A linha do `.app-topbar` já era azul, mas TRÊS variantes redeclaravam `--border` logo abaixo — e, tendo mais especificidade, ganhavam. Home, feed, busca e a barra do visitante continuavam com o cinza. ARMADILHA CONHECIDA e vale escrever: trocar a cor na regra-base não adianta quando existe variante que repete a propriedade. Antes de dar a mudança por feita, `grep` na propriedade, não na classe. */ border-bottom: 1px solid var(--orkut-bar); max-width: 100%; justify-content: center; flex-shrink: 0; } .app-topbar--search { /* Usa o border-bottom do seletor superior */ } .app-topbar--search .search-bar-wrap--topbar { grid-column: 1; padding-inline: 0; /* Alinha perfeitamente com o feed */ margin-bottom: 0; width: 100%; } .app-topbar--search .search-bar { padding: 12px 22px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: none; transition: border-color var(--duration); } .app-topbar--search .search-bar:focus-within { border-color: var(--accent); } .app-topbar--home .app-topbar__slogan { grid-column: 1; padding-inline: 4px; } .app-topbar--home .notif-wrap, .app-topbar--feed .notif-wrap, .app-topbar--search .notif-wrap, .app-topbar--home .app-topbar__rail-spacer { grid-column: 2; justify-self: end; } .app-topbar__rail-spacer { width: 42px; height: 42px; flex-shrink: 0; pointer-events: none; visibility: hidden; } /* :not(--home):not(--feed) porque, desde o feed aberto (05/08/26), a barra do visitante existe em TODA página — e nas de grade (home/feed/BiP) ela precisa continuar em grade. Antes --guest só aparecia na busca, e o flex bastava. */ .app-topbar--guest:not(.app-topbar--home):not(.app-topbar--feed) { display: flex; justify-content: center; border-bottom: 1px solid var(--orkut-bar); padding-bottom: 14px; } /* Onde mora o sino de quem tem conta mora o sino de quem não tem (30/08/26): o MESMO desenho, sem contador. A pílula azul "Entrar" que ficava aqui saiu por ordem do dono — botão de texto no lugar de um ícone redondo era o que quebrava a barra. */ .app-topbar__guest-sino { grid-column: 2; justify-self: end; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-3); color: var(--text-1); font-size: 1.3rem; text-decoration: none; transition: background var(--duration); } .app-topbar__guest-sino:hover { background: var(--surface-2); } .app-topbar__guest-sino:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Onde o sino do visitante aparece, o vão do rail já foi ocupado por ele. */ .app-topbar--guest .app-topbar__guest-sino + .app-topbar__rail-spacer { display: none; } .app-topbar--search.app-topbar--guest { width: 100%; max-width: var(--feed-col-width); margin: 0 auto; padding-inline: 0; border-bottom: 1px solid var(--orkut-bar); padding-bottom: 12px; } .app-topbar--search.app-topbar--guest .search-bar-wrap--topbar { width: 100%; padding-bottom: 0; border-bottom: none; } .app-topbar__slogan { grid-column: 1; margin: 0; font-size: clamp(1rem, 2.2vw, 1.25rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; color: var(--white); /* CENTRALIZADO na coluna do feed (a mesma dos cartões) — pedido 21/07/26. */ text-align: center; justify-content: center; white-space: nowrap; display: flex; align-items: center; gap: 8px; } .app-topbar__page-title { grid-column: 1; margin: 0; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; color: var(--white); display: flex; align-items: center; gap: 8px; padding-inline: 4px; } /* A CONTAGEM AO LADO DO TÍTULO (18/09/26) — metadado, não o nome da página: mesma cor do título (o topo é sempre escuro, claro ou não), só mais leve e menor, para "Comunidades" continuar sendo a palavra forte da linha. */ .app-topbar__page-title-meta { font-weight: 500; font-size: 0.85em; opacity: 0.7; white-space: nowrap; } .app-topbar__lead { grid-column: 1; display: flex; align-items: center; gap: 6px; min-width: 0; margin-right: auto; } .app-topbar__lead .app-topbar__page-title { grid-column: auto; min-width: 0; padding-inline: 0; } .app-topbar__back { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: var(--white); font-size: 1.5rem; line-height: 1; transition: background var(--duration), color var(--duration); } .app-topbar__back:hover { background: color-mix(in srgb, var(--white) 10%, transparent); } .app-topbar__back:active { background: color-mix(in srgb, var(--white) 16%, transparent); } .app-topbar__back i { display: block; } .app-topbar--guest .app-topbar__slogan { grid-column: unset; } .app-topbar__slogan-accent { color: var(--accent); } .app-topbar__spacer { flex: 1; } .notif-wrap { position: relative; z-index: 1200; } .notif-bell { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; transition: border-color var(--duration), background var(--duration); } .notif-bell:hover { border-color: var(--border-hover); background: var(--surface-2); } .notif-bell__badge { position: absolute; top: -1px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius); background: var(--red); color: #fff; font-size: 0.65rem; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; } .notif-dropdown { position: absolute; top: calc(100% + 10px); right: 0; /* 460 desde 22/08/26 (era 400, ordem do dono: *"vamos aumentar um pouco mais o tamanho da caixa de notificações"*). As notificações ganharam texto — "Fulano quer responder seu caderno de enquetes" com a prévia embaixo — e a 400 quase toda linha quebrava em três. O `calc` continua mandando na tela estreita: a caixa nunca encosta na borda. */ width: min(460px, calc(100vw - 120px)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; z-index: 1201; isolation: isolate; } .notif-dropdown__header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 0.95rem; } .notif-dropdown__header-actions { display: flex; align-items: center; gap: 8px; } .notif-filter-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; transition: border-color var(--duration), color var(--duration), background var(--duration); } .notif-filter-btn:hover, .notif-filter-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .notif-filter-btn--active { border-color: var(--accent); color: var(--accent); } .notif-filter-panel { padding: 12px 14px 10px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .notif-filter-panel__title { margin: 0 0 8px; font-size: 0.78rem; font-weight: 600; color: var(--text-2); } .notif-filter-panel__hint { margin: 8px 0 0; font-size: 0.72rem; color: var(--text-3); line-height: 1.4; } .notif-filter-panel__chips { display: flex; flex-wrap: wrap; gap: 6px; } .notif-filter-chip { border: 1px solid var(--border); background: var(--surface); color: var(--text-2); border-radius: var(--radius); padding: 5px 10px; font-size: 0.72rem; font-weight: 600; cursor: pointer; transition: border-color var(--duration), background var(--duration), color var(--duration), opacity var(--duration); } .notif-filter-chip:hover { border-color: var(--border-hover); } .notif-filter-chip.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .notif-filter-chip:not(.is-on) { opacity: 0.55; } .notif-mark-read-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; transition: border-color var(--duration), color var(--duration), background var(--duration); } .notif-mark-read-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .notif-mark-read-btn:disabled { opacity: 0.45; cursor: default; } .notif-dropdown__body { /* ALTURA EM VH, e não os 360px fixos (22/08/26): 360 mostrava quatro avisos numa tela de notebook e quatro numa de 27 polegadas — a caixa ignorava o espaço que existia. O teto de 620 existe para a lista não virar uma coluna do topo ao rodapé em telas muito altas. */ max-height: min(620px, 60vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border) transparent; background: var(--surface); } .notif-dropdown__body::-webkit-scrollbar { width: 6px; } .notif-dropdown__body::-webkit-scrollbar-track { background: transparent; } .notif-dropdown__body::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius); } .notif-dropdown__body::-webkit-scrollbar-thumb:hover { background: var(--text-3); } .notif-dropdown__footer { padding: 12px 16px; border-top: 1px solid var(--border); text-align: center; } .notif-footer-link { display: block; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; font-size: 0.85rem; font-weight: 600; transition: background var(--duration); } .notif-footer-link:hover { background: var(--surface-2); } .notif-empty { padding: 32px 16px; text-align: center; color: var(--text-3); font-size: 0.9rem; } .notif-item { display: flex; gap: 12px; padding: 12px 16px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--border); /* box-shadow junto: a barrinha azul do "não lida" some suave ao clicar. */ transition: background var(--duration), box-shadow var(--duration); background: var(--surface); } /* ESTOURO da notificação (08/08/26): clicou = bolha que incha e some; depois a linha recolhe (height é fixado pelo JS antes) e a lista fecha o vão. */ .notif-item--pop { animation: notifPop .2s ease forwards; pointer-events: none; overflow: hidden; } .notif-item--gone { transition: height .17s ease, padding .17s ease, border-color .17s ease; padding-top: 0; padding-bottom: 0; border-color: transparent; } @keyframes notifPop { 0% { transform: scale(1); opacity: 1; } 45% { transform: scale(1.06); opacity: .9; } 100% { transform: scale(.82); opacity: 0; } } .notif-item:hover { background: var(--surface-2); } .notif-item--unread { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); } .notif-item__icon { position: relative; width: 40px; height: 40px; margin-left: 3px; border-radius: 50%; background: var(--bg-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.1rem; overflow: hidden; isolation: isolate; } .notif-item__avatar { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; } .notif-item__vote-badge, .notif-item__type-badge { position: absolute; right: -1px; bottom: -1px; min-width: 17px; height: 17px; padding: 0 3px; border-radius: 6px; background: var(--accent); color: #1a2030; font-size: 0.58rem; font-weight: 800; line-height: 13px; text-align: center; border: 2px solid var(--surface); box-sizing: border-box; pointer-events: none; } .notif-item__type-badge { display: flex; align-items: center; justify-content: center; font-size: 0.65rem; } .notif-item__stars-fallback { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: #e8c547; font-size: 0.62rem; font-weight: 800; line-height: 1; } .notif-item__stars-fallback i { font-size: 1.05rem; } .notif-item__emoji-single { font-size: 1.05rem; line-height: 1; } .notif-item__body { flex: 1; min-width: 0; } .notif-item__msg { font-size: 0.85rem; color: var(--white); margin: 0 0 4px; line-height: 1.35; } .notif-item__preview { font-size: 0.78rem; /* --text-3 no tema escuro (#555558) some no fundo do dropdown — --text-2 lê bem nos dois temas. */ color: var(--text-2); margin: 0 0 4px; line-height: 1.3; } .notif-item__time { font-size: 0.72rem; color: var(--text-3); } .notif-item__actions { display: flex; gap: 8px; margin-top: 8px; } .notif-item__actions .btn { padding: 4px 10px; font-size: 0.72rem; } /* === Toasts de notificação (canto superior direito) === */ .bip-notify-toast-stack { position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); right: calc(env(safe-area-inset-right, 0px) + 16px); z-index: 10050; display: flex; flex-direction: column-reverse; gap: 12px; width: min(360px, calc(100vw - 32px)); pointer-events: none; } /* No mobile, fica acima da barra de navegação inferior (.mobile-tabbar). */ @media (max-width: 768px) { .bip-notify-toast-stack { bottom: calc(env(safe-area-inset-bottom, 0px) + 72px); left: 16px; right: 16px; width: auto; } } .bip-notify-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04) inset; color: var(--text); text-decoration: none; cursor: pointer; opacity: 0; /* Sobe ao aparecer, desce ao guardar (estilo "bandeja" do MSN). Começa 28px abaixo. */ transform: translateY(28px) scale(0.98); transition: opacity 0.38s var(--ease), transform 0.5s cubic-bezier(0.22, 1.15, 0.36, 1); } .bip-notify-toast.is-visible { opacity: 1; transform: translateY(0) scale(1); } .bip-notify-toast.is-leaving { opacity: 0; /* Desce de volta, "guardando". */ transform: translateY(28px) scale(0.98); transition: opacity 0.32s var(--ease), transform 0.4s cubic-bezier(0.4, 0, 1, 1); } .bip-notify-toast__avatar { width: 42px; height: 42px; border-radius: var(--radius); object-fit: cover; flex-shrink: 0; background: var(--surface-2); border: 1px solid var(--border); } .bip-notify-toast__avatar--fallback { display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--accent); } .bip-notify-toast__body { flex: 1; min-width: 0; } .bip-notify-toast__title { font-size: 0.82rem; font-weight: 700; color: var(--white); margin: 0 0 2px; line-height: 1.3; } .bip-notify-toast__msg { font-size: 0.84rem; color: var(--text-2); margin: 0; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .bip-notify-toast__close { flex-shrink: 0; width: 28px; height: 28px; border: none; border-radius: 8px; background: transparent; color: var(--text-3); cursor: pointer; display: flex; align-items: center; justify-content: center; margin: -4px -6px 0 0; transition: background var(--duration) var(--ease), color var(--duration) var(--ease); } .bip-notify-toast__close:hover { background: var(--surface-2); color: var(--white); } .bip-notify-toast--message { border-left: 3px solid #60a5fa; } .bip-notify-toast--follow { border-left: 3px solid #34d399; } .bip-notify-toast--follow_request { border-left: 3px solid #fbbf24; } .bip-notify-toast--profile_visit { border-left: 3px solid #a78bfa; } .bip-notify-toast--profile_hi { border-left: 3px solid #fbbf24; } .bip-notify-toast--community_invite { border-left: 3px solid #f472b6; } .bip-notify-toast--unfollow { border-left: 3px solid #f87171; } .bip-notify-toast--block { border-left: 3px solid #ef4444; } /* ===== Popup nostálgico estilo MSN / Windows Live Messenger (todos os toasts) ===== */ .bip-notify-toast--msn { display: block; width: 300px; max-width: 92vw; padding: 0; color: #14324f; background: linear-gradient(180deg, #fbfdff 0%, #eaf3fb 44%, #cfe2f4 100%); border: 1px solid #9db8d4; border-radius: 9px; box-shadow: 0 12px 34px rgba(10, 30, 60, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.9); overflow: hidden; font-family: Tahoma, "Segoe UI", system-ui, sans-serif; } .bip-msn-toast__head { display: flex; align-items: center; gap: 7px; padding: 6px 8px 6px 10px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); border-bottom: 1px solid rgba(120, 150, 185, 0.35); } .bip-msn-toast__brand { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; font-size: 0.85rem; font-weight: 700; color: #2b5a86; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); } .bip-msn-toast__logo { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 1.05rem; color: #2f6fb0; } .bip-msn-toast__close { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; color: #2b5a86; cursor: pointer; border: 1px solid #9db8d4; border-radius: 4px; background: linear-gradient(180deg, #ffffff, #dbe8f5); } .bip-msn-toast__close:hover { background: linear-gradient(180deg, #ffffff, #c4d9ee); } .bip-msn-toast__main { display: flex; align-items: center; gap: 11px; padding: 11px 12px 6px; cursor: pointer; } .bip-msn-toast__frame { flex-shrink: 0; width: 52px; height: 52px; padding: 3px; border-radius: 4px; background: #ffffff; border: 1px solid #b7cbe0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85), 0 1px 2px rgba(0, 0, 0, 0.14); display: flex; align-items: center; justify-content: center; } .bip-msn-toast__avatar { width: 100%; height: 100%; border-radius: 2px; object-fit: cover; } .bip-msn-toast__avatar--fallback { color: #7fa3c6; font-size: 1.7rem; } .bip-msn-toast__text { flex: 1; min-width: 0; } .bip-msn-toast__name { margin: 0 0 2px; font-size: 0.92rem; font-weight: 700; color: #12324f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bip-msn-toast__status { margin: 0; font-size: 0.86rem; color: #2f4a63; } .bip-msn-toast__foot { display: flex; justify-content: flex-end; padding: 2px 12px 9px; } .bip-msn-toast__options { font-size: 0.8rem; color: #1f6fc4; text-decoration: none; cursor: pointer; } .bip-msn-toast__options:hover { text-decoration: underline; } /* === Quem visitou (perfil) === */ .profile-visitors { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 24px; } .profile-visitors__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .profile-visitors__head h2 { font-size: 1rem; font-weight: 700; color: var(--white); display: flex; align-items: center; gap: 8px; margin: 0; } .profile-visitors__head h2 i { color: var(--accent); } .profile-visitors__hint { font-size: 0.82rem; color: var(--text-3); margin: 0 0 16px; } .profile-visitors__empty { font-size: 0.88rem; color: var(--text-3); text-align: center; padding: 16px 0; } .profile-visitors__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .profile-visitors__list--inline { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; } .profile-visitors__list--inline > li { flex: 0 0 auto; margin: 0; } .profile-visitors__mini { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; background: var(--bg-2); border: 1px solid var(--border); } .profile-visitors__mini--ph { display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); font-size: 1.15rem; } .profile-visitors__item { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 10px 8px; border-radius: var(--radius); transition: background var(--duration); } .profile-visitors__item:hover { background: var(--surface-2); } .profile-visitors__avatar { width: 40px; height: 40px; border-radius: var(--radius); background: var(--bg-2); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--text-2); text-decoration: none; flex-shrink: 0; } .profile-visitors__avatar img { width: 100%; height: 100%; object-fit: cover; } .profile-visitors__info { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .profile-visitors__name { color: var(--white); font-weight: 600; font-size: 0.9rem; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-visitors__name:hover { color: var(--accent); } .profile-visitors__id { font-size: 0.75rem; color: var(--text-3); font-variant-numeric: tabular-nums; } .profile-visitors__when { font-size: 0.72rem; color: var(--text-3); white-space: nowrap; } .main-content { width: 100%; max-width: calc(var(--feed-col-width) + var(--layout-gap) + var(--rail-col-width)); padding: 0; } #feed-container { padding-top: 8px; } /* Cartões: respiro do topo é do container — o primeiro cartão não pode nascer colado na linha/abas de cima (pedido do dono, 21/07/26). Regra ÚNICA para todas as abas/listas: BiPs, Respostas e Repost idênticos. */ #BiPs-list, #saved-BiPs-list, #community-bips-list, #profile-tab-content, #activity-content { padding-top: 14px; } .container { width: 100%; max-width: none; padding: 0; } .container-narrow { max-width: var(--content-col-width); margin-left: auto; margin-right: auto; } /** Coluna principal — mesma largura do feed em todas as telas */ .content-col { width: 100%; max-width: var(--content-col-width); margin-inline: auto; } /* ══ MENU ENCOLHIDO ════════════════════════════════════════════════════ Um só desenho, DUAS portas (29/08/26): 1. `html[data-nav="mini"]` — a pessoa apertou a chave e a escolha ficou gravada no navegador; 2. a régua de 1280px logo abaixo — a janela encolheu e não há escolha. As regras são as mesmas nos dois casos, por isso os seletores andam em par em cada bloco. Mexer num sem mexer no outro é o defeito clássico da casa: um lado do par muda, o outro fica. */ :root[data-nav="mini"] { --nav-col-width: 88px; } :root[data-nav="mini"] .sidebar-logo__wordmark, :root[data-nav="mini"] .sidebar-link__label, :root[data-nav="mini"] .sidebar-link__tag { display: none; } /* A TROCA DA MARCA: a peça deitada sai, a quadrada entra. */ :root[data-nav="mini"] .sidebar-logo__marca { display: none; } :root[data-nav="mini"] .sidebar-logo__icone { display: block; } :root[data-nav="mini"] .sidebar { padding: 8px 4px 24px; align-items: center; } :root[data-nav="mini"] .sidebar-head { flex-direction: column; gap: 2px; width: 100%; } :root[data-nav="mini"] .sidebar-logo { justify-content: center; padding: 12px 0; } :root[data-nav="mini"] .sidebar-collapse { margin-left: 0; } /* O ÍCONE DA BARRA RECOLHIDA NÃO ENCOLHEU (12/09/26). O menu aberto diminuiu porque lá o ícone acompanha um rótulo; aqui ele é a ÚNICA coisa na coluna, e um alvo de 21px numa faixa de 52 seria mais difícil de acertar do que o de antes — o "melhorar o menu" não pode piorar o modo em que ele é só ícone. */ :root[data-nav="mini"] .sidebar-link i { font-size: 1.72rem; width: 32px; } :root[data-nav="mini"] .sidebar-link { justify-content: center; width: 52px; padding: 0; margin: 0 auto; } :root[data-nav="mini"] .sidebar-post-btn { display: flex; width: 52px; height: 52px; margin: 12px auto; padding: 0; border-radius: 50%; } :root[data-nav="mini"] .sidebar-post-btn span { display: none; } :root[data-nav="mini"] .sidebar-post-btn i { display: block; } /* OS GRUPOS NA BARRA ESTREITA (12/09/26): a seta some com o rótulo, e os itens perdem o recuo e se alinham ao centro, só o ícone, como o resto da barra. */ :root[data-nav="mini"] .sidebar-grupo__seta { display: none; } :root[data-nav="mini"] .sidebar-grupo__itens { align-items: center; padding-left: 0; } :root[data-nav="mini"] .sidebar-user__meta, :root[data-nav="mini"] .sidebar-user__more { display: none; } :root[data-nav="mini"] .sidebar-user { justify-content: center; width: 52px; margin: 0 auto; padding: 8px; } :root[data-nav="mini"] .sidebar-user-menu { left: calc(100% + 8px); right: auto; bottom: 0; min-width: 200px; } :root[data-nav="mini"] .sidebar-e81-stamp { display: none; } @media (max-width: 1280px) { :root { --nav-col-width: 88px; --feed-col-width: min(620px, 100%); --rail-col-width: 300px; --layout-gap: 28px; --feed-gutter-x: 14px; --shell-pad-x: 24px; } .sidebar-logo__wordmark, .sidebar-link__label, .sidebar-link__tag { display: none; } /* MESMA TROCA do bloco `[data-nav="mini"]` acima — aqui ela é FORÇADA: nesta largura a peça deitada não cabe, ela era CORTADA no meio do "256bip". Era este o "quebrado" que o dono via ao redimensionar. */ .sidebar-logo__marca { display: none; } .sidebar-logo__icone { display: block; } /* A chave some: aqui não existe escolha para oferecer. A preferência da pessoa continua guardada e volta a valer quando a janela crescer. */ .sidebar-collapse { display: none; } .sidebar { padding: 8px 4px 24px; align-items: center; } .sidebar-head { width: 100%; } .sidebar-logo { justify-content: center; padding: 12px 0; } .sidebar-link { justify-content: center; width: 52px; padding: 0; margin: 0 auto; } .sidebar-post-btn { display: flex; width: 52px; height: 52px; margin: 12px auto; padding: 0; border-radius: 50%; } .sidebar-post-btn span { display: none; } .sidebar-post-btn i { display: block; } /* Par do bloco `[data-nav="mini"]` dos grupos (12/09/26). */ .sidebar-grupo__seta { display: none; } .sidebar-grupo__itens { align-items: center; padding-left: 0; } .sidebar-user__meta, .sidebar-user__more { display: none; } .sidebar-user { justify-content: center; width: 52px; margin: 0 auto; padding: 8px; } .sidebar-user-menu { left: calc(100% + 8px); right: auto; bottom: 0; min-width: 200px; } .sidebar-e81-stamp { display: none; } } @media (max-width: 1100px) { .app-topbar--home, .app-topbar--feed, .app-topbar--search { grid-template-columns: 1fr auto; } .app-topbar--home .app-topbar__slogan, .app-topbar--search .search-bar-wrap--topbar { grid-column: 1; } .app-topbar--home .notif-wrap, .app-topbar--feed .notif-wrap, .app-topbar--search .notif-wrap, .app-topbar--home .app-topbar__rail-spacer { grid-column: 2; } .feed-layout { grid-template-columns: minmax(0, 1fr); max-width: var(--feed-col-width); margin: 0 auto; } .feed-main { border-right: none; max-width: 100%; } .feed-rail-anchor { display: none; } .feed-rail { display: none; } .feed-rail-anchor:has(.rail-actions) { display: block; width: 0; min-width: 0; height: 0; overflow: visible; } .feed-rail:has(.rail-actions) { display: flex; position: fixed; right: 16px; bottom: 16px; top: auto; width: min(220px, calc(100vw - 32px)); max-height: none; overflow: visible; padding: 0; gap: 8px; z-index: 150; background: transparent; } .feed-rail:has(.rail-actions) > *:not(.rail-actions) { display: none !important; } .feed-rail:has(.rail-actions) .rail-actions { position: static; margin-top: 0; padding-top: 0; background: transparent; } .main-content, .app-topbar { max-width: 100%; width: 100%; margin: 0; } } @media (max-width: 768px) { :root { --container-pad-x: 16px; --nav-col-width: 72px; --layout-gap: 16px; --feed-gutter-x: 14px; --shell-pad-x: 12px; } .app-shell { padding: 0 var(--shell-pad-x); gap: 12px; } .main-content { max-width: 100%; } .feed-main { border-left: none; border-right: none; padding-inline: var(--feed-gutter-x); min-height: auto; } } /* === Feed + sidebar direita — 2ª e 3ª colunas do shell === */ .feed-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--layout-gap); align-items: stretch; width: 100%; flex: 1; } @media (min-width: 1101px) { .feed-layout--with-rail, .feed-layout:has(> .feed-rail-anchor) { /* Mesma grelha do topbar: feed | rail */ grid-template-columns: minmax(0, var(--feed-col-width)) var(--rail-col-width); justify-content: center; } .feed-layout--with-rail > .feed-main, .feed-layout:has(> .feed-rail-anchor) > .feed-main { grid-column: 1; } .feed-layout--with-rail > .feed-rail-anchor, .feed-layout:has(> .feed-rail-anchor) > .feed-rail-anchor { grid-column: 2; } } .feed-layout--solo { grid-template-columns: minmax(0, var(--feed-col-width)); max-width: var(--feed-col-width); } @media (max-width: 1100px) { body:has(.app-topbar) .feed-main { min-height: calc(100dvh - var(--app-topbar-height, 72px) - 24px); } .feed-main { min-height: calc(100vh - 24px); } } .feed-main { min-width: 0; width: 100%; max-width: var(--feed-col-width); margin-inline: 0; min-height: 0; padding-inline: var(--feed-gutter-x); border-left: none; border-right: none; box-sizing: border-box; position: relative; } /* Teste radical (2026-07-24): sem linhas divisórias verticais. No feed inicial, o card de convite nasce na MESMA altura da busca do rail (régua única). */ .feed-main:has(> .feed-composer) { padding-top: var(--rail-stack-gap); } /* ══ QUANDO OS STATUS VÊM PRIMEIRO, A COLUNA NÃO PAGA RESPIRO (29/08/26) ═════ A régua acima nasceu quando o convite de post era o PRIMEIRO item da coluna: os 16px o punham na mesma linha da busca do rail da direita. Depois a fileira dos status passou na frente (23/08/26) e ninguém refez a conta — os 16px deixaram de alinhar coisa nenhuma e viraram só empurrão para baixo, somados à reserva de 46px que a própria fileira já carrega para o balão da nota. Com o trilho na frente, o respiro de cima é o dele. O convite continua ganhando os 16px em toda página onde ele é o primeiro (perfil, comunidade, salvos). */ .feed-main:has(> .feed-topo-trilho) { /* 8px e não 0: a reserva do balão é medida ao milímetro para o caso de 3 linhas, e com zero aqui esse balão nasceria a 4px do topo da tela (ou da barra de cima, no celular) — encostado. 8px é o fio de ar que impede o encosto e ainda devolve 16 dos 24px que sobravam. */ padding-top: 8px; } /* Com o convite no topo, zera o respiro de topo da lista — senão o vão até o 1º post fica MAIOR que o vão entre cards. Espaçamento uniforme (12px). */ .feed-main:has(> .feed-composer) > #feed-container { padding-top: 0; } .feed-main:has(> .feed-composer) #BiPs-list { padding-top: 0; } /* Coluna feed — páginas internas (agendados, etc.). O respiro do topo é o `--topo-respiro` de toda a casa (29/08/26): 22px no computador, 8 no celular. Esta era a QUINTA cópia do 22 escrita à mão. */ .feed-page-body { padding-top: var(--topo-respiro); padding-bottom: 32px; } .feed-surface-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-sizing: border-box; } .feed-new-pill-host { position: sticky; top: 12px; z-index: 40; display: flex; justify-content: center; pointer-events: none; padding-top: 4px; } .feed-new-pill-host:not([hidden]) { margin-bottom: -44px; } .feed-new-pill { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 12px; border: none; border-radius: var(--radius); background: var(--btn-azul); color: #fff; font-size: 0.82rem; font-weight: 700; cursor: pointer; /* Mesmo azul cravado do tema ESCURO que estava no hover — o halo parado tambem era dele. Agora e o brilho do proprio botao. */ box-shadow: 0 4px 20px var(--orkut-bar-glow); transition: filter 0.15s var(--ease); } /* A sombra era `rgba(79,142,247,.55)` — o azul do tema ESCURO, cravado, aceso embaixo de um botao que no claro e outro tom. Sai junto com o pulo. */ .feed-new-pill:hover { filter: brightness(1.08); } .feed-new-pill__arrow { font-size: 1.15rem; line-height: 1; } .feed-new-pill__avatars { display: inline-flex; align-items: center; flex-direction: row-reverse; } .feed-new-pill__avatar { width: 24px; height: 24px; border-radius: var(--radius); overflow: hidden; border: 2px solid var(--accent); margin-left: -8px; background: rgba(0, 0, 0, 0.25); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .feed-new-pill__avatars .feed-new-pill__avatar:last-child { margin-left: 0; } .feed-new-pill__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .feed-new-pill__avatar--ph { color: rgba(255, 255, 255, 0.85); font-size: 0.9rem; } .feed-new-pill__text { letter-spacing: 0.01em; text-transform: lowercase; } .feed-rail-anchor { width: var(--rail-col-width); min-width: var(--rail-col-width); align-self: start; /* Acima do feed: a janela do sino vaza para a esquerda, por cima da coluna. */ position: relative; z-index: 80; } .feed-rail { position: sticky; top: var(--feed-rail-offset-y); align-self: start; display: flex; flex-direction: column; gap: var(--rail-stack-gap); padding-top: var(--rail-stack-gap); overflow: visible; padding-left: 8px; padding-right: 4px; box-sizing: border-box; } .feed-rail__scroll { display: flex; flex-direction: column; gap: var(--rail-stack-gap); min-width: 0; } @media (min-width: 1101px) { /* Shell travado no viewport — laterais fixas, só o feed rola (estilo X / inbox) */ html:has(body.bip-layout-with-rail), html:has(body.bip-layout-with-rail) { height: 100%; overflow: hidden; } body.bip-layout-with-rail, body.bip-layout-with-rail { height: 100dvh; max-height: 100dvh; overflow: hidden; } body.bip-layout-with-rail .app-shell, body.bip-layout-with-rail .app-shell { height: 100dvh; max-height: 100dvh; min-height: 0; overflow: hidden; align-items: stretch; } body.bip-layout-with-rail .sidebar, body.bip-layout-with-rail .sidebar { height: 100%; max-height: 100dvh; align-self: stretch; position: sticky; top: 0; } body.bip-layout-with-rail .main-wrapper, body.bip-layout-with-rail .main-wrapper { height: 100%; max-height: 100dvh; min-height: 0; overflow: hidden; } body.bip-layout-with-rail .app-topbar, body.bip-layout-with-rail .app-topbar { flex-shrink: 0; } body.bip-layout-with-rail .main-content, body.bip-layout-with-rail .main-content { flex: 1 1 0; min-height: 0; overflow: visible; display: flex; flex-direction: column; } body.bip-layout-with-rail .feed-layout--with-rail, body.bip-layout-with-rail .feed-layout:has(> .feed-rail-anchor) { flex: 1 1 0; min-height: 0; height: 100%; overflow: hidden; align-items: stretch; grid-template-rows: minmax(0, 1fr); --feed-rail-offset-y: var(--rail-stack-gap); } body.bip-layout-with-rail .feed-main { min-height: 0; height: 100%; max-height: 100%; overflow-y: auto; overflow-x: hidden; /* RESPIRO NO FIM DA COLUNA (01/10/26, dono: *"vai até o final, trava e não tem respiro"*). Quem rola é esta coluna, não a página: sem este pé, o último cartão da lista encosta na borda de baixo da janela e os ícones sociais dele ficam rentes ao vidro. Dois respiros da casa. */ padding-bottom: calc(var(--rail-stack-gap, 16px) * 2); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; z-index: 0; } body.bip-layout-with-rail .feed-main::-webkit-scrollbar { display: none; } body.bip-layout-with-rail .feed-rail-anchor, body.bip-layout-with-rail .feed-rail-anchor { height: 0; min-height: 0; align-self: start; overflow: visible; z-index: 80; } body.bip-layout-with-rail .feed-rail, body.bip-layout-with-rail .feed-rail { position: sticky; top: var(--rail-stack-gap); width: var(--rail-col-width); max-height: calc(100dvh - var(--app-topbar-height, 72px) - var(--rail-stack-gap)); overflow: visible; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; } body.bip-layout-with-rail .feed-rail__scroll { flex: 1 1 auto; min-height: 0; overflow-x: clip; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; display: flex; flex-direction: column; gap: var(--rail-stack-gap); } body.bip-layout-with-rail .feed-rail__scroll::-webkit-scrollbar, body.bip-layout-with-rail .feed-rail::-webkit-scrollbar { display: none; } body.bip-layout-with-rail:not(:has(.app-topbar)) .feed-rail, body.bip-layout-with-rail:not(:has(.app-topbar)) .feed-rail { max-height: calc(100dvh - var(--rail-stack-gap)); } body:has(.app-topbar--feed) .feed-main.inbox-page { min-height: 0; height: 100%; max-height: 100%; display: flex; flex-direction: column; /* A régua única do topo vale aqui também (21/07/26) — e agora ela é `--topo-respiro` (29/08/26), não um 22 cravado. O box-sizing border-box mantém a conta de altura do chat intacta. */ padding-top: var(--topo-respiro); overflow: hidden; } } .feed-rail__foot { flex-shrink: 0; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 4px 0 8px; margin-top: 0; } .feed-rail__foot-line { display: block; width: 100%; height: 1px; background: linear-gradient( 90deg, transparent, var(--border) 20%, var(--border) 80%, transparent ); } .e81-stamp { display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 0; padding: 2px 4px 4px; font-size: 0.68rem; line-height: 1.4; color: var(--text-3); text-align: center; } .e81-stamp__line { display: inline-flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 5px; max-width: 100%; } .e81-stamp__line--sub { gap: 4px; } .e81-stamp a { color: var(--text-2); font-weight: 600; text-decoration: none; transition: color var(--duration); white-space: nowrap; } .e81-stamp a:hover { color: var(--text-1); text-decoration: underline; } .e81-stamp .country-flag { display: inline-flex; flex-shrink: 0; margin: 0; } .e81-stamp .country-flag__img { width: 16px; height: auto; display: block; } .feed-rail__foot .rail-actions { margin-top: 0; position: static; padding: 0; background: none; } .rail-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; padding: 4px 2px 2px; font-size: 0.72rem; line-height: 1.35; text-align: center; } .rail-legal a { color: var(--text-2); text-decoration: none; font-weight: 600; } .rail-legal a:hover, .rail-legal a:focus-visible { color: var(--accent); text-decoration: underline; } .rail-legal span { color: var(--text-3); user-select: none; } /* Redes sociais — rodapé da coluna direita */ .rail-social { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 4px 6px; margin-top: 2px; } .rail-social__label { margin: 0; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); line-height: 1.2; } .rail-social__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; } .rail-social__btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); text-decoration: none; transition: color var(--duration) ease, background var(--duration) ease, border-color var(--duration) ease, transform var(--duration) ease, box-shadow var(--duration) ease; } .rail-social__btn:hover, .rail-social__btn:focus-visible { color: var(--white); background: var(--surface-2); border-color: var(--border-hover); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); } .rail-social__btn:focus-visible { outline: 2px solid var(--accent-glow); outline-offset: 2px; } .rail-social__btn--pending { opacity: 0.62; cursor: default; pointer-events: none; } .rail-social__icon { width: 18px; height: 18px; display: block; flex-shrink: 0; } .rail-social__logo { width: 22px; height: 22px; display: block; flex-shrink: 0; object-fit: contain; } .rail-social__btn--facebook:hover, .rail-social__btn--facebook:focus-visible { color: #6ea3ff; } .rail-social__btn--instagram:hover, .rail-social__btn--instagram:focus-visible { color: #f08bb0; } .rail-social__btn--whatsapp:hover, .rail-social__btn--whatsapp:focus-visible { color: #5fd68a; } .rail-social__btn--youtube:hover, .rail-social__btn--youtube:focus-visible { color: #ff8a8a; } .rail-social__accent { display: block; width: 72px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), rgba(79, 142, 247, 0.28)); opacity: 0.9; } /* Botões fixos — relatar (coluna direita) */ .rail-actions { flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; padding: 4px 0 8px; margin-top: 0; padding-top: 8px; } .rail-action-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font-family: var(--font); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: background var(--duration), border-color var(--duration), color var(--duration); text-align: center; text-decoration: none; box-sizing: border-box; } .rail-action-btn i { font-size: 1.1rem; color: var(--text-2); flex-shrink: 0; } .rail-action-btn:hover { background: var(--surface-2); border-color: var(--border-hover); color: var(--white); } .rail-action-btn:hover i { color: var(--white); } .rail-action-btn--warn:hover { border-color: rgba(239, 68, 68, 0.35); color: var(--red); } .rail-action-btn--warn:hover i { color: var(--red); } body:has(.feed-rail .rail-actions) .rail-actions-fallback { display: none !important; } .rail-actions-fallback { display: none; flex-direction: column; gap: 8px; position: fixed; right: 16px; bottom: 16px; width: min(220px, calc(100vw - 32px)); z-index: 150; } body:not(:has(.feed-rail)) .rail-actions-fallback { display: flex; } .rail-card { /* Teste "sem caixa" (24/07/26) revertido no mesmo dia: sem o card o rail ficava solto/estranho. Cards de volta — brancos, como os BiPs. */ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; /* A TARJA AZUL SANGRA até a borda (margens negativas em .rail-card__title): sem `overflow: hidden` ela passa por cima do canto arredondado e o cartão ganha dois cantos quadrados no topo. */ overflow: hidden; /* NÃO ENCOLHER (21/08/26) — e isto é um defeito ANTIGO que só apareceu com a linha de cima. Os cartões são filhos flex de `.feed-rail__scroll`, que é uma coluna. Com o `flex-shrink: 1` que o flex dá de graça, sempre que a pilha passava da altura da tela cada cartão ESPREMIA um pouco em vez de a coluna rolar. Com `overflow: visible` isso não se via: o conteúdo vazava para fora e continuava desenhado. Assim que o `overflow: hidden` entrou, o mesmo aperto virou CORTE — meia foto, meia linha, o conteúdo comido que o dono viu no print. Quem tem de rolar é a coluna (`.feed-rail__scroll` já é `overflow-y: auto`), nunca o cartão que encolhe. */ flex-shrink: 0; } /* A TARJA AZUL NO TOPO DA CAIXA (21/08/26) — é ELA que carrega a memória do Orkut. Lá, toda caixinha ("meus amigos", "próximos aniversários", "recados") tinha sua barra azul no topo; era o móvel da página inteira. Ela SANGRA até as bordas do cartão (as margens negativas): tarja com respiro dos lados vira etiqueta, e etiqueta não é a lembrança de ninguém. O `--radius-lg` de cima acompanha o cartão, e o `overflow` dele apara o resto. */ .rail-card__title { font-size: 0.85rem; font-weight: 700; color: var(--orkut-tinta); background: var(--orkut-tarja); /* O fio embaixo faz o trabalho que a cor forte fazia: separa a tarja do conteúdo. Um traço fino resolve o que um bloco saturado resolvia gritando. */ border-bottom: 1px solid var(--border); margin: -18px -20px 12px; padding: 9px 20px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .rail-card__title i { color: var(--orkut-tinta); font-size: 1rem; } .rail-card__fire { flex: 0 0 auto; width: 17px; height: 17px; } .rail-card__hint { font-size: 0.7rem; font-weight: 400; color: var(--text-3); } .rail-card__link { margin-left: auto; font-size: 0.72rem; font-weight: 600; color: var(--accent); text-decoration: none; } .rail-card__link:hover { text-decoration: underline; } .rail-card__toggle { margin-left: auto; background: none; border: 0; padding: 0; font: inherit; font-size: 0.72rem; font-weight: 600; color: var(--accent); cursor: pointer; } /* REGRA DA TARJA: quem vive dentro dela tira a cor DELA, nunca da paleta de fora. O "Ver todas" é a ÚNICA exceção ao azul único de 21/08, e por medição: sobre a tarja #BCCDE9 o `--accent` novo dá **2,71:1** e o link some dentro do próprio cabeçalho — foi exatamente o que aconteceu quando a tarja era o azul cheio, e o dono viu na hora ("css quebrado no ver mais"). Aqui ele usa o azul da mesma família um passo mais fundo: **4,52:1**, e continua lendo-se como link porque é azul, não tinta de texto. Se a tarja mudar de tom, este valor muda junto. */ .rail-card__title .rail-card__link, .rail-card__title .rail-card__toggle { color: #35597F; opacity: 1; } .rail-card__title .rail-card__link:hover, .rail-card__title .rail-card__toggle:hover { text-decoration: underline; } .rail-card__toggle:hover { text-decoration: underline; } /* Colapsável: mostra 3; "Ver todas" adiciona .is-expanded e revela até 10. */ .rail-card--collapsible:not(.is-expanded) .rail-user-list > li:nth-child(n+4) { display: none; } .rail-muted { color: var(--text-3); font-size: 0.8rem; } .rail-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px 10px; line-height: 1.4; } .rail-tag-cloud--trending { max-height: calc(1.4em * 3 + 16px); overflow: hidden; } .rail-tag { color: var(--accent); text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: color var(--duration); } .rail-tag:hover { color: #6ba3ff; text-decoration: underline; } /* Tamanho ÚNICO (20/07/26): a nuvem com sm/md/lg por popularidade desalinhava as linhas e parecia bug de alinhamento, não hierarquia. As classes seguem vindo do JS (rail-tag--sm/md/lg) — aqui viram neutras de propósito. */ .rail-tag--sm, .rail-tag--md, .rail-tag--lg { font-size: 0.9rem; opacity: 1; } .rail-user-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .rail-user { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; font-size: 0.82rem; } .rail-user__rank { color: var(--text-3); font-weight: 700; font-size: 0.75rem; text-align: center; } /* O ROSTO nos rankings do rail (28/08/26, ordem do dono): a MESMA bolinha de 34px dos aniversários, entre o número e o nome. Classe própria porque os "BiPs em alta" dividem o .rail-user e não têm rosto. */ .rail-user--pic { grid-template-columns: 22px 34px 1fr auto; } .rail-user__pic { flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-3, rgba(148, 163, 184, 0.2)); color: var(--text-3); } .rail-user__pic img { width: 100%; height: 100%; object-fit: cover; display: block; } .rail-user__name { color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; min-width: 0; } .rail-user__label { overflow: hidden; text-overflow: ellipsis; /* Nome completo no rail estreito: o corte é no NOME, nunca no selo nem na bandeira — quem some primeiro tem de ser a última letra do sobrenome. */ min-width: 0; flex: 0 1 auto; } .rail-user__name .trust-tier, .rail-user__name .country-flag { flex-shrink: 0; } .rail-user__name .trust-tier__icon { width: 14px; height: 14px; } .rail-user__flag { width: 14px; height: 10px; object-fit: cover; border-radius: 1px; flex-shrink: 0; } .rail-user__name:hover { color: var(--accent); } .rail-user__stat { flex-shrink: 0; font-size: 0.68rem; font-weight: 600; color: var(--text-3); white-space: nowrap; } /* ══ SEGUIR DENTRO DA COLUNA (29/08/26) ════════════════════════════════════ Ordem do dono: *"nos próximos aniversários, em bipers ativos e bipers do mês, vamos incluir o botão seguir se não for seguidor nosso"*. MENOR que o "Seguir" do cartão "Quem seguir", e de propósito: lá o botão é o assunto da linha (a linha existe para isso); aqui ele é uma oferta ao lado do nome — quem manda na linha continua sendo a pessoa, o aniversário, a posição no ranking. Um botão do mesmo tamanho nos dois lugares faria os três cartões virarem quatro listas de "Seguir". Só aparece para quem eu não sigo (o servidor decide, campo `relacao`), então ele nunca é um "deixar de seguir" disfarçado. */ /* PÍLULA PRETA, como no aipim (11/09/26, ordem do dono). Continua MENOR que a do cartão (a razão acima segue valendo), mas é a mesma peça: cheia, sem contorno, letra branca em negrito. Cores pelos tokens `--seguir-*` — no escuro ela vira branca sozinha. */ .rail-seguir-mini { flex-shrink: 0; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; height: 26px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--seguir-bg); color: var(--seguir-fg); font-family: var(--font); font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; transition: background var(--duration), color var(--duration), transform 0.12s ease; } .rail-seguir-mini:hover { background: var(--seguir-bg-hover); color: var(--seguir-fg); } .rail-seguir-mini:active { transform: scale(0.97); } .rail-seguir-mini:disabled { opacity: 0.6; cursor: default; transform: none; } /* Depois do toque ("Seguindo"/"Solicitado") ele deixa de ser botão e vira recado: pílula CINZA com letra escura (11/09/26), o mesmo "feito" do cartão e das listas — não há mais nada para apertar ali. */ .rail-seguir-mini--feito, .rail-seguir-mini--feito:hover { background: var(--seguir-feito-bg); color: var(--seguir-feito-fg); font-weight: 600; cursor: default; } /* A linha do aniversário é um
  • com o link ocupando tudo; para o botão caber ao lado, o item vira a fileira e o link fica com o que sobra. */ .rail-aniversarios__lista > li { display: flex; align-items: center; gap: 6px; } .rail-aniversarios__lista > li > .rail-aniv__link { flex: 1 1 auto; min-width: 0; } .rail-hot-bip__link { flex: 1; min-width: 0; font-size: 0.78rem; font-weight: 500; color: var(--text); text-decoration: none; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rail-hot-bip__link:hover { color: var(--accent); } .rail-community__name { flex: 1; min-width: 0; } /* === Página de busca === */ .search-page { padding-top: 0; } /* RESPIRO ENTRE O RISCO E O PAINEL DAS ABAS (21/08/26, ordem do dono). O painel nascia colado na linha do topbar — e a coluna da direita, não: o rail já descia `--rail-stack-gap`. As duas colunas começavam em alturas diferentes, com a da esquerda espremida contra o risco. O valor é o MESMO do rail de propósito: assim o painel das abas e o primeiro cartão da direita nascem na mesma linha, que é a régua que o resto do site já segue. */ .feed-layout--search .search-panel { margin-top: var(--rail-stack-gap); } .search-shell { background: transparent; border: none; border-radius: 0; overflow: visible; box-shadow: none; } .search-bar-wrap { margin-bottom: 20px; } /* A CAIXA DE BUSCA DO RAIL MORREU (12/09/26, ordem do dono: *"vamos parar de enganar nossos usuários, vamos tirar essa caixa de busca e mostrar só um círculo como o de notificação mas com o ícone de busca"*). Com ela foram as regras `.search-bar-wrap--rail`, `.rail-explorar` e `.search-bar__input--porta` (grep: nenhum PHP as escreve; o mobile-search.js só as alternaria num formulário que o rail não tem mais). Os atalhos redondos do rail moram em `feed_sidebar.php`. */ /* ══ O CAMPO DO EXPLORAR: UMA CAIXA QUE PARECE CAIXA (29/08/26) ════════════ Ordem do dono: *"faça o campo busca do explorar ser branco, uma caixa de texto visível, pois assim a pessoa não sabe onde escrever"*. O `.search-bar` nasceu no rail da direita, pousado sobre o fundo da página: lá `background: transparent` com 1px de borda bastava. Este campo é novo (ele era emprestado do rail até hoje) e mora DENTRO do painel — mesmo tom dos dois lados. O que sobra na tela é um texto cinza solto, sem nada dizendo que aquilo se escreve. Fundo próprio (`--surface` é branco no tema claro), borda mais firme e o foco acendendo no azul: os três sinais que o olho procura sem pensar. */ .search-bar-wrap--explorar { display: block; margin: 10px 0 6px; } .search-bar-wrap--explorar .search-bar { background: var(--surface); border-color: var(--border-hover); box-shadow: var(--shadow-sm); transition: border-color var(--duration), box-shadow var(--duration); } .search-bar-wrap--explorar .search-bar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* O convite no tom apagado, o que se digita no tom forte — sem dizer, os dois saem iguais e a caixa parece já preenchida. */ .search-bar-wrap--explorar .search-bar__input::placeholder { color: var(--text-3); opacity: 1; } /* ══ A VITRINE DO EXPLORAR ════════════════════════════════════════════════ Quatro blocos servidos por `api/explore.php` — o mesmo endpoint do app, o mesmo desenho: fotos grandes primeiro (é o que faz parar), gente depois, e as duas listas curtas (tags e lugares) fechando. */ .explorar { display: flex; flex-direction: column; gap: 26px; padding: 4px 0 8px; } .explorar__titulo { margin: 0 0 12px; font-size: 1.02rem; font-weight: 800; letter-spacing: -0.02em; color: var(--white); } /* FOTOS: grade que se adapta sozinha à largura da coluna — três no computador, duas no celular estreito, sem media query. */ .explorar__fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; } .explorar__foto { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: var(--surface-2); } .explorar__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s var(--ease); } .explorar__foto:hover img { transform: scale(1.05); } /* GENTE: fileira que quebra, com espaço em cima para o balão da nota — a mesma peça do rail de status, e por isso a mesma reserva de altura. */ .explorar__gente { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); /* 40px ENTRE AS FILEIRAS, e não os 10 de sempre: o balão da nota é `position: absolute` e sobe para fora da célula. Com o vão pequeno ele caía por cima do rosto da fileira de baixo — o mesmo cuidado que a fileira de status já tem no topo do feed, só que aqui repetido a cada linha da grade. */ gap: 40px 10px; padding-top: 30px; } .explorar__pessoa { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; color: var(--text); text-decoration: none; } /* 71px, 15% MAIOR (13/09/26, ordem do dono: "aumente em 15% o tamanho dos avatares"). A célula da grade continua com 86px de mínimo: o rosto cabe nela com folga e o celular estreito segue com três por fileira. */ .explorar__rosto { width: 71px; height: 71px; border-radius: 50%; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); } .explorar__rosto img { width: 100%; height: 100%; object-fit: cover; display: block; } .explorar__nome { max-width: 100%; font-size: 0.78rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* A SEÇÃO VAZIA DIZ QUE ESTÁ VAZIA (13/09/26): com o filtro de lugar ou de selo, sumir calada parecia defeito do filtro. */ .explorar__vazio { margin: 0; color: var(--text-2); font-size: 0.9rem; } /* O balão da nota, igual ao do rail de status: 2 linhas no teto, e o corte com reticência em vez de uma terceira linha. */ .explorar__nota { position: absolute; bottom: calc(100% - 8px); left: 50%; transform: translateX(-50%); z-index: 2; width: max-content; min-width: 0; max-width: 92px; padding: 3px 8px 0; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 2px 8px rgb(0 0 0 / 14%); color: var(--text-1); font-size: 0.66rem; line-height: 1.55; text-align: center; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* TAGS e LUGARES: listas curtas, em pílula — o mesmo vocabulário das BiPTags do rail, para não inventar um terceiro jeito de mostrar uma tag. */ .explorar__tags, .explorar__lugares { display: flex; flex-wrap: wrap; gap: 8px; } .explorar__tag, .explorar__lugar { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 7px 14px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border); color: var(--accent); font-size: 0.88rem; font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background var(--duration), border-color var(--duration); } .explorar__lugar { color: var(--text); } .explorar__lugar i { color: var(--text-2); font-size: 1.05rem; } .explorar__tag:hover, .explorar__lugar:hover { background: var(--nav-hover); border-color: var(--border-hover); } .search-bar__clear { font-size: 1.2rem; } @media (max-width: 1100px) { .search-bar-wrap--mobile { display: block; width: 100%; margin: 0 0 14px; padding: 0; } .search-bar-wrap--mobile .search-bar { padding: 12px 16px; border-radius: var(--radius-lg); background: transparent; border: 1px solid var(--border); transition: border-color var(--duration); } .search-bar-wrap--mobile .search-bar:focus-within { border-color: var(--accent); } .search-bar-wrap--mobile .search-bar__input { font-size: 1rem; } .search-page .search-bar-wrap--mobile { margin: 14px 0 16px; } .feed-main > .search-bar-wrap--mobile:first-child { margin-top: 4px; } .feed-main > .rail-topo-row:first-child { margin: 4px 0 14px; width: 100%; } .rail-topo-row .search-bar-wrap--mobile { display: block; width: auto; flex: 1 1 auto; min-width: 0; margin: 0; } } .search-bar { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 22px; background: transparent; border: 1px solid var(--border); border-radius: 24px; } .search-bar__icon { color: var(--text-2); font-size: 1.4rem; flex-shrink: 0; } .search-bar__input { flex: 1; min-width: 0; background: transparent; border: none; color: var(--white); font-size: 1.1rem; outline: none; } .search-bar__clear { flex-shrink: 0; padding: 0; border: none; background: none; color: var(--text-3); font-size: 1.4rem; line-height: 1; cursor: pointer; } .search-bar__clear:hover { color: var(--white); } .search-panel { width: 100%; } .search-panel--feed-style { background: transparent; border: none; box-shadow: none; overflow: visible; } .saved-page-head { margin-bottom: 0; padding: 24px 0 16px; border-bottom: 1px solid var(--border); } .saved-page-head p { margin: 0 0 16px; color: var(--text-2); font-size: 0.95rem; } .saved-search-wrap { position: relative; display: flex; align-items: center; } .saved-search__icon { position: absolute; left: 14px; color: var(--text-3); font-size: 1.15rem; pointer-events: none; } .saved-search__input { width: 100%; padding: 11px 16px 11px 42px; border-radius: var(--radius); border: 1px solid var(--border); /* Mesma regra da `.filter-pill`: campo na página tem superfície própria. */ background: var(--surface); color: var(--white); font-size: 0.95rem; font-family: var(--font); outline: none; transition: border-color var(--duration), box-shadow var(--duration); } .saved-search__input::placeholder { color: var(--text-3); } .saved-search__input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .saved-search__input::-webkit-search-cancel-button { -webkit-appearance: none; } /* A barra de abas do Explorar (.search-tabs, .search-tabs__indicator, .search-tab) morava aqui desde 21/08/26 e morreu em 12/09/26, ordem do dono: "vamos tirar a barra de filtros e responder direto na tela tudo". O que ela escolhia, a caixinha "Ver" escolhe (ver o bloco no fim deste arquivo). */ .search-results-list { padding: 0; min-height: 0; position: relative; } .search-results-list--loading .search-results__body { pointer-events: none; } .search-results__body { transition: opacity 0.22s var(--ease); } .search-results__body--enter { opacity: 0; } .search-results__loader { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 0; color: var(--text-3); font-size: 0.85rem; background: transparent; } .search-results__loader[hidden] { display: none !important; } .search-filters-bar[hidden] { display: none !important; } .search-row-link { display: flex; align-items: center; gap: 15px; padding: 12px 20px; text-decoration: none; color: inherit; transition: background var(--duration) var(--ease); } .search-row-link:hover { background: var(--surface-2); } .search-bip-hit { display: block; padding: 8px 20px 14px; text-decoration: none; color: inherit; transition: background var(--duration) var(--ease); } .search-bip-hit:hover { background: var(--surface-2); } .search-BiPs-feed { margin-top: 0; } .search-filters-bar { padding: 14px 0 16px; background: transparent; border-bottom: 1px solid var(--border); } /* FILTRAR (13/09/26, ordem do dono: "falta um botão filtrar"). O botão-mãe da casa (.btn-primary) na altura e no raio das pílulas ao lado, com a borda invisível que elas têm, para a fileira não serrilhar. */ .search-filtrar { padding: 8px 18px; border: 1px solid transparent; border-radius: var(--radius-lg); font-size: 0.9rem; /* `normal`, como a pílula (que é