`fixed`, criada no layout. ⚠️ Não volte isto para `background-attachment: fixed` no . O resultado na tela é o mesmo, mas o fundo preso obriga o navegador a repintar e reescalar a imagem inteira a cada quadro da rolagem, em vez de deixar o compositor só deslocar a camada. Numa página longa (a /forja tem 8.410px) isso multiplicava por ~2,5 o tempo de rasterização e travava a rolagem. z-index: -1 põe a camada atrás de todo o conteúdo e ainda assim à frente do `background-color` do , que o navegador promove para o canvas. */ .site-bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background-position: center center; background-size: cover; background-repeat: no-repeat; pointer-events: none; } #main-content { font-family: var(--font-body); } #main-content h1, #main-content h2, #main-content h3, #main-content h4, #main-content h5, #main-content h6 { font-family: var(--font-display); color: var(--gold-soft); letter-spacing: .02em; } ::selection { background: rgba(233, 198, 107, .28); color: #fff; } /* Links dentro de conteúdo de prosa (notícias/eventos vindos do banco, termos, builds). Mata o azul padrão do navegador e o teal do tema. Escopo restrito a contêineres de prosa para NÃO afetar nav, botões, pills, tags. */ #main-content .article-element-content a, #main-content .event-modal-body a, #main-content .event-content a, #main-content .event-carousel-description a, .d2-prose a { color: var(--gold); border-bottom: 1px solid rgba(233, 198, 107, .35); transition: color .2s ease, border-color .2s ease; } #main-content .article-element-content a:hover, #main-content .event-modal-body a:hover, #main-content .event-content a:hover, #main-content .event-carousel-description a:hover, .d2-prose a:hover { color: var(--gold-soft); border-bottom-color: var(--gold-soft); } /* --------------------------------------------------------------------------- 2. Moldura Horadric — painel emoldurado com cantos em "L" (a assinatura) Responde diretamente ao pedido de "mais bordas". --------------------------------------------------------------------------- */ .d2-shell { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(28px, 4vw, 52px) clamp(20px, 4vw, 44px); background: linear-gradient(180deg, rgba(29, 32, 36, .96), rgba(15, 17, 19, .98)); box-shadow: var(--shadow-panel); } /* brilho superior quente */ .d2-shell::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(720px 300px at 16% -10%, rgba(233, 198, 107, .14), transparent 70%), radial-gradient(560px 260px at 94% -6%, rgba(226, 144, 63, .09), transparent 72%); } .d2-shell > * { position: relative; z-index: 1; } /* Cantos em "L" dourados — moldura de placa metálica (D2 inventory / Horadric) */ .d2-frame::after, .d2-shell::after { content: ""; position: absolute; inset: 12px; pointer-events: none; z-index: 2; --c: var(--line-strong); --t: 2px; /* espessura do traço */ --l: 20px; /* comprimento do braço */ background: /* canto sup-esq */ linear-gradient(var(--c), var(--c)) left 0 top 0 / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) left 0 top 0 / var(--t) var(--l) no-repeat, /* canto sup-dir */ linear-gradient(var(--c), var(--c)) right 0 top 0 / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) right 0 top 0 / var(--t) var(--l) no-repeat, /* canto inf-dir */ linear-gradient(var(--c), var(--c)) right 0 bottom 0 / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) right 0 bottom 0 / var(--t) var(--l) no-repeat, /* canto inf-esq */ linear-gradient(var(--c), var(--c)) left 0 bottom 0 / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) left 0 bottom 0 / var(--t) var(--l) no-repeat; } /* .d2-frame aplica os cantos a um elemento já posicionado sem repintar o fundo */ .d2-frame { position: relative; } /* --------------------------------------------------------------------------- 3. Cabeçalho de página — eyebrow / título / linha / lead --------------------------------------------------------------------------- */ .d2-eyebrow { display: inline-block; font-family: var(--font-display-light); letter-spacing: .32em; text-transform: uppercase; font-size: 12px; color: var(--rune); margin-bottom: 14px; } .d2-title { font-family: var(--font-display); font-size: clamp(30px, 6vw, 50px); line-height: .94; margin: 0; color: var(--gold-soft); letter-spacing: .03em; text-shadow: 0 2px 0 rgba(0, 0, 0, .5), 0 0 40px rgba(233, 198, 107, .28); } .d2-title::after { content: ""; display: block; width: 84px; height: 3px; margin-top: 18px; border-radius: 3px; background: linear-gradient(90deg, var(--gold), rgba(226, 144, 63, 0)); } .d2-title.is-centered { text-align: center; } .d2-title.is-centered::after { margin-left: auto; margin-right: auto; } .d2-lead { color: var(--txt); opacity: .82; max-width: 66ch; font-size: 16px; line-height: 1.7; margin: 22px 0 0; } /* --------------------------------------------------------------------------- 4. Título de seção — cabeçalho menor com marcador dourado --------------------------------------------------------------------------- */ .d2-sec-title { font-family: var(--font-display); font-size: clamp(20px, 3.4vw, 27px); color: var(--gold-soft); letter-spacing: .04em; margin: 0 0 6px; display: flex; align-items: center; gap: 14px; } .d2-sec-title::before { content: ""; width: 22px; height: 2px; flex: 0 0 auto; background: linear-gradient(90deg, var(--gold), rgba(226, 144, 63, .1)); } .d2-sec-title.is-plain::before { display: none; } .d2-sec-sub { color: var(--muted); font-size: 14px; margin: 0 0 22px; } /* --------------------------------------------------------------------------- 5. Cartão genérico --------------------------------------------------------------------------- */ .d2-card { position: relative; border-radius: var(--r-md); background: radial-gradient(120% 80% at 50% 0%, rgba(226, 144, 63, .06), transparent 62%), linear-gradient(180deg, #191b1e, #101214); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; } .d2-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 14px 30px rgba(0, 0, 0, .5), 0 0 24px rgba(226, 144, 63, .14); } @media (prefers-reduced-motion: reduce) { .d2-card, .d2-card:hover { transform: none; transition: none; } } /* --------------------------------------------------------------------------- 6. Pills de filtro --------------------------------------------------------------------------- */ .d2-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; font-family: var(--font-display-light); font-size: 13px; letter-spacing: .06em; color: var(--muted); background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); cursor: pointer; transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; } .d2-pill:hover { color: var(--gold-soft); border-color: var(--line-2); } .d2-pill.is-active { color: var(--ink); background: linear-gradient(180deg, var(--gold-soft), var(--gold)); border-color: var(--gold-soft); box-shadow: 0 0 14px rgba(199, 155, 70, .35); font-weight: 700; } /* --------------------------------------------------------------------------- 7. Tag/badge --------------------------------------------------------------------------- */ .d2-tag { display: inline-block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: linear-gradient(180deg, var(--gold-soft), var(--gold)); padding: 4px 10px; border-radius: 999px; font-weight: 700; } .d2-tag.is-muted { color: var(--gold-soft); background: rgba(233, 198, 107, .1); border: 1px solid var(--line-2); } .d2-tag.is-danger { color: var(--blood-soft); background: rgba(200, 80, 63, .16); border: 1px solid rgba(200, 80, 63, .5); } /* --------------------------------------------------------------------------- 8. Callout (aviso / destaque) --------------------------------------------------------------------------- */ .d2-callout { display: flex; gap: 16px; padding: 22px 24px; border-radius: var(--r-md); background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-2); } .d2-callout .d2-callout-ico { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: rgba(233, 198, 107, .12); border: 1px solid var(--line-2); color: var(--gold-soft); font-size: 19px; } .d2-callout .d2-callout-title { color: var(--gold-soft); font-size: 15px; letter-spacing: .03em; margin: 2px 0 8px; } .d2-callout .d2-callout-body, .d2-callout .d2-callout-body p { color: var(--muted); font-size: 13px; line-height: 1.65; margin: 0; } .d2-callout.is-danger { background: linear-gradient(180deg, rgba(120, 40, 32, .22), rgba(60, 20, 16, .14)); border-color: rgba(200, 80, 63, .4); } .d2-callout.is-danger .d2-callout-ico { background: rgba(200, 80, 63, .16); border-color: rgba(200, 80, 63, .5); color: var(--blood-soft); } .d2-callout.is-danger .d2-callout-title { color: #f0c9c2; } .d2-callout.is-danger .d2-callout-body, .d2-callout.is-danger .d2-callout-body p { color: #d9c4bf; } /* --------------------------------------------------------------------------- 9. Botões — reskin do tema (.egames-btn/.btn*) + .d2-btn --------------------------------------------------------------------------- */ .d2-btn, .egames-btn, #main-content .btn-dark, #main-content .btn-light { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; font-family: var(--font-display-light); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #f5e6bf; background: linear-gradient(180deg, #6a4e1f, #3a2a10); border: 1px solid rgba(236, 203, 124, .7); border-radius: var(--r-sm); line-height: 1.1; box-shadow: inset 0 1px 0 rgba(255, 225, 150, .2); cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; } .egames-btn { min-width: 160px; height: auto; } .d2-btn:hover, .d2-btn:focus, .egames-btn:hover, .egames-btn:focus, #main-content .btn-dark:hover, #main-content .btn-dark:focus, #main-content .btn-light:hover, #main-content .btn-light:focus { color: #fff; background: linear-gradient(180deg, #866328, #4a3614); border-color: rgba(248, 218, 143, .95); box-shadow: 0 0 14px rgba(199, 155, 70, .45), inset 0 1px 0 rgba(255, 225, 150, .25); } /* Botão ativo (ex.: toggle Softcore/Hardcore, Windows/Linux) */ .d2-btn.is-active, #main-content .btn-light.active { color: var(--ink); background: linear-gradient(180deg, var(--gold-soft), var(--gold)); border-color: var(--gold-soft); } /* Variante fantasma (contorno) */ .d2-btn--ghost { color: var(--gold-soft); background: linear-gradient(180deg, rgba(38, 28, 14, .85), rgba(16, 11, 5, .9)); border: 1px solid var(--line-2); } .d2-btn--ghost:hover, .d2-btn--ghost:focus { color: var(--gold-soft); border-color: var(--line-strong); background: linear-gradient(180deg, rgba(52, 38, 18, .9), rgba(22, 15, 7, .95)); box-shadow: 0 0 12px rgba(199, 155, 70, .28); } /* Variante "contato" (WhatsApp) — mantém a semântica sem verde gritante */ .d2-btn--whatsapp .fa, .d2-btn--whatsapp svg { color: var(--live); } /* --------------------------------------------------------------------------- 10. Tabelas — cabeçalho dourado + linhas com hairline --------------------------------------------------------------------------- */ #main-content .table { color: var(--txt); border-color: var(--line); } #main-content .table thead th { font-family: var(--font-display-light); color: var(--gold-soft); letter-spacing: .06em; text-transform: uppercase; font-size: 12px; border-top: none; border-bottom: 1px solid var(--line-2); padding: 12px 8px; } #main-content .table td { border-top: 1px solid rgba(233, 198, 107, .08); vertical-align: middle; } #main-content .table.table-striped tbody tr:nth-of-type(odd), #main-content .table tbody tr:nth-of-type(odd) { background-color: rgba(233, 198, 107, .022); } #main-content .table tbody tr:hover { background-color: rgba(233, 198, 107, .06); } /* --------------------------------------------------------------------------- 11. Campos de formulário estilo D2 (cadastro/login) --------------------------------------------------------------------------- */ .d2-field { display: block; width: 100%; min-height: 46px; padding: 10px 14px; color: #f0e6d2; background: rgba(0, 0, 0, .32); border: 1px solid var(--line-2); border-radius: var(--r-sm); box-shadow: none; transition: border-color .2s ease, box-shadow .2s ease; } .d2-field::placeholder { color: #8a7c63; } .d2-field:focus { outline: none; color: #fff; border-color: rgba(236, 203, 124, .85); box-shadow: 0 0 0 1px rgba(236, 203, 124, .2), inset 0 0 12px rgba(199, 155, 70, .1); } .d2-label { display: block; font-family: var(--font-display-light); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } /* --------------------------------------------------------------------------- 12. Etapas numeradas (sequências reais: como doar / como jogar) --------------------------------------------------------------------------- */ .d2-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; } .d2-steps .d2-step { padding: 24px 20px 22px; border-radius: var(--r-md); background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); } .d2-steps .d2-step-num { font-family: var(--font-display); font-size: 26px; color: var(--rune); opacity: .85; display: block; margin-bottom: 10px; text-shadow: 0 0 20px rgba(226, 144, 63, .25); } .d2-steps .d2-step-title { font-size: 15px; color: var(--gold-soft); margin: 0 0 8px; letter-spacing: .02em; } .d2-steps .d2-step-text { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0; } /* --------------------------------------------------------------------------- 13. Foco visível — acessibilidade (dourado) --------------------------------------------------------------------------- */ #main-content a:focus-visible, .d2-btn:focus-visible, .d2-pill:focus-visible, .d2-field:focus-visible, .egames-btn:focus-visible, #main-content .btn:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; } /* --------------------------------------------------------------------------- 14. Larguras utilitárias --------------------------------------------------------------------------- */ .d2-wrap { max-width: 1180px; margin-left: auto; margin-right: auto; padding-left: 18px; padding-right: 18px; } .d2-mt { margin-top: clamp(40px, 6vw, 72px); } .d2-mb { margin-bottom: clamp(40px, 6vw, 72px); } /* --------------------------------------------------------------------------- 15. Retone de componentes do tema (herança global — sem tocar no markup) --------------------------------------------------------------------------- */ /* Painéis escuros ganham a moldura dourada padrão (mais "bordas") */ #main-content .card-dark-bg { border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 12px 34px rgba(0, 0, 0, .4); } /* Notícias (single-articles-area) — mata o teal do tema base */ #main-content .single-articles-area .article-content .post-title:hover { color: var(--gold-soft); } #main-content .single-articles-area .article-content .post-meta a, #main-content .single-articles-area .article-content .post-meta a:first-child { color: var(--muted); } #main-content .single-articles-area .article-content .post-meta a:hover, #main-content .single-articles-area .article-content .post-meta a:focus { color: var(--rune); } #main-content .single-game-review-area .game-content .game-title:hover { color: var(--gold-soft); } /* Widgets da barra lateral (Top Ladder / Hall da Fama) */ #main-content .sidebar-area h4.font-exocet, #main-content h4.font-exocet { color: var(--gold-soft); } /* Paginação bootpag — item ativo dourado */ #main-content .pagination.bootpag .active a, #main-content .pagination.bootpag li.active a { color: var(--ink); background: linear-gradient(180deg, var(--gold-soft), var(--gold)); border-radius: var(--r-sm); } #main-content .pagination.bootpag a:hover { color: var(--gold-soft); } /* =========================================================================== 16. HEADER — barra "Horadric" moderna Reescreve a navegação do template classy-nav para uma linguagem dourada coesa: marca (emblema D2 + wordmark), menu Exocet com sublinhado dourado animado, ícones sociais em botões circulares dourados, CTAs (Entrar + Jogue grátis) e dropdown flutuante. Sem tocar em classy-nav.css nem no layout admin. =========================================================================== */ /* ---- Barra: fundo quente + trilho dourado inferior + blur ---- */ .header-area .egames-main-menu .classy-nav-container { background: linear-gradient(180deg, rgba(19, 16, 12, .95), rgba(11, 10, 8, .96)) !important; border-bottom: 1px solid var(--line-2); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .header-area .egames-main-menu .classy-nav-container::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(233, 198, 107, .55) 18%, rgba(233, 198, 107, .55) 82%, transparent); pointer-events: none; } .header-area .is-sticky .classy-nav-container { background: linear-gradient(180deg, rgba(13, 11, 8, .98), rgba(8, 7, 5, .98)) !important; box-shadow: 0 14px 34px rgba(0, 0, 0, .6); } /* ---- Marca (emblema + wordmark) ---- */ .header-area .d2-brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; margin: 0 18px 0 0; padding: 6px 0; } .header-area .d2-brand .d2-brand-mark { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); transition: transform .3s ease, filter .3s ease; } .header-area .d2-brand:hover .d2-brand-mark { transform: translateY(-1px) scale(1.05); filter: drop-shadow(0 3px 12px rgba(226, 144, 63, .45)); } .header-area .d2-brand .d2-brand-word { display: flex; flex-direction: column; line-height: 1; } .header-area .d2-brand .d2-brand-word b { font-family: var(--font-display); font-weight: 400; font-size: 15.5px; letter-spacing: .05em; color: var(--gold-soft); text-shadow: 0 1px 0 rgba(0, 0, 0, .5); } .header-area .d2-brand .d2-brand-word i { font-style: normal; font-family: var(--font-display-light); font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--rune); margin-top: 4px; } /* ---- Itens do menu principal ---- */ .header-area .egames-main-menu .classy-navbar .classynav ul li a { color: #b3aca2; } .header-area .egames-main-menu .classy-navbar .classynav > ul > li > a { position: relative; font-family: var(--font-display-light); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; font-weight: 400; padding: 6px 0 6px; white-space: nowrap; /* "RuneWords" estava quebrando em telas maiores */ } .header-area .egames-main-menu .classy-navbar .classynav ul li a:hover, .header-area .egames-main-menu .classy-navbar .classynav ul li a:focus { color: var(--gold-soft); } .active-initial-li { color: var(--gold-soft) !important; } /* ---- Ícones sociais → botões circulares dourados ---- */ .header-area .egames-main-menu .top-social-info :is(a, button).d2-social-btn { width: 34px; height: 34px; flex: 0 0 34px; /* nunca achatar no flex do .top-social-info (viravam elipses) */ margin: 0 0 0 8px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--gold); background: linear-gradient(180deg, rgba(38, 28, 14, .85), rgba(16, 11, 5, .9)); border: 1px solid var(--line-2); transition: color .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease; } .header-area .egames-main-menu .top-social-info :is(a, button).d2-social-btn:hover, .header-area .egames-main-menu .top-social-info :is(a, button).d2-social-btn:focus { color: var(--gold-soft); border-color: var(--line-strong); background: linear-gradient(180deg, rgba(52, 38, 18, .9), rgba(22, 15, 7, .95)); box-shadow: 0 0 12px rgba(199, 155, 70, .32); transform: translateY(-1px); filter: none; } .header-area .egames-main-menu .top-social-info :is(a, button).d2-social-btn .icon, .header-area .egames-main-menu .top-social-info :is(a, button).d2-social-btn .d2-social-ico { width: 20px; height: 20px; fill: currentColor; display: block; } /* aproxima o botão Entrar dos ícones sociais (o tema deixava um vão de 60px) */ .header-area .egames-main-menu .top-social-info .d2-login-area { margin-left: 16px; padding-left: 16px; } /* ---- CTA "Jogue grátis" (placa de pedra original joguegratis.png) ---- */ .header-area .egames-main-menu .top-social-info a.d2-play-wrap { margin-left: 14px; padding: 0; display: inline-flex; align-items: center; line-height: 0; flex-shrink: 0; /* não deixa o flex comprimir/distorcer a placa */ } .header-area .egames-main-menu .top-social-info .d2-play-img { height: 30px; width: auto; flex-shrink: 0; display: block; border-radius: 5px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); transition: filter .2s ease, transform .2s ease; } .header-area .egames-main-menu .top-social-info a.d2-play-wrap:hover .d2-play-img { transform: translateY(-1px); filter: drop-shadow(0 7px 15px rgba(226, 144, 63, .45)) brightness(1.07); } /* =========================== DESKTOP (>= 992px) =========================== */ @media only screen and (min-width: 992px) { #egamesNav.classy-navbar { display: flex; align-items: center; justify-content: flex-start; min-height: 66px; } #egamesNav .classy-menu { flex: 0 1 auto; } #egamesNav .top-social-info { margin-left: auto; } /* espaçamento entre itens do menu (mais respiro após remover o wordmark) */ .header-area .egames-main-menu .classy-navbar .classynav > ul > li { margin: 0 11px; } /* Sublinhado dourado animado (indicador). Fica no .nav-rotulo, não no : a caixa do link inclui a seta do submenu (18px) e o ícone da Loja (20px), e o risco saía bem maior que a palavra. O span mede só o texto. */ .header-area .egames-main-menu .classy-navbar .classynav > ul > li > a .nav-rotulo { position: relative; display: inline-block; } .header-area .egames-main-menu .classy-navbar .classynav > ul > li > a .nav-rotulo::before { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; /* -6px = padding inferior do , onde o risco ficava */ height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gold), var(--rune)); transform: scaleX(0); transform-origin: center; transition: transform .25s ease; } .header-area .egames-main-menu .classy-navbar .classynav > ul > li > a:hover .nav-rotulo::before, .header-area .egames-main-menu .classy-navbar .classynav > ul > li > a:focus .nav-rotulo::before, .header-area .egames-main-menu .classy-navbar .classynav > ul > li > a.active-initial-li .nav-rotulo::before, .header-area .egames-main-menu .classy-navbar .classynav > ul > li:has(.dropdown .active-initial-li) > a .nav-rotulo::before { transform: scaleX(1); } } /* Página de um item de submenu (ex.: Termos de Uso) → o pai também acende, senão o menu de topo não mostra onde o visitante está. */ .header-area .egames-main-menu .classy-navbar .classynav > ul > li:has(.dropdown .active-initial-li) > a { color: var(--gold-soft); } /* Faixa onde a placa "Jogue grátis" aparece (>1199px) mas o espaço é apertado: reduz o espaçamento do menu e a margem da marca p/ tudo caber em uma linha. O espaçamento maior (11px) fica para telas >=1400px, onde há folga. */ @media only screen and (min-width: 992px) and (max-width: 1399px) { .header-area .egames-main-menu .classy-navbar .classynav > ul > li { margin: 0 4px; } .header-area .d2-brand { margin-right: 8px; } /* placa "Jogue grátis" um pouco menor nessa faixa apertada */ .header-area .egames-main-menu .top-social-info .d2-play-img { height: 26px; } } /* Faixa mais apertada de todas: o .container do Bootstrap trava em 960px entre 992 e 1199, e menu + sociais + Entrar + placa não cabiam nesses 930px úteis (a placa vazava para fora da tela). Aqui a barra usa a largura toda da janela e cada peça cede alguns pixels. */ @media only screen and (min-width: 992px) and (max-width: 1199px) { .header-area .egames-main-menu .classy-nav-container > .container { max-width: 100%; } .header-area .egames-main-menu .classy-navbar .classynav > ul > li { margin: 0 3px; } .header-area .egames-main-menu .top-social-info :is(a, button).d2-social-btn { width: 30px; height: 30px; flex: 0 0 30px; margin-left: 4px; } .header-area .egames-main-menu .top-social-info :is(a, button).d2-social-btn .icon, .header-area .egames-main-menu .top-social-info :is(a, button).d2-social-btn .d2-social-ico { width: 18px; height: 18px; } .header-area .egames-main-menu .top-social-info .d2-login-area { margin-left: 10px; padding-left: 10px; } .header-area .egames-main-menu .top-social-info a.d2-play-wrap { margin-left: 10px; } .header-area .egames-main-menu .top-social-info .d2-play-img { height: 22px; } } /* =========================== MOBILE (<= 991px) =========================== O tema (style.css) inverte a linha do cabeçalho com flex-direction:row-reverse — a marca ia parar na ponta direita, meio cortada. Aqui a linha volta à leitura natural, e o sanduíche fica do mesmo lado de onde o painel abre: sanduíche à esquerda → (espaço) → sociais + Entrar à direita. A placa "Jogue grátis" e a marca não aparecem no celular — a placa é larga demais para essa linha e vive só nas telas grandes. Com elas fora sobra espaço e nada precisa encolher por faixa de largura. */ @media only screen and (max-width: 991px) { #egamesNav.classy-navbar, .header-area .egames-main-menu .classy-navbar { display: flex; align-items: center; flex-direction: row; /* vence o row-reverse do tema */ flex-wrap: nowrap; } #egamesNav .classy-navbar-toggler { order: 0; margin-left: 0; margin-right: 14px; flex: 0 0 auto; } .header-area .d2-brand { display: none; } .header-area .egames-main-menu .top-social-info a.d2-play-wrap { display: none; } #egamesNav .top-social-info { order: 2; display: flex; align-items: center; flex: 0 1 auto; min-width: 0; margin-left: auto; /* sem a marca, é ele quem se encosta à direita */ } /* o tema dava margin-right nos filhos do top-social-info (linha invertida) */ .header-area .egames-main-menu .top-social-info a { margin-right: 0; } /* menu lateral: item ativo com acento dourado à esquerda */ .active-initial-li { box-shadow: inset 3px 0 0 var(--gold); } } /* Telas estreitas: recolhe os sociais, prioridade para o menu e o Entrar. */ @media only screen and (max-width: 560px) { .header-area .egames-main-menu .top-social-info :is(a, button).d2-social-btn { display: none; } .header-area .egames-main-menu .top-social-info .d2-login-area { margin-left: 0; padding-left: 0; } } /* ---- Menu-sanduíche (mobile): barras douradas ---- */ .header-area .classy-navbar-toggler .navbarToggler span { background-color: var(--gold); } /* Painel lateral (classy-menu): fundo escuro + altura cheia. O tema usa height:100%; num filho `fixed` de um container flex isso resolvia contra a linha do flex (70px) até um reflow, cortando os itens. 100vh é relativo à viewport e não depende dessa resolução — sempre cheio. */ .header-area .breakpoint-on .classy-navbar .classy-menu, .header-area.dark .breakpoint-on .classy-navbar .classy-menu { background: linear-gradient(180deg, #14110b, #0c0906) !important; border-right: 1px solid var(--line-2); height: 100vh !important; } /* Itens do menu no mobile — o tema pintava faixas claras (#f2f4f8) e o texto colava na borda esquerda; damos um respiro lateral. */ .header-area .breakpoint-on .classynav > ul > li > a { background: transparent !important; border-bottom: 1px solid var(--line) !important; color: var(--gold-soft); padding-left: 24px !important; padding-right: 18px !important; } .header-area .breakpoint-on .classynav > ul > li > a:hover, .header-area .breakpoint-on .classynav > ul > li > a:focus { background: rgba(233, 198, 107, .08) !important; color: var(--gold-soft); } /* Item que é link E tem submenu (Inicial). O .dd-trigger do tema é uma camada de 100% × 38px sobre a linha inteira: o toque só abria/fechava o submenu e nunca chegava ao link. Aqui o gatilho encolhe para a faixa do chevron, à direita — o resto da linha navega. Itens sem rota (Guia, RuneWords) seguem com a linha toda abrindo o submenu, que é o único uso deles. */ .header-area .breakpoint-on .classynav > ul > li.nav-com-rota > .dd-trigger { left: auto; right: 0; width: 58px; } /* Seta (chevron) dos itens com submenu — era cinza/verde */ .header-area .breakpoint-on .classynav .dd-trigger .fa, .header-area .breakpoint-on .classynav .dd-trigger, .header-area .breakpoint-on .classynav ul li.has-down > a::after, .header-area .breakpoint-on .classynav ul li.has-down.active > a::after { color: var(--gold) !important; } /* Submenu expandido no mobile — plano e indentado (sem card flutuante). Ordem dos combinadores segue o DOM: egames-main-menu (#sticker) envolve o .breakpoint-on (.classy-nav-container), então vem antes na cadeia. */ .header-area .egames-main-menu .breakpoint-on .classynav ul li .dropdown { background: rgba(0, 0, 0, .28) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; } .header-area .egames-main-menu .breakpoint-on .classynav ul li .dropdown::before { display: none; } .header-area .egames-main-menu .breakpoint-on .classynav ul li .dropdown li a { border-bottom: 1px solid rgba(233, 198, 107, .08) !important; border-radius: 0 !important; padding-left: 42px !important; /* indenta o submenu além dos itens de topo (24px) */ } /* Ícone de fechar (X) do menu mobile */ .header-area .classycloseIcon .cross-wrap span { background: var(--gold); } /* =============================== DROPDOWN =============================== */ .header-area .egames-main-menu .classynav ul li .dropdown { background: linear-gradient(180deg, #17110b, #0d0906) !important; border: 1px solid var(--line-2) !important; border-radius: 10px !important; box-shadow: 0 18px 40px rgba(0, 0, 0, .6) !important; overflow: hidden; padding: 6px !important; min-width: 244px; /* cabe "Diablo II Resurrected" em uma linha (era 214 e quebrava) */ } /* fio dourado no topo do card */ .header-area .egames-main-menu .classynav ul li .dropdown::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); z-index: 2; } /* Itens do dropdown. O `.classy-navbar` no seletor não é enfeite: o tema pinta esses mesmos itens de #404040 em `.classy-navbar .classynav ul li ul li a`, que tem um elemento a mais na conta e por isso vencia a versão sem ele — o texto ficava cinza escuro sobre fundo quase preto (contraste de 1,8:1, ilegível). Com a classe a mais aqui, quem manda na cor e no tamanho é o design system. */ .header-area .egames-main-menu .classy-navbar .classynav ul li .dropdown li a { display: flex !important; align-items: center; gap: 11px; position: relative; padding: 10px 14px !important; border-radius: 7px; color: var(--txt); font-family: var(--font-body); font-size: 14px; letter-spacing: .01em; text-transform: none; white-space: nowrap; /* "Diablo II Resurrected" não quebra mais em 2 linhas */ transition: color .18s ease, background .18s ease, padding .18s ease; } .header-area .egames-main-menu .classynav ul li .dropdown li a .fa { width: 18px; text-align: center; font-size: 13px; color: var(--rune); transition: color .18s ease; } /* Ícone de pergaminho (runewords) — SVG que herda a cor via currentColor */ .header-area .egames-main-menu .classynav ul li .dropdown li a .rw-scroll-ico { width: 18px; height: 18px; flex-shrink: 0; color: var(--rune); transition: color .18s ease; } .header-area .egames-main-menu .classynav ul li .dropdown li a:hover .rw-scroll-ico, .header-area .egames-main-menu .classynav ul li .dropdown li a:focus .rw-scroll-ico { color: var(--gold-soft); } /* barra de acento à esquerda que cresce no hover */ .header-area .egames-main-menu .classynav ul li .dropdown li a::before { content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 3px; height: 0; border-radius: 3px; background: linear-gradient(180deg, var(--gold-soft), var(--rune)); transition: height .2s ease; } .header-area .egames-main-menu .classynav ul li .dropdown li a:hover, .header-area .egames-main-menu .classynav ul li .dropdown li a:focus { color: var(--gold-soft) !important; background: rgba(233, 198, 107, .09); padding-left: 20px !important; } .header-area .egames-main-menu .classynav ul li .dropdown li a:hover::before, .header-area .egames-main-menu .classynav ul li .dropdown li a:focus::before { height: 58%; } .header-area .egames-main-menu .classynav ul li .dropdown li a:hover .fa, .header-area .egames-main-menu .classynav ul li .dropdown li a:focus .fa { color: var(--gold-soft); } /* =============================== CHROME =============================== */ /* Preloader — era flash teal em tela cheia */ .preloader { background-color: var(--bg) !important; } /* Tooltips do Bootstrap — escuro com texto dourado */ .tooltip-inner { background-color: #17130c !important; color: var(--gold-soft) !important; border: 1px solid var(--line-2); } .tooltip .arrow::before { border-top-color: #17130c !important; border-bottom-color: #17130c !important; } @media (prefers-reduced-motion: reduce) { .header-area .d2-brand .d2-brand-mark, .header-area .egames-main-menu .classynav > ul > li > a::before, .header-area .egames-main-menu .classynav ul li .dropdown li a, .header-area .egames-main-menu .classynav ul li .dropdown li a::before { transition: none; } } /* =========================================================================== 17. RUNEWORDS — campo de busca A borda era quase invisível e a lupa ficava na ponta direita, longe de onde se digita. Aqui a borda ganha o dourado envelhecido dos itens únicos do D2 e a lupa vem para junto do texto. O campo mantém a largura da tabela, como sempre foi — mexemos só na aparência. =========================================================================== */ #main-content .rw-busca { margin: 0 0 20px; } #main-content .rw-busca-campo { position: relative; display: flex; align-items: center; } #main-content .rw-busca-ico { position: absolute; left: 17px; font-size: 16px; color: var(--d2-unique); pointer-events: none; /* o clique atravessa e cai no input */ transition: color .2s ease; } #main-content .rw-busca-input { width: 100%; padding: 12px 16px 12px 44px; /* o recuo maior da esquerda abre espaço para a lupa */ box-sizing: border-box; font-family: var(--font-body); font-size: 16px; color: var(--txt); background: rgba(0, 0, 0, .34); border: 1px solid rgba(199, 179, 119, .55); border-radius: 8px; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } #main-content .rw-busca-input::placeholder { color: var(--muted); opacity: 1; /* o Firefox rebaixa a opacidade do placeholder por conta própria */ } #main-content .rw-busca-input:hover { border-color: rgba(199, 179, 119, .75); } #main-content .rw-busca-input:focus { outline: none; /* trocado pela borda + brilho abaixo, que são bem mais visíveis */ border-color: var(--d2-unique); background: rgba(0, 0, 0, .45); box-shadow: 0 0 12px rgba(199, 179, 119, .3), inset 0 0 10px rgba(199, 179, 119, .07); } #main-content .rw-busca-campo:focus-within .rw-busca-ico { color: var(--gold-soft); } #main-content .rw-busca-contagem { margin-top: 9px; text-align: center; font-family: var(--font-body); font-size: 13px; color: var(--muted); } @media (prefers-reduced-motion: reduce) { #main-content .rw-busca-input, #main-content .rw-busca-ico { transition: none; } }