@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap'); /* ══════════════════════════════════════════════════════════════════════════ VIGIA — redesign "sala de controle" (2026) Substitui o tema medieval por um sistema de monitoramento: base azul-petróleo quase preta no escuro, laboratório frio no claro, acento ciano, tipografia técnica (Chakra Petch nos títulos, JetBrains Mono em todo número) e geometria reta com cantos em bracket de HUD. CONTRATO: nenhum nome de classe, id ou estrutura de HTML mudou. app.js, shared.js, home.js, bazaar.js, character.js e as 16 páginas continuam funcionando sem tocar em nada. Só aparência. Fontes: Chakra Petch + JetBrains Mono vêm do @import acima (o das páginas carrega Cinzel/Sora e não pode ser editado neste ciclo). Sora continua sendo o corpo de texto. ══════════════════════════════════════════════════════════════════════════ */ :root{ /* Diz ao NAVEGADOR qual é o tema. Sem isso ele desenha todo widget nativo na variante clara: no tema escuro a barra de rolagem, o quadrado do checkbox, o menu aberto do usa a largura INTRÍNSECA (~20 caracteres): os 3 campos saíam de tamanhos diferentes e o placeholder cortado. .calc-field é o invólucro que o autocomplete do shared.js cria. min-width:0 impede que um valor comprido estufe a coluna. */ .calc-form input, .calc-field{ width:100%; } .calc-grid > div{ min-width:0; } .calc-form button{ align-self:flex-start; margin-top:1rem; padding:.55rem 1.4rem; font-size:.8rem; } .calc-result{ margin-top:1.3rem; padding-top:1rem; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:.5rem; } /* display:flex acima sobrepõe o [hidden] do atributo — sem isto o painel de resultado (vazio) apareceria já no load. Armadilha registrada: qualquer elemento com [hidden] e display explícito precisa da própria regra. */ .calc-result[hidden]{ display:none; } .calc-result-row{ display:flex; justify-content:space-between; align-items:baseline; } .calc-result-row strong{ font-family:var(--font-mono); } .calc-note{ margin-top:1rem; } @media (max-width: 560px){ .calc-grid{ grid-template-columns:1fr; } } /* ═══ status do sistema ═══ */ .status-layout{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:1rem; padding:1.6rem 1.8rem; } .status-block{ display:flex; flex-direction:column; gap:.6rem; } .status-row{ display:flex; justify-content:space-between; align-items:center; gap:.6rem; font-size:.86rem; } .status-row .compare-label{ color:var(--muted); } /* MEDIDO em 13/08: as 17 linhas desta página estavam com `box-shadow: none` — retângulos pintados dentro de um `.panel` que TEM três camadas de sombra. Relevo no contêiner e nada dentro: a página que informa a saúde do sistema era a única ainda inteiramente plana por dentro. Aqui a linha vira peça pousada, com a mesma linguagem do `.chip`: aresta de cima iluminada e sombra de contato embaixo. */ .status-guild-row{ display:flex; justify-content:space-between; align-items:center; gap:.6rem; padding:.5rem .7rem; border-radius:var(--r-md); background:var(--surface-2); font-size:.85rem; border:1px solid var(--border); box-shadow: inset 0 1px 0 oklch(100% 0 0 / .5), 0 1px 2px oklch(38% .06 250 / .16); } html[data-theme="dark"] .status-guild-row{ box-shadow: inset 0 1px 0 oklch(100% 0 0 / .06), 0 1px 3px oklch(0% 0 0 / .34); } /* Cadência esperada do job, ao lado do "há X min". Discreta: é a régua para ler a idade, não um dado em si. E dois selos na mesma linha (Atrasado + OK/Falhou) precisam de ar. */ .job-cadencia{ opacity:.7; } .status-guild-row .status-pill + .status-pill{ margin-left:.35rem; } .status-guild-row > span:last-child{ display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; } /* ── volume nas linhas de status ── O `:has()` prende a perspectiva a este bloco: `.status-block` também empacota linhas de texto simples (`.status-row`) em outras seções, e ali não há camada nenhuma a revelar. Onde `:has()` não existir, nada acontece — que é o mesmo que hoje. */ .tem-3d .status-block:has(> .status-guild-row){ perspective:200vw; perspective-origin:var(--fuga-x, 50%) var(--fuga-y, 40%); transition:perspective-origin .25s ease; } .tem-3d .status-guild-row{ transform-style:preserve-3d; will-change:transform; transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .18s ease, border-color .18s ease; } .tem-3d .status-guild-row:hover{ border-color:color-mix(in oklch, var(--accent) 38%, var(--border)); box-shadow: inset 0 1px 0 oklch(100% 0 0 / .5), 0 2px 4px oklch(38% .06 250 / .16), 0 10px 20px -12px oklch(38% .06 250 / .32); } .tem-giro .status-guild-row:hover{ transform:translateY(-2px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); } html[data-theme="dark"] .tem-3d .status-guild-row:hover{ box-shadow: inset 0 1px 0 oklch(100% 0 0 / .07), 0 2px 5px oklch(0% 0 0 / .4), 0 12px 24px -14px oklch(0% 0 0 / .58); } /* A pastilha vem à frente porque é o veredito; o texto fica logo atrás. Os dois lados são `` sem classe, então os seletores são posicionais — é o que o HTML oferece. `display:block` no lado do texto pelo motivo medido no ciclo 48: `transform` não se aplica a elemento `display:inline`, e este nasce inline. */ .tem-3d .status-guild-row > span:first-child{ display:block; transform:translateZ(8px); } /* O `` da direita é só um agrupador das pastilhas, mas precisa entrar no 3D: um `flat` no meio da cadeia achata tudo abaixo. Terceira vez que esta mesma armadilha aparece (`.riv-corpo` no ciclo 45, `.guild-card-corpo` no 46) — MEDIDO aqui: a pastilha a Z=16 ficava em 33,5 px, exatamente a largura sem transform; com o `preserve-3d` no agrupador, 34,1 px. */ .tem-3d .status-guild-row > span:last-child{ transform-style:preserve-3d; } .tem-3d .status-guild-row .status-pill{ transform:translateZ(16px); } /* Mesma correção do item de charm: a linha já estava na lista de alvos do shared.js, que escrevia `--luz-x`/`--luz-y` nela a cada movimento do ponteiro sem que nada lesse. */ .tem-3d .status-guild-row{ position:relative; } .tem-3d .status-guild-row::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; border-radius:inherit; transition:opacity .2s ease; z-index:0; background:radial-gradient(circle at var(--luz-x, 50%) var(--luz-y, 50%), color-mix(in oklch, color-mix(in oklch, oklch(100% 0 0) var(--luz-branco, 0%), var(--accent)) var(--luz-alfa-card, 22%), transparent), transparent 60%); } .tem-3d .status-guild-row:hover::before{ opacity:1; } .tem-3d .status-guild-row > *{ position:relative; z-index:1; } @media (prefers-reduced-motion: reduce){ /* Só o giro sai; as camadas em translateZ ficam (ver o bloco do .summary, linha ~476). */ .tem-3d .status-guild-row, .tem-3d .status-guild-row:hover{ transform:none; transition:none; } } /* A pastilha é o veredito da linha — é ela que diz OK ou falhou, e era plana. Ganha o relevo de um selo aplicado por cima: fio de luz na aresta de cima e sombra de contato embaixo. Não leva `inset` de peça encaixada (como a medalha do pódio ou o brasão da guilda) de propósito: aqueles são cunhados NA superfície, este é colado SOBRE ela, e é essa diferença que faz o olho achá-lo primeiro numa lista de 17 linhas iguais. */ .status-pill{ display:inline-flex; align-items:center; gap:.35rem; padding:.15rem .55rem; border-radius:var(--r-pill); font-family:var(--font-mono); font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; border:1px solid transparent; box-shadow: inset 0 1px 0 oklch(100% 0 0 / .45), 0 1px 1px oklch(38% .06 250 / .18); } html[data-theme="dark"] .status-pill{ box-shadow: inset 0 1px 0 oklch(100% 0 0 / .1), 0 1px 2px oklch(0% 0 0 / .4); } .status-pill.ok{ background:var(--online-soft); color:var(--online); border-color:color-mix(in oklch, var(--online) 30%, transparent); } .status-pill.bad{ background:var(--offline-soft); color:var(--offline); border-color:color-mix(in oklch, var(--offline) 30%, transparent); } /* 'warn' = em andamento (ex.: cobertura do ranking subindo). Não é erro como o 'bad', nem pronto como o 'ok'. */ .status-pill.warn{ background:var(--warn-soft); color:var(--warn); border-color:color-mix(in oklch, var(--warn) 30%, transparent); } table.hide-world .col-world, table.hide-rank .col-rank, table.hide-vocation .col-vocation, table.hide-gained .col-gained, table.hide-online-time .col-online-time, table.hide-priority .col-priority, table.hide-boss .col-boss, table.hide-drome .col-drome, table.hide-achievement .col-achievement, table.hide-prestige .col-prestige, table.hide-bounty .col-bounty{ display:none; } /* ═══ painéis de insight ═══ */ .insights{ padding:0 1.8rem 1.3rem; display:grid; grid-template-columns:repeat(auto-fit, minmax(340px,1fr)); gap:1rem; align-items:stretch; } .panel{ padding:1.25rem 1.35rem; } .panel-header{ display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; flex-wrap:wrap; margin-bottom:.85rem; } .panel-header h2{ margin:0; font-size:.92rem; display:flex; align-items:center; gap:.5rem; color:var(--text); text-transform:uppercase; letter-spacing:.11em; font-weight:600; } .panel-header a{ font-size:.78rem; text-decoration:none; } .panel-header a:hover{ text-decoration:underline; } .small{ font-size:.74rem; } /* Botão secundário. Nasceu como #export-csv e as páginas novas criaram ids próprios (rk-export, ed-export, gr-export, gp-export) que ficaram SEM estilo. A classe existe pra que o próximo não repita isso: basta class="btn-ghost". */ #export-csv, .btn-ghost{ border:1px solid var(--border); background:var(--surface-2); color:var(--muted); border-radius:var(--r-md); padding:.4rem .9rem; font-size:.7rem; cursor:pointer; font-family:var(--font-display); font-weight:600; letter-spacing:.1em; text-transform:uppercase; transition:border-color .15s ease, color .15s ease; } #export-csv:hover, .btn-ghost:hover{ border-color:var(--accent); color:var(--accent-strong); } .btn-ghost:disabled{ opacity:.5; cursor:default; border-color:var(--border); } /* Mesmo relevo de tecla do botão primário, em tom mais discreto — este é o botão secundário e não deve competir com o principal pela atenção. */ /* MEDIDO em 13/08 comparando a energia da sombra PROJETADA nos dois temas: este botão ficava em 0,10 no claro e 0,10 no escuro, enquanto os vizinhos da mesma barra (`.theme-toggle`, `.auth-button`) vão de 0,20 para 0,40. Fundo escuro ABSORVE sombra — manter o mesmo alfa não é "manter o efeito", é apagá-lo. O valor mora em `--sombra-btn-2rio` (topo do arquivo) para valer nos DOIS caminhos do tema escuro. Segue discreto: reforça na mesma proporção dos vizinhos (2x), partindo de um valor mais baixo, porque não deve competir com o botão principal. */ #export-csv, .btn-ghost{ box-shadow:var(--sombra-btn-2rio); transition:border-color .15s ease, color .15s ease, box-shadow .12s ease, transform .12s ease; } #export-csv:active, .btn-ghost:active:not(:disabled){ transform:translateY(1px); box-shadow:inset 0 2px 3px oklch(0% 0 0 / .22); } /* Desabilitado não afunda nem levanta: não há nada para apertar. */ .btn-ghost:disabled{ box-shadow:none; transform:none; } /* Quem pediu menos movimento continua com o relevo (é estático e informa a affordance), mas sem o pulinho ao clicar. */ @media (prefers-reduced-motion: reduce){ #watchlist-form button:active, #alertas-form button:active, #login-submit:active, .calc-form button:active, .hero-search button:active, #export-csv:active, .btn-ghost:active:not(:disabled){ transform:none; } } .heatmap-guild{ margin-bottom:1rem; position:relative; z-index:1; } .heatmap-guild:last-child{ margin-bottom:0; } .heatmap-guild .g-label{ font-family:var(--font-mono); font-size:.68rem; color:var(--accent-strong); margin-bottom:.35rem; letter-spacing:.08em; text-transform:uppercase; } .weekday-heading{ margin-top:.8rem; color:var(--muted) !important; font-family:var(--font-mono) !important; font-weight:500 !important; } .weekday-bars{ height:2.4rem; } .weekday-bars .heatmap-bar{ flex:0 1 2.2rem; } .heatmap-bars{ display:flex; align-items:flex-end; gap:2px; height:3.2rem; padding:3px 3px 0; background:color-mix(in oklch, var(--surface-3) 55%, transparent); border:1px solid var(--border); border-radius:var(--r-md); } .heatmap-bar{ flex:1; background:var(--surface-3); border-radius:var(--r-xs) var(--r-xs) 0 0; position:relative; min-height:2px; } .heatmap-bar.has-data{ background:linear-gradient(180deg, var(--gold-hi), var(--accent)); } .heatmap-bar:hover::after{ content:attr(data-label); position:absolute; bottom:100%; left:50%; transform:translateX(-50%); background:var(--text); color:var(--bg); font-family:var(--font-mono); font-size:.66rem; padding:.15rem .4rem; border-radius:var(--r-sm); white-space:nowrap; margin-bottom:.3rem; pointer-events:none; z-index:6; } .heatmap-labels{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:.64rem; color:var(--muted); margin-top:.25rem; } .vulnerability{ font-size:.78rem; color:var(--text); margin-top:.5rem; } .vulnerability b{ color:var(--accent-strong); } /* Altura fixa: rola internamente quando tem mais eventos do que cabe, sem sobrar vão vazio quando tem menos. */ .events-list{ list-style:none; margin:0; padding:0; height:29rem; overflow-y:auto; position:relative; z-index:1; } .events-list li{ font-size:.82rem; padding:.45rem 0 .45rem 1rem; border-bottom:1px solid var(--border); position:relative; } .events-list li::before{ content:""; position:absolute; left:0; top:.85rem; width:5px; height:5px; background:var(--accent); border-radius:var(--r-xs); } .events-list li:last-child{ border-bottom:none; } .events-list .ev-time{ color:var(--muted); font-family:var(--font-mono); font-size:.68rem; display:block; } .events-empty{ color:var(--muted); font-size:.82rem; } /* ═══ tabela — o coração do site ═══ */ .table-wrap{ padding:0 1.8rem 3rem; overflow-x:auto; } /* O `overflow-x:auto` acima existe para a tabela (min-width:800px) poder ser arrastada no celular. O efeito colateral MEDIDO: `overflow-y` computa como 'auto' junto, o que faz do .table-wrap o scrollport de referência do sticky do thead — e ele tem 8.277 px de altura própria, então nunca rola e o cabeçalho nunca gruda. Devolver `visible` traz o sticky de volta, mas SÓ pode acontecer onde a tabela cabe. MEDIDO ao tentar por media query (min-width:900px): rankings/exp-daily/deaths/ guild-ranking couberam com folga, mas o DASHBOARD tem tabela de ~2.000 px e vazou 1.163 px, empurrando 1.120 px de rolagem horizontal na página. Largura de tela não responde à pergunta certa; quem responde é a tabela. Por isso a classe vem do JS (marcarTabelasQueCabem), que mede — e o padrão sem JS continua sendo o seguro. */ .table-wrap.cabe{ overflow-x:visible; } /* SEM a classe `cabe`, o cabeçalho NÃO gruda. Esta é a outra metade do problema descrito logo acima, e a que aparecia na tela: quando o wrap fica em `overflow:auto` (celular, ou qualquer tabela larga demais para a caixa), ele vira o scrollport do sticky — e aí o `top: var(--h-topbar)` deixa de contar a partir do alto da JANELA e passa a contar do alto da TABELA. O cabeçalho descia ~78 px para dentro dela e ficava parado no meio das linhas, por cima do primeiro colocado, com o resto do ranking passando por baixo. MEDIDO em 390 px: "1 Hard Paradox", depois a faixa POSIÇÃO/NOME/LEVEL cobrindo o segundo, depois "3 Bacon Almighty". Grudar dentro de um scrollport que não rola na vertical não serve para nada — o valor do sticky é acompanhar a rolagem da página, e é justamente isso que ali não acontece. Com `static` o cabeçalho volta a ser a primeira linha da tabela e rola junto, que é o comportamento certo quando a tabela é arrastada de lado. Onde a tabela cabe, nada muda: `.cabe` devolve `overflow:visible` e o sticky segue funcionando como sempre. */ .table-wrap:not(.cabe) thead th{ position:static; } /* A borda que come o conteúdo: onde a tabela é maior que a caixa, ela desvanece em vez de ser decepada, e o olho lê que a coluna continua por baixo da margem. Quem liga a classe e mede os dois lados é `iniciarSombraDeRolagem` — os padrões abaixo são o estado "no começo da rolagem", então mesmo se o JS parar depois de ligar a classe, o resultado é coerente (nada à esquerda, algo à direita). `mask` é grouping property e força `transform-style: flat` nos descendentes: aqui não custa nada, a tabela já era `flat` (medido antes de aplicar). */ .table-wrap.tem-corte{ --corte-esq:0px; --corte-dir:26px; -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--corte-esq), #000 calc(100% - var(--corte-dir)), transparent 100%); mask-image:linear-gradient(to right, transparent 0, #000 var(--corte-esq), #000 calc(100% - var(--corte-dir)), transparent 100%); } table{ width:100%; border-collapse:separate; border-spacing:0; font-size:.85rem; min-width:800px; background:var(--card-gradient); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-card); /* SEM overflow:hidden aqui — mata o position:sticky do thead th. */ } thead th{ text-align:left; font-family:var(--font-mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:500; border-bottom:1px solid var(--border-strong); padding:.8rem .8rem; /* Gruda logo ABAIXO da topbar (que tem 78,4 px: 56 da logo + .7rem de padding em cima e embaixo) — senão o cabeçalho da tabela sobe para trás dela e some. A topbar tem z-index 10 contra os 2 daqui, então ela continua por cima. */ position:sticky; top:var(--h-topbar); z-index:2; background:var(--thead-grad); white-space:nowrap; /* A faixa de cabeçalho é uma peça ACIMA do corpo da tabela — com 200 linhas passando por baixo dela, essa é a camada mais visível do site. Sombra projetada para baixo (as linhas somem sob a peça) e um fio de luz na aresta de cima. ESTE é o estado pousado: o cabeçalho ainda está encostado no topo da própria tabela e não há linha nenhuma por baixo dele. Fica só o fio de luz e um contato mínimo, pela mesma razão que a `.topbar` não tem sombra no topo da página — sombra sem nada para sombrear é decoração afirmando uma profundidade que não existe. A elevação de verdade entra na regra `.cabecalho-grudado` abaixo. */ box-shadow: inset 0 1px 0 oklch(100% 0 0 / .45), 0 1px 1px -1px oklch(0% 0 0 / .12); transition:box-shadow .2s ease; } html[data-theme="dark"] thead th{ box-shadow: inset 0 1px 0 oklch(100% 0 0 / .07), 0 1px 2px -1px oklch(0% 0 0 / .3); } /* ── grudado: agora existe conteúdo correndo por baixo ── A classe vem do JS (iniciarCabecalhoFlutuante), que compara a posição do `thead` com a do topo da tabela: enquanto estão juntos, o cabeçalho está pousado; quando o `thead` se descola, o `sticky` assumiu e as linhas passaram para baixo dele. Sem JS, o cabeçalho fica no estado pousado — discreto, nunca quebrado. */ table.cabecalho-grudado thead th{ box-shadow: inset 0 1px 0 oklch(100% 0 0 / .45), 0 2px 3px -1px oklch(0% 0 0 / .16), 0 6px 12px -8px oklch(38% .06 250 / .4); } html[data-theme="dark"] table.cabecalho-grudado thead th{ box-shadow: inset 0 1px 0 oklch(100% 0 0 / .07), 0 2px 4px -1px oklch(0% 0 0 / .4), 0 8px 16px -8px oklch(0% 0 0 / .5); } /* A sombra maior é profundidade, não animação, e por isso vale para todo mundo. O que sai para quem pediu menos movimento é só a transição entre os dois estados. */ @media (prefers-reduced-motion: reduce){ thead th{ transition:none; } } th.num, td.num{ text-align:right; } /* Coluna pela qual o ranking está ordenado: um pouco mais de peso ajuda o olho a fixá-la sem competir por cor com o Exp Diário (verde). */ td.rk-value{ font-weight:600; color:var(--text); } /* Mundo e Vocação aparecem duas vezes na linha do ranking: como colunas próprias e, repetidos, num span embaixo do nome. O span é o plano B do celular, onde as duas colunas somem para o VALOR caber na tela — mas a regra que fazia isso NUNCA foi escrita, então ele estava aceso no desktop também e cada linha repetia "Solarian · Royal Paladin" ao lado do nome, antes das colunas de verdade. Escondido por padrão; só a media query abaixo o acende. */ .rk-so-mobile{ display:none; } /* Legenda que precede os resultados vindos da busca no ranking INTEIRO: eles estão fora das 200 posições carregadas, e sem o aviso o rank saltando de 200 para 757 é lido como erro de ordenação. Também estava sem regra nenhuma — a linha herdava a zebra e o hover de acento das linhas de dado, ou seja, vestia-se de resultado do ranking quando é legenda do que vem abaixo. O fundo vai no td porque a zebra e o hover pintam o tr. */ .rk-linha-aviso td{ color:var(--muted); font-size:.76rem; line-height:1.45; padding:.5rem .8rem; background:color-mix(in oklch, var(--accent-soft) 55%, var(--surface-2)); border-bottom:1px solid var(--border-strong); } /* Sem realce de linha clicável: não há personagem aqui para o olho perseguir. */ .rk-linha-aviso:hover{ background:none; box-shadow:none; } .rank-plain{ color:var(--muted); } /* Pódio do top 3. A tinta é ESCURA e fixa sobre disco claro: é o que garante contraste nos dois temas — número claro sobre disco metálico reprova no tema claro (a mesma restrição que o arquivo antigo já registrava aqui). */ /* ── medalhas do pódio ── MEDIDO em 10/08: eram um gradiente com um contorno de 1 px — chapadas. Medalha é um objeto de metal, e metal se lê pelo BISEL: luz na aresta de cima, sombra na de baixo, e uma sombra projetada dizendo que a peça está acima da linha da tabela. Aqui o relevo é assumido pelo box-shadow (e não por transform) porque a peça tem 18 px: nesse tamanho um giro é imperceptível e ainda borraria o número dentro dela. */ .rank-medal{ display:inline-flex; align-items:center; justify-content:center; min-width:1.7em; height:1.7em; padding:0 .35em; border-radius:var(--r-sm); font-weight:700; font-size:.78em; color:oklch(22% .03 250); position:relative; isolation:isolate; /* A ALTURA DO DEGRAU vive nesta variável, e não solta no box-shadow, porque as outras quatro camadas valem para as três medalhas: redeclarar `box-shadow` na regra da posição apagaria todas elas (foi assim que perdi o relevo das barras no ciclo 64). */ --elev-medalha: 0 1px 2px oklch(0% 0 0 / .3); box-shadow: inset 0 1px 0 oklch(100% 0 0 / .5), /* aresta de cima pegando luz */ inset 0 -1px 0 oklch(0% 0 0 / .28), /* aresta de baixo na sombra */ inset 0 0 0 1px oklch(0% 0 0 / .14), /* contorno que já existia */ var(--elev-medalha), /* a peça projeta sombra na linha */ 0 0 0 .5px oklch(0% 0 0 / .06); /* O texto ganha um leve relevo gravado, como número cunhado na peça. */ text-shadow:0 1px 0 oklch(100% 0 0 / .35); } /* Brilho especular: a faixa clara que corre no alto de uma superfície curva. Fica atrás do número (z-index) e não intercepta clique. */ .rank-medal::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1; background:linear-gradient(160deg, oklch(100% 0 0 / .42) 0%, oklch(100% 0 0 / .08) 38%, transparent 62%); } .rank-medal.rank-1{ background:linear-gradient(145deg, oklch(89% .1 195), oklch(77% .13 205)); } .rank-medal.rank-2{ background:linear-gradient(145deg, oklch(91% .012 250), oklch(79% .018 250)); } .rank-medal.rank-3{ background:linear-gradient(145deg, oklch(85% .08 62), oklch(72% .1 52)); } /* ── o pódio tem três alturas ── MEDIDO em 13/08 na tela: a LINHA da tabela já escalonava por posição (inset de topo .55 / .42 / .3), mas as três medalhas projetavam sombra idêntica — `0 1px 2px / .3` nas três. O sistema afirmava "o primeiro está mais alto" pela linha e desmentia na peça que é a própria metáfora de altura. O degrau sobe junto no deslocamento e no borrão (1→2→3 px), que é o que o olho lê como distância até a mesa; o alfa acompanha na proporção que a linha já usava. */ .rank-medal.rank-2{ --elev-medalha: 0 2px 4px oklch(0% 0 0 / .38); } .rank-medal.rank-1{ --elev-medalha: 0 3px 6px oklch(0% 0 0 / .48); } /* No escuro a sombra projetada precisa ser mais funda para a peça não sumir no fundo. */ html[data-theme="dark"] .rank-medal{ --elev-medalha: 0 2px 4px oklch(0% 0 0 / .55); box-shadow: inset 0 1px 0 oklch(100% 0 0 / .45), inset 0 -1px 0 oklch(0% 0 0 / .38), inset 0 0 0 1px oklch(0% 0 0 / .2), var(--elev-medalha), 0 0 0 .5px oklch(0% 0 0 / .1); } /* O par escuro precisa ser explícito: `html[data-theme="dark"] .rank-medal` (0,2,1) vence `.rank-medal.rank-1` (0,2,0), então sem estas duas o escuro achataria o pódio de novo. */ html[data-theme="dark"] .rank-medal.rank-2{ --elev-medalha: 0 3px 7px oklch(0% 0 0 / .68); } html[data-theme="dark"] .rank-medal.rank-1{ --elev-medalha: 0 4px 9px oklch(0% 0 0 / .82); } /* ── a coluna ordenada fica PRESSIONADA ── MEDIDO em 12/08: as 6 colunas ordenáveis são teclas (cursor pointer, tabindex, aria-sort) e a coluna ativa só mudava de COR — todas as 7 com o mesmo `box-shadow`. Esta é a última família do site onde "ligado" não tinha leitura física, e o vocabulário já existe: menu aberto afunda, "você está aqui" afunda, tier escolhido afunda, filtro ligado afunda. As duas camadas PROJETADAS do `thead th` são repetidas em todos os estados: elas é que fazem a faixa do cabeçalho pairar sobre as 200 linhas, e perdê-las ao ordenar seria trocar um ganho por uma perda maior. */ th.sortable{ cursor:pointer; user-select:none; } th.sortable:hover{ color:var(--text); box-shadow: inset 0 1px 0 oklch(100% 0 0 / .7), 0 2px 3px -1px oklch(0% 0 0 / .16), 0 6px 12px -8px oklch(38% .06 250 / .4); } /* Depois do `:hover` de propósito: as duas empatam em especificidade e, ao apontar a coluna JÁ ordenada, ela deve continuar afundada em vez de subir. */ th.sortable.active{ color:var(--accent-strong); box-shadow: inset 0 2px 3px oklch(0% 0 0 / .18), 0 2px 3px -1px oklch(0% 0 0 / .16), 0 6px 12px -8px oklch(38% .06 250 / .4); } /* O afundamento precisa ser mais fundo no escuro: a sombra interna compete com um fundo que já é escuro. O `:hover` desta célula já tinha par; era só o `:active` que faltava. */ th.sortable:active{ box-shadow:var(--sombra-th-active); } html[data-theme="dark"] th.sortable:hover{ box-shadow: inset 0 1px 0 oklch(100% 0 0 / .16), 0 2px 4px -1px oklch(0% 0 0 / .4), 0 8px 16px -8px oklch(0% 0 0 / .5); } html[data-theme="dark"] th.sortable.active{ box-shadow: inset 0 2px 4px oklch(0% 0 0 / .45), 0 2px 4px -1px oklch(0% 0 0 / .4), 0 8px 16px -8px oklch(0% 0 0 / .5); } .sort-arrow{ display:inline-block; width:.7em; } tbody td{ padding:.68rem .8rem; border-bottom:1px solid color-mix(in oklch, var(--border) 55%, transparent); } tbody tr:nth-child(even){ background:color-mix(in oklch, var(--surface-3) 26%, transparent); } tbody tr{ transition:background-color .1s ease, box-shadow .1s ease; } tbody tr:hover{ background:color-mix(in oklch, var(--accent-soft) 70%, transparent); box-shadow:inset 2px 0 0 var(--accent); } /* ── a linha sob o cursor sai do plano da tabela ── DUAS MEDIÇÕES decidiram a forma disto, em 10/08: • `transform` na **desalinha as colunas** (medido: a 1ª célula pulou de 30 px para 24 px). Descartado — tabela não aceita ser empurrada. • `box-shadow` EXTERNO na não é pintado: fica zerado mesmo depois da transição. Nas CÉLULAS funciona. Então o relevo mora no . O resultado é uma barra que ganha aresta iluminada em cima e sombra embaixo, como se tivesse subido um degrau — sem um pixel de deslocamento, que numa tabela de 200 linhas seria enjoativo e ainda quebraria o alinhamento. */ /* ── o pódio tem altura ── MEDIDO em 12/08: as 3 primeiras linhas de um ranking de 200 só se distinguem pela medalha (que ganhou relevo no ciclo 6). A LINHA em si é igual às outras 197 — mesmo fundo zebrado, sombra nenhuma. Pódio é, literalmente, um degrau de três alturas: aqui o 1º recebe a luz mais forte e a sombra mais funda, e a intensidade cai até o 3º. A hierarquia passa a ser lida antes de qualquer número. `:has()` e não `:nth-child(-n+3)` de propósito: o relevo tem que seguir quem TEM medalha, não as três primeiras linhas de qualquer tabela do site (bazaar-stats, por exemplo, não é ranking). Onde `:has()` não existir, degrada para o de sempre. Fica ANTES do `:hover` porque as duas regras empatam em especificidade (0,1,3) e o ponteiro precisa vencer o pódio. */ tbody tr:has(.rank-1) > td{ box-shadow: inset 0 1px 0 oklch(100% 0 0 / .55), inset 0 -2px 2px oklch(0% 0 0 / .16); } tbody tr:has(.rank-2) > td{ box-shadow: inset 0 1px 0 oklch(100% 0 0 / .42), inset 0 -1px 1px oklch(0% 0 0 / .12); } tbody tr:has(.rank-3) > td{ box-shadow: inset 0 1px 0 oklch(100% 0 0 / .3), inset 0 -1px 0 oklch(0% 0 0 / .1); } /* No escuro a luz branca do claro vira um risco: os alfas caem e a sombra compensa. */ html[data-theme="dark"] tbody tr:has(.rank-1) > td{ box-shadow:inset 0 1px 0 oklch(100% 0 0 / .14), inset 0 -2px 3px oklch(0% 0 0 / .34); } html[data-theme="dark"] tbody tr:has(.rank-2) > td{ box-shadow:inset 0 1px 0 oklch(100% 0 0 / .1), inset 0 -1px 2px oklch(0% 0 0 / .26); } html[data-theme="dark"] tbody tr:has(.rank-3) > td{ box-shadow:inset 0 1px 0 oklch(100% 0 0 / .07), inset 0 -1px 0 oklch(0% 0 0 / .2); } tbody tr:hover > td{ box-shadow: inset 0 1px 0 color-mix(in oklch, var(--accent) 30%, transparent), inset 0 -1px 0 oklch(0% 0 0 / .22); } /* As linhas já coloridas (ganhando/perdendo exp) têm significado próprio: o relevo usa a cor DELAS, senão o ciano do acento apagaria o verde/âmbar que informa a tendência. */ tbody tr.row-gaining:hover > td{ box-shadow:inset 0 1px 0 color-mix(in oklch, var(--online) 34%, transparent), inset 0 -1px 0 oklch(0% 0 0 / .22); } tbody tr.row-slowing:hover > td{ box-shadow:inset 0 1px 0 color-mix(in oklch, var(--warn) 34%, transparent), inset 0 -1px 0 oklch(0% 0 0 / .22); } /* A transição já existente na linha (.1s) cobre o fundo; a das células precisa da própria, senão o relevo aparece de estalo enquanto a cor entra suave. */ tbody tr > td{ transition:box-shadow .1s ease; } @media (prefers-reduced-motion: reduce){ tbody tr > td{ transition:none; } } tbody tr.row-gaining{ background:var(--online-soft); box-shadow:inset 2px 0 0 var(--online); } tbody tr.row-gaining:hover{ background:var(--online-soft); box-shadow:inset 2px 0 0 var(--online); filter:brightness(1.06); } tbody tr.row-slowing{ background:var(--warn-soft); box-shadow:inset 2px 0 0 var(--warn); } tbody tr.row-slowing:hover{ background:var(--warn-soft); box-shadow:inset 2px 0 0 var(--warn); filter:brightness(1.06); } .gain-badge{ display:inline-flex; align-items:center; gap:.2rem; color:var(--online); font-family:var(--font-mono); font-weight:700; font-size:.72rem; margin-left:.35rem; } .gain-badge.slowing{ color:var(--warn); } .col-status{ width:1.6rem; } .status-dot{ width:.55rem; height:.55rem; border-radius:50%; display:inline-block; } .status-dot.online{ background:var(--online); box-shadow:0 0 0 3px var(--online-soft), 0 0 8px var(--online); } .status-dot.offline{ background:var(--offline); opacity:.45; } /* Estado ainda não medido (linha instantânea de guilda recém-selecionada): anel vazio, nem verde nem cinza — não afirmar online/offline que ninguém mediu. */ .status-dot.unknown{ background:transparent; border:2px dashed var(--offline); opacity:.6; } .name-link{ color:var(--text); text-decoration:none; font-weight:600; } .name-link:hover{ color:var(--accent-strong); text-decoration:underline; } /* ── relevo das pastilhas (o maior conjunto chapado que sobrou) ── MEDIDO em 12/08 varrendo 12 páginas atrás de tudo que tem cara de peça (fundo ou borda própria) e está sem sombra nenhuma: `.pill` 251, `.voc-pill` 197 e `.guild-tag` 119 — **567 pastilhas** cravadas nas tabelas e nas fichas, todas planas, enquanto chip, medalha, aba e botão ao redor já tinham volume. Os valores são deliberadamente menores que os do chip: a peça tem ~19 px de altura e 1 px de sombra aqui pesa o mesmo que 2 px num cartão. */ .pill, .voc-pill, .guild-tag{ box-shadow: inset 0 1px 0 oklch(100% 0 0 / .45), 0 1px 1px oklch(38% .06 250 / .18); } html[data-theme="dark"] .pill, html[data-theme="dark"] .voc-pill, html[data-theme="dark"] .guild-tag{ box-shadow: inset 0 1px 0 oklch(100% 0 0 / .07), 0 1px 2px oklch(0% 0 0 / .35); } .pill{ display:inline-block; font-family:var(--font-mono); font-size:.68rem; padding:.12rem .5rem; border-radius:var(--r-pill); background:var(--surface-2); color:var(--muted); border:1px solid var(--border); } /* Barra de progresso das varreduras. Cor de acento (não semântica): estar no meio de uma volta é o estado NORMAL. */ .scan-progress-row{ margin-bottom:.9rem; } .scan-progress-row:last-child{ margin-bottom:0; } /* Relevo na regra agrupada das barras (a que começa em `.ha-barra`). */ .scan-bar{ height:5px; border-radius:var(--r-pill); background:var(--surface-3); overflow:hidden; margin:.35rem 0 .2rem; } .scan-bar-fill{ display:block; height:100%; background:var(--bar-grad); transition:width .4s ease; } .guild-stats{ font-family:var(--font-mono); font-size:.72rem; color:var(--accent); } /* Rankings no celular: Mundo (3ª coluna) e Vocação (4ª) saem, e o par volta embaixo do nome pelo .rk-so-mobile. É a troca que o span sempre quis fazer e nunca pôde, porque esta regra não existia — o span só duplicava as colunas no desktop. O que ela compra, MEDIDO a 375px: a coluna VALOR — o número pelo qual o ranking está ordenado, a razão da página — começava no pixel 556, fora da tela, com 457px de rolagem lateral; passa a começar no 340, dentro da tela, com 241px de rolagem. Não é "cabe inteiro": o número ainda termina fora e ainda se rola um pouco. Fazer caber de verdade exigiria apertar fonte e padding da tabela (testado: chega a 507px de largura, ainda não cabe) ou cortar mais uma coluna — outra decisão, não esta. O min-width:0 é o que faz a troca valer: sem ele as colunas somem e a tabela continua esticada nos 800px do padrão, com o VALOR no mesmo lugar de antes. As linhas de estado vazio não são atingidas: elas têm um só, que é sempre :nth-child(1). */ @media (max-width:720px){ #rk-table{ min-width:0; } #rk-table th:nth-child(3), #rk-table td:nth-child(3), #rk-table th:nth-child(4), #rk-table td:nth-child(4){ display:none; } .rk-so-mobile{ display:block; margin-top:.2rem; font-size:.72rem; color:var(--muted); } .rk-so-mobile a{ color:var(--muted); } } /* ═══ home ═══ */ .hero{ padding:3.2rem 1.8rem 1rem; position:relative; } .hero-title{ font-family:var(--font-display); font-size:clamp(2.2rem, 4.6vw, 3.7rem); font-weight:700; line-height:1.02; margin:0 0 .7rem; letter-spacing:-.015em; /* background-IMAGE, não o atalho `background`: o atalho reseta o background-clip pro valor inicial e o título deixaria de ser texto recortado, virando uma barra sólida. O gradiente por tema existe porque a versão clara precisa vir do lado ESCURO do acento pra passar no contraste. */ background-image:var(--hero-grad); -webkit-background-clip:text; background-clip:text; color:transparent; /* MEDIDO em 12/08: o título de cada página tem ~59 px e peso 700 — é o maior elemento tipográfico do site — e estava com `text-shadow: none`, letras chapadas coladas no papel. Aqui elas se levantam: uma sombra curta de contato e uma difusa de projeção. É `filter: drop-shadow` e NÃO `text-shadow` por causa do `background-clip:text` logo acima: com o fill transparente, a sombra de texto depende de o motor pintá-la atrás de um glifo que tecnicamente não tem cor, o que varia entre navegadores. O drop-shadow age sobre o que foi REALMENTE rasterizado — o gradiente recortado nas letras — e por isso acompanha a forma delas em qualquer motor. A medida vai em `em`, não em px: o título é `clamp(2.2rem, 4.6vw, 3.7rem)` e MEDIDO a 375 px ele cai de 58,9 px para 35,2 px. Com 3 px fixos a sombra saltava de 5,1% para 8,5% da altura da letra — proporcionalmente 67% mais pesada justo no tamanho em que ela mais borra. Em `em` a proporção fica a mesma em qualquer tela, sem precisar de media query. */ filter: drop-shadow(0 .017em 0 oklch(100% 0 0 / .5)) drop-shadow(0 .034em .051em oklch(38% .06 250 / .35)); } /* No escuro o fio de luz de cima seria um halo branco em volta da letra: some com ele e a sombra desce mais, porque o contraste contra fundo escuro pede mais profundidade. */ html[data-theme="dark"] .hero-title{ filter:drop-shadow(0 .051em .085em oklch(0% 0 0 / .55)); } /* O EMOJI DO TÍTULO FICA FORA DO RECORTE. `background-clip:text` + `color:transparent` acima recortam o gradiente na forma de TUDO que é texto — e um emoji é texto. Resultado: o 🏆 do Rankings, o ⚔️ do Comparar e os outros 17 saíam pintados de ciano chapado, sem a cor própria deles. Não era o emoji "não carregando": ele estava lá, vestido com o gradiente do título. `-webkit-text-fill-color` é o que decide isso (é ele que `color:transparent` acaba definindo); devolvê-lo ao valor inicial faz o glifo voltar a se pintar sozinho. O gradiente segue recortado atrás dele, e o emoji, opaco, o cobre. */ .hero-title .hero-emoji{ -webkit-text-fill-color:initial; color:initial; /* O drop-shadow do título é do elemento inteiro e cairia sobre o emoji também, engrossando-o. Aqui ele não faz falta: o emoji já tem forma e cor próprias. */ filter:none; } .hero-sub{ color:var(--muted); margin:0; max-width:58ch; font-size:1.02rem; line-height:1.6; } /* Badge de coleta. Nasce neutro; só pulsa quando home.js confirma coleta recente — um ponto verde piscando sobre dado velho seria afirmação falsa. */ .live-badge{ display:inline-flex; align-items:center; gap:.5rem; margin-bottom:.9rem; padding:.28rem .75rem .28rem .6rem; border-radius:var(--r-pill); border:1px solid var(--border); background:var(--surface-2); font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .live-badge[hidden]{ display:none; } .live-dot{ width:.45rem; height:.45rem; border-radius:50%; background:var(--muted); flex:0 0 auto; } .live-badge.live-on{ color:var(--online); border-color:color-mix(in oklch, var(--online) 45%, transparent); } .live-badge.live-on .live-dot{ background:var(--online); animation:live-pulse 2s ease-in-out infinite; } @keyframes live-pulse{ 0%,100%{ box-shadow:0 0 0 0 var(--online-soft); } 50%{ box-shadow:0 0 0 5px transparent; } } @media (prefers-reduced-motion: reduce){ .live-badge.live-on .live-dot{ animation:none; box-shadow:0 0 0 3px var(--online-soft); } } /* Busca em destaque. position:relative porque é o container do autocomplete. */ .hero-search{ position:relative; display:flex; gap:.5rem; margin:1.4rem 0 0; max-width:34rem; } .hero-search input{ flex:1 1 auto; min-width:0; padding:.72rem .95rem; border-radius:var(--r-md); border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text); font-size:.95rem; font-family:var(--font-body); } .hero-search button{ flex:0 0 auto; padding:.72rem 1.4rem; font-size:.78rem; } /* min() e não 22rem fixo: a 375px o campo tem ~317px e uma lista de 352px estouraria a lateral só ao abrir — overflow que passa despercebido numa conferência com a lista fechada. */ .hero-search .global-search-results{ top:calc(100% + .35rem); left:0; right:auto; min-width:min(22rem, 100%); max-width:100%; } .stats-strip{ display:flex; flex-wrap:wrap; gap:2.2rem; margin-top:1.6rem; } .stats-strip[hidden]{ display:none; } .stat-item{ display:flex; flex-direction:column; gap:.15rem; position:relative; padding-left:.85rem; } .stat-item::before{ content:""; position:absolute; left:0; top:.15rem; bottom:.15rem; width:2px; background:linear-gradient(180deg, var(--accent), transparent); } .stat-value{ font-size:1.45rem; font-weight:700; color:var(--text); line-height:1.1; letter-spacing:-.02em; } .stat-label{ font-family:var(--font-mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); } /* Idade do dado, abaixo do rótulo. Só "Online agora" usa — é o único KPI da home que muda por minuto e que a resposta cacheada pode envelhecer. Sem caixa alta nem espaçamento de rótulo: é uma ressalva, não um título, e não deve competir com o número. */ .stat-nota{ display:block; font-size:.6rem; color:var(--muted); opacity:.75; margin-top:.15rem; } .home-cards{ display:grid; gap:.8rem; padding:1.8rem 1.8rem .4rem; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); } /* MEDIDO em 12/08 na HOME, que é a primeira tela que qualquer visitante vê: os 17 cartões estavam com `box-shadow: none` em repouso — mais planos que os painéis das páginas internas, que já usam `--shadow-card` + `--panel-inset`. Todo o volume deles (giro, camadas em translateZ, luz seguindo o ponteiro) mora sob `html.tem-3d`, que só entra com mouse fino E sem `prefers-reduced-motion`. Ou seja: no celular e para quem pediu menos movimento, a vitrine do site era um retângulo vazio. As mesmas variáveis do resto do site entram aqui como base ESTÁTICA — profundidade para todo mundo; o giro continua exclusivo do tem-3d, logo abaixo. */ .home-card{ display:flex; flex-direction:column; gap:.35rem; padding:1.1rem 1.2rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); text-decoration:none; position:relative; overflow:hidden; transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease; box-shadow:var(--shadow-card), var(--panel-inset); } /* Filete que acende no hover — em vez de mover o cartão inteiro pra longe. */ .home-card::after{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--icon-tint, var(--accent)); opacity:0; transition:opacity .18s ease; } /* O `--panel-inset` continua no hover: sem ele o cartão PERDIA o fio de luz da aresta de cima justo quando sobe — subir e achatar ao mesmo tempo é a leitura errada. */ .home-card:hover{ border-color:color-mix(in oklch, var(--icon-tint, var(--accent)) 55%, var(--border)); transform:translateY(-2px); box-shadow:var(--shadow-soft), var(--panel-inset); } .home-card:hover::after{ opacity:.9; } /* ── volume nos cartões ── Só entra quando o JS confirma que há mouse fino e que a pessoa não pediu menos movimento (html.tem-3d). Sem a classe, tudo abaixo é ignorado e o cartão continua exatamente como era — a versão plana não depende de nada disto. A perspectiva mora no CONTAINER, não no cartão: assim todos os cartões da grade compartilham o mesmo ponto de fuga e a fileira parece um plano só, em vez de oito caixas cada uma com a sua própria câmera. */ /* O ponto de fuga acompanha o ponteiro (shared.js escreve --fuga-x/--fuga-y). Os valores padrão são os antigos, fixos: se o JS não rodar, a cena volta a ser vista do centro, exatamente como antes. `transition` para a câmera não saltar entre um cartão e outro quando o ponteiro cruza o vão da grade. */ .tem-3d .home-cards{ /* ── a perspectiva acompanha a LARGURA DA TELA, e não um valor fixo ── MEDIDO em 30/08, com os números que o próprio navegador do operador reportou (tela 2560x1080, Chrome 152, GPU ligada): o ícone do primeiro cartão saía 25,6 px para fora do cartão. A conta bate exata: a camada voa `translateZ(26px)` e a perspectiva a projeta para longe do ponto de fuga na proporção `distância × z / (P − z)`. Com o ponto de fuga a 970 px do ícone e P=1000, isso dá 25,9 px — contra um padding de 19,2 px. O ícone não tem como ficar dentro. Em 4 colunas o efeito é lateral: os cartões da COLUNA 1 ficam ~1226 px do ponto de fuga e deslocam ~33 px para a esquerda, enquanto os do meio quase não se movem. Era isso que aparecia na tela: só a primeira coluna com o ícone montado na borda. `perspective` fixo não tem como funcionar aqui, porque a distância cresce junto com o monitor e o padding não. Em `vw` os dois lados da fração crescem juntos e o deslocamento fica constante em ~10 px, em qualquer tela — folgado dentro dos 19,2 px. O relevo fica mais suave, e isso é ganho: o comentário do shared.js já registrava que com paralaxe forte "os cartões da ponta parecem tombar". NÃO reproduzia no meu navegador: sem GPU, o Chrome não aplica essa projeção nem ao desenho nem ao getBoundingClientRect. Os valores vieram da máquina do operador. */ perspective:200vw; perspective-origin:var(--fuga-x, 50%) var(--fuga-y, 40%); transition:perspective-origin .25s ease; } .tem-3d .home-card{ /* ── por que o overflow volta a `visible` aqui ── `overflow` diferente de `visible` é "grouping property": força `transform-style: flat` e vence o `preserve-3d` da linha de baixo. MEDIDO em 13/08: as três camadas deste cartão — ícone, título e descrição — mediam **0,00%** de escala com `translateZ`; com `overflow:visible`, o ícone vai a 2,67%. As camadas estavam escritas desde que o cartão ganhou 3D e NUNCA existiram na tela. Somado ao giro que também não acontecia (corrigido no ciclo 50), o cartão-assinatura do sistema estava inteiramente inerte: só a luz e a sombra, que vêm de `box-shadow`, funcionavam. O `overflow:hidden` da regra base FICA — ele tem uma função real, que é fazer o filete do `::after` seguir a curva do cartão. Quem paga essa conta aqui é o próprio filete, na regra logo abaixo. */ overflow:visible; transform-style:preserve-3d; transition:border-color .18s ease, box-shadow .18s ease, transform .25s cubic-bezier(.22,.61,.36,1); } /* `will-change` só ENQUANTO O PONTEIRO ESTÁ NA GRADE, e não o tempo todo. Ele existe para promover o cartão a camada própria antes do primeiro giro, senão o movimento engasga enquanto a textura é criada — isso continua valendo. O que muda é o escopo: aplicado na regra do cartão, ele mantinha os DEZESSETE cartões da home promovidos a camadas de composição permanentes, mesmo com o ponteiro do outro lado da tela ou o site parado numa aba de fundo. Isso é o que a própria spec desaconselha, e o comentário do body::after (lá em cima, perto da linha 239) já registra a regra: "will-change não fica em elemento que não vai animar". Camada promovida é também onde aparecem artefatos de pintura que dependem de GPU e driver — o tipo de defeito que aparece na máquina de uma pessoa e não na de outra. `:hover` na GRADE dispara antes do `:hover` do cartão (o ponteiro cruza o vão primeiro), então a promoção continua acontecendo antes do giro começar. Fora da grade, zero camadas extras. */ .tem-3d .home-cards:hover .home-card{ will-change:transform; } .tem-3d .home-card:hover{ /* As variáveis vêm do ponteiro (shared.js) e caem para 0 quando ele sai, então esta mesma regra serve para inclinar e para voltar ao plano. O translateY continua: é a elevação que diz "isto é clicável", o giro só acrescenta o relevo. O `!important` foi acrescentado em 13/08 porque este giro NUNCA ACONTECEU: o `.home-card` está na lista da animação `surgir`, que também anima `transform`, e animação vence regra normal na cascata. O efeito-assinatura do sistema 3D esteve morto desde que foi escrito, e ninguém viu porque a luz e a elevação (que vêm de `box-shadow`, não de `transform`) continuavam funcionando — o cartão reagia ao ponteiro, só não girava. Achado pelo guardião, não a olho: ao generalizar a verificação para cruzar "quem roda a surgir" com "quem gira no hover", o `.home-card` apareceu sozinho na lista. */ } .tem-giro .home-card:hover{ transform:translateY(-2px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) !important; } /* Conteúdo à frente do fundo do cartão. É o que separa relevo de imagem torta: sem a profundidade entre as camadas, girar um retângulo plano só entorta o retângulo. */ /* O filete do topo perdeu o clip do cartão junto com o `overflow`, e sem ele iria até as bordas retas — aparecendo por cima da área onde o cartão já curvou. Recuá-lo pelo raio o mantém dentro da faixa reta. MEDIDO: a curva de 8 px já comia até 8,0 px de cada ponta do filete no topo dele (e 2,7 px na base), então o recuo aqui devolve quase o mesmo desenho — a diferença fica abaixo de 6 px numa peça de 2 px de altura. */ .tem-3d .home-card::after{ left:var(--r-lg); right:var(--r-lg); } .tem-3d .home-card-icon{ transform:translateZ(26px); } .tem-3d .home-card-title{ transform:translateZ(16px); } .tem-3d .home-card-desc{ transform:translateZ(8px); } /* Brilho que segue o ponteiro, como luz batendo na face inclinada. Fica atrás do texto (z-index/ordem) e não intercepta clique. */ /* Mesma correção de luminância do painel (ciclo anterior), mas aqui a cor NÃO pode virar `--luz-cor`: cada cartão tem a sua (`--icon-tint`), e essa identidade é o ponto. Então o clareamento entra por fora — a tinta do cartão é misturada com branco na proporção `--luz-branco`, que é 85% no claro e 0% no escuro. MEDIDO antes: no claro o desvio era **-10,4 pontos** (pior que os -4,7 dos painéis, porque o alfa aqui é 22%): os 17 cartões da home ESCURECIAM ao receber o ponteiro. */ .tem-3d .home-card::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .2s ease; background:radial-gradient(circle at var(--luz-x, 50%) var(--luz-y, 50%), color-mix(in oklch, color-mix(in oklch, oklch(100% 0 0) var(--luz-branco, 0%), var(--icon-tint, var(--accent))) var(--luz-alfa-card, 22%), transparent), transparent 60%); } .tem-3d .home-card:hover::before{ opacity:1; } /* Cinto de segurança: se o navegador respeitar a preferência mas o JS não tiver rodado (falha de script, cache velho), o CSS ainda desliga o efeito por conta própria. */ @media (prefers-reduced-motion: reduce){ /* `!important` aqui é consequência direta do `!important` no giro: uma regra normal não desliga uma que tem `!important`, nem estando dentro de uma media query. Sem isto, acrescentar a marca lá em cima teria entregado o giro justamente a quem pediu para não vê-lo. */ /* Só o giro sai; as camadas em translateZ ficam (ver o bloco do .summary, linha ~476). */ .tem-3d .home-card, .tem-3d .home-card:hover{ transform:none !important; transition:none; } } .home-card-title{ font-family:var(--font-display); color:var(--text); font-size:1.02rem; font-weight:600; letter-spacing:.01em; } .home-card-desc{ color:var(--muted); font-size:.83rem; line-height:1.5; } /* Os emoji do HTML são dessaturados e recolocados numa pastilha tingida pelo --icon-tint de cada cartão: continuam legíveis como ícone, mas param de brigar com a paleta fria. */ .home-card-icon{ display:inline-flex; align-items:center; justify-content:center; width:2.3rem; height:2.3rem; border-radius:var(--r-md); font-size:1.1rem; margin-bottom:.5rem; background:color-mix(in oklch, var(--icon-tint, var(--accent)) 14%, transparent); border:1px solid color-mix(in oklch, var(--icon-tint, var(--accent)) 32%, transparent); filter:saturate(.25) contrast(1.05); } .home-card:hover .home-card-icon{ filter:saturate(.75); } @media (min-width: 64rem){ .home-cards{ grid-template-columns:repeat(4, 1fr); } .home-card:first-child{ grid-column:span 2; padding:1.5rem 1.6rem; justify-content:space-between; background:linear-gradient(150deg, var(--accent-soft), var(--surface) 70%); border-color:var(--border-strong); } .home-card:first-child .home-card-title{ font-size:1.45rem; } .home-card:first-child .home-card-icon{ width:2.8rem; height:2.8rem; font-size:1.4rem; } } .home-grid{ display:grid; gap:1rem; padding:0 1.8rem 3rem; grid-template-columns:repeat(auto-fit, minmax(20rem, 1fr)); } .home-news-section{ padding:0 1.8rem 1.2rem; } /* 5 notícias empilhadas em largura total viraria uma parede de texto; auto-fit devolve pra 1 coluna no mobile. */ .home-news-section #home-news{ display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit, minmax(19rem, 1fr)); } /* ── calendário de eventos ── */ .ev-titulo{ text-transform:capitalize; min-width:12ch; text-align:center; } .ev-destaque{ border-left:3px solid var(--accent); text-align:left; } .ev-destaque-nome{ font-size:1.05rem; line-height:1.25; } .ev-destaque-desc{ margin:.4rem 0 0; } .ev-item{ padding:.85rem 0; border-bottom:1px solid var(--border); } .ev-item:last-child{ border-bottom:none; } /* O que está valendo agora recebe o mesmo tratamento do resto do site para "ativo": filete de acento à esquerda, sem gritar. */ .ev-item-ativo{ border-left:3px solid var(--accent); padding-left:.8rem; background:var(--accent-soft); } .ev-cab{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; } .ev-cor{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; box-shadow:inset 0 0 0 1px oklch(0% 0 0 / .25); } .ev-nome{ font-size:.98rem; } .ev-selo{ font-family:var(--font-mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; padding:.1rem .5rem; border-radius:var(--r-pill); background:var(--surface-2, var(--surface)); color:var(--muted); border:1px solid var(--border); } .ev-selo-ativo{ background:var(--accent-soft); color:var(--accent); border-color:transparent; font-weight:700; } /* Distingue os homônimos (três "Castle" no mesmo mês, um por tipo de PVP). Tom neutro: é qualificador do nome, não estado do evento — quem manda no destaque é o selo. */ .ev-qualificador{ font-family:var(--font-mono); font-size:.62rem; font-weight:600; padding:.05rem .4rem; border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--border); color:var(--muted); white-space:nowrap; } .ev-quando{ margin-top:.15rem; } .ev-desc{ margin:.35rem 0 0; font-size:.86rem; line-height:1.55; } /* ── impulsionados do dia: faixa de UMA linha no topo ── Mora dentro do hero. Não é painel: sem moldura pesada, sem título próprio, altura de uma linha de texto. No topo o espaço vertical é o mais caro da página, e isto aqui é uma informação de duas palavras que precisa estar à vista. */ /* A faixa dos impulsionados fica DENTRO do hero, logo abaixo do título que já se levanta do papel — e era a única superfície da região ainda sem volume. Relevo leve, porque ela é uma tira de 41 px e não deve competir com os cartões abaixo. */ .boosted-faixa{ display:flex; align-items:center; flex-wrap:wrap; gap:.45rem .9rem; margin-top:.9rem; padding:.4rem .7rem; border:1px solid var(--border); border-left:2px solid var(--accent); border-radius:var(--r-sm); background:var(--surface); font-size:.8rem; line-height:1.3; box-shadow: inset 0 1px 0 oklch(100% 0 0 / .5), 0 1px 2px oklch(38% .06 250 / .18); } html[data-theme="dark"] .boosted-faixa{ box-shadow: inset 0 1px 0 oklch(100% 0 0 / .06), 0 1px 3px oklch(0% 0 0 / .38); } .boosted-tag{ font-family:var(--font-mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:700; } .boosted-item{ display:inline-flex; align-items:center; gap:.4rem; min-width:0; } /* 26px: a altura de uma linha de texto. A figura acompanha o texto em vez de mandar na altura da faixa. `pixelated` porque o sprite é arte de pixel — suavizar vira borrão. MEDIDO em 13/08: a faixa tinha 2 camadas de sombra e os sprites dentro dela, `filter: none` — relevo no contêiner e nada dentro, a mesma incoerência que a página de status tinha. E é justo aqui que dói: o boss e a criatura do dia são o que o site de referência põe no alto da página dele, com figura de cada um. O `drop-shadow` (e não `box-shadow`) porque a sombra tem que seguir o CONTORNO do sprite, não a caixa dele — um monstro recortado com sombra retangular fica colado num cartão invisível. Mesmos valores do `.charm-icon`, que resolveu este caso primeiro. */ .boosted-fig{ width:26px; height:26px; object-fit:contain; image-rendering:pixelated; flex:0 0 auto; filter:drop-shadow(0 1px 1px oklch(0% 0 0 / .38)); } html[data-theme="dark"] .boosted-fig{ filter:drop-shadow(0 1px 1.5px oklch(0% 0 0 / .6)); } .boosted-rotulo{ font-family:var(--font-mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); font-weight:700; } .boosted-nome{ font-weight:600; overflow-wrap:anywhere; } /* No celular a etiqueta "IMPULSIONADOS DE HOJE" consumia uma linha inteira só para rotular — medido: 74 px em duas linhas contra 41 px no desktop. Os rótulos "Boss" e "Criatura" já dizem o que cada coisa é, então a etiqueta sai e a faixa volta a caber em uma linha. */ @media (max-width:560px){ .boosted-tag{ display:none; } .boosted-faixa{ gap:.35rem .7rem; font-size:.75rem; } .boosted-fig{ width:22px; height:22px; } } .news-item{ padding:.7rem 0; border-bottom:1px solid var(--border); } .news-item:last-child{ border-bottom:none; } /* MEDIDO em 12/08 na HOME: estes 5 cartões (379×184) estavam com `box-shadow: none` ao lado dos 17 `.home-card`, que ganharam 3 camadas no ciclo 23. Mesma página, mesma função de cartão, um com volume e o outro colado no papel. Usa as variáveis do sistema em vez de valores próprios: é o mesmo objeto. */ .home-news-section .news-item{ padding:1rem 1.1rem; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); border-top:2px solid var(--accent); box-shadow:var(--shadow-card), var(--panel-inset); } .news-meta{ display:flex; align-items:center; gap:.5rem; margin-bottom:.3rem; } /* Pastilha de categoria: mesma anatomia (e agora os mesmos valores) das outras pastilhas do site. Era a única do sistema ainda chapada. */ .news-cat{ font-family:var(--font-mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; padding:.1rem .5rem; border:none; background:var(--accent-soft); color:var(--accent); border-radius:var(--r-pill); font-weight:700; box-shadow: inset 0 1px 0 oklch(100% 0 0 / .45), 0 1px 1px oklch(38% .06 250 / .18); } html[data-theme="dark"] .news-cat{ box-shadow: inset 0 1px 0 oklch(100% 0 0 / .07), 0 1px 2px oklch(0% 0 0 / .35); } .news-text{ margin:0; font-size:.86rem; line-height:1.55; } /* Aviso de cobertura parcial: visível, mas não alarmante — é estado normal enquanto a coleta percorre o diretório. */ .coverage-note{ margin:0; padding:0 1.8rem 1rem; font-size:.8rem; color:var(--muted); max-width:80ch; } .coverage-note.partial{ color:var(--warn); } /* ═══ perfil de guilda ═══ */ .guild-head{ padding:1.6rem 1.8rem .2rem; } .guild-title{ font-family:var(--font-display); color:var(--text); margin:0 0 .3rem; font-size:1.8rem; font-weight:700; letter-spacing:-.01em; } /* pre-wrap preserva as quebras que os jogadores escrevem, sem interpretar HTML de terceiro. */ .guild-desc{ white-space:pre-wrap; max-width:60ch; color:var(--muted); font-size:.86rem; margin:.6rem 0 0; } .online-pill{ background:var(--online-soft); color:var(--online); border-color:color-mix(in oklch, var(--online) 35%, transparent); } /* ═══ perfil de mundo ═══ */ .world-switch{ display:inline-flex; align-items:center; gap:.5rem; margin-top:.7rem; } .world-switch select{ font-size:.85rem; } .world-hero{ padding-bottom:1rem; } .w-killer{ color:var(--offline); font-weight:600; margin-left:.5rem; } /* Texto e valor dividem a primeira linha; a barra de força relativa fica num traço fino embaixo — assim um valor de 12 dígitos não empurra nada. */ .w-row{ padding:.4rem 0; border-bottom:1px solid color-mix(in oklch, var(--border) 40%, transparent); } .w-row:last-child{ border-bottom:none; } .w-row-top{ display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; } .w-row-label{ min-width:0; font-size:.82rem; } .w-row-label .muted{ display:block; font-size:.7rem; } .w-row-value{ flex:0 0 auto; font-weight:600; font-size:.8rem; white-space:nowrap; } /* Relevo na regra agrupada das barras (a que começa em `.ha-barra`), inclusive a calibragem própria dos 3 px de altura. */ .w-bar{ display:block; height:3px; margin-top:.35rem; border-radius:var(--r-pill); background:color-mix(in oklch, var(--border) 45%, transparent); } .w-bar-fill{ display:block; height:100%; border-radius:var(--r-pill); background:var(--bar-grad); } /* Herda a cor do contexto: o sublinhado pontilhado é que sinaliza o clique, sem transformar a coluna inteira num campo de links azuis. */ a.world-link{ color:inherit; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:2px; text-decoration-color:color-mix(in oklch, currentColor 45%, transparent); } a.world-link:hover, a.world-link:focus-visible{ color:var(--accent); text-decoration-style:solid; } .guild-tag{ display:inline-block; margin-left:.4rem; font-family:var(--font-mono); font-size:.64rem; padding:.08rem .45rem; border-radius:var(--r-pill); background:var(--accent-soft); color:var(--accent); vertical-align:middle; white-space:nowrap; } a.guild-tag{ text-decoration:none; } a.guild-tag:hover, a.guild-tag:focus-visible{ background:var(--accent); color:var(--on-accent); } /* Guilda rastreada continua distinguível agora que todas aparecem no ranking. */ /* O contorno de "rastreada" SOMA com o relevo em vez de substituí-lo: esta regra tem especificidade maior que a das pastilhas, então sem repetir as duas camadas aqui a guilda rastreada seria a única etiqueta plana da lista. */ a.guild-tag-tracked{ font-weight:700; box-shadow: inset 0 0 0 1px var(--accent), inset 0 1px 0 oklch(100% 0 0 / .45), 0 1px 1px oklch(38% .06 250 / .18); } html[data-theme="dark"] a.guild-tag-tracked{ box-shadow: inset 0 0 0 1px var(--accent), inset 0 1px 0 oklch(100% 0 0 / .07), 0 1px 2px oklch(0% 0 0 / .35); } .check-inline{ display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; color:var(--muted); white-space:nowrap; cursor:pointer; } .check-inline input{ cursor:pointer; } .voc-pill{ display:inline-block; font-family:var(--font-mono); font-size:.66rem; font-weight:500; padding:.12rem .5rem; border-radius:var(--r-pill); white-space:nowrap; background:color-mix(in oklch, var(--voc-color, var(--muted)) 14%, transparent); color:var(--voc-color, var(--muted)); border:1px solid color-mix(in oklch, var(--voc-color, var(--muted)) 38%, transparent); } .voc-pill.voc-knight{ --voc-color:var(--voc-knight); } .voc-pill.voc-paladin{ --voc-color:var(--voc-paladin); } .voc-pill.voc-druid{ --voc-color:var(--voc-druid); } .voc-pill.voc-sorcerer{ --voc-color:var(--voc-sorcerer); } .voc-pill.voc-monk{ --voc-color:var(--voc-monk); } .voc-pill.voc-none{ --voc-color:var(--voc-none); } .exp-value{ color:var(--accent-strong); font-weight:600; } .delta-pos{ color:var(--online); font-weight:600; } .delta-neg{ color:var(--offline); font-weight:600; } .muted{ color:var(--muted); } .empty{ text-align:center; color:var(--muted); padding:2rem 0; } #clear-filters{ border:1px solid var(--border); background:var(--surface-2); color:var(--accent-strong); border-radius:var(--r-md); padding:.35rem .8rem; font-size:.76rem; cursor:pointer; margin-left:.5rem; transition:border-color .15s ease; } #clear-filters:hover{ border-color:var(--accent); } @keyframes skeleton-pulse{ 0%,100%{ opacity:.45; } 50%{ opacity:.9; } } .skeleton-line{ height:.7rem; border-radius:var(--r-sm); background:var(--surface-3); animation:skeleton-pulse 1.4s ease-in-out infinite; margin:.35rem 0; } .skeleton-line.short{ width:45%; height:.6rem; } .card.skeleton .skeleton-line:last-child{ width:70%; height:1.3rem; } .compare-card.skeleton .skeleton-line{ width:100%; } .loading-row td{ text-align:center; color:var(--muted); padding:1.5rem 0; } @media (prefers-reduced-motion: reduce){ .skeleton-line{ animation:none; } } /* ═══ login: botão + modal ═══ */ .auth-button{ border:1px solid var(--border); background:var(--surface-2); border-radius:var(--r-md); padding:0 .8rem; height:2.15rem; font-size:.8rem; font-weight:600; color:var(--text); cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease; white-space:nowrap; font-family:var(--font-body); } /* O hover deste botão está junto com o do .theme-toggle, lá no bloco da barra superior: os dois são a mesma tecla e vinham repetindo o halo em dois lugares do arquivo. */ .auth-button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .login-required{ color:var(--muted); font-size:.82rem; margin:.5rem 0 0; } .link-button{ border:none; background:none; padding:0; color:var(--accent-strong); font-weight:600; cursor:pointer; text-decoration:underline; font-size:inherit; font-family:inherit; } .link-button:hover{ color:var(--accent); } .link-button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .login-overlay{ position:fixed; inset:0; background:oklch(10% .02 258 / .62); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:50; padding:1rem; } .login-overlay[hidden]{ display:none; } /* O modal é a peça que PAIRA MAIS ALTO do site (dentro do overlay z50), e era a última ainda com a sombra de uma camada só. `--shadow-flutuante` já traz o bisel, então o `--panel-inset` sai daqui — sem isso, a mesma aresta seria desenhada duas vezes. */ .login-modal{ background:var(--card-gradient); border:1px solid var(--border-strong); border-radius:var(--r-lg); padding:1.5rem 1.6rem; width:min(340px, 100%); box-shadow:var(--shadow-flutuante); } .login-modal h2{ font-size:1.05rem; margin:0 0 1rem; text-transform:uppercase; letter-spacing:.1em; } .login-modal label{ display:block; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:.8rem 0 .3rem; } .login-modal input[type="text"], .login-modal input[type="password"]{ width:100%; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:.5rem .7rem; color:var(--text); font-size:.85rem; box-sizing:border-box; } .login-remember{ display:flex !important; align-items:center; gap:.4rem; font-size:.8rem !important; margin-top:.8rem !important; color:var(--text) !important; text-transform:none !important; letter-spacing:0 !important; font-family:var(--font-body) !important; } .login-remember input{ width:auto; } .login-error{ color:var(--offline); font-size:.82rem; margin:.7rem 0 0; } .login-actions{ display:flex; justify-content:flex-end; gap:.5rem; margin-top:1.2rem; } .login-actions button{ border-radius:var(--r-md); padding:.5rem 1.1rem; font-size:.78rem; font-weight:700; cursor:pointer; } #login-cancel{ border:1px solid var(--border); background:var(--surface-2); color:var(--text); } #login-cancel:hover{ border-color:var(--border-strong); } .login-modal *:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } /* Lista de invariantes quebradas (Status). Só aparece quando há problema. */ .integridade-lista{ margin-top:.7rem; display:flex; flex-direction:column; gap:.7rem; } .integridade-item{ display:flex; flex-direction:column; gap:.15rem; padding:.5rem .6rem; border-left:2px solid var(--offline); background:var(--surface-2); border-radius:0 var(--r-md) var(--r-md) 0; } .integridade-item b{ color:var(--offline); font-size:.85rem; } .integridade-exemplos{ font-size:.7rem; color:var(--muted); word-break:break-word; } /* ═══ favoritos ("Meu Vigia") + hovercard ═══ */ .fav-star{ background:none; border:none; cursor:pointer; line-height:1; font-size:1.1rem; color:var(--muted); padding:.1rem .25rem; border-radius:var(--r-sm); transition:color .15s, transform .1s; } .fav-star:hover{ color:var(--accent); transform:scale(1.15); } .fav-star.is-fav{ color:var(--accent); } .fav-star:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .fav-star-profile{ font-size:1.45rem; vertical-align:middle; margin-left:.4rem; } .home-favorites-section{ margin:1rem 0; padding:0 1.8rem; } #home-favorites{ display:grid; gap:.6rem; grid-template-columns:repeat(auto-fill, minmax(17rem, 1fr)); } .fav-row{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-2); padding:.65rem .8rem; } .fav-name{ font-weight:600; } .fav-meta{ flex:1 1 auto; } .fav-status{ display:inline-flex; gap:.5rem; align-items:center; margin-left:auto; } .fav-online{ color:var(--online); font-weight:600; font-size:.82rem; } .fav-offline{ color:var(--muted); font-size:.82rem; } .fav-star-inline{ font-size:.9rem; padding:0 .15rem; vertical-align:middle; } /* MEDIDO em 13/08: este era o último alternador do site sem relevo — `box-shadow: none` nos DOIS estados, e ligado x desligado se distinguia só por cor. Um alternador que não afunda nem levanta é uma tecla pintada. Segue o mesmo desenho do `.baz-toggle`: relevo de tecla na base e, no estado ligado, um anel de acento que SOMA com esse relevo. */ .notif-toggle{ background:var(--surface-2); border:1px solid var(--border); color:var(--text); border-radius:var(--r-md); padding:.28rem .6rem; font-size:.76rem; cursor:pointer; font-family:inherit; transition:border-color .15s, color .15s, box-shadow .15s ease, transform .1s ease; box-shadow: inset 0 1px 0 oklch(100% 0 0 / .4), inset 0 -1px 0 oklch(0% 0 0 / .12), 0 1px 2px oklch(38% .06 250 / .18); } html[data-theme="dark"] .notif-toggle{ box-shadow: inset 0 1px 0 oklch(100% 0 0 / .06), inset 0 -1px 0 oklch(0% 0 0 / .25), 0 1px 2px oklch(0% 0 0 / .35); } .notif-toggle:hover{ border-color:var(--accent); } /* O anel entra SOMANDO ao relevo, não no lugar dele — se substituísse, o estado ligado (justamente o que precisa se destacar) seria o único plano. É a mesma armadilha que o comentário do `.baz-toggle` registra. Aqui o anel é `--online` porque é a cor que este botão já usa para dizer "avisos ligados". */ .notif-toggle.is-on{ border-color:var(--online); color:var(--online); box-shadow: inset 0 0 0 1px var(--online), inset 0 1px 0 oklch(100% 0 0 / .45), 0 1px 2px oklch(38% .06 250 / .2); } html[data-theme="dark"] .notif-toggle.is-on{ box-shadow: inset 0 0 0 1px var(--online), inset 0 1px 0 oklch(100% 0 0 / .1), 0 1px 2px oklch(0% 0 0 / .38); } /* Afunda ao ser apertado, como todas as outras teclas do site. */ .notif-toggle:active{ transform:translateY(1px); box-shadow:inset 0 2px 3px oklch(0% 0 0 / .22); } @media (prefers-reduced-motion: reduce){ .notif-toggle:active{ transform:none; } } .fav-filter-btn{ position:fixed; right:1.1rem; bottom:1.1rem; z-index:50; display:inline-flex; align-items:center; gap:.35rem; background:var(--surface); color:var(--text); border:1px solid var(--border-strong); border-radius:var(--r-pill); padding:.55rem .95rem; font-family:inherit; font-size:.82rem; font-weight:600; /* Este é o único elemento do site que é TECLA e PAIRA ao mesmo tempo (fixo, z50): leva as duas coisas — relevo de tecla nas arestas e sombra de elevação embaixo. Com só a `--shadow-soft` de uma camada ele parecia um adesivo grudado na janela. */ cursor:pointer; box-shadow: inset 0 1px 0 oklch(100% 0 0 / .5), inset 0 -1px 0 oklch(0% 0 0 / .12), 0 2px 4px oklch(38% .06 250 / .22), 0 10px 22px -12px oklch(38% .06 250 / .45); transition:border-color .15s, color .15s, background .15s, box-shadow .15s; } html[data-theme="dark"] .fav-filter-btn{ box-shadow: inset 0 1px 0 oklch(100% 0 0 / .07), inset 0 -1px 0 oklch(0% 0 0 / .28), 0 2px 5px oklch(0% 0 0 / .45), 0 12px 26px -12px oklch(0% 0 0 / .55); } /* Apertar encosta a tecla na superfície: o relevo vira sulco e a elevação some. */ .fav-filter-btn:active{ box-shadow:inset 0 2px 4px oklch(0% 0 0 / .28); } .fav-filter-btn:hover{ border-color:var(--accent); } .fav-filter-btn.is-on{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); } .fav-filter-count{ color:var(--muted); font-weight:400; } /* O display:inline-flex acima sobrepõe o [hidden] do navegador — sem esta regra o botão apareceria em páginas sem tabela de nomes. */ .fav-filter-btn[hidden]{ display:none; } .char-hovercard{ position:absolute; z-index:60; min-width:200px; max-width:280px; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-md); box-shadow:var(--shadow-flutuante); padding:.65rem .8rem; font-size:.84rem; color:var(--text); } .char-hovercard .hc-name{ font-weight:700; font-size:.92rem; margin-bottom:.25rem; display:flex; gap:.4rem; align-items:baseline; flex-wrap:wrap; } .char-hovercard .hc-line{ color:var(--muted); margin:.1rem 0; } .char-hovercard .hc-line strong{ color:var(--text); } .char-hovercard .hc-online{ color:var(--online); font-size:.76rem; font-weight:600; } .char-hovercard .hc-offline{ color:var(--muted); font-size:.76rem; } /* ═══ pulso do servidor ═══ */ .pulse-main{ max-width:1100px; margin:0 auto; padding:0 1rem 2.5rem; } .pulse-totais{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:.8rem; margin:1rem 0 1.5rem; } .pulse-tile{ background:var(--card-gradient); border:1px solid var(--border); border-radius:var(--r-lg); padding:1rem 1.15rem; box-shadow:var(--shadow-card); position:relative; } .pulse-tile::after{ content:""; position:absolute; left:0; top:0; width:2px; height:100%; background:linear-gradient(180deg, var(--accent), transparent 70%); border-radius:var(--r-lg) 0 0 var(--r-lg); } .pulse-tile-value{ font-size:1.8rem; font-weight:700; color:var(--text); line-height:1.1; letter-spacing:-.02em; } .pulse-tile-label{ color:var(--muted); font-size:.8rem; margin-top:.3rem; } /* ── volume nos ladrilhos do pulso ── Mesma estrutura do cartão de resumo (número grande, rótulo embaixo) e mesmo tratamento: o número é o conteúdo, o rótulo é a legenda dele. A luz vai no `::before` porque o `::after` já é a barra de acento da aresta esquerda. E essa barra fica NO PLANO de propósito: é uma marca pintada na superfície do ladrilho, não uma peça pousada sobre ele — mesma leitura que manteve o brasão da carta de guilda sem elevação. De quebra ela mora na borda, que é onde o deslocamento lateral da perspectiva mais castiga. */ .tem-3d .pulse-totais{ perspective:200vw; perspective-origin:var(--fuga-x, 50%) var(--fuga-y, 40%); transition:perspective-origin .25s ease; } .tem-3d .pulse-tile{ transform-style:preserve-3d; will-change:transform; } /* `!important` pelo mesmo motivo medido no cartão de resumo: o `.pulse-tile` está na lista da animação `surgir`, que também anima `transform`, e animação ocupa uma casa mais alta da cascata que regra normal. Sem isto o giro não acontece. */ .tem-3d .pulse-tile:hover{ transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, border-color .25s ease; border-color:color-mix(in oklch, var(--accent) 38%, var(--border)); box-shadow:var(--shadow-soft), var(--panel-inset); } /* `!important` pelo mesmo motivo medido no cartão de resumo: o `.pulse-tile` está na lista da animação `surgir`, que também anima `transform`, e animação ocupa uma casa mais alta da cascata que regra normal. Sem isto o giro não acontece. */ .tem-giro .pulse-tile:hover{ transform:translateY(-2px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) !important; } .tem-3d .pulse-tile-value{ transform:translateZ(20px); } .tem-3d .pulse-tile-label{ transform:translateZ(10px); } .tem-3d .pulse-tile::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; border-radius:inherit; transition:opacity .2s ease; background:radial-gradient(circle at var(--luz-x, 50%) var(--luz-y, 50%), color-mix(in oklch, color-mix(in oklch, oklch(100% 0 0) var(--luz-branco, 0%), var(--accent)) var(--luz-alfa-card, 22%), transparent), transparent 60%); } .tem-3d .pulse-tile:hover::before{ opacity:1; } @media (prefers-reduced-motion: reduce){ /* Só o giro sai; as camadas em translateZ ficam (ver o bloco do .summary, linha ~476). */ .tem-3d .pulse-tile, .tem-3d .pulse-tile:hover{ transform:none !important; transition:none; } } .pulse-nota{ margin:1.4rem 0 0; } /* ═══ entrada suave + estabilidade de layout ═══ */ /* Não re-anima nos polls: estes são CONTAINERS estáticos (só o conteúdo interno é trocado a cada ciclo). */ @keyframes surgir{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } } .panel, .home-card, .pulse-tile, .profile-cards .card{ animation:surgir .28s ease both; } @media (prefers-reduced-motion: reduce){ .panel, .home-card, .pulse-tile, .profile-cards .card{ animation:none; } .home-card{ transition:none; } .home-card:hover{ transform:none; } } #home-exp, #home-levels, #home-guilds, #home-favorites{ min-height:9rem; } /* ═══ estados de rede ═══ */ .state-empty, .state-error{ text-align:center; color:var(--muted); padding:1.5rem 0; } .state-error{ color:var(--offline); } .retry-btn{ display:inline-block; margin-left:.5rem; border:1px solid var(--border); background:var(--surface-2); color:var(--accent-strong); border-radius:var(--r-md); padding:.3rem .75rem; font-size:.76rem; font-weight:700; font-family:inherit; cursor:pointer; transition:border-color .15s ease; } .retry-btn:hover{ border-color:var(--accent); } .retry-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .retry-btn:disabled{ opacity:.6; cursor:progress; } .offline-pill{ position:fixed; left:50%; bottom:1rem; transform:translateX(-50%); z-index:80; background:var(--offline); color:oklch(99% 0 0); border-radius:var(--r-pill); padding:.5rem 1.1rem; font-size:.82rem; font-weight:600; max-width:calc(100vw - 2rem); box-shadow:var(--shadow-flutuante); text-align:center; } .offline-pill[hidden]{ display:none; } @media (prefers-reduced-motion: no-preference){ .offline-pill{ animation:surgir .25s ease both; } } .calc-msg{ color:var(--offline); font-size:.85rem; font-weight:600; margin:.7rem 0 0; } .calc-msg[hidden]{ display:none; } /* Quando a página CONSEGUIU preencher e só está contando o que fez, vermelho de erro seria mentira sobre o que aconteceu. */ .calc-msg.calc-msg-info{ color:var(--muted); font-weight:500; } .calc-field{ position:relative; display:block; } /* ═══ acessibilidade ═══ */ /* z-index 100: é a peça MAIS ALTA do site, acima até dos modais, e era a única sem sombra. Ela literalmente desce de fora da tela para cima de tudo quando quem navega por teclado dá o primeiro Tab — e é o primeiro contato dessa pessoa com a página. Sem elevação, chegava como um retângulo pintado sobre o cabeçalho. */ .skip-link{ position:absolute; top:0; left:0; z-index:100; text-decoration:none; background:var(--accent); color:var(--on-accent); padding:.6rem 1rem; border-radius:0 0 var(--r-md) 0; font-weight:700; font-size:.9rem; transform:translateY(-130%); transition:transform .15s ease; box-shadow: inset 0 1px 0 oklch(100% 0 0 / .28), 0 2px 4px oklch(0% 0 0 / .28), 0 12px 26px -12px oklch(0% 0 0 / .5); } .skip-link:focus{ transform:translateY(0); outline:2px solid var(--text); outline-offset:-2px; } @media (prefers-reduced-motion: reduce){ .skip-link{ transition:none; } } /* Fallback global: qualquer elemento interativo mostra o anel do tema ao navegar por teclado. Regras mais específicas continuam vencendo. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .skip-target:focus{ outline:none; } /* Fica no fluxo (é lido) mas não ocupa espaço visível. clip-path em vez de display:none, que tiraria o texto da árvore de acessibilidade. */ .sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } @keyframes pulse-glow{ 0%{ box-shadow:0 0 0 0 var(--online-soft), 0 0 4px var(--online); } 70%{ box-shadow:0 0 0 6px transparent, 0 0 10px var(--online); } 100%{ box-shadow:0 0 0 0 transparent, 0 0 4px var(--online); } } .status-dot.online, .dot.ok{ animation:pulse-glow 2s infinite; } @media (prefers-reduced-motion: reduce){ .status-dot.online, .dot.ok{ animation:none; } } /* ═══ rodapé ═══ */ /* MEDIDO em 12/08: o rodapé (1265×392, em todas as páginas) é a maior superfície do site e estava com `box-shadow: none`. Aqui ele NÃO se eleva — ao contrário: é o plano de baixo, o fundo onde a página termina. A sombra interna no topo é a que o conteúdo projeta ao se apoiar nele, e isso diz "acabou" melhor que qualquer linha divisória. */ .site-footer{ margin-top:2.5rem; padding:2.4rem 1.8rem 2.8rem; border-top:1px solid var(--border); background:var(--surface-2); position:relative; box-shadow:inset 0 6px 10px -8px oklch(0% 0 0 / .3); } html[data-theme="dark"] .site-footer{ box-shadow:inset 0 8px 14px -10px oklch(0% 0 0 / .6); } .site-footer::before{ content:""; position:absolute; left:0; right:0; top:-1px; height:1px; background:linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent); opacity:.4; } .footer-cols{ display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fit, minmax(11rem, 1fr)); max-width:70rem; } .footer-cols h3{ font-family:var(--font-mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.16em; color:var(--muted); margin:0 0 .7rem; font-weight:500; } .footer-cols a{ display:block; font-size:.84rem; padding:.22rem 0; color:var(--text); text-decoration:none; } .footer-cols a:hover{ color:var(--accent); } .footer-nota{ margin:1.8rem 0 0; font-size:.76rem; color:var(--muted); max-width:46rem; line-height:1.6; } /* ═══ presença + conta ═══ */ /* Selos informativos — a última família da barra sem relevo, junto com `.live-badge` (home) e `.ev-selo` (eventos). São pastilhas com a mesma anatomia de `.pill`, então levam os MESMOS valores: peça pousada, não retângulo pintado. */ .presenca-badge, .live-badge, .ev-selo{ box-shadow: inset 0 1px 0 oklch(100% 0 0 / .45), 0 1px 1px oklch(38% .06 250 / .18); } html[data-theme="dark"] .presenca-badge, html[data-theme="dark"] .live-badge, html[data-theme="dark"] .ev-selo{ box-shadow: inset 0 1px 0 oklch(100% 0 0 / .07), 0 1px 2px oklch(0% 0 0 / .35); } .presenca-badge{ display:inline-flex; align-items:center; white-space:nowrap; padding:.22rem .6rem; border-radius:var(--r-pill); background:var(--online-soft); color:var(--online); border:1px solid color-mix(in oklch, var(--online) 30%, transparent); font-family:var(--font-mono); font-size:.72rem; font-weight:500; } .presenca-ponto{ width:.45rem; height:.45rem; border-radius:50%; flex:none; margin-right:.45rem; background:var(--online); animation:pulse-glow 2s infinite; } @media (prefers-reduced-motion: reduce){ .presenca-ponto{ animation:none; } } /* Espaço antes do separador vem daqui, não do texto: cada filho é um item flex, e item flex descarta espaço em branco na própria borda. */ .presenca-contas{ margin-left:.35rem; } @media (max-width: 720px){ .presenca-contas{ display:none; } } .conta-widget{ display:inline-flex; align-items:center; gap:.5rem; } .conta-perfil{ display:inline-flex; align-items:center; gap:.45rem; text-decoration:none; padding:.25rem .6rem .25rem .25rem; border-radius:var(--r-pill); border:1px solid var(--border); background:var(--surface-2); color:var(--text); } .conta-perfil:hover{ border-color:var(--accent); color:var(--accent-strong); } .conta-avatar{ display:inline-flex; align-items:center; justify-content:center; width:1.6rem; height:1.6rem; border-radius:50%; flex:none; background:var(--accent); color:var(--on-accent); font-weight:700; font-size:.78rem; font-family:var(--font-display); } .conta-nome{ font-size:.84rem; font-weight:600; max-width:9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .conta-sair{ font-size:.76rem; padding:.35rem .7rem; border-radius:var(--r-md); } .conta-abas{ display:flex; gap:2px; margin-bottom:1rem; padding:3px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); } .conta-aba{ flex:1 1 auto; padding:.45rem .5rem; font-size:.76rem; border-radius:var(--r-sm); border:1px solid transparent; background:none; color:var(--muted); cursor:pointer; font-family:inherit; } .conta-aba:hover{ color:var(--text); background:var(--surface-3); } .conta-aba.ativa{ background:var(--accent); border-color:transparent; color:var(--on-accent); font-weight:700; } #conta-form{ display:flex; flex-direction:column; gap:.35rem; } #conta-form label{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:.6rem; } .conta-dica{ font-size:.78rem; color:var(--muted); line-height:1.5; margin:.7rem 0 0; } .conta-acoes{ display:flex; justify-content:flex-end; gap:.6rem; margin-top:1.1rem; } .conta-msg{ margin:.8rem 0 0; font-size:.82rem; font-weight:600; color:var(--offline); } .conta-msg[hidden]{ display:none; } .conta-msg.conta-msg-ok{ color:var(--online); } /* O código de recuperação é para ser LIDO e copiado à mão. Perder este código significa perder a conta. */ .conta-codigo{ margin:1rem 0; padding:.9rem; border-radius:var(--r-md); text-align:center; font-size:1.1rem; letter-spacing:.1em; font-weight:700; background:var(--surface-3); border:1px dashed var(--accent); color:var(--accent-strong); user-select:all; word-break:break-all; } .conta-confirma{ margin-top:.8rem; font-size:.8rem; } /* Página privada vista por quem não entrou. */ .acesso-restrito{ max-width:34rem; margin:4rem auto; padding:0 1.8rem; text-align:center; } /* h2 desde que o título da página virou o h1 do .hero — o tamanho continua o mesmo, porque o peso visual aqui não depende do nível semântico. */ .acesso-restrito h2{ font-size:1.7rem; margin-bottom:.6rem; } .acesso-acoes{ display:flex; gap:.7rem; justify-content:center; margin-top:1.4rem; } /* ═══ PISO DE ESTILO DOS CONTROLES ═════════════════════════════════════════ Todo select/input/textarea nasce com a identidade do site. Existe porque o CSS foi escrito ao redor dos ids do dashboard (#search, #export-csv) e as páginas de escopo servidor-inteiro criaram ids com prefixo (#rk-search, #ed-world, #gd-sort…): a barra de filtros ficava com caixas BRANCAS nativas do Windows dentro do tema escuro. ESPECIFICIDADE É A PARTE IMPORTANTE: seletor de elemento puro (0,0,1) e :where(), que não soma nada. Assim qualquer regra por classe/id continua vencendo, mesmo com este bloco no fim do arquivo. NÃO trocar por input[type="text"]: empata em (0,1,1) com as regras por classe e passa a ganhar por ordem, sobrescrevendo estilos que já estavam certos. */ select, textarea, input:where(:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"], [type="color"])){ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:.45rem .7rem; color:var(--text); font-size:.82rem; font-family:var(--font-body); transition:border-color .15s ease, box-shadow .15s ease; /* Campo de entrada é o oposto físico do botão: o botão é uma tecla em RELEVO, para ser apertada; o campo é uma cavidade, para receber alguma coisa. Os botões ganharam relevo num ciclo anterior e os campos ficaram chapados, então metade da metáfora estava no ar. MEDIDO em 12/08 só na página de Charms: 46 campos, TODOS com `box-shadow: none`. Sombra na aresta de cima, luz na de baixo — o inverso do relevo, que é o que faz um buraco parecer buraco. */ box-shadow: inset 0 1px 2px oklch(0% 0 0 / .12), inset 0 -1px 0 oklch(100% 0 0 / .4); } /* `:where()` no prefixo do tema para a especificidade continuar (0,0,1), igual à regra acima. Sem ele, `html[data-theme="dark"] select` saltaria para (0,1,2) e passaria a atropelar regras por classe que já estavam certas — o motivo do comentário lá em cima. */ :where(html[data-theme="dark"]) select, :where(html[data-theme="dark"]) textarea, :where(html[data-theme="dark"]) input:where(:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"], [type="color"])){ box-shadow: inset 0 1px 3px oklch(0% 0 0 / .32), inset 0 -1px 0 oklch(100% 0 0 / .05); } select:hover, textarea:hover, input:where(:not([type="checkbox"], [type="radio"], [type="hidden"])):hover{ border-color:var(--border-strong); } /* ESTA é a única regra de foco de campo do site. MEDIDO em 12/08 comparando declaração por declaração no CSSOM: havia mais 18 regras (`.calc-form input:focus`, `.charm-ordem select:focus`, `.bt-busca input:focus`…) **byte a byte idênticas** a esta — mesmo outline, mesma border-color, mesmo anel. Redundância pura, mas com especificidade de classe, então venciam e impediam qualquer evolução daqui. Removidas as 18, o campo pode continuar ESCAVADO enquanto está aceso: sem o inset, ele subia ao receber o foco e afundava ao perdê-lo — um movimento que ninguém pediu. O fio de luz de baixo sai de cena no foco: competiria com o anel de acento. */ select:focus, textarea:focus, input:where(:not([type="checkbox"], [type="radio"], [type="hidden"])):focus{ outline:none; border-color:var(--accent); box-shadow: inset 0 1px 2px oklch(0% 0 0 / .12), 0 0 0 3px var(--accent-soft); } :where(html[data-theme="dark"]) select:focus, :where(html[data-theme="dark"]) textarea:focus, :where(html[data-theme="dark"]) input:where(:not([type="checkbox"], [type="radio"], [type="hidden"])):focus{ box-shadow: inset 0 1px 3px oklch(0% 0 0 / .32), 0 0 0 3px var(--accent-soft); } ::placeholder{ color:var(--muted); opacity:.75; } /* A largura padrão do é intrínseca (~20 caracteres), e nas barras de filtro isso cortava o próprio placeholder. min() evita estouro no celular. */ input:where([type="search"], [type="url"]){ min-width:min(14rem, 100%); } /* Seta própria: appearance:none apaga a nativa, então ela é redesenhada aqui (SVG embutido, sem requisição). currentColor não funciona em data URI — daí o stroke fixo num cinza-azulado que passa nos dois temas. */ select{ appearance:none; padding-right:1.9rem; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237c8794' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .65rem center; background-size:.6rem; } /* O menu aberto do