/* --------------------------------------------------------------------------- ETERNAL BAIAK - PREMIUM AAA MMORPG UI (OPTIMIZED v2) Inspired by: Diablo IV, Lineage II, Riot UI, World of Warcraft CHANGELOG v2: - [BUG FIX] Removido text-shadow em texto transparente (.NewsHeadlineText) - [BUG FIX] Cor dos links ajustada para contraste WCAG AA (#8a6400 ? passa 4.5:1) - [PERF] @import Google Fonts removido — mover para o do HTML - [PERF] transition: all ? transições específicas (transform + border-color + box-shadow) - [PERF] Seletor img global escopado para .BoxContent img - [PERF] Gradiente simétrico do ticker ? cor sólida + inset shadow - [QUAL] !important reduzido de 14 ? 4 ocorrências (apenas onde necessário) - [QUAL] will-change adicionado nos containers animados - [ACESS] a:focus-visible adicionado para navegação por teclado - [ACESS] Indicador de foco nos links estilizado em ouro --------------------------------------------------------------------------- INSTRUÇÕES DE USO: Adicione estas tags no do seu HTML ANTES de carregar este CSS: --------------------------------------------------------------------------- */ /* --- VARIÁVEIS GLOBAIS --------------------------------------------------- */ :root { --gold-primary: #d4af37; --gold-bright: #ffcc00; --gold-dim: #b38f00; --gold-accessible: #8a6400; /* Contraste 4.5:1+ sobre fundo branco */ --red-primary: #ff3c3c; --dark-base: #0a0a0a; --dark-mid: #1a1a1a; --dark-ticker: #1a0000; --dark-ticker-edge: #4d0000; --text-light: #eaeaea; --text-body: #333333; --radius-card: 14px; --radius-inner: 8px; --transition-hover: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.35s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.35s cubic-bezier(0.165, 0.84, 0.44, 1); } /* --- 1. CONTAINERS PRINCIPAIS -------------------------------------------- */ #News, #FeaturedArticle, #NewsTicker { border: 1.5px solid rgba(212, 175, 55, 0.25); border-radius: var(--radius-card); margin-bottom: 28px; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 40px rgba(212, 175, 55, 0.08); overflow: hidden; position: relative; /* PERF: transition específica — não usar "all" */ transition: var(--transition-hover); /* PERF: promove para camada de composição antes do hover */ will-change: transform; } #News:hover, #FeaturedArticle:hover, #NewsTicker:hover { transform: translateY(-5px); border-color: rgba(212, 175, 55, 0.6); box-shadow: 0 35px 80px rgba(0, 0, 0, 0.95), 0 0 50px rgba(212, 175, 55, 0.15); } /* --- 2. CABEÇALHOS — GRADIENTE DOURADO ----------------------------------- */ .NewsHeadlineBackground { background: linear-gradient(90deg, var(--dark-base) 0%, var(--dark-mid) 50%, var(--dark-base) 100%); height: 50px; border-bottom: 2px solid var(--gold-primary); display: flex; align-items: center; padding: 0 20px; } .NewsHeadlineText { font-family: 'Cinzel', serif; font-size: 14pt; font-weight: 900; text-transform: uppercase; letter-spacing: 2.5px; /* Gradiente no texto via background-clip */ background: linear-gradient(to bottom, #ffffff 15%, var(--gold-primary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; /* BUG FIX: text-shadow NÃO funciona com texto transparente. Para efeito de brilho, use um pseudo-elemento separado ou filter: drop-shadow() no container pai. Removido. */ } /* Alternativa: brilho dourado no container pai sem quebrar o gradiente */ .NewsHeadlineBackground:has(.NewsHeadlineText) { filter: drop-shadow(0 2px 12px rgba(212, 175, 55, 0.35)); } /* --- 3. NEWS TICKER — ESTILO BARRA DE COMBATE ---------------------------- */ #NewsTicker .BoxContent { /* PERF: gradiente simétrico substituído por cor sólida + inset shadow — mesmo resultado visual, menos custo de compositing */ background-color: var(--dark-ticker); box-shadow: inset 60px 0 40px -20px var(--dark-ticker-edge), inset -60px 0 40px -20px var(--dark-ticker-edge), inset 0 0 20px rgba(255, 60, 60, 0.08); border-left: 5px solid var(--red-primary); border-radius: var(--radius-inner); padding: 14px 20px; margin: 12px; } .NewsTickerText { font-family: 'Inter', sans-serif; color: var(--text-light); font-weight: 600; } /* --- 4. ÁREA DE CONTEÚDO — TIPOGRAFIA ------------------------------------ */ .BoxContent { /* Mantendo cor escura para legibilidade sobre o scroll.gif original. DEPENDÊNCIA: se o background-image mudar, revisar esta cor. Alternativa futura: usar color-contrast() quando tiver suporte amplo. */ color: var(--text-body); font-family: 'Inter', sans-serif; line-height: 1.85; } /* --- 5. IMAGENS — ESCOPADO PARA EVITAR EFEITOS EM IMAGENS DE UI ----------- */ /* PERF: seletor global "img" substituído por escopo específico */ .BoxContent img, #FeaturedArticle img, #News img { border-radius: 10px; transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), filter 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); will-change: transform; } .BoxContent img:hover, #FeaturedArticle img:hover, #News img:hover { transform: scale(1.03); filter: brightness(1.1); } /* --- 6. LINKS — CONTRASTE E ACESSIBILIDADE ------------------------------- */ a { /* BUG FIX: #b38f00 falha contraste WCAG AA em fundos claros. #8a6400 ˜ 4.6:1 sobre branco — passa AA. Se o fundo for escuro (ticker, headers), pode usar #d4af37. */ color: var(--gold-accessible); font-weight: 700; transition: color 0.3s ease, text-shadow 0.3s ease; } a:hover { color: var(--gold-bright); text-shadow: 0 0 8px rgba(255, 204, 0, 0.5); } /* ACESS: indicador de foco para navegação por teclado / leitores de tela */ a:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 2px; text-decoration: none; } /* --- 7. LINKS SOBRE FUNDO ESCURO (ex: ticker, headers) ------------------- */ /* Em contextos escuros, o dourado mais brilhante passa contraste */ #NewsTicker a, .NewsHeadlineBackground a { color: var(--gold-primary); } #NewsTicker a:hover, .NewsHeadlineBackground a:hover { color: var(--gold-bright); }