/* ========================================================= */ /* --- VARIÁVEIS DE COR E TEMA (Garanta que estejam definidas no :root do seu CSS principal) --- */ /* Apenas para referência no bloco, ajuste conforme seu arquivo real: */ :root { --color-primary: #1EBBA4; /* Cor principal da Falk */ --color-love: #E31B54; /* Cor para o tema "Amado" (Vermelho/Rosa Forte) */ --color-gold: #FFD700; --color-silver: #C0C0C0; --color-bronze: #CD7F32; --color-bdrs: #A000A0; /* Exemplo: Roxo */ --color-etfs: #008000; /* Exemplo: Verde Escuro */ --color-fiagros: #FF8C00; /* Exemplo: Laranja */ --color-fiis: #0000FF; /* Exemplo: Azul */ --color-acoes: #FF4500; /* Exemplo: Laranja Avermelhado */ --color-text-dark: #333333; --color-text-muted: #666666; --falk-primary-color: var(--color-primary); /* Alias principal */ } /* ========================================================= */ .falk-trending-section { padding: 40px 0; background-color: #F8F8F8; /* Fundo levemente cinza */ font-family: 'Inter', sans-serif; } section.falk-trending-section header h3 { font-size: 1.35em; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; display: inline-block; padding-bottom: 0.25rem; /* Linha padrão com cor primária */ border-bottom: 3px solid var(--color-primary); letter-spacing: 0.0875em; margin-bottom: 2em; } /* Títulos Específicos de Mercado */ section.falk-trending-section header h3.stockbdr { border-bottom: 3px solid var(--color-bdrs); } section.falk-trending-section header h3.fiagros { border-bottom: 3px solid var(--color-fiagros); } section.falk-trending-section header h3.etfs { border-bottom: 3px solid var(--color-etfs); } section.falk-trending-section header h3.fiis { border-bottom: 3px solid var(--color-fiis); } section.falk-trending-section header h3.acoes { border-bottom: 3px solid var(--color-acoes); } /* ========================================================= */ /* --- NOVO: ESTILO PARA A SEÇÃO "MAIS AMADOS" --- */ /* ========================================================= */ /* Ícone de Coração no Título */ .falk-loved-section header h3 i { color: var(--color-love); font-size: 1em; vertical-align: middle; margin-left: 5px; } /* 2. MUDANÇA DE COR DO RANKING E EFEITO DE HALO */ .falk-loved-section .trending-card.rank-1 .rank-indicator, .falk-loved-section .trending-card.rank-2 .rank-indicator, .falk-loved-section .trending-card.rank-3 .rank-indicator { background-color: var(--color-love); box-shadow: 0 4px 8px rgba(227, 27, 84, 0.5); /* Sombra mais vibrante */ color: white; border: none; /* Animação opcional, remova se não usar @keyframes pulse-heart */ /* animation: pulse-heart 1.5s infinite ease-in-out; */ } /* Efeito de Contorno (Halo) no Hover */ .falk-loved-section .trending-card:hover { transform: translateY(-5px); box-shadow: 0 0 0 3px rgba(227, 27, 84, 0.2), /* O halo de 'amor' */ 0 8px 20px rgba(0, 0, 0, 0.1); /* Sombra de elevação padrão */ } /* 3. MUDANÇA DE COR DO TICKET E BOTÃO PARA LOVE (Apenas se não for um mercado específico) */ /* Isso só afeta mercados que não têm uma cor de mercado definida, como 'Ações' */ .falk-loved-section .trending-card:not(.market-acoes):not(.market-fiis):not(.market-etfs):not(.market-fiagros):not(.market-stockbdr) .ticker, .falk-loved-section .trending-card:not(.market-acoes):not(.market-fiis):not(.market-etfs):not(.market-fiagros):not(.market-stockbdr) .card-link { color: var(--color-love); border-color: var(--color-love); } .falk-loved-section .trending-card:not(.market-acoes):not(.market-fiis):not(.market-etfs):not(.market-fiagros):not(.market-stockbdr) .card-link:hover { background-color: var(--color-love); color: white; } /* ========================================================= */ /* --- ESTRUTURA E ESTILOS COMPARTILHADOS (ORIGINAIS) --- */ /* ========================================================= */ .trending-grid { display: flex; gap: 20px; justify-content: center; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .trending-card { flex: 1; min-width: 200px; background-color: #FFFFFF; border-radius: 12px; padding: 25px 20px 20px 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); transition: transform 0.3s, box-shadow 0.3s; border: 1px solid #EEEEEE; position: relative; text-align: center; } /* Sombra padrão para "Mais Visualizados" */ .falk-trending-section:not(.falk-loved-section) .trending-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); } /* --- Indicador de Ranking (Pódio Visualizados) --- */ .rank-indicator { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); font-size: 1.1rem; font-weight: 900; padding: 5px 12px; border-radius: 8px; color: white; min-width: 40px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } /* 1º Lugar - OURO */ .trending-card.rank-1 .rank-indicator { background-color: var(--color-gold); box-shadow: 0 2px 5px var(--color-gold); color: var(--color-text-dark); } /* 2º Lugar - PRATA */ .trending-card.rank-2 .rank-indicator { background-color: var(--color-silver); color: var(--color-text-dark); } /* 3º Lugar - BRONZE */ .trending-card.rank-3 .rank-indicator { background-color: var(--color-bronze); } /* 4º Lugar em diante - AZUL FALK */ .trending-card:not(.rank-1):not(.rank-2):not(.rank-3) .rank-indicator { background-color: var(--falk-primary-color); box-shadow: none; } /* --- Logo e Nome --- */ .asset-logo { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; border: 3px solid #EEEEEE; } .ticker { font-size: 1.4em; font-weight: 800; color: var(--falk-primary-color); background: #fff; border-radius: 4px; padding: 1px 4px;     z-index: 10; } .company-name { font-size: 0.9em; color: #666666; margin-bottom: 20px; min-height: 40px; } /* Link de Ação */ .card-link { display: block; text-align: center; padding: 10px 0; border: 1px solid var(--falk-primary-color); border-radius: 8px; color: var(--falk-primary-color); text-decoration: none; font-weight: 600; transition: background-color 0.3s, color 0.3s; } .card-link:hover { background-color: var(--falk-primary-color); color: #FFFFFF; } /* --- Estilo Específico por Mercado (MANTIDO) --- */ /* BDRS */ .market-stockbdr .ticker, .market-stockbdr .card-link { color: var(--color-bdrs); border-color: var(--color-bdrs); } .market-stockbdr .card-link:hover { background-color: var(--color-bdrs); color: white; } /* ETFS */ .market-etfs .ticker, .market-etfs .card-link { color: var(--color-etfs); border-color: var(--color-etfs); } .market-etfs .card-link:hover { background-color: var(--color-etfs); color: white; } /* FIAGROS */ .market-fiagros .ticker, .market-fiagros .card-link { color: var(--color-fiagros); border-color: var(--color-fiagros); } .market-fiagros .card-link:hover { background-color: var(--color-fiagros); color: white; } /* FIIs */ .market-fiis .ticker, .market-fiis .card-link { color: var(--color-fiis); border-color: var(--color-fiis); } .market-fiis .card-link:hover { background-color: var(--color-fiis); color: white; } /* ACOES */ .market-acoes .ticker, .market-acoes .card-link { color: var(--color-acoes); border-color: var(--color-acoes); } .market-acoes .card-link:hover { background-color: var(--color-acoes); color: white; } /* Responsividade (MANTIDA) */ @media (max-width: 992px) { .trending-grid { flex-wrap: wrap; } .trending-card { min-width: 45%; } } @media (max-width: 576px) { .trending-card { min-width: 100%; } }